JS resources

NanUI document directory

NanUI Profile
Started NanUI
Packaging and use the built-in HTML / CSS / JS resources
Use the web to design the entire window
How to communicate with each other in C # and Javascript
How to deal with the download process NanUI in - DonwloadHandler use (to be updated ...)
How to deal with the pop process NanUI - LifeSpanHandler use (to be updated ...)
How to control the Javascript dialog - JsDialogHandler use (to be updated ...)
Custom resource handler (to be updated ...)

Packaging and use the built-in HTML / CSS / JS resources

When using HTML / CSS / JS design software interface, if every load resources from a remote server that is obviously unrealistic: if the interface is retrieved from a remote server, you experience poor speed, then give users very bad experience. To avoid this embarrassing situation, NanUI interface can be rendered HTML / CSS / JS and other documents compiled to the project as embedded resources, such manipulation can either speed up the loading speed of the software interface, the interface also avoid malicious modification.

The following article will detail how to package HTML / CSS / JS and other files to the project.

The first step in the new project NanUI

According to a previous tutorial, create a new Windows Forms application, and complete the set up operation in the Program in CEF.

The second step in the project to add web resources

Add index.html file in the project, the content freely. In the present example, add the following html tag in the page:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>HELLO</title> </head> <body> <h1>Hello NanUI!</h1> </body> </html>

To compile the index.html file as an embedded resource to a project, you need Visual Studio's Explorer select the index.html file, and the file properties window of the Build Action to select the file for the column embedded resource . as the picture shows:

Write pictures described here

In this way, the project will compile time index.html file compiled into an executable file output as embedded resources.

The third step of the registration process set embedding resources

