编写第一个Titanium App（1）

        环境搭建好，就应该来检验一下了。下面让我们来编写一个简单的Titanium应用（适用于iOS和Android）。这个app的主要功能是用户可以输入和查看他们喜欢的书籍，主要涉及以下几个方面：

• Alloy framework
• 使用Backbone模型和集合
• 在TableView中显示数据
• 不同平台下使用不同的资源和风格
• 事件处理

此app的界面如下：

创建一个新项目

开始我们需要创建一个Alloy项目，步骤如下：

1. 在Titanium Studio中，选择File > New > Mobile App Project。
2. 选择Default Alloy Project类型并点击Next。
3. 接下来填写相关信息，点击ok即可

生成的项目文件结构如下：

创建数据模型

由于这个app的核心是存储用户的数据，所以我们需要用到数据模型，Alloy框架使用BackBone来提供这个功能，具体BackBone是什么可以自行百度一下。

1. 在项目名称上点右键然后选择New > Alloy Model.
2. 填写相关内容，本app中书籍只有两个属性，书名以及作者。然后点击OK。

这会在app/models目录下生成一个book.js文件，这个文件描述了刚刚创建的模型：

<span style="font-size:14px;">exports.definition = {
    config: {
        columns: {
 "title": "text",
 "author": "text"
        },
        adapter: {
            type: "sql",
            collection_name: "books"
        }
    ...
}</span>

使用模型

刚刚定义了一个模型，现在我们来使用它。

打开controllers/index.js文件，删除自动生成的doClick函数。然后引用集合：

<span style="font-size:14px;">var myBooks = Alloy.Collections.books;</span>

创建一个新的对象：

<span style="font-size:14px;">var book = Alloy.createModel('books', { 
   title : 'Great Expectations', 
   author: 'Charles Dickens' 
});</span>

将这个对象添加到集合中并且存到数据库：

<span style="font-size:14px;">myBooks.add(book); 
book.save();</span>

现在我们的app就已经有了一些数据了，接下来要将它们显示出来。

显示数据

打开views/index.xml，删除原有代码，添加如下代码：

<span style="font-size:14px;"><Alloy>
    <Collection src="books"/>
    <Window class="container">
        <TableView dataCollection="books">
            <TableViewRow title="{title}" author="{author}"></TableViewRow>
        </TableView>
    </Window>
</Alloy>  </span>

其中<Collection>元素中的src属性就是我们创建的集合名字，<TableView>的dataCollection属性就是要显示的集合，然后将每本书的title和author属性分配给<TableViewRow>中的title和author属性，<TableViewRow>元素会根据books集合中的元素数量来重复显示。

接下来就可以在模拟器中运行这个app了。

默认的Android模拟器是titanium_1_WVGA800，如果安装了别的AVD则可以选择其它的。

没有错误的话，运行效果是这样的：

从中我们可以看到一些问题，如iPhone顶部的状态栏被遮挡了，android下的字体不够清晰，这就说明需要针对不同的平台来进行改进，这个在后面会讲到。