Ngui簡介
這是一個GUI的排版顯示引擎和跨平臺的GUI應用程序開發框架，基於NodeJS/OpenGL，這也是第一個在移動端Android/iOS融合NodeJS的前端GUI項目，至此JavaScript成爲了真正意義上前後端通吃的語言。
Ngui的目標：在此基礎上開發GUI應用程序可擁有開發WEB應用般簡單與速度同時兼顧Native應用程序的性能與體驗。
視圖View
在上一篇中我已經爲大家講了Ngui入門，今天我就來介紹ngui的核心部分（視圖與佈局）。
View爲gui核心部件派生爲Notification。
用它來描述屏幕上所有可見的元素,它是所有視圖的基礎類型它也是事件的響應者，這些事件由硬件以及操作系統觸發。詳細的API文檔講大家去這裏查閱。
下面是ngui現在提供的所有View繼承關係圖：
注：帶*號的爲抽象類型或協議沒有構造函數
看到這個繼承關係大家是不是覺得有點複雜了，其實這要與瀏覽器比那真是小巫見大巫，當然那並不是我想要的，這一切都是爲了效率。當然爲了效率在功能上肯定是要做裁剪的，魚和熊掌不可兼得。
有這麼多視圖它到底能爲我們做什麼呢？
視圖在廣義功能上劃分有兩類：
非佈局視圖
顧名思義非佈局視圖就是那種不帶佈局功能的視圖，就是你把它的位置固定後，它是不會再受到任何其它視圖元素有影響，除非你再次更改它的位置translate屬性。這種是最快的，因爲不需要進行佈局計算。
現在ngui提供的非佈局視圖有兩個：
關於這兩個視圖的具體API接口說明請大家查閱文檔，但在這裏特別要說明的是transform，也就是矩陣變換。
矩陣變換是GUI繪圖系統裏的一個重要概念，transform用一個Matrix來描述繪圖元素點線或面在屏幕上的實際位置與形狀，這個矩陣通常由一組3x3或4x4向量組成，3x3爲2d矩陣4x4爲3d矩陣，在View上使用的是一個裁剪過的3x2的2d矩陣所它暫時不支持3d中的z軸，以後的版本中可以會所變化。
View中的transform屬性並沒有直接暴露而是換成了一組屬性:
- x
- y
- scaleX
- scaleY
- rotateZ
- skewX
- skewY
你可以通過matrix屬性得到這個矩陣但它是隻讀的，只能通過x與y這個方式對它進行設置。
調用final_matrix()函數得到的是父視圖的final_matrix與當前視圖的matrix乘積。對這就是這個視圖在屏幕是的真實位置，確切的講是這個View.origin在屏幕上的確切位置，因爲嚴謹的說一張圖片或一個矩形在屏幕上是由4個點組成的一個面。
注意：
頻繁的交替設置transform與調用matrix/finalMatrix會帶來不必要的性能消耗，ngui的渲染邏輯是在渲染畫面前不對任何視圖屬性設置做額外的計算只做存儲並該標記屬性的改變，等待準備渲染前才做統一的計算。當一個視圖的transform改變時如果這時你要獲取matrix與finalMatrix那麼直接返回matrix或finalMatrix那一定是不正確的，幸好系統會做檢測當發生了改變你要強取些值會提前對這些值做運算，返回一個正確的值給你，但如果你頻繁的設置與獲取，那就會頻繁的做些運算。並且這隻僅限於非佈局視圖，在佈局視圖上這樣做並不會返回正確的值參見Trap in Layout
佈局視圖
佈局視圖按可放置內容劃分有三類：
Div
從API文檔上看見Div只有一個屬性contentAlign, 那麼這裏重點講述就是這個屬性，因爲它是與瀏覽器完全不相同有的地方，至於基礎類型Box大家可以參與API文檔會有詳細說明，注意padding這個屬性在ngui裏是沒有的，因爲這個導致系統複雜性上升，但以後要不要加待定。
在ngui中Div並沒有自己單獨的浮動方式這個屬性。但Div能設置它的contentAlign對它的內容對齊方式做出更改，這個屬性可選的值有4個，默認爲left左對齊
- left
- right
- top
- bottom
這其實很好理解 ：
left與right爲水平佈局，內容對齊方式從左到右或從右到左排列，溢出往下換行。top與bottom爲垂直佈局，內容對齊方式從上到下或從下到上排列，溢出往右換列。
需要注意的是它的內容必須爲Box類型否則這個屬性並不會對它產生任何的效果，如果它內部出現了Span或TextNode那麼Span與TextNode的出現不會對Div的內容佈局造成任何影響，因爲Div會忽略非Box內容的排版處理，同理一個Box或Div出現在非排版佈局視圖內部那它的位置與使用非佈局視圖沒有區別。
Hybrid
與Div一樣它也只有一個屬性textAlign但它可以對任何Layout內容做排版處理這當然也包括Span與TextNode。
與Div的區別Hybrid的內容方式的不同，Hybrid把它的所有內容都當成文本進行處理。它的可選有6個，默認爲left
- left
- right
- center
- left_reverse
- right_reverse
- center_reverse
left right center 很好理解left_reverse right_reverse center_reverse 是在對齊的基礎上將內容顛倒排列，
如：對Ngui進行顛倒排版會變成這樣
| left_reverse | center_reverse | right_reverse |
|---|---|---|
| SJodacovA | SJodacovA | SJodacovA |
Span，TextNode，Text
-
Span並沒有顯示實體，也就是說它並不會在屏幕上顯示任何可見的東西，它的存在只爲是爲了設置嵌套的TextNode視圖屬性，因爲以TextLayout上的屬性都能被它的子TextLayout所繼承，這也是
ngui中唯具有繼承性質屬性的視圖。 - Text繼承於Hybrid與TextNode一樣也是葉子視圖不能存在子視圖
Indep
獨立的Div，相當於html-css中的絕對定位，它存在於Div與Hybrid內部時，會進行獨立排版，不會影響其它兄弟視圖的排版位置。
Limit，IndepLimit
限制的盒子，minWidth, maxWidth，minHeight，maxHeight，這些屬性能限制盒子的尺寸，這與html中的限制很相似。
Root
Root一個應用程序只能是唯一的也是必須的
Examples
最後爲大家寫一段代碼實際運行一下
import {
GUIApplication: App, Root,
Div,
Indep,
Hybrid,
Span,
TextNode,
} from 'ngui'
new App().start(
<Root>
<Div margin=20 width="full" height=100
backgroundColor="#f00">
<Indep width=50 height=50
backgroundColor="#f0f"
alignX="center"
alignY="center" />
<Div width=50 height="50"
backgroundColor="#00f" />
</Div>
<Hybrid margin=20 width="full" height=100
backgroundColor="#f00" textColor="#ff0"
textBackgroundColor="#00f6">
Hello
<TextNode textColor="#000">
Ngui!
</TextNode>
</Hybrid>
<Hybrid margin=20 width="full" height=100
backgroundColor="#f00"
textAlign="center_reverse">
Hello Ngui!
</Hybrid>
</Root>
)下面是iphone6的運行效果：
下面是Google nexus6的運行效果：
就說到這裏吧，已經累的不行了，下一篇爲大家講動作系統。
謝謝大家，未完待續~