请选择 进入手机版 | 继续访问电脑版

XXTouch 论坛

 找回密码
 立即注册
搜索
查看: 1536|回复: 89

[模块分享] 让 XXT 拥有控件和事件!轻松打造自己的UI 3-21更新

  [复制链接]

3

主题

16

帖子

1105

积分

码总

Rank: 6Rank: 6

积分
1105
发表于 2018-2-6 17:42:44 | 显示全部楼层 |阅读模式
本帖最后由 86088780@qq.com 于 2018-5-2 00:46 编辑

如果要用xxt做UI,就必须使用webview函数,但是又要求必须懂html编程语言,想做一个UI出来或者只是简单做个按钮在屏幕上,都要很长的代码,还需要自己写while来响应传回的值。所以市面上绝大部分脚本都是运行途中没任何可以交互的办法。我在接触xxt之前,一直是做桌面开发的,可视化的编程是桌面级应用程序的主流,而且我对网页编程语言一直是苦手,使用xxt以后莫大的改变和约束我之前的开发逻辑和习惯,两种语言各有所长吧,所以我在想能不能将它们融合起来。
为此我做了一个模块出来,让大家可以简单一行代码就能弄出按钮等控件,而且还为它们封装触发事件的方法,免去大家while词典等繁琐事情,不是简单的控件哦,大家还能随意修改它的属性,让它变成各种样式!
无需懂HTML代码!
首先请看以下简单演示:
Cache_6831acbd4fe0ceef..jpg

列表的简单演示:
TIM截图20180321173830.jpg
333.png



来个复杂演示:(附件会有这个示例源码下载,还是能用的哦)
QQ截图20180206173207.jpg


演示2,用luaocx模拟微信的主界面,请保证调试机器上有正常已登陆微信,源码在附件里
232.png

制作一个按钮,我只需代码:
require('luaocx')  --调用插件,必须放在代码开头
button('我是按钮')

销毁函数是:killocx(控件名)
销毁它:
killocx('我是按钮')

销毁所有控件函数是:killallocx()
销毁它:
killallocx()

并且更方便的地方是,这个按钮按了以后怎么响应呢?你只需这么写:
function 我是按钮_click()   
     ....(按钮按了以后做什么的代码)

end

完整代码示例:
require('luaocx')
button('按钮')
function 按钮_click()
    sys.alert('hello world')
end
以上代码就是在屏幕上生成一个按钮,当点按它时,弹出对话框:hello world
无需你懂网页代码,轻松在xxt搞定!



样式使用说明:
代码示例:
require('luaocx')
button('按钮',{x=100,y=100})
以上代码表示:在屏幕横坐标100,纵坐标100的位置生成一个按钮。

控件们都拥有丰富的属性可以调整
QQ截图20180206170646.jpg
我已经为大家将文档集成在插件里了,插件文档使用标准是:不带任何参数调用函数。插件文档这么用:
文档内容=luaocx()
你可以随时打印,如:
nLog(luaocx())
你会看到
[ip:192.168.0.2]:启动成功{ -- table: 0x1635fa90
        ["picturebox(控件名[,{属性}])"] = "图片控件。声明 控件名:字符型,必须唯一。属性:表型,可设置控件各项样式",
        ["textbox(控件名[,{属性}])"] = "文本输入框控件。声明 控件名:字符型,必须唯一。属性:表型,可设置控件各项样式",
        ["button(控件名[,{属性}])"] = "按钮控件。声明 控件名:字符型,必须唯一。属性:表型,可设置控件各项样式",
}


这样你会看到插件拥有什么控件了,想查对应控件的文档,直接输入函数
nLog(button())
QQ截图20180206171555.jpg

随时查,无需联网也能查文档~

总结:
    打印控件列表与声明:nLog(luaocx())
        打印按钮文档:nLog(button())
        打印文本输入框文档:nLog(textbox())
        打印图片框文档:nLog(picturebox())

一个完整使用按钮控件所有属性的示例:
require('luaocx')

button('btn1',{  --控件名命名为btn1
                x=100,  --横坐标100
                y=100,  --纵坐标100
                height=100,  --高度100
                width=300,  --宽度300
                caption='确定',  --按钮文字:确定
                backcolor='#2873c2',  --按钮浅蓝色底
                fontcolor='#ffffff',  --按钮白色字体
                border=0,  --无边框
                radius=2,  --2px的圆角
                fontsize=20,  --字体大小20px
                alpha=0.8,  --80%不透明
                font='Helvetica-Bold'  --字体为Helvetica-Bold
        })

