UI介绍

冰狐智能辅助使用xml来描述静态ui,使用js来执行ui事件(ui逻辑处理)。界面元素和android原生类似,主要由控件和布局组成,控件用来具体显示信息,比如文本控件、图片控件、按钮控件等;布局可以容纳多个控件,用于控制控件的位置,比如:线性布局(linear)、帧布局(frame)等,下面来举例子说明。

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

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。