Titanium的MVC框架"Alloy"的介绍

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

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

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

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

[b]【安装】[/b]
Alloy采用npm发布（前提是需要Node.JS NPM的环境）通过下面的命令来安装：
[quote][sudo] npm install -g alloy[/quote]

也可以先克隆到本地，然后再安装
[quote]git clone https://github.com/appcelerator/alloy.git[/quote]
[quote][sudo] npm install -g .[/quote]

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

[quote]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[/quote]

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

[b]【目录构成】[/b]
[list][*]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.[/list]
[img]http://dl.iteye.com/upload/attachment/0070/9511/b621edc1-e8e7-3eca-b191-308caf3b13bc.gif[/img]

[b]主要的几个文件：[/b]

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

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

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

（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">

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

(1)Titanium Studio的话，通过plugins/ti.alloy来运行
(2)CLI的话
通过以下命令运行
[quote]alloy compile
alloy run . iphone (目前只支持iphone)[/quote]

通过命令行生成代码：
[quote]alloy generate view <name>
alloy generate controller <name>
alloy generate model <name> [column_name:type, ...]
alloy generate migration <name>
alloy generate widget <name>[/quote]

详细可以参考[url=https://github.com/appcelerator/alloy]https://github.com/appcelerator/alloy[/url]

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