Let NanUI loading embedded resources, the method needs to be performed after the successful registration assembly Load embedded resources Bootstrap project, as shown in the following code, using the Load successfully Bootstrap static class RegisterAssemblyResources current resource registration assembly into the environment.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms; namespace EmbeddedHtmlResources { using NetDimension.NanUI; static class Program { /// <summary> /// 应用程序的主入口点。 /// </summary> [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); //指定CEF架构和文件目录结构，并初始化CEF if (Bootstrap.Load()) { //注册嵌入资源，并为指定资源指定一个假的域名my.resource.local Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), "my.resource.local"); Application.Run(new Form1()); } } } }

The first parameter is the need to perform the method RegisterAssemblyResources registration assembly instance, the second argument specifies a false domain, embedded resources accessed by the domain.

Except html / css / js files are packaged in the current project, these resources may also be packaged in a separate dll, then reflected way to get the resource dll assembly and register using the above method. For example, another EmbeddedResourcesInSplitAssembly.dll index.html file packaged assembly, the above content may be different in the local project index.html, then the main program after a successful initialization CEF by the following method may also be external assembly resource loaded into NanUI environment:

//指定CEF架构和文件目录结构，并初始化CEF
            if (Bootstrap.Load(PlatformArch.Auto, System.IO.Path.Combine(Application.StartupPath, "fx"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources\\locales"))) { //注册嵌入资源，并为指定资源指定一个假的域名my.resource.local Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), "my.resource.local"); //加载分离式的资源 var separateAssembly = System.Reflection.Assembly.LoadFile(System.IO.Path.Combine(Application.StartupPath, "EmbeddedResourcesInSplitAssembly.dll")); //注册外部的嵌入资源，并为指定资源指定一个假的域名separate.resource.local Bootstrap.RegisterAssemblyResources(separateAssembly , "separate.resource.local"); Application.Run(new Form1()); }

You can register multiple programs embedded resources in the project, simply specify a different domain name ( Domin parameters ) can be.

The fourth step in the form Formium embedded resource use

按照上述方法，我们就完成了资源文件的嵌入。那么如何这些嵌入的资源文件呢？其实就跟平常加载网页上的资源是一样的，只需要按照我们指定的虚假域名和资源嵌入的路径组合以后，就可以在NanUI中使用嵌入的资源了。

例如，按照上面步骤中的方式对文件进行嵌入后，我们就可以通过http://my.resource.local/index.html访问到主项目中的index.html文件，然后通过 http://separate.resource.local/index.html访问到外部程序集EmbeddedResourcesInSplitAssembly.dll中的index.html文件了。

那么，如何测试我们的资源是否这确被嵌入到程序集，并且也正常加载了呢？最简单的例子就是在我们的窗体中直接使用这些地址。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace EmbeddedHtmlResources { using NetDimension.NanUI; public partial class Form1 : Formium { public Form1() : base("http://my.resource.local/index.html") { InitializeComponent(); } } }

编译并执行项目文件，我们就可以看到嵌入的资源已经可以正确加载了。
Write pictures described here

示例源码

git clone https://github.com/NetDimension/NanUI-Examples-02-Use-Embedded-Resources-In-NanUI.git

社群和帮助

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

NanUI文档目录

NanUI简介
开始使用NanUI
打包并使用内嵌式的HTML/CSS/JS资源
使用网页来设计整个窗口
如何实现C#与Javascript的相互通信
如何处理NanUI中的下载过程 - DonwloadHandler的使用(待更新。。。)
如何处理NanUI中的弹窗过程 - LifeSpanHandler的使用(待更新。。。)
如何控制Javascript对话框 - JsDialogHandler的使用(待更新。。。)
自定义资源处理程序 (待更新。。。)

打包并使用内嵌式的HTML/CSS/JS资源

在使用HTML/CSS/JS设计软件界面时，如果每次都从远程服务器加载资源那显然是不现实的：如果界面是从远程服务器获取，遇到网速不佳时，那么将给用户带来非常糟糕的体验。为了避免这种尴尬的局面，NanUI可以将呈现界面的HTML/CSS/JS等文件作为嵌入资源编译到项目中，这样操纵既可以加速软件界面的加载速度，也可以避免界面遭到恶意修改。

下面的文章将详细介绍如何将HTML/CSS/JS等文件打包到项目中。

第一步新建NanUI项目

按照之前的教程，新建一个Windows窗体应用程序，并在Program中完成CEF的相关设置操作。

第二步在项目中添加网页资源

在项目中添加index.html文件，内容随意。在本示例中，在页面中添加以下html标记：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>HELLO</title> </head> <body> <h1>Hello NanUI!</h1> </body> </html>

若要将index.html文件作为嵌入资源编译到项目中，您需要在Visual Studio的资源管理器中选中index.html文件，然后在该文件的属性窗口的生成操作栏目中选中该文件为嵌入的资源。如图所示：

Write pictures described here

这样，在项目编译时index.html文件将会作为内嵌的资源编译到输出的可执行文件中。

第三步注册嵌入资源的程序集

要让NanUI加载嵌入的资源，需要在项目的Bootstrap执行Load方法成功后注册程序集中的嵌入资源，如下面代码所示，在Load成功后使用Bootstrap静态类的RegisterAssemblyResources将当前程序集中的资源注册到环境中。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms; namespace EmbeddedHtmlResources { using NetDimension.NanUI; static class Program { /// <summary> /// 应用程序的主入口点。 /// </summary> [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); //指定CEF架构和文件目录结构，并初始化CEF if (Bootstrap.Load()) { //注册嵌入资源，并为指定资源指定一个假的域名my.resource.local Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), "my.resource.local"); Application.Run(new Form1()); } } } }

RegisterAssemblyResources方法的第一个参数是需要执行注册的程序集实例，第二个参数指定一个虚假的域名，嵌入的资源将通过该域名进行访问。

//指定CEF架构和文件目录结构，并初始化CEF
            if (Bootstrap.Load(PlatformArch.Auto, System.IO.Path.Combine(Application.StartupPath, "fx"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources\\locales"))) { //注册嵌入资源，并为指定资源指定一个假的域名my.resource.local Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), "my.resource.local"); //加载分离式的资源 var separateAssembly = System.Reflection.Assembly.LoadFile(System.IO.Path.Combine(Application.StartupPath, "EmbeddedResourcesInSplitAssembly.dll")); //注册外部的嵌入资源，并为指定资源指定一个假的域名separate.resource.local Bootstrap.RegisterAssemblyResources(separateAssembly , "separate.resource.local"); Application.Run(new Form1()); }

You can register multiple programs embedded resources in the project, simply specify a different domain name ( Domin parameters ) can be.

The fourth step in the form Formium embedded resource use

As described above, we have completed the embedded resource file. So how do these embedded resource file? In fact, just the usual load resources on the Web page is the same, since we only need to follow the specified domain name and false resources embedded path combination, you can use embedded resource in NanUI in.

For example, after the file is embedded in the way in accordance with the above steps, we can at http: index.html file to the main project //my.resource.local/index.html access, and then through http: // separate. resource.local / index.html index.html file access to external assembly of the EmbeddedResourcesInSplitAssembly.dll .

So, how to test whether this is indeed our resources are embedded in the assembly, and also the normal load of it? The simplest example is the use of these addresses directly in our form.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace EmbeddedHtmlResources { using NetDimension.NanUI; public partial class Form1 : Formium { public Form1() : base("http://my.resource.local/index.html") { InitializeComponent(); } } }

Compile and run the project file, we can see the embedded resource already loaded correctly.
Write pictures described here

Example Source

git clone https://github.com/NetDimension/NanUI-Examples-02-Use-Embedded-Resources-In-NanUI.git

Community and help

GitHub
https://github.com/NetDimension/NanUI/

Exchange group QQ group
521,854,872