守望者--AIR技术交流

标题: AS3跨平台极速UI框架Cactus UI（一） [打印本页]

---

作者: 破晓    时间: 2015-2-6 16:58
标题: AS3跨平台极速UI框架Cactus UI（一）

本系列文章会向大家分享本人近年来制作Flash UI的一些经验，以及各种不同方式制作Flash UI的方法对比，最后实现一套可以在PC，Android，IOS上通用的UI框架，且该框架已经在若干线上项目中使用。

先来看一个要实现的UI效果图

我并不想谈这个界面如此之简陋，重点是想说实现这个界面的代码，如下：

1. [size=1em][Bind]
   
2. public var lstList = new PList();
   
3. [Bind]
   
4. public var lst2List = new PList("SomeStyle");
   

复制代码

没错，实现AS3的UI代码就是如此简单。一行代码一个控件，连addChild都不用写，而且就连这两行代码也是自动生成。这就是我想重点介绍的Cactus UI。
我所经历的各种AS3制作UI的办法

• 坐标法
  这是我刚刚转行到Flash时的办法，即由美术设计人员给出“效果图”，并将必要的子元件给出，程序猿按照效果图上的坐标将子元件的坐标，样式也都写死在代码里就行了。
  优点：简单，直观。
  缺点：程序猿很累，常常为了几个像素的位置改来改去，实际效果很可能与美术设计人员期望的不一致。
• 传统Flash UI
  即设计师在Flash IDE中摆放好元件，程序猿将元件逐个addChild到显示列表中。
  优点：相信这是多数刚入行不久，制作中小型项目的办法。也还算直观吧。
  缺点：所有Flash IDE里的元件都需要手动addChild进去，这是一个重复的工作。制作大型项目，缺少必要的控件支持。
• 使用Flex，ASwing等UI框架
  Flex就不用说了，强大但复杂，如果不是企业型项目，就牛刀杀鸡了。
  ASwing等项目好是好，同样存在一个学习成本的问题，而且缺乏通用的编辑器支持，遇到了Bug多数情况下只能被动等待。
  优点：网上随便搜搜一大堆
  缺点：学习成本，bug解决，难以满足设计师千奇百怪的UI风格
• 自己写UI框架并制作编辑器
  这是我近两年遇到的不少团队和大牛的想法，但基本最终都失败了。其实原因很简单，就是“重复发明轮子”。如果你想要轻量级的UI框架，minicomps就好了，复杂点的ASwing，Flex就好了，编辑器的话Flash IDE，Flash Builder都有啊。就怕什么功能都想要还想保持轻量，My God，做这种东西只能是在浪费老板的银子和自己宝贵的时间（还费电）。
• 生成UI代码
  见过一个项目的UI代码很整齐，因为都是自动生成的。这样做确实省了不少力，也给了我一些启发，但我见过的那个项目只是节省了手写代码的体力活，并没有在框架上做什么工作。
  

上面吐槽这么多，终于要说到我制作的Cactus UI的特点了——

• 绑定
  只需要一行代码就能够和素材中的元件绑定。比如，素材中有一个实例名称为btnClose的按钮，那么在代码中我们只需要这么写
  [Bind]
  public var btnClose:PButton;
• 控件化
  像上面用到的PButton一样，Cactus UI框架实现了各种常用的控件，从文本框，按钮到列表，滚动条，应有尽有。
• 生成代码
  使用JSFL生成UI代码。代码本身就少，生成代码是为了减少手写出错，甚至是产品和美术设计师都能够生成代码。
• 多样性
  按钮必须是方的么？不一定，美术画成什么样就是什么样。因为空间是和素材绑定的，而不是程序绘制出来的，所以样式全部依靠美术素材。
• 即时性
  美术设计师不再抱怨看不到效果，只要修改FLA文件并导出，运行程序就能看到修改后的效果。程序猿不用参与UI的位置，大小，替换等调整。美术也高兴，程序也高兴，何乐而不为？（也曾导致美术在加班，而程序猿闲的没事干。。。）当然，这一点对美术的要求也许比较高，美术的理解能力直接决定了他能否适应这个特性。
• 支持移动平台
  现在移动太火了，Cactus UI也得与时俱进，加入了移动设备的支持。简单的说，只写一套代码，无论你分辨率是480*800，还是1024*768，还是各种山寨机的分辨率，都能行。
  

不得不说的是Cactus UI的适用性，上面吹了这么多特性，那么缺点和局限性也一定是有的：

