NanUI文檔 - 使用網頁來設計整個窗口

NanUI文檔目錄

• NanUI簡介
• 開始使用NanUI
• 打包並使用內嵌式的HTML/CSS/JS資源
• 使用網頁來設計整個窗口
• 如何實現C#與Javascript的相互通信
• 如何處理NanUI中的下載過程 - DonwloadHandler的使用(待更新。。。)
• 如何處理NanUI中的彈窗過程 - LifeSpanHandler的使用(待更新。。。)
• 如何控制Javascript對話框 - JsDialogHandler的使用(待更新。。。)
• 自定義資源處理程序 (待更新。。。)

使用網頁來設計整個窗口

創建NanUI應用的方法本文不再闡述，具體方法請參看文章目錄里的相關文章。本文將介紹NanUI的核心功能，用一張網頁鋪滿整個窗體區域，並將講述如何使用CSS和HTML來實現對窗體的拖動、最大化、最小化、關閉等操作。

如圖所示的界面，整個窗體的樣式都是由HTML和CSS等前端技術來呈現的。具體的HTML/CSS/JS代碼本文不詳細描述，因為這些和NanUI的關聯不大，根據實際項目的需要，您可以為您的軟件界面設計出更棒的效果。

在示例界面中，我們將主要介紹系統命令菜單部分的最小化、最大化和關閉按鈕，以及界面左側紅色的可用作拖動窗體的縱向標題欄的實現。

用前端技術來解析，左側縱向標題欄其本質是一條寬度固定，高度100%的DIV；命令區域內的最小化、最大化和關閉按鈕其本質是三個SPAN標簽內嵌套了三個不同的FontAwsome的圖標。下面的內容將介紹它們是如何實現對承載窗體狀態改變的。

如何通過拖拽HTML元素來移動窗體位置

如果您需要實現類似示例中拖動左側紅色區域標題欄來改變窗體位置的功能，那么在該元素對應的CSS中只需指定該元素所在區域的-webkit-app-region屬性值為drag即可實現：

.some-class{
	-webkit-app-region:drag;
}

指定此樣式后，只要鼠標指針在該樣式作用的區域內執行拖拽操作，那么NanUI的承載窗體的位置將隨鼠標的拖動而發生改變。

但在設計界面時，如果您希望在可拖動元素區域內的某些區域不接收拖動信號，那么只需要將-webkit-app-region屬性值改為no-drag即可。

例如示例中，三個系統命令按鈕實際上是包括在一個DIV元素內，同時這個DIV設置了-webkit-app-region屬性值為drag，這時您會發現，拖動這個DIV所在區域（包括三個命令按鈕的區域）時窗體都實現了移動，但是這也阻斷了這個區域內的其他鼠標操作，包括三個命令按鈕的鼠標點擊操作。這明顯不是所期望的效果。如下，該區域的HTML代碼為：

<div class="app-sys-command-container">
	<ul class="sys-commands">
		<li n-ui-command="minimize">
			<i class="fa fa-window-minimize"></i>
		</li>
		<li n-ui-command="maximize">
			<i class="fa fa-window-maximize"></i>
		</li>
		<li n-ui-command="close">
			<i class="fa fa-close"></i>
		</li>
	</ul>
</div>

在css樣式.app-sys-command-container中設置了-webkit-app-region屬性值為drag，這導致了ul.sys-commands區域也呈現可拖動的狀態。為了避免這個區域被默認的拖動事件影響到其他事件的相應，那么就需要設置.sys-commands的樣式-webkit-app-region屬性值為no-drag，那么這部分區域將不再相應窗體拖動的事件。這部分的CSS代碼為：

.demo-app > content > .app-sys-command-container {
	...
	-webkit-app-region: drag;
	...
}

.demo-app > content > .app-sys-command-container > .sys-commands {
	...
	-webkit-app-region: no-drag;
	...
}

這樣，您就可以靈活的控制可拖動來改變窗體位置的區域了。

如何通過HTML元素來執行窗體的最大化/最小化/關閉操作

在上面的html代碼片段中，展示了示例程序的三個系統命令按鈕的實現方式：

<div class="app-sys-command-container">
	<ul class="sys-commands">
		<li n-ui-command="minimize">
			<i class="fa fa-window-minimize"></i>
		</li>
		<li n-ui-command="maximize">
			<i class="fa fa-window-maximize"></i>
		</li>
		<li n-ui-command="close">
			<i class="fa fa-close"></i>
		</li>
	</ul>
</div>

其中的i標簽內，可以看到不常見的html屬性n-ui-command，這一屬性是NanUI用來標注按鈕行為的專用屬性，通過其屬性值minimize/maximize/close不難看出，通過點擊具備這一專用屬性的標簽，就能夠實現窗體對應的最小化/最大化/關閉操作。

特別需要指出的，在示例窗體中點擊最大化按鈕后可以看到，最大化按鈕的圖標從最大化改變成了還原的樣式，這是通過使用Javascript監測窗體事件來實現的。

如同上面介紹的專用屬性，NanUI還內置了一些專用的事件。通過監聽這些事件來實現一些特殊的功能，例如上面所說的最大化窗體時改變系統按鈕的圖標，又或者是窗體市區焦點時改變標題欄的顏色等。

NanUI 窗體專用事件

目前NanUI實現的專用事件有以下三個：

• hoststatechange: 窗體狀態（最大化、最小化、還原）發生改變時觸發。
• hostactivestate: 窗體獲得或丟失焦點時觸發。
• hostsizechange: 窗體大小改變時觸發。

通過監聽這些事件，您就可以根據需求來實現一些特定的效果。如示例項目中，使用了jQuery來監聽這三個專用事件：

$(function () {
	//窗口狀態改變
	$(window).on("hoststatechange", function (e) {
		console.log(e.detail);
		$("#label-form-state").text(e.detail.stateName);

	});
	
	//窗口激活狀態改變
	$(window).on("hostactivestate", function (e) {
		console.log(e.detail);
		$("#label-activated-state").text(e.detail.stateName);

		if (e.detail) {
			if (e.detail.state === 1) {
				$("html").addClass("app-active");
			}
			else {
				$("html").removeClass("app-active");
			}
		}
	});
	//窗口尺寸改變
	$(window).on("hostsizechange", function (e) {
		console.log(e.detail);
		$("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

	});

});

上述代碼的具體效果，可以自行對示例程序進行調試來查看效果。

內置Javascript對象 - NanUI

NanUI除了實現了上述的專用html屬性n-ui-command和三個專用事件外，在Javascript全局環境中還內置了一個專用對象NanUI，通過該對象您可以查詢當前NanUI和CEF的版本號，通過hostWindow中的方法來獲取當前窗體的狀態值，執行最大化、最小化和關閉操作。

示例源碼

git clone https://github.com/NetDimension/NanUI-Examples-03-Design-Your-Form-With-Html.git

社群和幫助

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

贊助作者

如果你喜歡我的工作，並且希望NanUI持續的發展，請對NanUI項目進行捐助以此來鼓勵和支持我繼續NanUI的開發工作。你可以使用微信或者支付寶來掃描下面的二維碼進行捐助。