NanUI | NanUI 0.7 正式釋出

阿新 • • 發佈：2020-02-10

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變得更好！

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

CEF官方文件 - Branches and Building↩
Chromium Embedded Framework原生不支援h.264視訊播放（該格式為商業格式），因此您需要自行加入與之相關的編譯符號並重新編譯CEF原始碼才能實現h.264格式視訊的播放。↩

NanUI | NanUI 0.7 正式釋出

0.7核心內容

專案地址

歡迎使用 NanUI 0.7

開始使用 NanUI

開發環境要求

NanUI依賴項

手動下載或編譯依賴項

Chromium Embedded Framework (CEF) 框架

ChromiumFX

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

編譯NanUI原始碼或是用二進位制包

NanUI相關二進位制包

建立第一個NanUI應用程式

選擇一種.NET框架

安裝NanUI

製作一個簡易的HTML窗體

初始化NanUI和Chromium Embedded框架環境

進一步定製您的視窗

執行您的第一個NanUI應用程式

NanUI基礎使用示例

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

設定承載窗體為無邊框樣式

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

使用NanUI的內建命令

瀏覽器中的NanUI物件

瀏覽器中的自定義事件

使用無邊框模式示例

致謝

相關推薦