环境搭建好,就应该来检验一下了。下面让我们来编写一个简单的Titanium应用(适用于iOS和Android)。这个app的主要功能是用户可以输入和查看他们喜欢的书籍,主要涉及以下几个方面:
- Alloy framework
- 使用Backbone模型和集合
- 在TableView中显示数据
- 不同平台下使用不同的资源和风格
- 事件处理
创建一个新项目
开始我们需要创建一个Alloy项目,步骤如下:
- 在Titanium Studio中,选择File > New > Mobile App Project。
- 选择Default Alloy Project类型并点击Next。
- 接下来填写相关信息,点击ok即可
生成的项目文件结构如下:
创建数据模型
由于这个app的核心是存储用户的数据,所以我们需要用到数据模型,Alloy框架使用BackBone来提供这个功能,具体BackBone是什么可以自行百度一下。
- 在项目名称上点右键然后选择New > Alloy Model.
- 填写相关内容,本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下的字体不够清晰,这就说明需要针对不同的平台来进行改进,这个在后面会讲到。