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文件，然后在該文件的屬性窗口的生成操作欄目中選中該文件為嵌入的資源。如圖所示：
這樣，在項目編譯時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(), null, "my.resource.local");
Application.Run(new Form1());
}
}
}
}
RegisterAssemblyResources方法的第一個參數是需要執行注冊的程序集實例，第二個參數指定一個虛假的域名，嵌入的資源將通過該域名進行訪問。
除了將html/css/js文件打包到當前項目，還可以將這些資源打包到單獨的dll中，然后用反射的方式來獲取該資源dll的程序集並使用上述方法進行注冊。例如，將另一個index.html文件打包到EmbeddedResourcesInSplitAssembly.dll程序集中，內容可以與上面的本地項目中的index.html有所差別，然后主項目在CEF初始化成功之后通過下面的方法，也可以將外部程序集中的資源加載到NanUI環境中的：
//指定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());
}
您可以在項目中注冊多個程序中的嵌入式資源，只需指定不同的域名(domin參數)即可。
第四步 在Formium窗體中使用嵌入的資源
按照上述方法，我們就完成了資源文件的嵌入。那么如何這些嵌入的資源文件呢？其實就跟平常加載網頁上的資源是一樣的，只需要按照我們指定的虛假域名和資源嵌入的路徑組合以后，就可以在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();
}
}
}
編譯並執行項目文件，我們就可以看到嵌入的資源已經可以正確加載了。
示例源碼
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的開發工作。你可以使用微信或者支付寶來掃描下面的二維碼進行捐助。
