NanUI是一個開放源代碼的.NET項目,它適用於希望使用HTML5 / CSS3等前端技術來構建Windows窗體應用用戶界面的.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 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包及相關信息。
項目名稱 | 框架 | 說明 |
---|---|---|
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]
- windowState - type:object | 承載視窗最大化最小化狀態對象
瀏覽器中的自定義事件
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變得更好!
使用微信或者支付寶掃描下方二維碼來進行資金方面的捐助。
Chromium Embedded Framework原生不支持h.264視頻播放(該格式為商業格式),因此您需要自行加入與之相關的編譯符號並重新編譯CEF源碼才能實現h.264格式視頻的播放。↩