function btn1_click()  --按下按钮结束程序
        os.exit()
end




属性返回
a=button('btn1','x') --获取按钮“btn1”的横坐标
就这么简单,直接输入它的属性名字就可以了

代码示例:
require('luaocx')
textbox('文本框1',{text=‘你好’})
textbox('文本框2',{text=‘再见’})
sys.alert(textbox('文本框1',"text"))
sys.alert(textbox('文本框2',"text"))

完整获取属性示例:
require('luaocx')

local ocxname='btn1'

button(ocxname)

sys.alert('控件名:'..ocxname..'\n'..
        '横坐标是:'..button(ocxname,'x')..'\n'..
        '纵坐标是:'..button(ocxname,'y')..'\n'..
        '高度是:'..button(ocxname,'height')..'\n'..
        '宽度是:'..button(ocxname,'width')..'\n'..
        '文字内容是:'..button(ocxname,'caption')..'\n'..
        '背景色是:'..button(ocxname,'backcolor')..'\n'..
        '字体颜色是:'..button(ocxname,'fontcolor')..'\n'..
        '边框状态:'..button(ocxname,'border')..'\n'..
        '圆角大小:'..button(ocxname,'radius')..'\n'..
        '字体大小:'..button(ocxname,'fontsize')..'\n'..
        '不透明度:'..button(ocxname,'alpha')..'\n'..
        '使用的字体:'..button(ocxname,'font')
        )

function btn1_click()  --按下按钮结束程序
        os.exit()
end
这个控件模块我命名为 Luaocx(Lua的ocx控件),控件包括:文本框,按钮,标签,图像框,列表。几乎能满足绝大部分开发需求了,能模仿出多种热门app


03-21更新:
修正picturebox文档错误修正text控件动态获取text属性问题
增加标签控件
增加列表控件
增加一次性销毁所有控件函数killallocx
02-07更新:
修正几处文档错误
修正一些bug
增加销毁控件函数


注意:当你require控件后,你的脚本会变成运行完代码也不会结束,必须用结束脚本的方法如:os.exit(),手动按停止脚本热键等。优缺点?缺点是代码运行到最后想结束的话自己手动加个os.exit()呗,优点嘛,你的脚本成为了“真正”的程序,不会因代码结束而结束,而是能一直驻留着。

如果大家对此模块有什么好提议或需求,请留言,如果我觉得合理,会继续加进去~
使用方法:先将luaocx.xxt放到/private/var/mobile/Media/1ferver/lua文件夹,然后即可在自己的脚本上调用
游客,如果您要查看本帖隐藏内容请回复






















回复

使用道具 举报

63

主题

149

帖子

4022

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4022
发表于 2018-2-6 17:44:12 | 显示全部楼层
牛逼牛逼~~~回复可见
回复

使用道具 举报

0

主题

18

帖子

124

积分

小码

Rank: 2

积分
124
发表于 2018-2-6 18:13:05 | 显示全部楼层

牛逼牛逼~~~回复可见
回复

使用道具 举报

0

主题

15

帖子

58

积分

小码

Rank: 2

积分
58
发表于 2018-2-6 23:17:28 | 显示全部楼层
这论坛厉害的大神真多
·
回复

使用道具 举报

0

主题

18

帖子

160

积分

小码

Rank: 2

积分
160
发表于 2018-2-7 01:31:12 | 显示全部楼层
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复

使用道具 举报

0

主题

7

帖子

96

积分

小码

Rank: 2

积分
96
发表于 2018-2-7 09:28:02 | 显示全部楼层
佩服5连
回复

使用道具 举报

0

主题

5

帖子

36

积分

小码

Rank: 2

积分
36
发表于 2018-2-7 10:14:37 | 显示全部楼层
牛逼牛逼~~~回复可见
回复

使用道具 举报

0

主题

13

帖子

92

积分

小码

Rank: 2

积分
92
发表于 2018-2-7 13:00:35 | 显示全部楼层
真的牛逼,但是我更加想知道是怎样实现的。。哈哈
回复

使用道具 举报

3

主题

16

帖子

1105

积分

码总

Rank: 6Rank: 6

积分
1105
 楼主| 发表于 2018-2-7 13:02:35 | 显示全部楼层
hkbaobao 发表于 2018-2-7 13:00
真的牛逼,但是我更加想知道是怎样实现的。。哈哈

就是我替大家封装好了webview和事件,每个控件都是一个webview,里面由html代码组成
回复

使用道具 举报

0

主题

16

帖子

