10WAB入门-实例创建过程

1. 创建自定义in-panel widget。

    1). client/stemapp/widgets/samplewidgets，复制一份CustomWidgetTemplate，命名为MyWidget。

    2). 设置widget 基类的名字。MyWidget/Widget.js 将baseClass修改jimu-widget-mywidget。

    3). 定义widget的UI。 在MyWidget/Widget.html中增加html代码片段。

    4). 在app config中增加mywidget stemapp/sample-configs  在widget这个数组中增加一个描述对象。

    5). 测试widget http://[your host name:3344]/webappviewer/?config=sample-configs/config-demo.json。

    6). 使widget可配置化。修改config.json 修改对应的html 使用${config.XX}方式读取配置内容。

    7). 增加样式。

    8). 添加交互按钮，访问this.map，注意作用域的变化。

    9). 本地化略。

    10). 部署widget

        a. 修改MyWidget中的manifest文件。inPanel、hasLocale、hasStyle、hasConfig、hasUIFile、hasSettingPage、hasSettingUIFile、hasSettingLocale、hasSettingStyle、isController..

        b. 复制文件到 \stemapp\widgets中

        c. 刷新在配置页面即可找到开发的widget

2. 创建自定义theme

    1) 转到 client/stemapp/themes

    2）复制一根DemoTheme，命名为NewTheme

    3）修改NewTheme文件夹中的manifest.json文件的Name和Labe属性为 NewTheme和New Theme Tips：Name的名称必须有和theme folder的名称一致

    4）修改本地化文件 确保其中的_themeLabel 属性为 New Theme

    5）刷新，即可看到新的theme

3. 创建自定义controller widget

    1)   打开NewTheme目录，位于client/stemapp/themes/NewTheme

    2)   在NewTheme目录下创建新的widgets文件夹

    3)   复制client/stemapp/widgets/samplewidgets/demo 到widgets文件夹，并且改名为SidebarController

    4)   更新通用信息，如manifest.json中的name和label以及nls/string.js下的_themeLabel等

    5)   在manifest.json中添加 “propeties":{"inPanel":false,"isController":true,"isThemeWidget":true}

    6)   打开文件 client/stemapp/themes/NewTheme/layouts/default/config.json

    7)   在widgetOnScreen节增加 {“ur":"themes/NewTheme/widgets/SidebarController/Widget","position":{"left":0,"top":0,"bottom":0,"width":50,"relativeTo":"browser"}}

    8)   重新定位Scalebar的位置 从25到85

    9)   重新加载wab，并且选择NewTheme，就可以看到

    自定义controller模板

    自定义controller widget 内容较多。

    如何增加一个自定义的controller？如何能够把widget添加到这个widget里面去

需要实践的内容：

1. 创建两个自定义的In-panel widget。

自定义样式    --完成

自定义名称和图标   --完成

        如何增加widget的label  --完成

自定义配置  --完成

自定义html  --完成 

自定义设置页面 --完成

访问map对象实现功能 --完成

        版本的升级 有点别扭 牵扯到升级app版本的过程 可以采用删除掉重新加载的方式，需要重新设置位置、设置等。--完成

与app交互  --完成

两个panel之间互相交互 --完成

2. 创建一个off-panel widget   --完成

3. 创建两个feature action

4. 创建一个主题 --完成

创建一个panel --完成，没有做可移动panel

创建两种样式 --完成

创建两个布局 --完成

创建一个主题widget --完成

创建一个controller widget --完成 进行到分组

其他实践技巧

1. 如何禁用主题和微件？

    首先在stemapp/themes/.repoignore中增加主题的名称，回车可以添加多个

    然后重新启动服务器即可。虽然禁用的themes在stemapp或者某个app中都没有被删除，但是已经不能从builder中发现了。

    同样的道理，在微件的目录下，也可以禁用微件。

2. node服务器会实时的检测stemapp/widgets目录，如果你复制进去一个widget，可以自动的检测出来，不必重启服务器，刷新页面即可增加新的widget

3. 修改theme的过程，可以找到指定app的文件夹删除已经存在的theme然后重新启动服务器即可。

来自为知笔记(Wiz)