编写第一个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 window
function 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();
    }
}

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