智能機(jī)的應(yīng)用開發(fā)如火如荼，比如Android,蘋果ios開發(fā)的應(yīng)用已越來越多。開發(fā)者在開發(fā)這些基于不同操作平臺上的無線應(yīng)用時，都面臨要熟悉所用平臺的技術(shù)知識的挑戰(zhàn)。因此，目前有不少基于HTML5標(biāo)準(zhǔn)的跨移動開發(fā)框架出現(xiàn)，開發(fā)者只需要掌握HTML5，CSS及Javascript及相關(guān)框架的開發(fā)技巧就可以了。

在本文中，將介紹目前一個著名的移動跨平臺開發(fā)框架Sencha Touch, 該框架是世界上第一個基于HTML5的Mobile App框架，Sencha的前身其實(shí)大名鼎鼎的AJAX框架EXT JS,Sencha Touch目前是其下面的一個子框架項目，可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的 WEB標(biāo)準(zhǔn)，全面兼容Android和Apple iOS設(shè)備。

下面是Sencha官方給出的幾點(diǎn)特性：

1、基于最新的WEB標(biāo)準(zhǔn) – HTML5，CSS3，JavaScript。整個庫在壓縮和gzip后大約80KB，通過禁用一些組件還會使它更小。

2、支持世界上最好的設(shè)備。Beta版兼容Android和iOS，Android上的開發(fā)人員還可以使用一些專為Android定制的主題。

3、增強(qiáng)的觸摸事件。在touchstart、touchend等標(biāo)準(zhǔn)事件基礎(chǔ)上，增加了一組自定義事件數(shù)據(jù)集成，如tap、swipe、pinch、rotate等。

4、數(shù)據(jù)集成。提供了強(qiáng)大的數(shù)據(jù)包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲。

