.NET/.NET Core界面組件NanUI發佈新版本啦

2020年2月10日 NanUI 0.7版正式發佈。

回顧過去的一年，渾渾噩噩。生活上、工作上太多的壓力和變數讓我身心疲憊，目睹親人被病痛的摧殘的痛苦，無法釋懷的生死別離令我沉淪許久；公司業務的變動，方向的調整，好基友的離職讓我對未來的職業規劃感到無比迷茫，太多的事情讓我應接不暇，因此也擱置了NanUI項目的開發。在此向各位給予了NanUI期待的朋友表示深深的歉意。隨着時間的流逝，不知不覺2019年的時光在我的生命中飛逝，一轉眼來到了11月份，看着GitHub上空蕩蕩的Release Notes，我決定不能再讓NanUI停滯下去，靜下心，放空自己，於是又開始新一版NanUI的迭代，再加上此次武漢疫情的蔓延，公司無限期停工的前提下，終於花了近四個月的時間完成了此次新版本的迭代。此版本的迭代，基本上可以說是從底層上從新開始，整個項目基本重頭編寫：重寫了承載窗口邏輯、嘗試了將核心更換爲CefGlue、借鑑了Chromely的API等等。經過初步的試用，也算是NanUI從無到有，從0.1到0.6以來比較滿意的一次迭代。

0.7核心內容

ChromiumEmbedded框架升級至77.1.18版本。
繼續保留ChromiumFX作爲NanUI的底層渲染核心。
重新了無邊框承載窗口。
修改了NanUI初始化的方式，改用FluentAPI的方式書寫啓動過程。
重構了CefResourceHandler，實現了CustomResourceHandler的基本框架，方便用戶自定義自己的資源處理器。
從NanUI中剝離了AssemblyResourceHandler和FolderResourceHandler，這兩個資源處理器現在單獨被分離成獨立的項目維護。
新增了RESTfulResourceHandler資源處理器，使用RESTfulResourceHandler可以方便的向客戶端提供各種數據，用戶不再需要通過注入JS代碼的方式給客戶端提供數據，用ajax感覺更好。
重構了窗體呈現的邏輯，新版本中用戶不再需要關注瀏覽器承載窗口的創建和設計，NanUI內部的工廠代替用戶完成了這些工作。同時，也爲將來跨平臺留下了可實現的接口。
新增了對.NET CORE 3.1的支持。
完善了NuGet包，現在NanUI的依賴項目會自動根據目標項目的.NET的框架（.NET Framework / .NET Core）以及平臺架構（x86/x64/AnyCPU）自動生成依賴項目的目錄結構。
修正了0.6版中的各種BUG。

下面，我講繼續介紹0.7版的基本使用方法。

項目地址

GitHub:https://github.com/NetDimension/NanUI/
Gitee:https://gitee.com/linxuanchen/NanUI

歡迎使用 NanUI 0.7

感謝您選用用於.NET Framework / .NET Core的NanUI開源框架！

NanUI是一個開放源代碼的.NET項目，它適用於希望使用HTML5/CSS3等前端技術來構建Windows窗體應用用戶界面的.NET/.NET Core開發人員。您可以使用任何您所熟悉的前端技術來搭建WinForm應用程序用戶界面。

強烈建議您使用單頁應用（SPA）模式來製作界面，因爲這可以給用戶帶來更好的操作體驗。主流的Javascript框架，比如Angular, React, Vue都是可以用來構架SPA應用的明智選擇。

本框架將爲您的軟件界面設計工作帶來無限可能。

開始使用 NanUI

開發環境要求

構建NanUI應用程序，您的開發環境需要滿足以下條件：

