06WAB入门-主题开发
概要
WAB主题是一个用户界面元素集合，它定义了App的外观，布局，app导航，和on-screen上基础UI组件（比如：比例尺、鹰眼图等）。
通过开发一个主题，可以自定义应用的界面、用户交互体验、和品牌样式。
主题元素主要包括：widget panel、style、布局、主题widgets。
以下表格展示了UI 元素定义：
| 主题元素 | 定义 |
| Panel | Panel是展示widget内容的UI窗口。可以定制特定主题上，具有特殊功能和样式的Panel。 比如：你可以开发一个可以在屏幕上随意拖动，并且拥有紫色主题样式的Panel。 通过主题Panel，widget开发者可以集中在开发widget内部功能，而不用担心widget怎么展示。 一个主题可以包含多个Panels。 |
| 主题Widget | 一个主题Widget也不过就是一个普通的WABwidget，但是，一个主题中如果缺少主题Widget就不完整。 比如：在折叠主题中，Header Controller就是一个预设的主题widget，它就是用来对用户设置的所有的widget进行导航用的。 |
| 样式 | 一个主题可以包含多个样式文件。 |
| 布局 | 本质上来说，布局是一种规定UI元素在屏幕上的位置的app配置。它包含了一些预定义widget元素位置占位。 一个主题同样可以包含多个布局。 |
创建主题
WAB提供了许多内置的主题。使用DemoTheme可以练习怎么去创建一个主题。
Demo theme具有一个panel、一个主题widget、两个样式和两个布局。
默认的panel叫做SimpleBorderPanel，它有一个基础的边框。
两个样式分别是默认和黑色，默认的样式是红色。
两个布局分别是默认和右侧，默认的布局放置一个widget在左边栏，而右侧的布局放置widget在右边栏。
Tips：
Demo theme位置：/client/stemapp/themes/DemoTheme。默认情况下，这个主题是禁用的，可以通过打开client/stemapp/themes/.repoignore文件。
移除DemoTheme，重启node服务器即可。
一旦你创建了一个自定义的theme，你可以将这个文件夹放置到任意的theme仓库里。
创建theme所需文件
就像上面所说的一样，需要创建一系列必须的文件。如图：
编辑manifest.json
manifest.json文件描述了主题的内容，并且builder系统会读取这个文件获取主题内容。
创建panel
前面已经介绍过，panel就是一个用来展示widget内容的UI元素。多个widget可以使用系统的panel。
但是widget并不是直接就展示在panel上的。widget是包含在WidgetFrame中的，而WidgetFrame是直接展示在panel上的。
一个widgetframe包含一个widget，但是一个panel可以包含多个widgetframe。类似于下图：
开发一个panel跟开发一个web组件是相同的，同样需要js、css以及html的知识。
而且有助于理解dojo的布局概念。
创建一个Panel，需要继承自BaseWidgetPanel。
TODO：如何创建一个Panel
panel的生命周期函数
跟widget一样，在panel中也有很多生命周期函数可以呗覆盖和交互。
创建panel的时候可以覆盖的函数有：
createFrame：返回一个widgetframe对象
reloadWidget：当widget改变的时候builder系统会调用这个函数
生命周期函数与widget的相同：
onOpen、onClose、onMaximize、onMinimized、onNormalize、onActive、noDeactive、setPosition
创建简单的SimpleBorderPanel
由于SimpleBorderPanel非常的基础，扩展自BaseWidgetPanel，而且不需要添加额外的功能，像这样：
可以查看client/stemapp/jimu.js/BaseWidgetPanel.js的内容
创建样式
你还需要写一些样式文件以保证主题更加的吸引人以及拥有一致的UI。在这些样式文件中，可以覆盖jimu.css，
编写你需要的样式。把通用的样式放到common.css中，特殊的样式放到相应的style.css中。
编辑默认样式
编辑黑色样式
创建布局
布局是一个模板配置文件。虽然它和app的config文件使用一样的格式，但是它只是一个子集。
比如：默认样式包含以下属性
widgetOnScreen:包含所有的属性
map:只包含position属性
widgetPool：包含所有的属性
在默认的布局中，可以使用URI和位置属性或者只使用位置属性定义on-screen widget。
那些只包含位置属性的widget被叫做占位空间，当配置的时候它允许加入一个widget。
对于非默认布局，可以使用数组或者对象的方式定义widget和widget组的位置：
使用数组：可以一个个的定义widget和widget组的位置
使用对象：使用widget的URI作为key，将position作为一个值来定义。对于占位空间widget，由于它没有URI，可以使用ph_<i>作为key
其中的<i>是占位空间的索引。对于widget组，使用g_<I>作为key。
在builder中编辑的时候，当从layoutA切换到layoutB的时候，layoutB中定义的位置会自动的覆盖layoutA中定义的位置。
如果widget或者panel的位置没有在layoutB中定义，就使用layoutA的定义来代替。
下面是一个default layout的例子
right layout
编辑main.js文件
当主题load的时候main.js会被加载，可以设置一个初始化代码就像这样 define([],function(){});
创建主题widget
创建主题widget的过程与创建普通widget的过程一样，只是多了一个额外的属性，isThemeWidget。这个属性是定义在
manifest.json文件中的，设置为true即可。主题widget的位置在/theme name/widgtes文件夹
最佳实践
1. 确定一个合适的名称和图标。
2. 创建多个样式和布局使用户可以选择。
3. 将panel的样式做一个拷贝。
4. 没有必要圈闭覆盖jimu.css和jimu-theme.css，只需要覆盖你需要的。
5. 创建许多占位空间，这样可以让用户在配置app的使用选择使用。
6. 考虑移动端设备的主题外观。
浙公网安备 33010602011771号