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