编写第一个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重叠在一起了,所以我们还需要对它们进行排版。

编写第一个Titanium App(2)_第1张图片

更新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();
    }
}

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


你可能感兴趣的:(编写第一个Titanium App(2))