Titanium的MVC框架"Alloy"的介绍

Alloy(合金)是Appcelerator公司为Titanium开发的一个新的框架，采用MVC结构，内部代码编号“ZipTi”。从整体上看更类似于Ruby on Rails（代码构成，命令行操作等）。

源码依旧托管在GitHub：
https://github.com/appcelerator/alloy

【局限性】
（１）只能应用于OSX
（２）目前的状态是Unstable

【目的】
（１）提高开发效率Productivity
（２）提高可维护性Maintainability
（３）确保最佳实战Best Practices

【安装】
Alloy采用npm发布（前提是需要Node.JS NPM的环境）通过下面的命令来安装：

引用

[sudo] npm install -g alloy

也可以先克隆到本地，然后再安装

引用

git clone https://github.com/appcelerator/alloy.git

引用

[sudo] npm install -g .

【创建app】
先通过Titanium Studio，titanium.py，Titanium CLI创建一个项目，然后在控制台，进入项目的根目录输入以下命令：

引用

alloy new .
       .__  .__
_____  |  | |  |   ____ ___.__.
\__  \ |  | |  |  /  _ <   |  |
/ __ \|  |_|  |_(  <_> )___  |
(____  /____/____/\____// ____|
     \/                 \/
Alloy by Appcelerator. The MVC app framework for Titanium.
2012-07-18 13:44:20 -- [DEBUG] Creating directory: plugins
2012-07-18 13:44:20 -- [DEBUG] Creating directory: plugins/ti.alloy
2012-07-18 13:44:20 -- [INFO ] Deployed ti.alloy plugin to plugins/ti.alloy/plugin.py
2012-07-18 13:44:20 -- [INFO ] Installed 'ti.alloy' plugin to tiapp.xml
2012-07-18 13:44:20 -- [INFO ] Generated new project at: app

创建成功后，就会作成一个叫app的文件夹，其中包含了alloy app的骨架代码。

【目录构成】

• views - this is where your views should go in the format view.xml
• controllers - this is where your controllers should go in the format view.js.
• styles - this is where your view styling logic should go in the format view.json.
• models - this is where your model files will go.
• assets - this is where you should put your image assets and other misc. files that you want copied into the Resources directory.
• migrations - this is where your database migration files will be stored.
• lib - this is where you should put application specific files, typically in the CommonJS format.
• vendor - this is where you should put any vendor specific modules, typically in the CommonJS format. Do not place native modules in this folder.
• config - Contains application specific config.

主要的几个文件：

（1）app/controllers/index.js
Controller ：主要是事件处理，业务逻辑

$.t.on('click',function(e) {
    alert($.t.text);
});
$.index.open();

• $ ----Alloy包装对象别名
• $.t ---获取ID为"t"的对象
• on("事件名", "回调函数") ---等价于addEventListener函数

（2）app/styles/index.json
Style：类似于CSS，设置UI的颜色，大小等

{
    ".container": {
        "backgroundColor":"white"
    },
    "Label": {
        "width": Ti.UI.SIZE,
        "height": Ti.UI.SIZE,
        "color": "#000"
    }
}

（3）app/views/index.xml
View：类似于HTML，设置UI布局

<Window class="container">
    <Label id="t">Hello, World</Label>
    <Button id="b">Click me</Button>
</Window>

采用XML定义页面UI控件以及从属关系
Window = Ti.UI.Window
Label = Ti.UI.Label
XML中定义的属性就是控件的初始参数值。

如果使用Ti.UI以外的View，比如MapView的话，使用一下方法：
<View ns="Ti.Map" id="map">

【开发】
可以通过Titanium Studio来开发，也可以使用控制台。

(1)Titanium Studio的话，通过plugins/ti.alloy来运行
(2)CLI的话
通过以下命令运行

引用

alloy compile
alloy run . iphone (目前只支持iphone)

通过命令行生成代码：

引用

alloy generate view <name>
alloy generate controller <name>
alloy generate model <name> [column_name:type, ...]
alloy generate migration <name>
alloy generate widget <name>

详细可以参考https://github.com/appcelerator/alloy

官方发布的MVC框架，构成上是否合理也有待于广大Ti开发者的验证。不过如果布局采用XML定义的话，那么可视化开发工具将不会太遥远了！。

评论

1 楼 jsnjlc 2014-01-09  

刚开始玩Titanium，看了你的文章了解到Alloy到底是什么，谢谢了。