開發環境首選 Visual Studio 2019
- 如果您需要編譯NanUI項目源碼，您必須使用VS2019，因爲只有VS2019能夠編譯.NET CORE 3.1項目源碼。
- 您可以使用舊版本的Visual Studio（例如VS2012）來開發基於.NET Framework的應用程序。
- 如果您需要開發基於.NET Core 3.1框架的應用程序，目前來說您有且只有VS2019可供選擇。
客戶端運行環境 Windows 7 SP1及更高版本的Windows系統。
- 從NanUI 0.7版本之後，不再提供對Windows XP系統的任何支持，如需要開發針對Windows XP系統的應用程序，請繼續使用0.6.2526版本。
- NanUI的HighDPI自適應功能的實現需要Windows 10 Createors Update或者跟高版本Windows 10系統。

NanUI依賴項

NanUI基於ChromiumFX開發，ChromiumFX是.NET的Chromium Embedded框架（CEF）的實現。

NanUI 0.7的運行需要依賴Chromium Embedded Framework (CEF) 77.1.18的二進制文件以及對應版本的ChromiumFX二進制文件。您可以選擇手動下載或編譯這些二進制文件，或者您也可以直接通過Nuget包管理器來自動安裝這些依賴項。

手動下載或編譯依賴項

Chromium Embedded Framework (CEF) 框架

您可以從http://opensource.spotify.com/cefbuilds/index.html網站下載已經編譯好的、對應版本的CEF二進制文件：

CEF 77.1.18+g8e8d602+chromium-77.0.3865.120 / Chromium 77.0.3865.120 - Windows x86
CEF 77.1.14+g4fb61d2+chromium-77.0.3865.120 / Chromium 77.0.3865.120 - Windows x64

如果您有豐富的CEF開發經驗，您也可以根據CEF官方的指引¹自行編譯CEF框架。自行編譯CEF框架您可以加入更多的可定製功能²。

ChromiumFX

你可以從ChromiumFX項目的託管網站下載77.1.18.0版本的源碼，根據指引編譯x86架構和x64架構平臺下的二進制文件：

libcfx.dll - Windows 32位
libcfx64.dll - Windows 64位

使用NuGet包管理器安裝依賴項

PM> Install-Package NetDimension.NanUI.Runtime

NuGet包管理器將根據您項目的架構信息自動生成依賴項目的目錄和文件結構，您無需關注目錄結構信息，這也是最快速最簡便的方法。

編譯NanUI源碼或是用二進制包

您可以從GitHub獲取NanUI的全部源碼並使用VS2019編譯源碼，或者通過NuGet安裝NanUI二進制包。

NanUI項目源碼 - https://github.com/NetDimension/NanUI/
使用NuGet包管理器安裝NanUI

PM> Install-Package NetDimension.NanUI

NanUI相關二進制包

以下表格展示了NanUI項目的各個NuGet包及相關信息。

項目名稱	框架	說明
NetDimension.NanUI	.NET Framework 4.0+ / .NET Core 3.1	您需要引用此庫來構建NanUI應用程序，這是NanUI的核心庫。
NetDimension.NanUI.Runtime	.NET Framework 4.0+ / .NET Core 3.1	NanUI的依賴項，包括了CEF框架二進制文件和CFX二進制文件。
NetDimension.NanUI.Subprocess	.NET Framework 4.0+ / .NET Core 3.1	NanUI的子進程可執行文件，如果是用NanUI的UseDefaultSubprocess特性需要安裝此包。
NetDimension.NanUI.AssemblyResourceHandler	.NET Framework 4.0+ / .NET Core 3.1	內嵌資源控制器。
NetDimension.NanUI.FileResourceHandler	.NET Framework 4.0+ / .NET Core 3.1	文件資源控制器。
NetDimension.NanUI.RestfulResourceHandler	.NET Framework 4.0+ / .NET Core 3.1	REST數據資源控制器。

創建第一個NanUI應用程序

NanUI基於Chromium瀏覽器核心，因此您可以使用您所熟悉的任何前端技術來打造您的桌面應用程序。您還可以向Javascript環境中注入.NET對象或方法；另外使用資源處理器，您還可以方便地向Web環境提供文件、多媒體和數據等內容。

