接觸Sencha Touch已有近一個(gè)月的時(shí)間，在探索它的同時(shí)，走了不少的彎路。也有了不少的發(fā)現和體會(huì )。在此分享給各位，希望不管新手還是老鳥(niǎo)，都能在這篇文章里有所收獲。
Sencha Touch簡(jiǎn)介
encha Touch可以讓你的Web App看起來(lái)像Native App。美麗的用戶(hù)界面組件和豐富的數據管理，全部基于最新的HTML5和CSS3的 WEB標準，全面兼容Android和Apple iOS設備。
下面是Sencha官方給出的幾點(diǎn)特性
1.基于最新的WEB標準 – HTML5，CSS3，JavaScript。整個(gè)庫在壓縮和gzip后大約80KB，通過(guò)禁用一些組件還會(huì )使它更小。
2.支持世界上最好的設備。Beta版兼容Android和iOS，Android上的開(kāi)發(fā)人員還可以使用一些專(zhuān)為Android定制的主題。
3.增強的觸摸事件。在touchstart、touchend等標準事件基礎上，增加了一組自定義事件數據集成，如tap、swipe、pinch、rotate等。
4.數據集成。提供了強大的數據包，通過(guò)Ajax、JSONp、YQL等方式綁定到組件模板，寫(xiě)入本地離線(xiàn)存儲。
看看Sencha Touch框架唄
先下載Sencha Touch框架
http://www.sencha.com/products/touch/
下面讓我們看看下載的包里都有哪些東西。
將下載的sencha-touch開(kāi)發(fā)包解壓我們可以看到以下文件
docs是官方的api文檔文件、examples是官方提供的示例程序。Jsbuider用來(lái)對js文件進(jìn)行發(fā)布前的處理。
主框架這里有三個(gè)文件可供選擇，sencha-touch.js、sencha-touch-debug.js、sencha-touch.-debug-w-comments.js
這三個(gè)文件的區別在于，sencha-touch-debug.js是有縮進(jìn)的，便于調試、sencha-touch.-debug-w-comments.js是有注釋的，便于我們了解框架底層是怎么實(shí)現的。
resources文件夾下我們可以看到這是框架的樣式文件，同樣，css-debug文件夾下是有便于調試的.css文件。打開(kāi)文件夾，我們又可以看到
，這分別是框架帶給我們的四個(gè)主題。只會(huì )影響界面的顯示效果，為了保持顯示上的一致，我們可以在面向android的應用上使用android.css而面向iphone的應用，使用apple.css。甚至我們可以提供主題切換功能讓用戶(hù)自行選擇主題，但這都是后話(huà)了。
其他的文件我也不清楚，就不再介紹了。
重中之重--你的瀏覽器
開(kāi)發(fā)js的時(shí)候，沒(méi)有什么是比一款優(yōu)秀瀏覽器更重要的了。chorme、safari。都是不錯的選擇。(FireFox不支持Sencha Touch框架)
筆者使用的是google的chrome瀏覽器。沒(méi)有的話(huà)就快去下一個(gè)唄。地址給你 chorme官網(wǎng)
關(guān)于chorme瀏覽器的調試功能，我會(huì )在下一篇教程中介紹。
開(kāi)發(fā)環(huán)境Aptana Studio
跟大家分享的是一款優(yōu)秀的js集成開(kāi)發(fā)環(huán)境：Aptana Studio。
目前最新版本是Aptana Studio 3.0.3，
下載地址
注：筆者跟不上潮流使用的還是Aptana2
下載并安裝好它，下面進(jìn)行一些簡(jiǎn)單的配置：選擇Run->Run Configurations...在彈出的Debug
Configurations中設置好瀏覽器路徑Browser executable，也就是你安裝瀏覽器的位置。
跟我一起開(kāi)始快樂(lè )的Sencha Touch之旅吧！
第一個(gè)Sencha Touch項目
1. 首先點(diǎn)擊左上角的圖標，創(chuàng )建一個(gè)新的項目。在彈出的窗口中選擇Default Web Project。輸入Project name如：Hello Touch，并點(diǎn)擊Finish。這樣便新建了一個(gè)普通的Web項目。
2. 開(kāi)發(fā)過(guò)程中，我們統一使用方便調試的debug文件。Css文件方面，我們選擇了框架默認的sencha-touch.css。直接將sencha-touch-debug.js以及css-debug文件夾拖入File窗口里我們剛建的項目中。這里要注意，拖入文件的時(shí)候sencha-touch.css不會(huì )隨著(zhù)css-debug文件夾一起加入項目，要另外拖一次。結果如下圖所示
3. 雙擊打開(kāi)index.html，在標簽之間加入"css-debug/sencha-touch.css" type="text/css"> "以及"<script type="text/javascript" src="sencha-touch-debug.js"></script> "。接著(zhù)點(diǎn)擊圖標，選擇JavaScript File創(chuàng )建我們自己的js文件，命名為app.js。然后在index.html中引入這個(gè)文件，方法跟上面引入sencha-touch-debug.js是一樣的。
到現在我們得到了這樣的一個(gè)index.html。
4. 打開(kāi)app.js輸入我們的程序代碼
01./** 02.* @author weilao 03.*/04.var helloTouchApp = new Ext.Application({ //利用框架的Application類(lèi)的構造函數構造一個(gè)應用 05.name: 'myApp', //為這個(gè)應用指定名稱(chēng) 06.useLoadMask: true, //頁(yè)面讀取完畢前會(huì )顯示“Loading...”字樣 07.launch: function () { //這是程序的入口 08.Ext.Msg.alert('Hi', 'Hello Sencha Touch', Ext.emptyFn);//彈出窗口標題Hi，內容Hello Sencha Touch 09.} 10.});Tips:
雙擊index.html之后系統會(huì )自動(dòng)在Code Assist中加入js文件關(guān)聯(lián)，這樣，在編輯其中一個(gè)文件的時(shí)候也能夠享受到其他文件的代碼提示了。但是當你關(guān)閉index.html之后，自動(dòng)添加的關(guān)聯(lián)又會(huì )刪除。不過(guò)，只要如下操作便能讓關(guān)聯(lián)持久存在：打開(kāi)References窗口，在index.html(Auto-created)上點(diǎn)擊右鍵，選擇Make Profile Permanent即可。
作者:威老
原文地址: http://www.cnblogs.com/weilao/archive/2011/08/09/2132136.html
聯(lián)系客服
