编写第一个Titanium App（2）

接下来我们继续完善这个app的功能。

新建Alloy controller

一个Alloy controller实际上包含下面三个部分：

• 视图（xml 文件）
• Javascript 控制器
• 样式文件

在项目名称上点击右键，选择New > Alloy Controller，controller名称填bookdetails，这会生成下面的文件：

• controllers/bookdetails.js
• views/bookdetails.xml
• styles/bookdetail.tss

在views/bookdetails.xml文件中添加如下代码，其实就是在一个窗口中增加两个label来显示书名和作者：

<Alloy>    <Window class="container">       <Label id="titleLabel"></Label>      <Label id="authorLabel"></Label>    </Window> </Alloy>

打开styles/bookdetails.tss文件，添加代码：

".container" : {    backgroundColor: 'white' }

这跟css文件相似。

显示bookdetails页面

打开views/index.xml文件，为<TableViewRow>元素增加onClick属性，并将其设为showBook

<TableViewRow title="{title}" author="{author}" onClick="showBook"></TableViewRow></span>

这样当点击表格的某一行时，就会显示bookdetail页面，
打开controllers/index.js，增加一个函数showBook()并且有一个名为event的参数。event中包含了被选中书籍的信息，将这些信息通过参数传给bookdetails controller中：

var args = arguments[0] || {}function showBook(event) {    var selectedBook = event.source;    var args = {        title: selectedBook.title,        author: selectedBook.author    };    var bookview = Alloy.createController("bookdetails", args).getView();    bookview.open();}   

如果这个时候运行代码，并且点击书名进入bookdetails页面，会发现两个label重叠在一起了，所以我们还需要对它们进行排版。

更新views/bookdetails.xml中的代码，将label包含在一个view中并且将layout属性设为verticle，这个两个label就会数值排列：

<Alloy>    <Window class="container">        <View layout="vertical">            <Label id="titleLabel"></Label>            <Label id="authorLabel"></Label>        </View>    </Window></Alloy>

并在styles/bookdetails.tss中添加样式：

"#titleLabel": {    font: {        fontSize: '30'    },    left: '10'},"#authorLabel": {    font: {        fontSize: '20'    },    left: '10'}

不同平台下的页面导航

       此时分别在iOS和Android模拟器中运行代码，我们会发现，在iOS下返回不到前一个页面，而android下因为有物理返回键所以可以直接返回。所以针对不同的平台我们还要做不同的处理。

       在views文件夹下增加ios文件夹，并且增加新文件index.xml：

<Alloy>    <Collection src="books"/>    <NavigationWindow id="navGroupWin">        <Window class="container" title="My Books">            <TableView dataCollection="books" id="bookTable">                <TableViewRow title="{title}" author="{author}" onClick="showBook"></TableViewRow>            </TableView>        </Window>    </NavigationWindow>></Alloy>

然后在controllers/index.js文件中添加代码：

if(OS_IOS) {    $.navGroupWin.open();} if (OS_ANDROID) {    $.index.open(); }

同时修改showBook函数：

function showBook(event) {    var selectedBook = event.source;var args = {        title: selectedBook.title,        author: selectedBook.author    };    var bookview = Alloy.createController("bookdetails", args).getView(); if (OS_IOS) {        $.navGroupWin.openWindow(bookview);    } if (OS_ANDROID) {        bookview.open();    }    } 

这样在iOS下也有办法可以返回到前一个页面了

不同平台下的样式

如果我们想针对不同的平台来实现不同的样式，可以这样操作，在views/index.tss文件中增加：

"TableViewRow[platform=android]": {     font: {        fontSize: '24'     },     height: '40' }

这样只有在android设备下这些样式才会起作用。

添加书籍页面

接下来就要完成添加书籍的功能了，同样，增加一个名为addbook的新的Alloy controller

在views/addbook.xml文件中增加页面元素:

<Alloy>    <Window class="container">        <View layout="vertical">            <TextField id="titleInput" hintText="Title..."></TextField>            <TextField id="authorInput" hintText="Author..."></TextField>            <Button id="insertBookButton" onClick="addBook">Add</Button>        </View>    </Window></Alloy>

styles/addbook.tss中增加样式：

".container" : {  backgroundColor: 'white'} 

controllers/addbook.js中增加代码

var myBooks = Alloy.Collections.books;var args = arguments[0] || {};$.titleInput.text = args.title || 'Default Title';$.authorInput.text = args.author || 'Default author';// Adds a new book to the collection and closes the current windowfunction addBookToCollection() {    var book = Alloy.createModel('books', {        title : $.titleInput.value,        author : $.authorInput.value //获取用户填写的数据    });    myBooks.add(book);    book.save();    $.addbook.close();} 

在iOS下添加增加书籍按钮，打开views/ios/index.xml并且在<Window>中的<TableView>后面添加<Toolbar>：

<Toolbar bottom="0">    <Items>        <Button id="add" title="Add book" onClick="addBook"/>    </Items></Toolbar></span>

在android下添加增加书籍按钮

<Menu id="menu" platform="android">    <!-- Cannot specify node text.  Use attributes only. -->    <MenuItem id="addBook"        title="Add book"        onClick="addBook"        showAsAction="Ti.Android.SHOW_AS_ACTION_IF_ROOM" /></Menu>

在controllers/index.js中增加函数addBook()，用来显示添加书籍的页面，与bookdetails页面一样，ios下要在NavigationWindow下打开：

function addBook(){    var myAddBook = Alloy.createController("addbook",{}).getView(); if (OS_IOS) {        $.navGroupWin.openWindow(myAddBook);    } if (OS_ANDROID) {        myAddBook.open();    }}

      最后整个文件的文件结构如下，完整的代码可以在这里获取。：