Sencha Touch 1.1.1 之初接觸（一）怎樣入手并寫一個漂亮的demo

Posted on 2012-02-08 16:31 隨它去吧閱讀(14158) 評論(17) 收藏舉報

Sencha Touch 1.1.1學習入門

想到哪里寫到哪里，因為是學習過程，可能有不對的地方，以后會隨時回頭修改。本文面向的是Sencha Touch 1.1.1版本。

1、Sencha Touch開發與普通web開發有什么區別？

Sencha Touch（為方便起見，本文后面一律簡寫為ST）頁面的開發跟普通html頁面相比，總體來說沒有本質上的區別，只是引入了對html5和CSS3的支持，然后提供了對移動設備（iPad/iPhone/Android Mobile/Android Tablet/BlackBerry等）的特殊優化。事實上也正是因為html5和CSS3才使得ST可以實現如此美妙以至于可以媲美Native應用程序的交互效果。

2、特殊的Document標記

ST頁面的Document標記比較特殊，在html標簽之前，使用如下標簽來聲明此文檔是html5格式：

<!DOCTYPE html>

3、使用ST首先要在html代碼的<head>區引入必須的公共CSS和JS文件：

    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch.js"></script>

需要注意的是，除sencha-touch.css外，ST提供了android.css/apple.css/bb6.css等三個css文件，分別對應android風格/apple風格/黑莓6三種不同的Theme，引用不同的css文件即可實現頁面Theme的切換。

4、一個ST應用的通常模樣

引入公共文件之后，當然就要編寫自己應用程序的腳本了，如我們在大多數ST應用的例子中所見，通常情況下，應用程序腳本是寫在單獨的js文件中進行調用的（好處可以參見.net編程中code-behind和code-beside的對比），因此，一個常見的ST文檔往往大致是這個模樣：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script src="sencha-touch.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
        <link href="sencha-touch.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

5、現在，我們關注的焦點將會轉移到app.js這個文件了，因為它才是ST頁面開發的核心。

通過我們對官網SDK中的Examples和同樣出自官網的quick start代碼進行分析，發現ST應用首頁的js腳本（可以理解為啟動程序）常用編寫方式有兩種：

A、Examples中采用的 —— Ext.setup方式

//使用setup來啟動主程序
Ext.setup({
    tabletStartupScreen: 'tablet_startup.png', //tablet設備時主屏中間出現的背景圖片
    phoneStartupScreen: 'phone_startup.png', //phone設備時主屏中間出現的背景圖片
    icon: 'icon.png', glossOnIcon: false, //跟Extjs一樣，主程序代碼卸載onReady里面
    onReady: function(options) {
        //TODO
    }
});

B、quick start中采用的 —— Ext.Application方式

new Ext.Application({
    launch: function() {
        //TODO
    }
});

由于這里我們只關注ST應用的啟動代碼，所以具體界面實現代碼省略。對于上述兩種方式的區別，鄙人暫時無力進行解讀，歡迎高手指教。

6、ST如何判斷終端設備類型？

我們知道，既然ST是專為移動設備而設計，那么在我們的應用第一次被訪問的時候，判斷客戶端設備的類型是非常重要的，在ST中，我們可以這樣判斷：

        if (Ext.is.Phone) {
            //所有手機設備
        }
        if (Ext.is.Android) {
            //所有Android設備
        }
        if (Ext.is.BlackBerry) {
            //黑莓手機
        }
        if (Ext.is.iPad) {
            //iPad平板電腦
        }
        ……

當然關于設備類型還有很多其他判斷屬性，你可以參照ST的文檔說明http://docs.sencha.com/touch/1-1/#!/api/Ext.is

7、設計一個漂亮的Demo

好了，幾個前提問題基本解決，現在我們嘗試寫一個比HelloWorld更復雜一些的啟動頁面，來找一找成就感。先看原型圖：

非常簡單的一個登陸界面，我們確定使用apple風格的theme，使之更貼近Native的感覺。注：此例只考慮界面的實現，因此使用Ext.Panel控件進行布局設計。

8、一步步實現這個Demo

下面對實現代碼按照步步深入的方式進行一下分解說明：

第一步：

//第一步：放置一個Ext.Panel，使之充滿屏幕
Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
	
		//判斷是否是手機設備，只有手機設備才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({  //使用一個Panel來填滿屏幕
				fullscreen: true,  //是否全屏，選擇true則橫豎屏切換時仍可以保證自動適應尺寸
				id: 'content',
				scroll: 'vertical',  //滾動方向
				html: '這里放置內容',  //Panel里面放置的內容
				layout: {type: 'vbox', align: 'center'},  //布局方式，vbox縱向布局，且每行內容居中
				items: [],  //這里放置容器內部的子元素
				dockedItems: []  //這里放置Panel本身所擁有的dock元素（你可以理解為自帶工具欄）
			});
		}
	}
});

現在只有一個空容器充滿屏幕，里面顯示了幾個漢字，看演示效果（Android 2.3，下同）

第二步：