• 一定得有美术设计师，除非你认为自己绘画水平足够好。没有美术设计师的同行，还是请用ASwing等有默认样式的框架吧。这一点也说明Cactus UI更适合于制作定制UI，习惯使用传统规范的UI的项目，不建议使用Cactus UI。
• 素材必须是Fla导出的swf，那些习惯于位图序列的大牛们可能要失望了。
• 学习成本，是缺点也是优点。至少我在公司带的新员工，半个小时就知道怎么用了，做一个功能后上手就很熟练了。
• 对移动设备目前不是无限度的支持，要想支持所有或者多数分辨率的设备，前提就是要提前规划好需求，否则一个按钮都可能比手机屏幕大，再强大的框架也办不到。
• Bug，经过多个项目的使用，bug已经不多了。目前在台湾Facebook，一个DAU数十万的游戏也在用，效果还不错。
• View层需要继承框架的基类。
• 不适用于企业级开发，但非常适用于定制页面的大中型游戏，小游戏UI以及工期紧张的项目。说白了，就是快，简单，效率高。
  

原文链接：http://www.flbuddy.com/blog/?cat=14&paged=3

---

作者: 破晓    时间: 2015-2-6 17:02
开始使用Cactus库和项目代码

一 如何获得稳定版本

如果只想获得代码的某一版本，无意获得即时的更新，无意提交代码，只需访问如下链接，下载并解压缩，按照项目配置方法即可使用。

二 如何获得最新代码

全部代码分为了两部分，CactusLib为开源项目并在github上托管，CactusCode为个人代码不开源（不适用多人合作开发），放在百度网盘上。

在所有工作之前，请务在某个目录下建立3个文件夹，命名按照下图，其中

cactus：百度同步盘的内容，主要存放项目远程库，美术素材，其他必须文件。

cactuslib：开源代码（合作开发者只用建立这一个文件夹即可）

cactuscode：从远程库中clone出来的未开源代码(不是必须的代码)

[attach]838[/attach]

1. 获得开源CactusLib注册一个github账户，并在本机安装git和tortoisegit。将远程库（https://github.com/cactusgame/core）克隆至cactuslib文件夹。至此，恭喜你已经获得CactusLib代码。
[attach]839[/attach]
2. 获得未开源Cactus Code请安装百度同步盘，使用我们的账号，将内容同步至cactus文件夹。
[attach]840[/attach]
其中cactus.git存放的是cactus code的git远程库，在使用代码前，我们需要将此远程库的内容clone到本地某个目录。比如我使用tortoisegit将此远程库clone至cactuscode文件夹。百度同步盘只负责同步远程库，而不同步实际的代码。至此，获得全部代码，可以用命令观察两个远程库的区别。
[attach]841[/attach]
三 如何使用代码使用Flash Builder4.7将全部项目“导入已有项目”。配置“环境变量”，设置CACTUS_PATH为cactuslib目录。注意，此设置是在工作空间的首选项中进行，不要在项目中设置。
[attach]842[/attach]
项目目前使用的是AIR3.8SDK，全部使用ASC2编译最后，由于Flash Builder4.7使用了ASC2，默认不能选择sdk，对Embed的处理也和ASC1不一样。为了不改代码，hack一下（我已经修改好了，所以不需要各位改），找到报错项目的.actionScriptProperties文件，搜索“useFlashSDK”，将true改为false。回到项目的属性中查看，又可以修改SDK版本啦！因为Adobe是个懒得出名的公司，猜他们不会将过去的功能删除~ 四 项目间关系lib_cactus_component: 无依赖，编译出的swc文件包含多语言等界面控件。
lib_cactus : 基础库，依赖于项目libs文件夹下的库。包含基础算法，图，AI，行为，位图缓存，事件调度，工具等代码。
lib_cactus_resource : 加载库，依赖于项目libs文件夹下的库和lib_cactus。
lib_cactus_ui ：ui2.0库，依赖于项目libs文件夹下的库和lib_cactus。
以上库项目，默认的输出路径在lib_swcs文件夹下，其他项目依赖该文件夹即可，务必注意Flash Builder的“链接的资源的设置”。cactus_ui : cactus ui2.0控件相关。
pr_horse_mb ：神马向前冲，一个跨平台（PC，Android，IOS）适应多种屏幕的例子项目。
pr开头 具体项目
peng开头为showcase项目

本文来自：http://www.flbuddy.com/blog/?p=250

---

欢迎光临 守望者--AIR技术交流 (http://www.airmyth.com/)