冰狐智能辅助 QQ群9：952102902
首页
文档&下载
移动端
微服务
社区
码农教程
管理中心
关于我们
登录/注册
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函数来执行具体任务。
  • 修改ui后需要重启冰狐才能生效，修改Task(runTask启动的任务)后不需要重启UI

3.ui相关的全局函数（必看）

ui相关的主要全局函数如下：
  • setupUI，安装（创建）UI，必须在main函数中第一个调用setupUI函数，否则系统不会创建ui。
  • ui，根据控件id获取ui控件。
  • openUI，打开新的UI界面。
  • closeUI，关闭当前UI界面。
  • runTask，在ui中执行具体任务。
  • stop，停止当前任务。
  • showDialog，显示对话框。
  • showPopupMenu，显示弹出菜单。