Sencha學(xué)習(xí)手記
Sencha是什么?
Sencha是第一個(gè)基于Html 5的移動(dòng)設(shè)備的開發(fā)框架。
Sencha是將Html 5+Css3+JavaScript結(jié)合起來的框架。Sencha使用最新的Html 5，可以靈活使用音頻、視頻的組件及離線保存數(shù)據(jù)的localStorage。加上Css3，可以使表現(xiàn)更加豐富。
Sencha能為我們做些什么?
Sencha可以幫忙我們開發(fā)移動(dòng)設(shè)備的Web應(yīng)用，Sencha可以讓W(xué)eb應(yīng)用在蘋果的iOS與谷歌的Android系統(tǒng)上都能得到極好體驗(yàn)。
Sencha優(yōu)勢
1.跨平臺(tái)
喬布斯對Flash的封鎖，讓Flash無法進(jìn)入到iOS平臺(tái)上。雖然現(xiàn)在flash對android系統(tǒng)支持已經(jīng)很不錯(cuò)了。但對于開發(fā)者還是有些遺憾。
隨著Webkit在移動(dòng)設(shè)備上的流行，可以讓Sencha開發(fā)出的Web應(yīng)用順利的運(yùn)行于蘋果的iOS與谷歌的Android。
2.觸控體驗(yàn)佳
針對觸屏設(shè)計(jì)，讓應(yīng)用讀的懂手勢，如單擊/雙擊、抓捏、拖動(dòng)、旋轉(zhuǎn)等。
3.便捷的數(shù)據(jù)集成
可以方便的使用AJAX、JSON、YQL，以及離線存儲(chǔ)localStorage。
開始使用Seacha進(jìn)行開發(fā)：
1. 設(shè)置開發(fā)環(huán)境
下載Seacha開發(fā)框架庫。下載地址 [Seacha目前的版本0.92]
下載后的目錄結(jié)構(gòu)如下：
2.開始第一個(gè)Sencha應(yīng)用
創(chuàng)建Html
我使用的是DW(Dreamweaver)，創(chuàng)建了一個(gè)Html頁面。
注：第10行，引用的是一個(gè)debug版的Sencha JS庫，開發(fā)時(shí)方便調(diào)試。正式上線時(shí)，可更換為優(yōu)化版ext-touch.js
創(chuàng)建JavaScript
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- phoneStartupScreen: 'phone_startup.png',
- icon: 'icon.png',
- glossOnIcon: false,
- onReady: function() {
- var pnl = new Ext.Panel({
- layout: {
- type: 'vbox',
- pack: 'center'
- },
- items: [{
- xtype: 'video',
- url: 'space.mp4',
- loop: true,
- width: 500,
- height: 400,
- poster: 'Screenshot.png'
- }],
- fullscreen: true
- })
- }});
感覺Hello word!沒有意思，就搞一下視頻吧!直接從example中找段代碼。具體后面慢慢消化吧。
3.測試自己的成果
使用Safari瀏覽一下index.html
注：目前火狐及Chrome目前支持的都不太理想，IE大家先不用想了。如果之前有過手機(jī)的開發(fā)經(jīng)驗(yàn)，可以直接用iPhone或Android的模擬器進(jìn)行測試。
4. 將index.html中的ext-touch-debug.js更換為ext-touch.js
5. 上傳服務(wù)器完成我第一個(gè)煎茶
