精灵点点基础教程7 -- 自建窗体
2015-09-06 10:07
357 查看
摘要:点点的界面渲染引擎是基于DUILIB的,窗体的界面文件是XML文件。为了便于说明,需要您先下载精灵点点v0.8.0.0以上的安装版,安装完成后,点击【开始菜单】-【所有程序】-【精灵点点】-【脚本目录】 打开脚本目录,打开后可以找到一个 【自建窗体.js】的文件同时还可以找到一个【_自建窗体】的文件夹,这是点点的命名约定,如果脚本需要引用其它的脚本或者需要使用其它的文件,就要将这些文件放在以【_+脚本名】的文件夹里
精灵点点简明教程2 -- 基本操作
精灵点点简明教程3 -- 录制脚本
精灵点点简明教程4 -- 编辑与调试脚本
精灵点点简明教程5 -- 编写扩展程序
精灵点点简明教程6 -- 发布脚本
精灵点点简明教程7 -- 自建窗体
现在打开【_自建窗体】目录,可以看到里面有两个文件
【ACWindowTest.xml】和【sys_btn_close.png】
其中【sys_btn_close.png】是窗体关闭按钮用到的图片。
【ACWindowTest.xml】就是界面文件了,我们打开看看。
具体的说明到时候专门开专题详解,现在大家先简单自己理解一下。显示出来是这样的。
界面文件除了手写也可以使用【UIDesigner】工具进行设计。下载地址 http://www.moni.me/tools/UIDesigner.zip ,但版本过老,BUG过多,不建议使用。
界面文件设计好了,下一步就是写脚本使其显示,并且实现界面上的按钮事件了。
这时候打开精灵点点,有个【自建窗体.js】打开
仔细看注释,然后运行一下脚本,参看运行结果来看脚本的实现,其实很容易 。
有了自建窗体后,发布脚本时如果不想内置的脚本引导界面再出来,在发布时只须将【直接执行】勾选即可,这样发布的脚本就不会在执行的时候出现那个有简介信息的引导界面了。
当然现在窗体功能只是初步支持,后续将会进一步支持。
目录
精灵点点简明教程1 -- 下载与安装精灵点点简明教程2 -- 基本操作
精灵点点简明教程3 -- 录制脚本
精灵点点简明教程4 -- 编辑与调试脚本
精灵点点简明教程5 -- 编写扩展程序
精灵点点简明教程6 -- 发布脚本
精灵点点简明教程7 -- 自建窗体
自建窗体
点点的界面渲染引擎是基于DUILIB的,窗体的界面文件是XML文件。为了便于说明,需要您先下载精灵点点v0.8.0.0以上的安装版,安装完成后,点击【开始菜单】-【所有程序】-【精灵点点】-【脚本目录】 打开脚本目录,打开后可以找到一个 【自建窗体.js】的文件同时还可以找到一个【_自建窗体】的文件夹,这是点点的命名约定,如果脚本需要引用其它的脚本或者需要使用其它的文件,就要将这些文件放在以【_+脚本名】的文件夹里 ,这样在发布脚本时点点会连同这个目录一起发布 。现在打开【_自建窗体】目录,可以看到里面有两个文件
【ACWindowTest.xml】和【sys_btn_close.png】
其中【sys_btn_close.png】是窗体关闭按钮用到的图片。
【ACWindowTest.xml】就是界面文件了,我们打开看看。
<?xml version="1.0" encoding="UTF-8"?> <Window size="300,200" caption="0,0,0,28"> <VerticalLayout name="VerticalLayoutUI1" bkcolor="#FFEFEFEF" bkcolor2="#FFEFEFEF" bordersize="1" bordercolor="#FF25AB5E" focusbordercolor="#FF25AB5E" inset="1,0,1,0"> <HorizontalLayout name="HorizontalLayoutUI1" bkcolor="#FF25AB5E" pos="0,0,0,28" > <HorizontalLayout name="HorizontalLayoutUI2"> <Text name="TextUI1" text="测试窗体-计算器" pos="8,8,200,28" textcolor="#ffffffff" float="true" font="5"/> </HorizontalLayout> <HorizontalLayout name="HorizontalLayoutUI3" bkcolor="#FF25AB5E" pos="0,0,112,0" width="27" inset="0,1,0,0"> <Button name="closebtn" class="symbtn" maxheight="22" maxwidth="27" align="center" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" normalimage="file='sys_btn_close.png' source='0,0,27,22'" hotimage="file='sys_btn_close.png' source='28,0,55,22'" pushedimage="file='sys_btn_close.png' source='56,0,83,22'" /> </HorizontalLayout> </HorizontalLayout> <HorizontalLayout height="6"/> <HorizontalLayout name="HorizontalLayoutUI4" height="32" valign="middle"> <Label name="" height="28" /> <Edit name="edtx" height="28" width="40" text="1"/> <Label name="" height="28" width="40" text="+" align="center"/> <Edit name="edty" height="28" width="40" text="1"/> <Label name="" height="28" width="40" text="=" align="center"/> <Edit name="edtr" height="28" width="40"/> <Label name="" height="28" /> </HorizontalLayout> <HorizontalLayout name="HorizontalLayoutUI4" height="30"> <Label name=""/> <Button text=" 确定 " name="btnConfirm" width="48" /> <Label name=""/> </HorizontalLayout> </VerticalLayout> </Window>
具体的说明到时候专门开专题详解,现在大家先简单自己理解一下。显示出来是这样的。
界面文件除了手写也可以使用【UIDesigner】工具进行设计。下载地址 http://www.moni.me/tools/UIDesigner.zip ,但版本过老,BUG过多,不建议使用。
界面文件设计好了,下一步就是写脚本使其显示,并且实现界面上的按钮事件了。
这时候打开精灵点点,有个【自建窗体.js】打开
// 构造一个窗体类 其中xmlName为界面文件的名称 function MyWindow(xmlName){ // 这个窗体类必须继承自ACWindow 以下两行就是实现继承 ACWindow.call(this,xmlName); this.prototype = ACWindow.prototype; // 这个类必须有一个this.init的方法 this.init = function(){ // 在这个方法体里实现一些初始化操作,以及窗体内控件的事件绑定 // 获得窗体内名为btnConfirm的按钮控件(参看界面文件 确定按钮) var btnConfirm = this.findControl('btnConfirm'); // $等同于this.findControl // 获取第一个文本框的对象 var edtx = $('edtx') // 获取第二个文本框的对象 var edty = $('edty'); // 获取第三个文件框的对象 var edtr = $('edtr'); // 绑定单击事件 btnConfirm.click(function(){ // 获取第一个文本框内的文本内容并转化为整型 var x = parseInt(edtx.getAttribute('text')); // 获取第二个文本框内的文本内容并转化为整型 var y = parseInt(edty.getAttribute('text')); // 相加 var r = x + y; // 将结果写到第三个文本框内 edtr.setAttribute('text',r); }); } } // 创建一个窗体实例 界面文件为ACWindowTest.xml var win = new MyWindow('ACWindowTest.xml'); // 居中显示 win.centerWindow(); // 以模态对话框显示,至此界面就出来了 win.showModal(); // 在前两个文本框内输入整数,然后点击【确定】按钮,会自动算起结果,并显示在第三个文本框内
仔细看注释,然后运行一下脚本,参看运行结果来看脚本的实现,其实很容易 。
有了自建窗体后,发布脚本时如果不想内置的脚本引导界面再出来,在发布时只须将【直接执行】勾选即可,这样发布的脚本就不会在执行的时候出现那个有简介信息的引导界面了。
当然现在窗体功能只是初步支持,后续将会进一步支持。
相关文章推荐
- 当程序崩溃的时候怎么办 Part-2
- 酷派+乐视能否再造一个“苹果生态”
- C# 抽象类和抽象方法详解
- Linux 中open系统调用实现原理 2012-11-29 23:03:48 http://blog.chinaunix.net/uid-25968088-id-3426026.html
- VC中编写DLL的函数声明问题
- 英文简历
- linux Oops和Panic关系 .
- uva12325(greedy)
- Storm安装
- HDU 1711
- jQuery对象与dom对象的区别与相互转换
- iOS 小经验:UIAnimation空对象导致crash
- ubuntu下svn使用指南
- 如果获取apk的总方法数
- 平凡人白日梦,云计算圆我梦!
- PHP基本数据类型
- Unity 2D游戏开发教程之2D游戏的运行效果
- POJ 3667 Hotel(线段树区间合并)
- [leetcode]51 Delete Node in a Linked List
- python中json到dict转换