UI介绍
冰狐智能辅助使用xml来描述静态ui，使用js来执行ui事件（ui逻辑处理）。界面元素和android原生类似，主要由控件和布局组成，控件用来具体显示信息，比如文本控件、图片控件、按钮控件等；布局可以容纳多个控件，用于控制控件的位置，比如：线性布局（linear）、帧布局（frame）等，下面来举例子说明。
注意：自定义UI完全可以被自定义数据代替，自定义数据比UI效率更高，操作更简便，尤其当设备数量比较多的时候，自定义数据优势更明显。
1.例子
<template> <linear orientation="vertical"> <linear orientation="horizontal" width="matchParent"> <text id="show" text="demo" size="26" gravity="center" layoutWeight="1"/> <edit text="haha" gravity="center" layoutWeight="2"/> <button id="btn" text="按钮" gravity="center" layoutWeight="1" onClick="onClick"/> </linear> <spinner id="select" entries="苹果|香蕉|橘子"/> <image src="https://www.baidu.com/img/bd_logo1.png" width="30" height="50"/> </linear> </template> function main() { // 创建并显示ui setupUI(); // 设置文本 ui('show').setText('xxx'); ui('select').on('selected', onSpinnerSelected); } function onClick(event) { console.log('click button'); // 注意耗时任务不能在ui脚本中执行，具体的耗时任务放在另外一个脚本中，使用runTask函数来调用 runTask('tast'); } function onSpinnerSelected(name, position) { console.log('spinner name:' + name + " position:" + position); }
上面是一个完整的ui例子，运行后的结果如下：
2.ui规则（必看）
在使用前需要了解如下ui规则：
- 在使用前必须在网页端「管理中心」/「账户信息」中开启"自定义UI"（如下图所示），否则无法显示ui。
- 在使用前必须在网页端「管理中心」/「账户信息」中把带ui的脚本设置为用户默认脚本（如上图所示），否则无法显示ui。
- ui描述（xml）和事件处理(ui逻辑)都写在一起。
- ui描述必须放在<template></template>里面。
- 在ui描述中，一般template的第一个子元素为布局，比如上例子中template第一个子元素为linear布局。
- 必须在main函数中第一个调用setupUI函数，否则系统不会创建ui。
- js中使用ui(id)来选择控件，比如ui('show')表示获取id为show的文本控件。
- 控件的事件响应有两种方式：1.直接在xml中实现，比如onClick="onClick"，表示点击按钮的响应函数为onClick函数；2.在js中使用控件的on函数来绑定事件，比如：ui('select').on('selected', onSpinnerSelected)，先通过ui('select')来找到对应控件，然后调用控件的on函数来绑定selected事件的处理函数onSpinnerSelected。
- ui中不能执行耗时操作，具体任务必须放在另外脚本文件中，必须调用runTask函数来执行具体任务。