JS与UI交互
说明
- 本章节主要讲述JS与UI元素进行交互
- 和UI交互的的js模块对象统一以 ui开头,例如 ui.toast("msg")
如何使用
- 在工程的layout文件夹下新建一个ui.js文件,内容为
function main() {
ui.toast("我是JS控制的UI");
}
main();
- 加载layout的main.xml文件并展示出来,内容为
function main() {
ui.toast("我是JS控制的UI");
ui.layout("标签1", "main.xml");
}
main();
- 以上的操作即可完成一个简单的展示main.xml布局的操作
高级操作
- 编写一个ui.js
/**
* 该文件由EasyClick开发工具自动创建
*/
function main() {
ui.toast("我是ui的Toast函数");
var set = ui.layout("参数设置", "main.xml");
ui.layout("其他说明", "main2.xml");
ui.logd("设置UI结果: " + set);
//Switch 开关按钮的用法
var auto_env = ui.getViewValue(ui.auto_env);
ui.logd("tag为 auto_env 的值: " + auto_env);
//开关按钮的事件
ui.setEvent(ui.auto_env, "checkedChange", function (view, isChecked) {
ui.logd("tag为 auto_env isChecked " + isChecked);
if (isChecked) {
startAutoEnv();
}
});
if (ui.isServiceOk()) {
ui.auto_env.setChecked(true);
} else {
ui.auto_env.setChecked(false);
}
//EditText 编辑框的用法
var name = ui.getViewValue(ui.name);
ui.logd("tag为name的值: " + name);
ui.name.setText("我是name的值");
//Spinner 下拉选择框用法
var sex = ui.getViewValue(ui.sex);
ui.logd("tag为 sex 的值: " + sex);
//下拉选择框的事件
ui.setEvent(ui.sex, "itemSelected", function (position, value) {
ui.logd("tag为 sex itemSelected " + value);
});
//RadioButton 单选框用法
var three = ui.getViewValue(ui.three);
ui.logd("tag为 three 的值: " + three);
//单选框的事件
ui.setEvent(ui.three, "checkedChange", function (view, isChecked) {
ui.logd("tag为 three isChecked " + isChecked);
});
//CheckBox 复选框用法
var dance = ui.getViewValue(ui.dance);
ui.logd("tag为 dance 的值: " + dance);
//复选框的事件
ui.setEvent(ui.dance, "checkedChange", function (view, isChecked) {
ui.logd("tag为 dance isChecked " + isChecked);
});
//saveAllBtn 保存参数事件
ui.setEvent(ui.saveAllBtn, "click", function (view) {
var s = ui.saveAllConfig();
ui.logd("保存所有参数结果 " + s)
});
//系统设置按钮
ui.setEvent(ui.systemSetting, "click", function (view) {
ui.openECSystemSetting();
});
//启动脚本按钮
ui.setEvent(ui.startBtn, "click", function (view) {
ui.start();
});
//启动环境按钮
ui.setEvent(ui.envBtn, "click", function (view) {
//异步启动环境,如果成功了就设置auto_env 按钮的状态
startAutoEnv();
});
//获取所有的UI参数
ui.logd("获取所有的UI参数:" + ui.getConfigJSON());
//设置值的用法,这里先注释掉
// ui.setViewValue(ui.name, "我是设置的");
// ui.setViewValue(ui.auto_env, false);
// ui.setViewValue(ui.sex, "男生|女生");
// ui.setViewValue(ui.three, true);
// ui.setViewValue(ui.dance, false)
//内存临时存储变量和数据
ui.putShareData("nameVar", ui.name);
ui.putShareData("value", "我是value");
}
function startAutoEnv() {
ui.startEnvAsync(function (r) {
ui.logd("启动环境结果: " + r);
ui.auto_env.setChecked(r);
});
}
main();
脚本如何与JS交互
- 以下代码是在js/main.js中运行的
function main() {
//脚本获取UI中的对象,肯定是要先有界面才行
//这里可以直接引用UI对象
//假设在xml中,我们配置一个一个tag=name 的输入框,EditText
//获取UI模块设置的变量和数据
logd(ui.getShareData("nameVar"))
logd(ui.getShareData("value"))
//第一种方式,变量引用
//重置JS变量
ui.resetUIVar()
//打印一下UI中的name变量
logd("ui.name " + ui.name)
if (ui.name) {
//UI主线程中处理
getHandler().post(function () {
ui.name.setText("Fsdafsadfsa")
ui.logd("输入框内容为 : " + ui.name.getEditableText());
});
}
sleep(2000);
//第二种方式, findViewByTag
var name = ui.findViewByTag("name");
if (name) {
//UI主线程中处理
getHandler().post(function () {
name.setText("懵逼了")
ui.logd("输入框内容为 : " + name.getEditableText());
});
}
sleep(5000);
}
main();
消息类
消息函数 toast
- 显示Toast信息
- @param msg 信息
function main() {
ui.toast("我是JS控制的UI");
}
main();
日志函数 logd
- 调试日志打印
- @param msg 打印的消息
function main() {
ui.logd("我是消息");
}
main();
布局UI类
设置布局 layout
- 创建一个布局并设置到当前的页面中
- @param name tab标签的名称
- @param content 可以是layout文件夹中的文件名称,也可以直接是xml文件的内容
- @return 布尔型 true代表成功, false代表失败
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
ui.logd("参数说明创建结果: " + u1);
ui.logd("其他说明创建结果: " + u2);
}
main();
解析布局 parseView
- 解析布局并返回
- @param content 可以是layout文件夹中的文件名称,也可以直接是xml文件的内容
- @return View android的View对象,解析有问题就是null
function main() {
// xml文件在layout文件夹下
var u1 = ui.parseView("main.xml");
ui.logd("创建结果: " + u1);
}
main();
查找视图 resetUIVar
- 将所有的tag转换成UI的属性直接调用
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
ui.resetUIVar();
}
main();
查找视图 findViewByTag
- 通过tag查找到一个视图
- @param tag 标签值
- @return View android原生的View对象
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//查找tag=name的视图
var nameView = ui.findViewByTag("name");
ui.logd("name view is:" + nameView);
}
main();
保存数据到存储区 putShareData
- 存储数据到存储区中,脚本可以使用,可用于存储变量和数据
- @param key 键
- @param value 值
- @return 布尔型 true成功 false失败
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//保存到存储区
ui.putShareData("name", "我是临时数据");
}
main();
从存储区读取数据 getShareData
- 从存储区获取在UI模块存储的数据
- @param key 键
- @return 存储的 数据
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数 说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//从存储区读取数据
var d = ui.getShareData("name");
logd("d =" + d)
}
main();
从存储区清空数据 clearAllShareData
- 清理所有存储区的数据
- @return true 或者 false
function main() {
ui.clearAllShareData();
}
main();
设置事件 setEvent
- 设置事件
- @param view 要设置事件的视图,可以是事件的tag值
- @param eventType 时间类型: click:点击,checkedChange:单选和多选按钮的选中状态改变事件,itemClick:列表的项目点击,itemSelected:列表的项目选中
- @param eventCallback 事件回调函数
- @return 布尔型 true代表设置成功, false代表设置失败
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//下拉选择框的事件
ui.setEvent(ui.sex, "itemSelected", function (position, value) {
ui.logd("tag为 sex itemSelected " + value);
});
ui.setEvent(ui.dance, "checkedChange", function (view, isChecked) {
ui.logd("tag为 dance isChecked " + isChecked);
});
ui.setEvent(ui.startBtn, "click", function (view) {
ui.start();
});
}
main();
获取根视图 getRootView
- 取得当前的根视图对象,因为有可能是多标签的页面,返回的有可能是个集合
- @return View 对象列表
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//下拉选择框的事件
var views = ui.getRootView();
ui.logd("views " + views)
for (var i = 0; i < views.length; i++) {
var value = views[i];
ui.logd("view-" + value)
}
}
main();
设置视图值 setViewValue
- 设置视图的值
- @param tagOrView 视图的tag或者视图对象
- @param value 值,字符串或者是布尔型
- @return 布尔型 true代表成功 false代表失败
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//ui.name 是值xml中tag=name的视图对象
ui.setViewValue(ui.name, "我是设置的名称")
}
main();
获取视图值 getViewValue
- 取得视图的值
- @param tagOrView 视图的tag或者视图对象
- @return 字符串或者布尔型
function main() {
// xml文件在layout文件夹下
var u1 = ui.layout("参数说明", "main.xml");
var u2 = ui.layout("其他说明", "main2.xml");
//ui.name 是值xml中tag=name的视图对象
ui.setViewValue(ui.name, "我是设置的名称");
var v = ui.getViewValue(ui.name);
ui.logd("获取name的值为: " + v);
}
main();