您可以把NanUI看作一個嵌入到WinForm中的、精簡化的Chromium瀏覽器，這個瀏覽器替代了傳統WinForm界面的畫布，因此您可以發揮想象力，使用任何Web前端技術來設計您的窗體界面。

不僅如此，您還能保留.NET框架的所有特性，能夠使用EntityFramework，能夠使用多線程、甚至能通過任何方式與您的硬件設備進行交互並把相關的信息反饋給Web環境。既滿足了設計漂亮用戶界面的需求，也保留了.NET強大的生態環境。

閱讀下面的步驟，我們就來一起創建您的第一個NanUI應用程序。

選擇一種.NET框架

您可以根據實際項目的需求，選擇使用針對於.NET Framework或者.NET Core框架的的Windows窗體（WinForm）應用程序。對於兩種類型的窗體應用程序來說，所有的API接口都是相同的，您可以方便的從一種框架遷移到另外一種。

安裝NanUI

現在，您需要安裝NanUI以及NanUI的依賴項。推薦您使用NuGet包管理起來安裝他們。在包管理器中運行如下命令來安裝：

安裝NanUI

PM> Install-Package NetDimension.NanUI

安裝NanUI運行時依賴項

PM> Install-Package NetDimension.NanUI.Runtime

製作一個簡易的HTML窗體

NanUI使用了新的工廠來創建瀏覽器承載窗口，因此我們並不需要像往常一樣通過窗體設計器來設計窗體和控件。因此我們可以直接刪除項目模板中爲我們自動創建的Form1.cs窗體。

新建MainWindow.cs，並讓他繼承NetDimension.NanUI.Formium基類，並實現該類的所有抽象接口：

using NetDimension.NanUI;
using NetDimension.NanUI.Browser;

class MainWindow : Formium
{
    public override string StartUrl => "https://www.google.com";

    public override HostWindowType WindowType => HostWindowType.Standard;

    protected override Control LaunchScreen => null;

    public MainWindow()
    {
        Title = "第一個NanUI應用"
    }
    
    protected override void OnWindowReady(IWebBrowserHandler browserClient)
    {
        
    }

    protected override void OnRegisterGlobalObject(JSObject global)
    {
        
    }
}

修改StartUrl屬性，指定啓動時訪問的Url地址。

public override string StartUrl => "https://www.google.com";

指定WindowType屬性，選擇窗體以原生樣式顯示還是使用無邊框樣式。

 public override HostWindowType WindowType => HostWindowType.Standard;

使用LaunchScreen屬性來返回一個自定義的用戶控件，用來顯示網頁加載時的等待畫面，通常他可以是一個PictureBox，放置一張靜態的圖像或者GIF圖像來告知用戶應用程序啓動的狀態。如果不需要該功能，返回null即可。

protected override Control LaunchScreen => null;

使用OnWindowReady重載方法，您可以browserClient參數來設置Chromium客戶端的各個處理器，以此來實現Chromium瀏覽器的各項行爲，例如：如何處理新開窗口、如何處理下載請求、如何通知應用程序網頁標題的改變等等行爲。

這個方法通常在Chromium瀏覽器核心初始化完成之後執行。

如果不需要定義行爲處理器，那麼留空即可。

protected override void OnWindowReady(IWebBrowserHandler browserClient)
{

}

使用OnRegisterGlobalObject重載方法，您可以向瀏覽器的Javascript上下文註冊各種.NET對象和方法，您可以把該重載方法的參數global看作瀏覽器的window對象。具體的實現方法可以參考後面章節。

protected override void OnRegisterGlobalObject(JSObject global)
{

}

通過以上操作您就完成了您的第一個NanUI窗口，該窗口將使用google.com的內容作爲您窗體的界面。

但是到目前爲止，應用程序還不能正常運行，因爲我們還需要初始化NanUI和CEF環境。

初始化NanUI和Chromium Embedded框架環境

初始化NanUI和CEF的操作我們需要放在Main方法中。


using NetDimension.NanUI;

