Sencha Touch開發(fā)實例：有動畫效果iPad的網(wǎng)站首頁
在51CTO的專題“Sencha Touch入門教程”中我們已對如何使用Sencha touch進行開發(fā)有了初步的認識。在本系列教程中，將學習如何使用Sencha Touch，開發(fā)一個適合在iPad上運行的網(wǎng)頁應用，并詳細講解其中的技巧。本文的閱讀對象為對Sencha Touch有一定基礎(chǔ)的讀者，如果讀者不熟悉相關(guān)內(nèi)容，請先查看51CTO的專題。
構(gòu)圖設(shè)計
在本教程中，將指導大家使用Sench Touch，設(shè)計一個適合在iPad上觀看的網(wǎng)站首頁，并且有一定的動畫效果，我們先來看下在模擬器上看到的最終效果圖，如下圖所示：
在這個例子中，讀者將學習到如何用Sencha Touch設(shè)計基本的ipad頁面以及其中用到的技巧以及動畫效果。下面我們開始學習的旅程。
設(shè)計頁面構(gòu)圖
首先，我們來看下我們頁面的構(gòu)圖，為了方便讀者看到清晰看到頁面的結(jié)構(gòu)，我們用不同的顏色作了標識，如下圖：
框架頁面設(shè)計
下面開始對index.html首頁進行編碼，代碼如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Newsletter</title>
- <!-- Sencha Touch CSS -->
- <link rel="stylesheet" href="../sencha-touch/resources/css/sencha-touch.css" type="text/css">
- <!-- Sencha Touch JS -->
- <script type="text/javascript" src="../sencha-touch/sencha-touch-debug.js"></script>
- <!-- Application JS -->
- <script type="text/javascript" src="index-a.js"></script>
- </head>
- <body></body>
這里，我們要把引用了Sencha touch中的CSS文件和核心文件，然后這里***步，我們把要編寫的js文件命名為index-a.js。
接者我們開始一步步編寫index-a.js,代碼如下：
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- icon: 'icon.png',
- glossOnIcon: true,
- });
首先在Ext.setup中，設(shè)置了 tabletStartupScreen屬性，這個屬性是適合在象ipad這樣的平板電腦中設(shè)置的，指定了啟動應用的界面圖片，目前只能以tablet_startup.png命名，而且大小規(guī)定為768*1024 pixels。
同時，在icon屬性中，指定了icon.png作為應用的圖標，目前也只能使用icon.png的文件名命名。而glossOnIcon屬性則指定了圖標使用的是帶光澤的效果(設(shè)置為true)。接下來，我們編寫onfunction方法，代碼如下：
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- icon: 'icon.png',
- glossOnIcon: true,
- onReady: function() {
- var header = new Ext.Panel({
- height: 35,
- style:"background-color:lightblue;",
- html: "The info button and updated on date will go here."
- });
- var masthead = new Ext.Panel({
- height: 70,
- style:"background-color:blue;",
- html: "The masthead will go here."
- });
- var sidebar = new Ext.Panel({
- flex: 1,
- style:"background-color:red;",
- html: "The sidebar information will go here.",
- });
- var stories = new Ext.Panel({
- flex: 2,
- style:"background-color:green;",
- html: "The main story information will go here."
- });
- var content = new Ext.Panel({
- height: 899,
- layout: {
- type:'hbox',
- align:'stretch'
- },
- items: [
- sidebar,
- {
- xtype: 'component',
- height: 10,
- width: 10
- },
- stories
- ]
- });
- rootPanel = new Ext.Panel({
- fullscreen:true,
- style:"background-color:white",
- layout: {
- type:'vbox',
- align:'stretch'
- },
- items:[header, masthead, content]
- });
- }
我們逐一來分析以上的代碼。首先，onready方法，發(fā)生在當頁面加載完畢時啟用。接下來，我們定義了多個pannel面板控件，面板的作用是包含其他的控件，并形成相對獨立的區(qū)域，在教程中，我們只是將pannel中填上顏色及文字以示區(qū)別。
在head面板中，注意到設(shè)定了height高度，由于這里是針對ipad，所以這里設(shè)置了特定的高度，如果要針對其他移動設(shè)備的話，這里也可以根據(jù)實際情況設(shè)定實際的高度。而 style屬性中，設(shè)定使用的樣式屬性，可以設(shè)置多個值，這里只設(shè)定了使用背靜顏色為綠色(background-color：blue)。而html則設(shè)置了該pannel中的文本文字。
接下來的幾個pannel面板中，其設(shè)置相關(guān)的值跟head面板差不多，這里不再詳細描述。要注意的一點是，其中在sidebar面板中，設(shè)置了flex的屬性值為1，在stories面板中，設(shè)置了其屬性值為2，可以看到sidebar的寬度實際上為stories面板寬度的1/2。假如要設(shè)置為stories面板寬度的1/3，則只需要把stories面板中的flex屬性值設(shè)置為3即可。
在content面板中，演示了如何在一個面板中包含多個其他的面板，這里設(shè)置了高度height為899pixels,注意如果將pannel中的所有面板的高度相加，會發(fā)現(xiàn)高度為1004，而不是ipad的面板高度1024，因為還有的20pixels高度為ipad本身的狀態(tài)工具欄所占有的。而layout屬性組中，設(shè)置了type屬性為hbox，代表面板內(nèi)的控件布局方式為從左到右的水平布局方式，而stretch表示控件的對齊方式為全部填充滿父控件的大小。在items屬性列表中，分別列出了slidebar，stories兩個面板，而其中之間用大括號括起來的部分，其實這里是又增加了一個分割的控件，其寬度和高度均為10，這里使用了xtype:component 的方法，演示了另外一種創(chuàng)建控件的方法，當然這里你也可以依然使用pannel控件。
***部分，再設(shè)置了一個大的pannel控件面板rootPanel,其中設(shè)置了全屏屬性(fullscreen:true)，背景顏色設(shè)置為白色，而布局方式這里設(shè)置為vbox，即從上到下，垂直擺放三個面板header, masthead, content。
運行后，效果如下圖：
設(shè)計頭部pannel
接下來，我們嘗試對頭部的pannel進行一些修改，在其中增加一張圖片，并且實現(xiàn)點頭部的圖標時，會彈出窗口。如下圖所示：
首先看如何在頭部的嵌入圖片，代碼如下：
- var masthead = new Ext.Panel({
- html: '<center><img src="masthead.png"/></center>',
- height: 70,
- });
接下來，我們再加入一個小的pannel，內(nèi)容為更新的時間，代碼如下：
- var date = new Ext.Panel({
- html: '<div class="date">Updated on: 05.06.11</div>',
- });
這里我們用了date的CSS樣式，所以還要修改下index.html頁，以引入一個CSS樣式文件：
- <link rel="stylesheet" href="newsletter.css" type="text/css">
再加入一個info面板，其中有一個圖標，代碼如下：
- var info = new Ext.Panel({
- html: '<img src="info.png"/>',
- height: 35,
- width: 35,
- });
因為Sencha Touch默認的info圖標比較大，所以這里用了自定義的圖標，并且大小為21*21 pixels，能適合點擊。
***，我們將其組裝起來，如下代碼：
- var header = new Ext.Panel({
- height: 35,
- padding: '10 20 0 20',
- layout: {
- type:'hbox',
- align:'start'
- },
- items: [
- info,
- {
- xtype: 'component',
- flex: 1
- },
- date
- ],
- });
注意，這里使用了padding屬性，分別為10，20，0，20，其中，即指定了其中的info控件距離屏幕最左邊的距離為10象素，跟頭部的圖片為20象素，而圖片與表示日期的控件的象素為0(即緊挨著)，***的20表示日期控件距離屏幕的右邊距離為20象素。在info控件及date控件之間，設(shè)置了一個component控件，用來放置圖片。
接下來，我們期望實現(xiàn)的效果是，當用戶點info控件中的小button時，會彈出一個窗口，我們先來設(shè)計這個窗口，如下：
- var popup = new Ext.Panel({
- floating: true,
- modal: true,
- centered: true,
- padding: 5,
- width: 500,
- height: 425,
- dockedItems: [
- {
- xtype: 'toolbar',
- dock: 'top',
- title: 'APP Info',
- }
- ],
- items: [
- {
- xtype: 'panel',
- centered: true,
- padding: 20,
- html: '<div class="infobox">You can fill this popup with whatever content you may like.</div>'
- }
- ]
在上面的代碼中，通過modal屬性設(shè)置彈出的這個窗口是模態(tài)的，即彈出口，除彈出窗外的其他部分是變灰色不可選擇的，當點窗口外的任意部分時，彈出窗口會被關(guān)閉。Padding為5，設(shè)定了該彈出窗口邊框的寬度。
而在dockeditems屬性列表中，設(shè)置了彈出窗口的標題欄位屬性，這里dock為top，即表明標題欄位于彈出窗口的最上方。而items屬性列表則設(shè)置了彈出窗口文字部分的屬性。
在完成彈出窗口后，需要在info按鈕的事件中編寫相關(guān)的代碼打開它，代碼如下：
- info.on('afterrender', function(){
- this.body.on('click', function(){
- popup.show('pop');
- });
- });
在上面的代碼中，在頁面完全加載完畢后，為info按鈕圖標增加了相關(guān)的點擊的處理事件函數(shù)，其中的內(nèi)容為popup.show('pop');
其中指定了上文的popup彈出窗口的顯示方法為pop，當然如果不想用彈出窗口的效果的話，這里可以指定為popup.show()也可以，又或者可以使用其他效果，比如：
- popup.show({type: 'slide', direction: 'down'});
小結(jié)
在本教程的***部分，講解了如何使用sencha touch去搭建基本的頁面應用以及一些基本的技巧，在下一部分中，將進一步講解更復雜點的動畫技巧。
