Morn UI一個顯著優勢就是Morn Builder(可視化編輯器)，實現界面設計的所見即所得，《Morn簡介及使用教程》文章中已經介紹了編輯器的簡單使用方法，今天給大家介紹一下Morn UI每個組件的屬性及在編輯器的簡單使用方法。
打開編輯器，在E:\MornCompTest下創建了新UI項目命名為MornCompTest
復制基礎組件到資源目錄，然后F5刷新編輯器，即可看到資源組件樹
然后Ctrl+N新建頁面命名為ButtonTest，然后我們拖動左邊的button到視圖中，結果如下圖：
編輯器分為菜單工具欄區，界面列表區，資源組件區，設計試圖區，組件屬性區，圖層區等6個區域
基礎屬性
在組件屬性區，每個組件都有自己的屬性，每個組件都有一些公用屬性，比如：
name是組件實例的名字，x，y，width，height分別是組件坐標和寬高，var是組件實例的全局引用名，如果定義了這個，就可以在代碼很方便的找到它。除了這些，morn ui所有組件還有下面基礎屬性
屬性這么多，美術同學要問怎么記呢？其實無需記憶，編輯器內鼠標放在屬性文字上，會自動提示屬性的名稱和格式，很方便吧
下面我們一一介紹下各個組件的使用方法和屬性含義
基礎可視化組件
1.Label組件
Label是文本，設置text可以顯示其內容，設置isHtml=true后，會顯示html內容
autoSize屬性如果設置為left，就是自適應文本，寬度會隨着文本長短的變化而變化
label還可以設置skin，作為文本的背景圖片，同時支持sizeGrid，用來9宮格拉伸背景(詳細格式請參考《深入了解Morn UI》)
stroke是文字描邊，格式為（顏色，透明度，水平模糊量，垂直模糊量，強度，質量）比如紅色描邊可以定義為(0xff0000,1,5,5,2,1)
leading是段落之間的間距
2.TextInput組件
TextInput是輸入框，繼承自Label，除了具有Label的屬性外，額外多了上面三個屬性，了解即可
3.TextArea組件
TextArea是文本域，繼承自TextInput，除了具有TextInput的屬性外，額外多一個scrollBarSkin屬性，可以用來設置滾動條皮膚
4.Button組件
Button是按鈕組件，通過skin可以設置按鈕皮膚，sizeGrid定義了按鈕9宮格拉伸
labelColors是按鈕文本在各種狀態的顏色值，分別為（正常狀態，鼠標經過狀態，鼠標點擊狀態，禁用狀態），比如(0x32556b, 0x32556b, 0x32556b, 0xC0C0C0)
toggle設定了是否是回彈按鈕，其他一些屬性和label類同
5.LinkButton，CheckBox，RadioButton組件
LinkButton是下划線按鈕，CheckBox是多選按鈕，RadioButton是單選按鈕，三者均繼承自Button，屬性也和Button一樣
6.Image組件
Image是圖形組件，具有url屬性，設置url既可以是連接類，也可以是一個路徑，支持異步加載，同時也可以設置9宮格拉伸
7.Clip組件
Clip是位圖切片，Clip類似flash的movieclip(動畫剪輯)，和Image類同，url既可以是資源連接類，還可以是一個路徑動態加載
clip需要設置clipX屬性和clipY屬性，分別是圖片行個數和列個數，支持多行多列，還可以設置clipWidth和clipHeight，這個是單個圖標的寬高，程序會根據這個寬高算出clipX和clipY，比如上面圖片行個數為10，列個數為1
Clip即可用來做icon，通過frame屬性切換當前顯示第幾幀，又可作為位圖動畫，設置interval播放間隔進行播放，在編輯器選中clip，然后按回車鍵可以預覽動畫
frame就是當前切片顯示的索引，從0開始
8.FrameClip組件
FrameClip是矢量圖動畫組件，和clip類似，不同的是FrameClip是Morn UI唯一基於矢量圖的組件
它的skin對象為Movieclip的連接類，可以設置動畫間隔並進行播放
FrameClip組件的主要用途是UI特效，畢竟矢量圖動畫特效比位圖動畫要小很多，並且效果也好。
9.ProgressBar組件
ProgressBar是進度條組件，value范圍是0到1，可以設置9宮格拉伸
10.Slider 滑動條
Slider是滑動條，可以通過滑動設置得到value值，min，max屬性控制最大及最小值，tick設定了滑動單位值，allowBackClick定義是否允許點擊背景滑動
11.HSlider，VSlider組件
HSlider是水平滑動條，VSlider是垂直滑動條，屬性和Slider類同
12.ScrollBar組件
ScrollBar是滾動條組件，其中scrollSize定義了每次滾動的數量
13.ComboBox組件
ComboBox是下拉框組件，labels屬性可以設置下拉框列表值，比如label=“列表1,列表2”，用逗號隔開
visibleNum是下拉框列表一次顯示的最大數量，如果label數超過這個數量，就會出現滾動條，通過scrollBarSkin可以設置滾動條皮膚
容器組件
1.Box組件
Box是容器組件，容器在界面上不能被直觀看到，也不能通過拖動組件樹創建，而是通過轉換方式把某些內容轉換為容器
比如界面中同時選中兩個按鈕，通過快捷鍵Ctrl+B轉換為容器，那么兩個按鈕就被包含在Box內，作為一個整體來控制
選中一個容器，通過快捷鍵Ctrl+U，可以去除這個容器，和上面做相反的工作
2.Container組件
Container是相對定位容器，繼承自Box，增加了left，right，top，bottom等相對定位屬性，同時增加了centerX，centerY等居中對齊屬性
也可以通過Ctrl+B轉換而來
3.Panel面板
Panel繼承Container，除了具有相對屬性外，增加了滾動條和遮罩效果，無論里面的圖片有多大，panel只會顯示特定區域，通過滾動可以看到其他區域
4.Tab組件
Tab是切換標簽按鈕組，可以設置labels屬性設置標簽，比如labels=“標簽1,標簽2”，多個用逗號隔開
direction定義了tab的布局方向，是水平還是垂直
假如Tab里面的按鈕擺放不規則，顏色都不一樣，想個性化，那么就需要自定義Tab布局，請參考教程《自定義Tab，Radiogroup，List》
5.RadioGroup組件
RadioGroup是單選按鈕組，和Tab類似，可以設置labels=“單選1,單選2”進行設置，也可以通過direction屬性選擇布局的方向
RadioGroup也支持自定義布局，請參考教程《自定義Tab，Radiogroup，List》
6.List組件
創建List：
添加一個label並選中，Ctrl+B轉換為Box，設置Box的name屬性為render，再選中Box通過Ctrl+B轉換為List，設置List的行數，列數和間隔屬性即可(分別為repeatX,repeatY,spaceX,spaceY)。
為list添加滾動條：
雙擊list，進入list內部，拖動一個滾動條到list內，修改name屬性為scrollBar，即可自動識別，詳細可參看Demo示例
最終結構如下：
<List x="214" y="274" repeatX="1" repeatY="5" spaceX="0" spaceY="5" var="list">
<Box x="0" y="0" name="render">
<Label text="label" x="27" y="4" name="label"/>
</Box>
<VScrollBar skin="png.comp.vscroll" x="89" y="3" width="15" height="150" name="scrollBar"/>
</List>
List和Tab一樣，可以個性化自定義，請參考教程《自定義Tab，Radiogroup，List》
List是列表組件，繼承自Box，repeatX，repeatY分別是列表項x，y方向每頁最多顯示的數量，spaceX和spaceY是列表項之間的間隔值，scrollSize是每次滾動的個數
List是比較常用的組件之一，同時也是最復雜，最靈活的組件，List還有很多高級用法，請參考教程《List高級使用教程》
7.ViewStack組件
ViewStack是視圖導航器組件，作為一個容器，用來存儲多個視圖，通過selectedIndex進行切換顯示
使用方式：選擇要包含進ViewStack的對象，分別命名為item0，item1，item2…，然后全選，Ctrl+B轉換為ViewStack容器
最終結構如下：
<ViewStack x="364" y="328">
<Label text="view1111" name="item0" x="0" y="0"/>
<LinkButton label="view222" x="47" y="0" name="item1"/>
</ViewStack>
8.頁面嵌套
頁面嵌套類似Flex的自定義控件，可以把一個界面嵌套到另外一個界面內，只需選中一個界面，拖動到另外界面內部即可
這樣做可以實現自定義的顯示組件，同時達到多界面復用的效果，還可通過修改此控件的runtime屬性來設置嵌套界面的邏輯類
了解更多頁面嵌套內容，可以參考教程《頁面嵌套的使用》
視圖組件
1.View組件
View是視圖類，一個界面就是一個視圖，視圖類實現了界面結構的解析，這里具有很大的靈活性
在創建界面的時候，會讓你選擇用哪種視圖類，你甚至可以自定義自己的視圖類，封裝自己的邏輯，然后在編輯器讓界面都繼承自此自定義視圖類，這就是Morn UI自定義靈活性的又一表現，詳情請參考教程《自定義頁面基類》
2.Dialog組件
Dialog是對話框類，繼承自View，在view基礎上增加了show，popup，close等彈出對話框方法，同時增加了拖拽，模式窗口等功能
全部組件集合如下圖：
游戲開發所用的組件，Morn UI都精煉的提供了，這么多功能，僅僅給你的代碼增加30多K的大小，真正的輕量級
並且每個組件都是經過深思熟慮，同時保證簡單好學好用，又要高性能，並且可視化布局，還考慮到自定義擴展等特性
這一切組件，全部開源，你可以任意改動和擴展，開發適合自己的需求東西，Morn UI的一個重要特性就是靈活性，易擴展
所有這些，均免費，甚至可以商業應用，如果你再猶豫，我和我的小朋友就要驚呆了