目前,智能機的應用開發如火如荼,比如Android,蘋果ios開發的應用已越來越多。開發者在開發這些基於不同操作平臺上的無線應用時,都面臨要熟悉所用平臺的技術知識的挑戰。因此,目前有不少基於HTML5標準的跨移動開發框架出現,開發者只需要掌握HTML5,CSS及Javascript及相關框架的開發技巧就可以了。
在本文中,將介紹目前一個著名的移動跨平臺開發框架Sencha Touch, 該框架是世界上第一個基於HTML5的Mobile App框架,Sencha的前身其實大名鼎鼎的AJAX框架EXT JS,Sencha Touch目前是其下面的一個子框架項目,可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理,全部基於最新的HTML5和CSS3的 WEB標準,全面兼容Android和Apple iOS設備。
下面是Sencha官方給出的幾點特性:
1.基於最新的WEB標準 – HTML5,CSS3,JavaScript。整個庫在壓縮和gzip後大約80KB,通過禁用一些組件還會使它更小。
2.支持世界上最好的設備。Beta版兼容Android和iOS,Android上的開發人員還可以使用一些專爲Android定製的主題。
3.增強的觸摸事件。在touchstart、touchend等標準事件基礎上,增加了一組自定義事件數據集成,如tap、swipe、pinch、rotate等。
4.數據集成。提供了強大的數據包,通過Ajax、JSONp、YQL等方式綁定到組件模板,寫入本地離線存儲。
Sencha Touch的項目的地址在(http://www.sencha.com/products/touch/download),我們可以下載其中的最新版本。本系列教程將分四篇,將講解如何使用Sencha Touch設計一個記事本小應用,用戶可以在上面簡單記錄便條筆記,並將其保存在移動設備中。
▲應用示意圖
系統的主要功能有:
1) 新建記事內容
2) 編輯記事內容
3) 刪除記事內容
4) 在移動設備應用中保存記事的內容。
本系列的教程,希望讀者具有一定的EXT JS框架的開發基礎知識爲佳。在第一講中,先講解如何對應用進行框架的設計。
設計主頁面
首先,我們先來看如何設計用戶用於創建和編輯記事的表單,可以大概設計成如下的樣子:
可以看到,這個頁面中,有保存按鈕,以及一個刪除按鈕(一個垃圾圖標),對應到Sencha Touch框架中的元素如下圖所示:
接下來是記事列表的界面,框圖如下:
其對應Sencha Touch中的框架元素如下:
此外,還需要使用一個佈局文件,它是溝通記事列表頁面和記事頁面登記的橋樑,這裏我們使用EXT的card layout佈局進行佈局,兩個界面的關係如下圖:
構建程序基本結構
首先,在程序中的結構如下圖所示,其中有三個主要的文件:index.html,app.js和app.cs。
在index.html中,主要功能是啓動整個應用程序並且引用相關的類庫,如下代碼:
<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中進行初始化:
name : 'NotesApp',
useLoadMask : true,
launch : function () {
}
})
其中,Ext.Application的實例的初始化,意味者一個sencha touch應用的建立,具體的可以參考(http://dev.sencha.com/deploy/touch/docs/?class=Ext.Application)中對該類的說明,這個類的實例化後,會自動創建一個全局的變量NotesApp,並且同時建立了如下的命名空間:
NotesApp
NotesApp.views、
NotesApp.controllers
NotesApp.models
NotesApp.stores
而launch的方法只會運行一次,在這裏可以創建應用程序的viewport界面視圖,代碼如下:
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true,
html:'This is the viewport'
});
}
我們將整個界面佈局設置爲使用Panel面板,並且設置了fullscreen屬性爲true,同時也會設置monitorOrientation屬性的值爲true,這個是很有用的一個屬性,因爲它可以讓panel面板監聽屏幕方向發生變化時候的事件。當我們運行後,顯示如下的界面:
創建記事列表界面
當我們的這個應用一啓動後,首先顯示的是記事列表頁面,其中頁面結構如下圖:
可以看到,是在一個pannel面版中,存在一個list列表控件和一個toolbar工具條列表。下面是pannel的代碼:
id : 'notesListContainer',
layout : 'fit',
html: 'This is the notes list container'
});
此時,我們結合之前的代碼,看下目前的代碼應該是如下的樣子:
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加入進去了。
並且請注意cardAnimation中,說明了面板的使用效果是slide的動畫展現效果。在模擬器中運行後,會看到如下圖的效果:
接下來,我們再爲其增加工具條,代碼如下:
id: 'notesListToolbar',
title: 'My Notes'
});
將工具條粘附到記事列表的面板中是很簡單的,只需要dockedItems 屬性即可:
id: 'notesListContainer',
layout: 'fit',
html: 'This is the notes list container',
dockedItems: [NotesApp.views.notesListToolbar]
});
下圖就是添加工具條後的運行效果:
到目前爲止,本講的內容結束,主要是講解了如何架構應用的流程和頁面,並給出了啓動界面中的記事列表的界面設計原型,目前的完整代碼如下:
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]
});
}
})
在下一講中,我們將繼續學習,如何實現新建立和編輯記事的功能。