Sencha Touch在移动设备的应用<br />悠乐无线<br />@三桥sankyu<br />nesta.jk.tang@gmail.com<br />http://www.imsankyu.com<br />
HTML5<br />
动画、游戏<br />视频应用<br />移动应用 Web App<br />离线应用<br />地理定位<br />用户体验<br />
Web移动应用JS框架<br />iUIhttp://code.google.com/p/iui/<br />PhoneGaphttp://www.phonegap.com/<br />Sencha Touch	http://www.sench...
What’s Sencha Touch?<br />
What’s Sencha Touch?<br />a JavaScript framework for building rich mobile apps with web standards<br />
Why Sencha Touch?<br />
Why Sencha Touch?<br />Built with Web Standards<br />Cross-platform<br />Looks native, feels native<br />Flexible Deployme...
Features<br />
Features<br />Enhanced Touch Events<br />Data Integration<br />GEO、Map<br />Video、Audio <br />Scrolling<br />Froms<br />Co...
Touch Events<br />Tap<br />Double tap<br />Tap and hold<br />Swipe<br />Rotate<br />pinch<br />Drag & drop<br />
Data Integration<br />Models,Stores,Proxies<br /><ul><li> Associations
 Validation
 Local & server storage</li></ul>Easily consume web services<br /><ul><li> JSON/P
 XML
 YQL</li></li></ul><li>Scrolling<br />Momentum/bounce physics<br />Hardware accelerated<br />Throughout components<br />Li...
Forms<br />HTML5<br />Email<br />	URL<br />	Number<br />spinner<br />Toggle<br />Slider<br />
Components<br />Panel<br />Lists<br />     Nested, Grouped, Sortable<br />Layout<br />Picker<br />Overlay<br />Toolbars & ...
Hello World!<br />
Index.html<br /><!DOCTYPE HTML><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=G...
demo.js<br />Ext.setup({<br />onReady: function(){<br />var panel = new Ext.Panel({<br />fullscreen: true,<br />html:'hell...
Sencha MVC<br />Models, Views & Controllers<br />
Model<br />Manages the data of the application<br />Provide data in its current state<br />Allows you to change state<br />
Ext.regModel("message",{<br />	fields : [<br />		{name : 'id',type : 'string'},<br />		{name : 'title',type : 'string'},<b...
Views<br />Multiple views can exist for a single model<br />Renders the model into a form suitable for interaction<br />
app.views.Viewport = Ext.extend(Ext.Panel,{<br />	id : 'viewport',<br />fullscreen : true,<br />initComponent : function()...
Controllers<br />Receives input<br />Instructs the model and views<br />
new Ext.Controller({<br />	model : ‘message',<br />onSelected : function(selectionModel,records){<br />		……<br />	},<br />...
Demos<br />
Upcoming SlideShare
Loading in...5
×

Sencha touch在移动设备的应用

2,686

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,686
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sencha touch在移动设备的应用

  1. 1. Sencha Touch在移动设备的应用<br />悠乐无线<br />@三桥sankyu<br />nesta.jk.tang@gmail.com<br />http://www.imsankyu.com<br />
  2. 2. HTML5<br />
  3. 3. 动画、游戏<br />视频应用<br />移动应用 Web App<br />离线应用<br />地理定位<br />用户体验<br />
  4. 4. Web移动应用JS框架<br />iUIhttp://code.google.com/p/iui/<br />PhoneGaphttp://www.phonegap.com/<br />Sencha Touch http://www.sencha.com/<br />jQuery Mobile http://jquerymobile.com/<br />
  5. 5. What’s Sencha Touch?<br />
  6. 6. What’s Sencha Touch?<br />a JavaScript framework for building rich mobile apps with web standards<br />
  7. 7.
  8. 8. Why Sencha Touch?<br />
  9. 9. Why Sencha Touch?<br />Built with Web Standards<br />Cross-platform<br />Looks native, feels native<br />Flexible Deployment<br />Highly customisable<br />The World’s Best Devices<br />
  10. 10. Features<br />
  11. 11. Features<br />Enhanced Touch Events<br />Data Integration<br />GEO、Map<br />Video、Audio <br />Scrolling<br />Froms<br />Components<br />More…<br />
  12. 12. Touch Events<br />Tap<br />Double tap<br />Tap and hold<br />Swipe<br />Rotate<br />pinch<br />Drag & drop<br />
  13. 13. Data Integration<br />Models,Stores,Proxies<br /><ul><li> Associations
  14. 14. Validation
  15. 15. Local & server storage</li></ul>Easily consume web services<br /><ul><li> JSON/P
  16. 16. XML
  17. 17. YQL</li></li></ul><li>Scrolling<br />Momentum/bounce physics<br />Hardware accelerated<br />Throughout components<br />Lists<br />Carousel<br />Pickers<br />
  18. 18. Forms<br />HTML5<br />Email<br /> URL<br /> Number<br />spinner<br />Toggle<br />Slider<br />
  19. 19. Components<br />Panel<br />Lists<br /> Nested, Grouped, Sortable<br />Layout<br />Picker<br />Overlay<br />Toolbars & buttons<br />HTML5<br />Audio,Video,GeoLocation<br />
  20. 20. Hello World!<br />
  21. 21. Index.html<br /><!DOCTYPE HTML><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=GBK"><br /><title>hello world</title><br /><link rel="stylesheet" type="text/css" href=“sencha-touch.css" /><br /><script type="text/javascript" src=“sencha-touch.js"></script><br /><script type="text/javascript" src=“demo.js"></script><br /></head><br /><body><br /></body><br /></html><br />
  22. 22. demo.js<br />Ext.setup({<br />onReady: function(){<br />var panel = new Ext.Panel({<br />fullscreen: true,<br />html:'hello World'<br /> });<br /> }<br />});<br />
  23. 23. Sencha MVC<br />Models, Views & Controllers<br />
  24. 24. Model<br />Manages the data of the application<br />Provide data in its current state<br />Allows you to change state<br />
  25. 25. Ext.regModel("message",{<br /> fields : [<br /> {name : 'id',type : 'string'},<br /> {name : 'title',type : 'string'},<br /> {name : 'content',type : 'string'},<br /> {name : 'author',type : 'string'},<br /> {name : 'email',type : 'string'},<br /> {name : 'url',type : 'string'}<br /> ]<br />});<br />Ext.regStore("messageStore",{<br /> model : "message"<br />});<br />
  26. 26. Views<br />Multiple views can exist for a single model<br />Renders the model into a form suitable for interaction<br />
  27. 27. app.views.Viewport = Ext.extend(Ext.Panel,{<br /> id : 'viewport',<br />fullscreen : true,<br />initComponent : function(){<br /> ……<br /> }<br />});<br />
  28. 28. Controllers<br />Receives input<br />Instructs the model and views<br />
  29. 29. new Ext.Controller({<br /> model : ‘message',<br />onSelected : function(selectionModel,records){<br /> ……<br /> },<br /> show : function(){<br /> ……<br /> },<br /> save : function(){<br /> ……<br /> }<br />});<br />
  30. 30. Demos<br />
  31. 31. 站点推荐<br />
  32. 32. Sencha Touch<br />http://www.sencha.com/products/touch/<br />Sencha Touch forum<br />http://www.sencha.com/forum/<br />Sencha touch 开发指南<br />http://ued.sina.com/?p=406<br />A Sencha Touch MVC application with PhoneGap<br />http://extensions.extjs.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap<br />
  33. 33. OVER <br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×