Sencha touch 介紹
Transcript of Sencha touch 介紹
Sencha Touchauthor:Canred
Web Mobile Tech.1.jQuery Mobile
Last Version : 1.4.5
官網:http://demos.jquerymobile.com/1.4.5/button-markup/
2.Sencha Touch
Last Version : 2.4
官網:http://www.sencha.com/products/touch/
3.Bootstrap
Last Verision:3.3.2
Depend by : JQuery 1.9 以上官網:http://getbootstrap.com/
4.Other
ps:http://www.slideshare.net/stevedrucker/mobile-platforms-19979061?next_slideshow=1
Sench Touch’s優劣1.可同時支持不同的Device顯示方式(Phone,Tablet,Windowsphone)
Sench Touch’s優劣2.強調 One Page One Application 的開發方式,讓您的Web Mobile App的操作方式更貼近於原生的App。
3.元件豐富
4.API文檔完整 http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/
5.較少的CSS來控制UI Layout.
6.可轉成Android的原生碼的可能性,可再製開發
http://www.slideshare.net/edspencer/introduction-to-sencha-touch?related=2
Sench Touch’s優劣
1.Touch基底的程式碼較大約2Mb,第一次載入的時侯較花時間。
Sench Touch’s優劣2.程序開發架框不易撐握。
Sench Touch’s優劣3.不懂 Javascript , js 除錯的人學習趨線將拉的很長
JS 容易學嗎?
Javascript
是一種易學,但難精通的語言!
It’s showtime..
Builder First Touch App1.Download Sencha Touch Source code .
2.安裝Sencha command 來建立 Touch 的基本框架參考資料:http://blog.toright.com/posts/3241/web-app-
%E8%A1%8C%E5%8B%95%E9%96%8B%E7%99%BC-3-sencha-touch-
%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%BB%BA%E7%BD%AE.html
3.執行指令sencha generate app YourApp YourAppPath
Sencha MVC
Store
Model
Directhttp://www.slideshare.net/mkamithkumar/mvc-in-sencha-touch?related=1
Sencha Controller’s refs因為View & Controller 是完全的分離的情況下…當我們在Controller時,如何正確的取得View上的元件,以及設定View元件上的行為動作(event)。
Controller’s refsrefs:{
txtUserName:”textfield[action=userName]”,txtPasswordName:”passwordfield[action=userPwd]”
},control:{
txtUserName:{change:’onTxtUserName’ //onTxtUserName is a function
}}
Sencha Controller’s refsfunction onTxtUserName(obj,newValue,oldValue){
// how to get passworld value ???
}this.getTxtPasswordName().value();
追縱程式碼
真相只有一個!!
程序入口僅有一個
Q&A