UI模块提供简单的页面编辑能力，当我们要编写一个页面时必须要用ui标签包裹才能识别

var xml = <ui>
<View>
<Text text="hello"></Text>
<View>
</ui>

UI.show(xml, ()=>{
    // ui渲染完成事件回调
})

公共属性

• id 用于查找元素绑定事件等
• w 宽度 number/ auto/ match/ warp
• h 高度 number/ auto/ match/ warp

View

• background_color 背景颜色 如：#RRGGBB
• orientation 布局 是水平布局跟垂直布局，h/v
• gravity 子视图的定位方式。默认为 start ，start|bottom|left|right|fill_vertical|fill_vertical|center|fill

var xml = <ui>
<View orientation="h">
    <Button text="button1"></Button>
    <Button text="button2"></Button>
</View>
</ui>

UI.show(xml)

var xml = <ui>
<View orientation="v">
    <Button text="button1"></Button>
    <Button text="button2"></Button>
</View>
</ui>

UI.show(xml)

Button

• text 文字内容
• text_color 字体颜色 如：#RRGGBB
• background_color 背景颜色 如：#RRGGBB
• onClick 事件绑定

var xml = <ui>
<View orientation="v">
    <Button id="btn1" text="button1"></Button>
    <Button text="button2"></Button>
</View>
</ui>

UI.show(xml, ()=>{
    // 绑定点击事件
    UI.id('btn1').onClick(()=>{
        Toast.show('点击按钮')
    })
})

Text

• 单纯显示文字
• text 文字内容
• text_color 字体颜色 如：#RRGGBB

EditText

• 文字输入元素
• text 默认内容
• setJsText函数，赋值操作
• getJsText函数，获取输入框的值

var xml = <ui>
<View orientation="v" w="match" >
    <Button text="button1" id="btn" ></Button>
    <EditText id="edit" text="hello Aj" ></EditText>
</View>
</ui>

UI.show(xml,()=>{
    // 点击按钮后 修改EditText的值并Toast显示
    UI.id('btn').onClick(()=>{
        var edit = UI.id('edit')
        edit.setJsText("click Aj")
        Toast.show(edit.getJsText())
    })

})

Switch

• 开关标签
• text_off 关闭的值
• text_on 开启的值
• checked 是否选中 true/false

var xml = <ui>
    <View orientation="v"  >
        <Switch id="switch" text_off="关闭" text_off="开启" checked="true" ></Switch>
    </View>
</ui>

UI.show(xml, () => {
    UI.id('switch').onClick((res) => {
        Toast.show(res)
    })
})

Image

• text base64格式字体或者 网络图片链接

var xml = <ui>
<View orientation="v" w="match" >
    <Button text="button1" id="btn" ></Button>
    <Image id="image" text="https://xxx.png" ></Image>
</View>
</ui>

UI.show(xml, ()=>{
    UI.id('btn').onClick(()=>{
        // 点击按钮修改图片内容
        image.setJsText("https://***.png")
    })
})