[SenchaTouch]SenchaTouch2 WebApp 開發教學-01

2015-02-03

2500
0
SenchaTouch
2015-02-03

SenchaTouch 是基於 ExtJS 4 版的 Web App 應用

還是第一款應用 HTML5、CSS3 的框架

前言：

對於Sencha比較陌生，但若說到Sencha的前身ExtJS相信大家立刻會有印象吧

ExtJS是與JQuery齊名的一款JavaScript Ajax框架

但跟JQuery不太一樣的是，ExtJS是使用物件導向也就是所謂的OO

加上MVC開發模式，更可以實現前端的分工

有豐富的UI、動畫效果，龐大的組件

完全的前端開發，不管後台是哪種語言都沒問題

使用者也不需要注意跨瀏覽器的問題

官方的API、範例也提供得非常完整

但缺點就是很肥....從官網下載的檔案容量就100MB左右

SenchaTouch就是基於 ExtJS 4 版的 Web App 應用

還是第一款應用 HTML5、CSS3 的框架

聽起來非常的威，希望應用起來也不會讓我們失望

事前準備：

首先要先下載 SenchaTouch 跟 SenchaCmd

http://www.sencha.com/products/touch/download/

需要填寫一些資料後，下載連結會寄到信箱去(90天試用版)

經過高人指點，原來有一款GPL的免費版可以下載

http://www.sencha.com/products/touch/license/

是點下方的Download不是上方的!

http://www.sencha.com/products/sencha-cmd/download/

直接針對作業系統下載就行了

環境：

Windows8
Chrome
Notepad++

環境建置：

SenchaTouch是一個壓縮檔，只要解壓縮到想放的地方，我會建議直接放在C:\

SenchaCmd是一個安裝檔，直接下一步就可以了

安裝完畢後執行命令提示字元

輸入sencha，若能看到以下畫面，代表環境已經建置完成

第一個範例程式：

要建立一個App專案有兩種方式

一種是使用 SenchaCmd 來建立

首先在命令提示字元中切換至 SenchaTouch 目錄

然後輸入 sencha generate app HelloWord HelloWord

第一個HelloWord是App的名稱，第二個是目錄路徑

執行後會在SenchaTouch目錄下看到HelloWord的資料夾

打開資料夾後會看到已經自動幫你完成一個專案的部屬

這已經是一個可以直接運作的App了

執行 index.html 後

另外一種方式是手動

我們直接在 SenchaTouch 目錄下開一個資料夾取名 HelloWord2

之後在 HelloWord2 下建立兩個檔案 index.html 跟 app.js

這兩個檔案是必須的

index.html 內容如下

檔案的引入順序不能錯

sencha-touch.css 是預設的樣式表，如果想要改的話建議另開一個CSS檔來做覆蓋

sencha-touch-debug.js 是SenchaTouch的核心程式，debug是開發時使用，等到上線時要換成sencha-touch.js

app.js 是這個App的執行入口

app.js內容如下