Sencha Touch的項目的地址在(http://www.sencha.com/products/touch/download)，我們可以下載其中的最新版本。本系列教程將分四篇，將講解如何使用Sencha Touch設(shè)計一個記事本小應(yīng)用，用戶可以在上面簡單記錄便條筆記，并將其保存在移動設(shè)備中。

應(yīng)用示意圖

系統(tǒng)的主要功能有：

（1）新建記事內(nèi)容

（2）編輯記事內(nèi)容

（3）刪除記事內(nèi)容

（4）在移動設(shè)備應(yīng)用中保存記事的內(nèi)容。

本系列的教程，希望讀者具有一定的EXT JS框架的開發(fā)基礎(chǔ)知識為佳。在第一講中，先講解如何對應(yīng)用進(jìn)行框架的設(shè)計。

設(shè)計主頁面

首先，我們先來看如何設(shè)計用戶用于創(chuàng)建和編輯記事的表單，可以大概設(shè)計成如下的樣子：

可以看到，這個頁面中，有保存按鈕，以及一個刪除按鈕(一個垃圾圖標(biāo))，對應(yīng)到Sencha Touch框架中的元素如下圖所示：

接下來是記事列表的界面，框圖如下：

其對應(yīng)Sencha Touch中的框架元素如下：

此外,還需要使用一個布局文件,它是溝通記事列表頁面和記事頁面登記的橋梁,這里我們使用EXT的card layout布局進(jìn)行布局,兩個界面的關(guān)系如下圖:

構(gòu)建程序基本結(jié)構(gòu)

首先,在程序中的結(jié)構(gòu)如下圖所示,其中有三個主要的文件:index.html,app.js和app.cs。

在index.html中，主要功能是啟動整個應(yīng)用程序并且引用相關(guān)的類庫，如下代碼：

<script class="hiddenSpellError"></script> 
<script src=”senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" /> 
<link href="app.css" rel="stylesheet" type="text/css" /> 
<script src="app.js" type="text/javascript"></script> 

這里,首先引入了sencha touch本身的類庫JS代碼,然后再引入app.css和app.js兩個文件,其中app.css為樣式文件,app.js文件為程序的核心功能JS文件。

下面我們介紹app.js中的具體代碼，首先是在app.js中進(jìn)行初始化：

　var App = new Ext.Application({  
    name : 'NotesApp',  
    useLoadMask : true,  
    launch : function () {  
    }  
}) 

其中，Ext.Application的實(shí)例的初始化，意味者一個sencha touch應(yīng)用的建立，具體的可以參考(http://dev.sencha.com/deploy/touch/docs/?class=Ext.Application)中對該類的說明，這個類的實(shí)例化后，會自動創(chuàng)建一個全局的變量NotesApp,并且同時建立了如下的命名空間：

NotesApp  
NotesApp.views、  
NotesApp.controllers  
NotesApp.models  
NotesApp.stores 

而launch的方法只會運(yùn)行一次，在這里可以創(chuàng)建應(yīng)用程序的viewport界面視圖，代碼如下：

launch: function () {  
    NotesApp.views.viewport = new Ext.Panel({  
        fullscreen: true,  
        html:'This is the viewport'  
    });  
} 

我們將整個界面布局設(shè)置為使用Panel面板，并且設(shè)置了fullscreen屬性為true,同時也會設(shè)置monitorOrientation屬性的值為true，這個是很有用的一個屬性，因?yàn)樗梢宰宲anel面板監(jiān)聽屏幕方向發(fā)生變化時候的事件。當(dāng)我們運(yùn)行后，顯示如下的界面：

創(chuàng)建記事列表界面

當(dāng)我們的這個應(yīng)用一啟動后，首先顯示的是記事列表頁面，其中頁面結(jié)構(gòu)如下圖：

可以看到，是在一個pannel面版中，存在一個list列表控件和一個toolbar工具條列表。下面是pannel的代碼：

　NotesApp.views.notesListContainer = new Ext.Panel({  
    id : 'notesListContainer',  
    layout : 'fit',  
    html: 'This is the notes list container'  
}); 

此時，我們結(jié)合之前的代碼，看下目前的代碼應(yīng)該是如下的樣子：

var App = new Ext.Application({  
    name: 'NotesApp',  
    useLoadMask: true,  
    launch: function () {  
 
        NotesApp.views.notesListContainer = new Ext.Panel({  
            id : 'notesListContainer',  
            layout : 'fit',  
            html: 'This is the notes list container'  
        });  
 
        NotesApp.views.viewport = new Ext.Panel({  
            fullscreen : true,  
            layout : 'card',  
            cardAnimation : 'slide',  
            items: [NotesApp.views.notesListContainer]  
        });  
    }  
}) 

可以看到，在viewport中的items屬性，我們將新的這個panel加入進(jìn)去了。

并且請注意cardAnimation中，說明了面板的使用效果是slide的動畫展現(xiàn)效果。在模擬器中運(yùn)行后，會看到如下圖的效果：

接下來，我們再為其增加工具條，代碼如下：

NotesApp.views.notesListToolbar = new Ext.Toolbar({  
id: 'notesListToolbar',  
title: 'My Notes'  
}); 

將工具條粘附到記事列表的面板中是很簡單的，只需要dockedItems 屬性即可：

NotesApp.views.notesListContainer = new Ext.Panel({  
id: 'notesListContainer',  
layout: 'fit',  
html: 'This is the notes list container',  
dockedItems: [NotesApp.views.notesListToolbar]  
 
}); 

下圖就是添加工具條后的運(yùn)行效果：

到目前為止，本講的內(nèi)容結(jié)束，主要是講解了如何架構(gòu)應(yīng)用的流程和頁面，并給出了啟動界面中的記事列表的界面設(shè)計原型，目前的完整代碼如下：

var App = new Ext.Application({  
    name: 'NotesApp',  
    useLoadMask: true,  
    launch: function () {  
 
        NotesApp.views.notesListToolbar = new Ext.Toolbar({  
            id: 'notesListToolbar',  
            title: 'My Notes'  
        });  
 
        NotesApp.views.notesListContainer = new Ext.Panel({  
            id: 'notesListContainer',  
            layout: 'fit',  
            html: 'This is the notes list container',  
            dockedItems: [NotesApp.views.notesListToolbar]  
        });  
 
        NotesApp.views.viewport = new Ext.Panel({  
            fullscreen: true,  
            layout: 'card',  
            cardAnimation: 'slide',  
            items: [NotesApp.views.notesListContainer]  
        });  
    }  
}) 

請繼續(xù)關(guān)注，我們將繼續(xù)學(xué)習(xí)，如何實(shí)現(xiàn)新建立和編輯記事的功能。

小結(jié)：跨平臺開發(fā)框架Sencha Touch學(xué)習(xí)教程的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！