static class Program
{
    /// <summary>
    ///  The main entry point for the application.
    /// </summary>
    [STAThread]
    static void Main()
    {
        Bootstrap
            .Initialize()
            .Run(() => new MainWindow());
    }
}

至此，您的第一個NanUI應用程序已經能夠正常運行了。

進一步定製您的窗口

如果您還想進一步定製您的窗口樣式，請重載OnStandardFormStyle方法，並使用style參數來設置窗口啓動位置、大小、圖標、邊框樣式等信息。

protected override void OnStandardFormStyle(IStandardHostWindowStyle style)
{
    base.OnStandardFormStyle(style);

    style.Width = 1280;
    style.Height = 720;
    style.Icon = System.Drawing.SystemIcons.WinLogo;
    style.StartPosition = FormStartPosition.CenterScreen;
}

運行您的第一個NanUI應用程序

如圖，您的第一個NanUI應用程序成功運行了。

NanUI基礎使用示例

通過此示例將告訴您如何使用最少的代碼來運行NanUI。

B站：https://www.bilibili.com/video/av87654190/

西瓜視頻：https://www.ixigua.com/i6791108584999485955

在您的NanUI應用程序中使用無邊框樣式

通過上一章節文檔的介紹，您已經瞭解了創建NanUI應用以及創建Formium瀏覽器承載窗口的基礎知識。使用與之前文檔中介紹的相同套路創建完應用程序後，您只需要設置瀏覽器承載窗體的WindowType爲Borderless模式即可創建無邊框樣式的窗體。

本篇章節將主要介紹無邊框樣式窗體的相關的知識點，內容涉及了NanUI系統中特殊的CSS、NanUI特有的html標記屬性、Javascript對象和全局事件等。

設置承載窗體爲無邊框樣式

指定WindowType屬性爲Borderless，讓窗體以無邊框樣式呈現。

 public override HostWindowType WindowType => HostWindowType.Borderless;

設置可拖拽/不可拖拽區域

當窗體以無邊框樣式呈現時，默認窗口失去了原生窗口的標題欄及其控制區域，因此無法通過拖拽來移動窗體。這時，您需要通過設置特殊的CSS屬性-webkit-app-region來確定web頁面中的哪一部分區域支持拖拽，您可以通過靈活的設計可拖拽和不可拖拽區域來創建異形拖拽區域。

設置可拖拽區域

.draggable-area {
    -webkit-app-region: drag;
}

設置不可拖拽區域

.draggable-area {
    -webkit-app-region: no-drag;
}

使用下面的示例代碼，繪製一個可拖拽的矩形區域，並在該區域內排除className="controls"的矩形區域。

HTML

<div class="titlebar">
    <span>Welcome to NanUI</span>
    <div class="controls">
        <a title="Minimize" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 1" data-radium="true" style="width: 10px; height: 10px;"><rect fill="#ffffff" width="10.2" height="1"></rect></svg>
        </a>
        <a title="Maximize" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 10.1" data-radium="true" style="width: 10px; height: 10px;"><path fill="#ffffff" d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z"></path></svg>
        </a>
        <a title="Close" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 10.2" data-radium="true" style="width: 10px; height: 10px;"><polygon fill="#ffffff" points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "></polygon></svg>
        </a>
    </div>
</div>

SCSS

.titlebar {
    // scss ...
    -webkit-app-region: drag;

    > controls {
        // scss ...
        -webkit-app-region: no-drag;
    }
}

使用NanUI的內置命令

NanUI內置了html屬性nanui-command，通過該屬性您可以快速的實現無邊框窗體的最大化、最小化、還原及關閉窗口命令。

例如設置nanui-command="close"可以實現點擊該元素後關閉窗體。

<a title="Minimize" class="control-btn" nanui-command="close">
    // 關閉按鈕 ...
</a>

nanui-command屬性的值有以下幾組：

屬性名	命令作用
maximize	最大化窗口
minimize	最小化窗口
restore	還原窗口
close	關閉當前窗口

瀏覽器中的NanUI對象

NanUI在Chromium的Javascript環境中註冊了NanUI對象，通過該對象您能夠獲取當前窗體的相關信息，或者使用內置的函數來改變窗體的各項狀態。

NanUI對象

version - type:object | NanUI版本信息對象
- cef - type:string | 顯示CEF版本字符串
- chromium - type:string | 顯示CEF版本字符串
- nanui - type:string | 顯示NanUI版本字符串
hostWindow - type:object | NanUI承載窗口對象
- close() - type:function | 關閉承載窗口
- maximize() - type:function | 最大化承載窗口
- minimize() - type:function | 最小化承載窗口
- restore() - type:function | 還原承載窗口
- moveTo(x, y) - type:function | 移動承載窗口到x,y的位置
- sizeTo(width,height) - type:function | 設置承載窗口的寬爲width,高爲height
- height - type:integer | 當前承載窗口的高度
- width - type:integer | 當前承載窗口的寬度
- state - type:object | NanUI承載窗口的詳細狀態
  - clientHeight - type:integer | 承載窗口客戶區域高度
  - clientWidth - type:integer | 承載窗口客戶區域寬度
  - height - type:integer | 承載窗口的高度
  - width - type:integer | 承載窗口的寬度
    - windowState - type:object | 承載窗口最大化最小化狀態對象
      - state - type:string | 承載窗口狀態名稱[normal|minimized|maximized]
      - code - type:object | 承載窗口狀態編碼[0:normal|1:minimized|2:maximized]

瀏覽器中的自定義事件

NanUI除了在Chromium的Javascript環境中註冊了對象以外，還註冊了一些承載窗口改變的通知事件。您可以通過註冊事件句柄來捕獲這些事件，以此來實現各項功能。

hostactived - 承載窗口獲得焦點並被激活
hostdeactivate - 承載窗口失去焦點
hostactivestatechange - 承載窗口焦點狀態改變
- 參數：actived - type:boolean | 激活狀態[true:獲得焦點|false:失去焦點]
hoststatechange - 承載窗口最大化最小化狀態改變
- 參數：state - type:string | 承載窗口狀態名稱[normal|minimized|maximized]
- 參數：code - type:integer | 承載窗口狀態編碼[0:normal|1:minimized|2:maximized]
hostsizechange - 承載窗口狀態尺寸改變
- 參數：width - type:integer | 承載窗口客戶區域寬度
- 參數：height - type:integer | 承載窗口客戶區域高度

例如，我們可以通過捕獲承載窗口最大化最小化狀態改變的事件來爲窗體添加不同的樣式：

window.addEventListener("hoststatechange", e => {
    if (e.detail.code === 2) {
        console.log("最大化狀態");
    } else if(e.detail.code === 1) {
        console.log("最小化狀態");
    }
    else {
        console.log("正常狀態");
    }
});

使用無邊框模式示例

通過此示例將告訴您如何使用React以及React Desktop製作一個.NET CORE 3.1桌面應用程序的用戶界面。

B站：https://www.bilibili.com/video/av87654610/

西瓜視頻：https://www.ixigua.com/i6791109614734672391/

GitHub項目地址：https://github.com/XuanchenLin/using-react-desktop-with-nanui-0.7

致謝

NanUI從誕生到現在經歷了四個年頭，儘管這期間受到過來自網絡上的各種侮辱和謾罵，但更多的是來自大家的鼓勵和支持，再次感謝各位對NanUI的關注和對本人的理解，謝謝！

NanUI是一個基於MIT協議的開源項目並且它是完全免費的。儘管如此，如果沒有適當的資金支持，項目維護和新功能的開發是無法持續下去的。所以如果您喜歡這個項目並認可我的工作，您可以支付我一杯咖啡的錢請我喝一杯咖啡，或者您也可以成爲長期的項目資助人以幫助NanUI變得更好！

使用微信或者支付寶掃描下方二維碼來進行資金方面的捐助。