AppWorker教程-基础-UI概述
1. UI结构
平台UI的基本结构就是一个App由多层Page组成，每个Page里加载一个或多个ui文件，每个ui文件里加载多个ui组件，有一些组件里又可以包含其它ui组件，从而形成一个树状结构的ui树。
image.png
我们在IDE的outline里也可以看到一个ui文件的ui树结构：
image.png
2. Page
Page是整个结构中的核心，对应的就是do_Page组件，一个App里存在一个Page栈，openPage就是构建一个新Page盖住已有的Page，closePage就是把这个Page关掉，露出底部的Page。
Page的详细介绍参考文档.
3. ui文件
ui文件是平台定义的一个ui描述的描述文件，其实就是一个json，json相对于xml，html来说并不适合阅读和直接修改，不过平台提供了IDE可视化拖拽生成功能所以使用相当方便，我们并不需要直接去编辑json文件。
ui文件和Page的关系并不是一一对应的，Page更类似于画框，ui类似于画作，Page在open的时候选择加载那个ui文件。
4. ui组件分类
4.1 布局组件
平台包含2个基础的布局组件，do_ALayout和do_Linearlayout。所谓布局组件就是在IDE里设计界面，可以拖拽别的组件加到这个布局组件里作为这个布局组件内的一个部分。
除了拖拽，还可以通过add方法在App运行时动态加入新的ui，详细可参考对应API文档。
注意：do_ScrollView也算是布局，也可以往里面拖拽其他组件，不过它比较特殊，它有且只有一个子节点。我们这里暂时不讨论。
4.2 容器组件
所谓容器组件，指能搞包容其它ui组件的组件，和布局组件的差别在于，容器组件不能直接在IDE的设计界面拖拽其它ui组件加到它的内部。他一般是通过属性templates来指定多个ui文件作为模板，然后通过数据绑定的方式来加载数据。数据绑定参考文档.
容器组件很多种而且也很重要，因为它一般是App的主框架，目前官方容器类组件很多，我们只介绍几个常用的，简单介绍组件的基本界面让大家能够了解每个组件的应用场景从而准确选择合适的组件：
- do_ListView
do_ListView就是列表，用途最广，所有App基本上都离不开。它可以加载很多数据，上下滑动浏览。随便找一个App截个图：
![]
image.png
我们可以看到listview支持多模板，像这个截图包含至少2个模板。
-
do_SlideListView
do_SlideListView也是列表，只不过多一个特殊的用途，就是每一个Cell通过设置leftTemplate和rightTemplate可以实现左右滑出露出功能菜单：
image.png
-
do_IndexListView
do_IndexListView是一种特殊的列表，自带索引。常用在通讯录：
image.png
-
do_ExpandableListView
do_ExpandableListView多级的列表，点击一行，可以展开更多行。比如选择省，再选择市这种场景。：
image.png
-
do_SegmentView
do_SegmentView可以左右手势滑动，也可点击的分段类似tab分页的头，通常和do_SlideView结合使用，典型的就是网易新闻App：
image.png
-
do_GridView
do_GridView可以实现类似九宫格的效果，每一个单元都共有一个或多个ui文件作为模板。这个组件应用场景也很广：
image.png
-
do_SlideView
do_SlideView可以通过手势左右滑动，也可以通过代码修改index实现页面切换的效果，而且可以滑动停留在二个页面中间。有一个或多个ui文件作为模板。这个组件应用场景也很广：
image.png
-
do_FragmentView
do_FragmentView就是可以通过左右手势滑出一个新的页面，但是新的页面只有屏幕的一半，也通过代码实现左右页面动画滑出的效果。由左中右三个ui文件组成。随便找一个App截个图：
image.png
-
do_ViewShower
do_ViewShower有点类似不能手势滑动的Slideview。只能通过代码实现页面切换的效果，不过切换的时候可以设置动画效果。ViewShower可以包含多个ui文件，而且ui文件一旦加载就永远驻留在内存中，这个特性确保切换没有任何延时。常用在首页。参考微信的iOS版本的首页就适合这个组件来实现：
image.png
4.3 基础UI组件
剩下的ui组件都是属于这一种，通常这种组件内部不能再包含其它组件了，比如do_Button，do_Textfield等。
