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