利用MiniUI组件给PC软件做界面练习
MiniUI扁平风格WEBUI界面库, 拥有完整的各种常用控件, 非常完备的表格组件
同为JQ界面组件,相对于layui, 更喜欢miniui提供的风格界面
官网:
我比较喜欢miniui的导航框架3, 于是
aardio中新建webform工程, 将下载到的miniui库里面的
将frame里面的框架3
拷贝到aardio的工程目录web中
将index.html里面的js路径改过来
import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程12";right=1019;bottom=679;bgcolor=15793151)
mainForm.add()
/*}}*/
import console
console.open()
import web.form;
var wb = web.form( mainForm,5/*_UIFLAG_DIALOG*/,,,true);
wb.go("\web\index.html")
wb.wait();
mainForm.show();
return win.loopMessage();如果文件都没错的情况下, 那么运行应该就可以看到如下图
但是, 左侧导航那里并没有显示出来?
我的电脑是win7 32位, ie11 , 这里用web.form左侧导航显示不出来,估计是本地构建的原因, 我又不想用wsock.tcp.simpleHttpServer创建服务器 .
正常的应该是:
查看index.html代码, 里面有个初始化左侧导航的ajax
$.ajax({
url: "data/menu.txt",
success: function (text) {
var data = mini.decode(text);
menu.loadData(data);
}
})貌似这句不能执行导致, 于是我试着将web.form改成web.blink.form 和 web.kit.form , 发现这样是可以的
但是, 我不想用blink/wit , 既然ajax不能执行, 那么我就自己给它解析传给它,
我们是准备把这个miniui最为PC软件界面ui来用的, 那么很多动态的东西(比如 菜单 / 导航栏 / 表格内容 / 文本内容......)都是要aardio直接给miniui提供数据, 而不需要转换为json再给它.
那么, 观察html上面这个代码 , 其实就是加载txt文件, 读出里面的内容, 再把内容解析成数组, 再把数组添加到导航栏.
用aardio来加载txt , 然后内容作为参数,给那个解析并增加的那个函数就可以了.
于是, 首先 , 再aardio中添加个js能调用的函数.
//使用external接口定义网页脚本可调用的本地函数
wb.external = {
Aardio_addItems = function( func ){
//读取文本
var text = string.load("\web\data\menu.txt");
//调用传过来的js函数,将文本作为参数给它
func(text);
}
}我们在index.html的js中添加个名称是func的js函数
function addData(text) {
var data = mini.decode(text);
menu.loadData(data);
}
external.Aardio_addItems(addData);上面先定义了一个addData的函数, 函数里解析并添加数据
紧接着调用aar中的函数,将js中新增的那个addData函数作为参数传递到aar里交互.
打算把整个miniui的demo都转移到上面建的工程里, 我做了一个文本匹配转换工具, 其实就是把原来的树形表转换为json,给左侧列表用
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=968;bottom=532)
winform.add(
button={cls="button";text="转换";left=481;top=216;right=969;bottom=262;dl=1;dr=1;dt=1;z=2};
button2={cls="button";text="清空";left=0;top=216;right=478;bottom=262;dl=1;dt=1;z=3};
s1={cls="edit";left=0;top=0;right=969;bottom=215;dl=1;dr=1;dt=1;edge=1;multiline=1;z=1};
t1={cls="edit";left=0;top=264;right=969;bottom=533;db=1;dl=1;dr=1;dt=1;edge=1;multiline=1;z=4}
)
/*}}*/
winform.button2.oncommand = function(id,event){
winform.s1.text = "";
winform.t1.text = "";
}
var convFun = function(text){
var pattern = //\<a href=\"(.*?)\".*?\>(.*?)\<
for s1,s2 in string.gmatch( text, pattern ){
winform.t1.log('{ "id": "',s2,'", iconCls: "fa fa-assistive-listening-systems", text: "',s2,'", url: "pages/',s1,'"},' ,'\r\n' )
}
}
winform.button.oncommand = function(id,event){
convFun(winform.s1.text);
}
winform.show();
win.loopMessage();
登录后方可回帖
miniui的封装js里面有很多地方用到了ajax, 如果都去修改太麻烦, 还是改为web.kit.form 或者 web.blink.form来使用吧,
我测试了下同样的界面, 用blink和webKit分别渲染, 我发现webkit用时500ms左右, 但是blink用时2000ms左右, webkit虽然不会再更新了, 但是我只是用来渲染界面, 无所谓.
又测试了下所有的示例, 发现webkit在echarts图表那里高版本会导致波形不显示,使用官方echarts5.0.2没问题, blink哪个版本都不会有这个问题 , 但是blink体积大.
综上, 看你最终取舍了, 我这里主要是绘制界面, 所以用webkit就可以了,体积小,速度快.
于是, 上面的代码还使用ajax, 将index.html还原为官方代码