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);
}

// 当ui显示出来后系统会自动调用该回调函数
function onUIResume() {
    console.log('ui resume');
}

// 当ui消失后系统会自动调用该回调函数
function onUIPause() {
    console.log('ui pause');
}

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描述(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后点击"调试运行"(或者重启冰狐)UI立即生效,非常方便。

3.ui相关的全局函数(必看)

ui相关的主要全局函数如下:
  • setupUI,安装(创建)UI,必须在main函数中第一个调用setupUI函数,否则系统不会创建ui。
  • ui,根据控件id获取ui控件。
  • openUI,打开新的UI界面。
  • closeUI,关闭当前UI界面。
  • runTask,在ui中执行具体任务。
  • stop,停止当前任务。
  • showDialog,显示对话框。
  • showPopupMenu,显示弹出菜单。
  • onUIResume()回调函数,当ui加载完成后系统会自动调用该函数。
  • onUIPause()回调函数,当ui消失后系统会自动调用该函数。