您的位置:首页 > 产品设计 > UI/UE

Haxe UI框架StablexUI的使用备忘与心得(一)

2013-09-13 14:20 573 查看
这一节先来说说StablexUI的基本方面。

安装与使用,在官方文档里Getting Started一章里写的很清楚,这里就不展开了,简单总结来说:

* StablexUI依赖于actuate缓动库和OpenFL,因此在项目的nmml文件里不要忘了添加actuate, openfl, stablexui这三个haxelib

* 开始载入任何一个xml界面文件之前,要首先调用UIBuilder.init()方法,通常可把此方法调用放在程序的入口处

这里着重介绍一下StablexUI的几个核心类。

ru.stablex.ui.UIBuilder

是StablexUI的核心工具类,其角色为所有控件及相关上下文的创建者和管理者

这个类兼有多个宏方法和普通静态方法,也就是说它有编译期和运行期两个角色。

宏方法:

saveCodeTo: 纯测试用方法,定义一个路径,把从xml产生的haxe代码输出到此路径下,供开发者查看与除错

init: 初始化UI引擎;可选的参数为一个xml路径,此xml文件用来定义控件默认属性,类似web开发中的css文件,但StablexUI中仅能有一个默认属性定义文件

buildFn: 接受一个xml文件路径为参数,生成对应的控件创建方法;注意,返回值为一个工厂方法,而非直接返回控件对象。

regEvent: 注册额外的事件,注册的事件响应方法可以在xml中用on-xxx的形式来定义。此方法必须在init方法之前调用。

regClass: 注册额外的类,注册的类可以在xml中用类名引用(而非包名+类名的全名)。此方法必须在init方法之前调用。

regSkins: 注册皮肤类。

createClass: 根据xml创建一个新控件类。

运行期方法:

create(Class<Widget>, ?properties: Dynamic): 创建一个指定类型的控件,并用properties中的值进行初始化。通过Haxe强大的泛型和类型推导机制,这个类返回的直接就是给定类型的控件对象,不必再进行cast。比如:

var btn = UIBuilder.create(Button, { text: "OK" });
btn.ico.src = "res/button.png"; // 合法代码,因为通过类型推导得出,$type(btn) = Button[code]

get(id: String): 获得给定id的控件对象,返回的控件为Widget类型。

getAs(id: String, Class<Widget>): 获得给定id的控件对象,并自动cast为给定的类型。比如:

var btn = UIBuilder.getAs("myButton", Button);


其它运行期方法不太常用,这里暂不介绍了。

ru.stablex.ui.RTXml

实现运行期解析xml并创建UI。此类目前我还没有用到过,这里就不展开了。

ru.stablex.TweenSprite

Widget控件类的超类,基于Flash的Sprite类,主要是覆盖了Sprite类的事件处理机制,以及通过Actuate库为控件加入了缓动(tween)功能。

ru.stablex.ui.widgets.Widget

所有StablexUI控件类的超类,可基于它编写新的控件,也可用作通用的容器,和Box容器比较,Widget不会自动对子控件进行位置调整,而是需要子控件自行定义位置大小,使用起来比较灵活。

Widget比标准的Sprite类添加了一些核心机制,使得Widget适合用于UI构建,包括:

* 定义了浮点数值属性w, h, top, left, right, bottom,它们重新定义了以像素为单位的控件绝对位置和大小,其中right/bottom是控件右/下边界相对于父控件右/下边界的距离,使用起来很方便。

* 定义了浮点数值属性widthPt, heightPt, topPt, leftPt, rightPt, bottomPt,它们定义了控件的相对位置和大小,即相对于父控件宽和高的百分比值。在很多情况下非常方便,比如widthPt="100",意味着和父控件宽度一致,且通过内置的Resize监听器,父控件改变尺寸时,子控件可自动重新计算自身的实际像素尺寸。另外rightPt/bottomPt和right/bottom类似,但是其单位也是父控件的宽/高的百分比数值。

* 定义了字符串属性id,此id和Sprite的name不同,UIBuilder确保其唯一性;可以通过UIBuilder.get(id)或UIBuilder.getAs(id, Class<Widget>)的方式来快速的获取已创建控件对象。

* 定义了字符串属性defaults属性,类似于HTML元素的class属性,用于定义控件的默认属性,可以使用字符串ID来引用外部defaults文件定义中的默认控件属性;如果有很多控件右类似的外观属性,则使用defaults非常方便。另外,官方文档未提到的是,defaults和HTML的class属性一样,可接受多个ID,用逗号分隔即可。

* 定义了skin和skinName属性,用于定义控件的皮肤,其中skinName类似defaults属性,用于引用外部预定义皮肤。StablexUI中自带若干常用的Skin类。

* 定义了layout布局属性,用于自动调整子控件位置。默认情况无布局,这种情况下Widget不负责自动调整子控件位置。StablexUI自带行布局和列布局,但通常更方便的是使用HBox,VBox来实现行、列布局。

* 覆盖了TweenSprite的free方法,用于释放本控件的相关资源和引用,亦可根据参数递归的调用其所有子控件的free方法。这个方法非常重要的是,其解除了UIBuilder对控件对象的引用,并释放了对唯一ID的占用,这对一个控件在多个不同界面被多次引用的场景很有必要。

* 定义了CREATE, RESIZE, FREE三种事件,分别在控件创建后,控件尺寸改变后,控件被释放后被自动发出。

ru.stablex.ui.skins.Skin

皮肤类,和一般软件中换肤功能中的皮肤概念不太相同,StablexUI的皮肤实际上更加基础,皮肤实际上就是定义控件自身的绘制方式。

也可以在外部xml中预定义若干皮肤,并设定其属性,然后在Widget中可以用skinName来引用预定义的皮肤,和defaults不同的是,你可以有多个皮肤预定义xml文件,用UIBuilder.regSkins来加载。

Skin本身是个抽象基类,直接使用它没有意义,不过StablexUI中自带了若干种常用皮肤类,包括:

(圆角)矩形,填充矩形,渐变色矩形,位图,三宫格位图,九宫格位图,瓦片位图填充,复合皮肤等。

以后会在单独的章节逐个介绍。

ru.stablex.ui.layouts.Layout

布局类,用来自动调整子控件的位置。

StablexUI中自带两种布局,即Row, Column,行布局和列布局。可以使用绝对像素单位、百分比单位及剩余空间的比例等来灵活的定位。

但通常更常用的方法是直接采用HBox和VBox来实现类似机制。

ru.stablex.ui.Dnd

用于支持拖拽,即Drag & Drop的缩写,我目前尚未系统研究此类,暂不展开。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: