MonoUI 第一步

无论再怎么强大的 UI 组件库,个人觉得都不能适应各种项目的需求。而过分依赖 UI 组建构建应用,会导致交互设计单调。Flash 有个好处就是没有自带 UI 组件,不需要停留在 WIMP 的世界,但是为了迎合各种用户习惯,往往这却成了麻烦。

构建 MonoUI 的目的,不是为了提供几个见惯不怪的又不成型的 UI 组件。而是希望借此抛砖引玉,将 Flash 开发中不被重视又缺乏交流的一个方面提出来与大家共同探讨。

First Step

使用 MonoUI 并不复杂,下面为大家介绍简单的用法。

假设现在需要一个可缩放的有纹理边框,首先可以创建一个 Panel:

var panel:Panel = new Panel(128, 128);
this.addChild(panel);

于是舞台上会出现一个黑线框。

将需要的纹理素材,通过编辑器整合到一张位图中。这里使用 TexturePacker 导出 Sparrow 格式的精灵表(推荐将素材文件命名遵照一定的规范便于往后的操作)

导出后会得到一个 PNG 文件和一个 XML 文件,XML 文件定义了每个纹理小块的区域,并且对应 id 以原文件名命名。将这 2 个文件放到程序项目的资源目录(例如目录为 resource)。

接着继续编写代码:

var skinning:SkinningCommand = new SkinningCommand("resource/ui.xml");
panel.setStyleAsync("background-image", skinning.getClip("face"));
panel.setStyle("background-9grid", new Rectangle(4, 4, 14, 14));
skinning.execute();

以上代码的意思是使用精灵表作为 UI 组件的皮肤,定义 panel 的背景图片为 face.png,缩放网格内矩形区域为 (x:4px, y:4px, width:14px, height:14px)。调用 skinning.execute() 之后即开始加载精灵表,加载完成后自动重绘 panel 的皮肤。

运行代码之后,会发现 panel 会从黑线框变成有皮肤。

此外还可以通过设置 panel 的 width,height 或 setSize(),随意改变 panel 的大小,而且边缘区域保持相同的宽度。

这就是使用 MonoUI 的一个简单的流程。

Update 2012-05-25

接上,动态更换皮肤的方法:

假设另一套皮肤资源为 ui2.xml, ui2.png,只需修改 skinning 的 URL,然后再调用一次 execute() 方法即可。

skinning.url = "resource/ui2.xml";
skinning.execute();

Component Set

目前已实现的组件有:

Canvas 画布,填充背景用
Panel 面板,一般作为可缩放的外框
Button 普通按钮,单状态按钮
ToggleButton 切换按钮,双状态按钮
Label 文本标签,直接继承 TextField
TextInput 文本输入框
TextArea 文本域,采用 FTE
ProgressBar 进度条
HSlider/VSlider 水平 / 垂直滑块
List 列表
ComboBox 组合框

未来版本将会适当扩充组件集。但个人推荐的解决方案是,使用者应该根据相应需求自行实现合适的 UI 组件。今后将会讲解实现自定 MonoUI 组件的方法。


发布页
下载地址
SVN 地址
演示地址


MonoUI release!

Download http://code.google.com/p/mono/downloads/list
Source svn checkout http://mono.googlecode.com/svn/trunk/
Demo http://dreamana.com/lab/mono/demo/
Tutorial First Step

MonoUI is a simple and extensible UI framework for ActionScript3.

The basic structure of MonoUI was inspired by Minimalcomps.

Features:

Scale9Gird image support
Simple styling method
Runtime skinning
Skinning from spritesheet exported from TexturePacker (like CSS Sprite)
Custom loading order (think about LazyLoad)
Simplily API via factory pattern (coming soon…)