NanUI | .Net/.Net Core界面組件NanUI 0.7版正式發布

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 開發檔案
• 知乎專欄 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官方的指引^[1]自行編譯CEF框架，自行編譯CEF框架您可以加入更多的可定制功能^[2]，

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包及相關資訊，

創建第一個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屬性的值有以下幾組：

瀏覽器中的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變得更好！

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

標籤：其他

上一篇：FTP協議的主動模式和被動模式的區別

下一篇：iNeuOS工業互聯平臺，iNeuKernel（物聯網核心組件）遠程控制標準化設計與實作。發布v2.3版本。