220

积分

码工

Rank: 3Rank: 3

积分
220
发表于 2018-2-7 17:58:45 | 显示全部楼层
你指的拥有
回复

使用道具 举报

0

主题

22

帖子

237

积分

码工

Rank: 3Rank: 3

积分
237
发表于 2018-2-8 04:12:00 | 显示全部楼层
牛逼牛逼~~~回复可见
回复

使用道具 举报

0

主题

11

帖子

88

积分

小码

Rank: 2

积分
88
发表于 2018-2-9 11:31:51 | 显示全部楼层
...............
回复

使用道具 举报

0

主题

22

帖子

158

积分

小码

Rank: 2

积分
158
发表于 2018-2-9 11:34:59 | 显示全部楼层
如果您要查看本帖隐藏内容请
回复

使用道具 举报

0

主题

2

帖子

10

积分

光头

Rank: 1

积分
10
发表于 2018-2-10 18:31:51 | 显示全部楼层
这玩意挺厉害的呢
回复

使用道具 举报

1

主题

22

帖子

198

积分

小码

Rank: 2

积分
198
发表于 2018-2-11 10:06:18 | 显示全部楼层
6666666666
回复

使用道具 举报

0

主题

9

帖子

48

积分

小码

Rank: 2

积分
48
发表于 2018-2-11 15:28:55 | 显示全部楼层
牛逼牛逼~~~牛逼牛逼~~~牛逼牛逼~~~
回复

使用道具 举报

0

主题

14

帖子

90

积分

小码

Rank: 2

积分
90
发表于 2018-2-13 13:20:15 | 显示全部楼层
qwddasdasdasdasd
回复

使用道具 举报

0

主题

11

帖子

126

积分

小码

Rank: 2

积分
126
发表于 2018-2-14 09:41:35 | 显示全部楼层
这个强大了,按钮可以方便实现了
回复

使用道具 举报

0

主题

22

帖子

168

积分

小码

Rank: 2

积分
168
发表于 2018-2-17 21:37:53 | 显示全部楼层
厉害!!!!!!!!!!!!
回复

使用道具 举报

0

主题

15

帖子

98

积分

小码

Rank: 2

积分
98
发表于 2018-2-22 21:32:08 | 显示全部楼层
66666666666666666666
回复

使用道具 举报

0

主题

18

帖子

158

积分

小码

Rank: 2

积分
158
发表于 2018-2-25 00:58:13 | 显示全部楼层
牛逼牛逼~~~回复可见
回复

使用道具 举报

0

主题

10

帖子

76

积分

小码

Rank: 2

积分
76
发表于 2018-3-5 22:41:04 | 显示全部楼层


牛逼牛逼~~~回复可见
回复

使用道具 举报

1

主题

37

帖子

384

积分

码工

Rank: 3Rank: 3

积分
384
发表于 2018-3-6 00:27:01 | 显示全部楼层
回复

使用道具 举报

1

主题

15

帖子

76

积分

小码

Rank: 2

积分
76
发表于 2018-3-10 22:05:18 | 显示全部楼层
牛逼牛逼~~~回复可见
回复

使用道具 举报

0

主题

16

帖子

92

积分

小码

Rank: 2

积分
92
发表于 2018-3-11 05:31:17 | 显示全部楼层
6666666666666666
回复

使用道具 举报

0

主题

9

帖子

66

积分

小码

Rank: 2

积分
66
发表于 2018-3-13 17:48:21 | 显示全部楼层

佩服5连
回复

使用道具 举报

0

主题

13

帖子

72

积分

小码

Rank: 2

积分
72
发表于 2018-3-13 18:24:04 | 显示全部楼层
牛逼牛逼~~~回复可见牛逼牛逼~~~回复可见牛逼牛逼~~~回复可见
回复

使用道具 举报

4

主题

23

帖子

187

积分

小码

Rank: 2

积分
187
发表于 2018-3-13 19:30:26 | 显示全部楼层
感谢分享O(∩_∩)O谢谢
回复

使用道具 举报

1

主题

15

帖子

84

积分

小码

Rank: 2

积分
84
发表于 2018-3-13 20:38:23 | 显示全部楼层
学习学习
回复

使用道具 举报

2

主题

4

帖子

22

积分

光头

Rank: 1

积分
22
发表于 2018-3-17 02:06:07 | 显示全部楼层
爱你哦很不错 我喜欢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|关于我们|XXTouch Inc. ( 湘ICP备15002722号-2 )

GMT+8, 2018-5-25 09:26

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表