//第二步：給Panel添加一個頂部工具欄，用來顯示程序標題
Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
	
		//判斷是否是手機設備，只有手機設備才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({
				fullscreen: true,
				id: 'content',
				scroll: 'vertical',
				layout: {type: 'vbox', align: 'center'},
				html: '這里放置內容',
				items: [],

                                //前面我們說過，Panel自帶的工具欄要放置在dockedItems里面
                                //現在我們添加頂部的工具欄
				dockedItems: [
					{
						id: 'status',  //給他一個ID
						xtype: 'toolbar',  //xtype類型是toolbar，完整的xtype枚舉見這里http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
						ui: 'light',  //light表示淺色的背景圖案
						dock: 'top',  //工具欄放置在最頂部
						title: "Sencha Touch Demo"  //工具欄的標題
					}
				]

			});
		}
	}
});

效果圖顯示，我們已經有了一個頂部工具欄，顯示應用程序的名稱

第三步：

//第三步：給Panel添加底部工具欄
Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
	
		//判斷是否是手機設備，只有手機設備才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({
				fullscreen: true,
				id: 'content',
				scroll: 'vertical',
				layout: {type: 'vbox', align: 'center'},
				html: '這里放置內容',
				items: [],
				dockedItems: [
                                        //這里是剛才的頂部工具欄
					{
						id: 'status',
						xtype: 'toolbar',
						ui: 'light',
						dock: 'top',
						title: "Sencha Touch Demo"
					},
                                        //這里是新增加的底部工具欄
					{
						xtype: 'toolbar',
						dock: 'bottom',  //在這里聲明工具欄附著在底部
						ui: 'dark',  //深色背景圖案
                                                //又看到了items，顯然ST的items是可以嵌套的，好吧，我們一口氣把這個工具欄上的按鈕也給加上
						items: [
							{
								xtype: 'button',  //左側一個button
								ui: 'drastic',  //drastic是button的顏色和樣式定義
								text: '忘記密碼'  //不解釋
							},
							{xtype: 'spacer'},  //這個需要解釋一下，spacer會自動充滿剩余空間
							{
								xtype: 'button',  //最右側的button
								ui: 'action',  //action樣式是藍色
								text: '注冊使用'
							}
						]
					}
				]
			});
		}
	}
});

現在看起來更像樣一些了，底部工具欄也已經齊備

第四步：

//第四步：頂部底部工具欄都已經ok，現在我們要給Panel添加內容
//回頭看一下原型圖，我們需要再Panel內部自上到下放置一個logo圖片和一個表單
//表單包含了賬號和密碼兩個文本框，其中密碼是掩碼框，然后是一個登錄按鈕和一個鏈接

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
	
		//判斷是否是手機設備，只有手機設備才使用此布局
		if (Ext.is.Phone) {
			new Ext.Panel({
				fullscreen: true,
				id: 'content',
				scroll: 'vertical',
				layout: {type: 'vbox', align: 'center'},
                                //由于使用items設計Panel的內部元素，所以把html屬性注掉
                                //其實不注也不會出錯，html的內容會被顯示在最底部
				//html: '這里放置內容',
				
				items: [
                                        //從上往下第一個元素，logo圖片
					{
						xtype: 'container',  //使用普通的Container容器即可
						height: 98,  //高度要跟圖片尺寸相適應，由于我在下面html代碼中給圖片加了16px的margin-top，所以Container高度設置成圖片高度+16，防止圖片顯示不完整
						width: 96,  //圖片的寬度
						html: '<img src="logo.png" style="margin-top: 16px;" />'  //直接設定html代碼來顯示圖片，注意有16像素的頂部margin
					},
                                        //從上往下第二個元素，form表單
					{
						xtype: 'form',  //xtype為form
						id: 'loginForm',  //為便于操作form，給它一個id
                                                //表單內有不止一個元素，因此又要給它添加items
						items: [
						{
							xtype: 'fieldset',  //加一個fieldset，可以將兩個文本框放在一個圓角域組里面，更美觀
							margin: '-2 0 16 0',  //使用margin調整與上面元素和下面元素之間的空隙
                                                        //fieldset里面包含兩個文本框
							items: [
							{
								xtype: 'textfield',  //第一個文本框
								name: 'account',  //name用來獲取值
								placeHolder: '您的賬號',  //默認顯示在文本框里的文字，點擊和輸入時它會消失
								required: true,  //必填字段
								useClearIcon: true  //輸入內容后文本框后面會出現一個清空按鈕
							},
							{
								xtype: 'passwordfield',  //密碼文本框
								name: 'password', 
								placeHolder: '您的密碼',
								required: true,
								useClearIcon: true
							}
							]
						},
                                                //提交按鈕，放在fieldset外面是為了使之與fieldset等寬
						{
							xtype: 'button',
							text: '登錄STDEMO',
							ui: 'confirm'  //綠色按鈕
						},
                                                //再用一個Container來放置鏈接文字
						{
							xtype: 'container',
							html: '<div style="width: 100%; text-align: center;"><a style="font-size: 14px; color: blue;">需要合作？請聯系我們……</a></div>',
							margin: '16 0 0 0'
						}
						]
					}
				],
				dockedItems: [
					{
						id: 'status',
						xtype: 'toolbar',
						ui: 'light',
						dock: 'top',
						title: "Sencha Touch Demo"
					},
					{
						xtype: 'toolbar',
						dock: 'bottom',
						ui: 'dark',
						items: [
							{
								xtype: 'button',
								ui: 'drastic',
								text: '忘記密碼'
							},
							{xtype: 'spacer'},
							{
								xtype: 'button',
								ui: 'action',
								text: '注冊使用'
							}
						]
					}
				]
			});
		}
	}
});

顯然這是最復雜的一步，不過只要學得耐心點，一樣不成問題