冰狐智能辅助
首页
文档&下载
移动端
微服务
社区
码农教程
管理中心
关于我们
登录/注册
UI介绍

冰狐智能辅助使用xml来描述ui，使用js来执行ui事件（ui逻辑处理）。界面元素和android原生类似，主要由控件和布局组成，控件用来具体显示信息，比如文本控件、图片控件、按钮控件等；布局可以容纳多个控件，用于控制控件的位置，比如：线性布局（linear）、帧布局（frame）等，下面来举例子说明。点击查看视频教程：冰狐ui开发教程1-入门、冰狐ui开发教程2-基础控件学习、冰狐ui开发教程3-布局学习、冰狐ui开发教程4-动态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="苹果|香蕉|橘子" onSelected = "onSpinnerSelected"/>
        <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显示出来后系统会自动调用该回调函数
function onUIResume() {
    console.log('ui resume');
}

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

function onClick(event) {
    console.log('click button');

    // 注意耗时任务不能在ui脚本中执行，具体的耗时任务放在另外一个脚本中，使用runTask函数来调用，runTask会在内部开启一个新线程执行任务脚本。
    // runTask('task');
}

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中启动一个新线程执行具体任务（注意不能在ui中直接执行耗时任务）。
  • stop，停止当前任务。
  • showDialog，显示对话框。
  • showPopupMenu，显示弹出菜单。
  • onUIResume，系统回调函数，当ui加载完成后系统会自动调用该函数。
  • onUIPause，系统回调函数，当ui消失后系统会自动调用该函数。
  • onBackPressed，系统回调函数，当按下返回键时系统会自动调用该函数。