Your SlideShare is downloading. ×
0
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Sencha touch在移动设备的应用
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sencha touch在移动设备的应用

2,672

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sencha Touch在移动设备的应用<br />悠乐无线<br />@三桥sankyu<br />nesta.jk.tang@gmail.com<br />http://www.imsankyu.com<br />
  • 2. HTML5<br />
  • 3. 动画、游戏<br />视频应用<br />移动应用 Web App<br />离线应用<br />地理定位<br />用户体验<br />
  • 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. What’s Sencha Touch?<br />
  • 6. What’s Sencha Touch?<br />a JavaScript framework for building rich mobile apps with web standards<br />
  • 7.
  • 8. Why Sencha Touch?<br />
  • 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. Features<br />
  • 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. Touch Events<br />Tap<br />Double tap<br />Tap and hold<br />Swipe<br />Rotate<br />pinch<br />Drag &amp; drop<br />
  • 13. Data Integration<br />Models,Stores,Proxies<br /><ul><li> Associations
  • 14. Validation
  • 15. Local &amp; server storage</li></ul>Easily consume web services<br /><ul><li> JSON/P
  • 16. XML
  • 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. Forms<br />HTML5<br />Email<br /> URL<br /> Number<br />spinner<br />Toggle<br />Slider<br />
  • 19. Components<br />Panel<br />Lists<br /> Nested, Grouped, Sortable<br />Layout<br />Picker<br />Overlay<br />Toolbars &amp; buttons<br />HTML5<br />Audio,Video,GeoLocation<br />
  • 20. Hello World!<br />
  • 21. Index.html<br />&lt;!DOCTYPE HTML&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=GBK&quot;&gt;<br />&lt;title&gt;hello world&lt;/title&gt;<br />&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“sencha-touch.css&quot; /&gt;<br />&lt;script type=&quot;text/javascript&quot; src=“sencha-touch.js&quot;&gt;&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot; src=“demo.js&quot;&gt;&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
  • 22. demo.js<br />Ext.setup({<br />onReady: function(){<br />var panel = new Ext.Panel({<br />fullscreen: true,<br />html:&apos;hello World&apos;<br /> });<br /> }<br />});<br />
  • 23. Sencha MVC<br />Models, Views &amp; Controllers<br />
  • 24. Model<br />Manages the data of the application<br />Provide data in its current state<br />Allows you to change state<br />
  • 25. Ext.regModel(&quot;message&quot;,{<br /> fields : [<br /> {name : &apos;id&apos;,type : &apos;string&apos;},<br /> {name : &apos;title&apos;,type : &apos;string&apos;},<br /> {name : &apos;content&apos;,type : &apos;string&apos;},<br /> {name : &apos;author&apos;,type : &apos;string&apos;},<br /> {name : &apos;email&apos;,type : &apos;string&apos;},<br /> {name : &apos;url&apos;,type : &apos;string&apos;}<br /> ]<br />});<br />Ext.regStore(&quot;messageStore&quot;,{<br /> model : &quot;message&quot;<br />});<br />
  • 26. Views<br />Multiple views can exist for a single model<br />Renders the model into a form suitable for interaction<br />
  • 27. app.views.Viewport = Ext.extend(Ext.Panel,{<br /> id : &apos;viewport&apos;,<br />fullscreen : true,<br />initComponent : function(){<br /> ……<br /> }<br />});<br />
  • 28. Controllers<br />Receives input<br />Instructs the model and views<br />
  • 29. new Ext.Controller({<br /> model : ‘message&apos;,<br />onSelected : function(selectionModel,records){<br /> ……<br /> },<br /> show : function(){<br /> ……<br /> },<br /> save : function(){<br /> ……<br /> }<br />});<br />
  • 30. Demos<br />
  • 31. 站点推荐<br />
  • 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. OVER <br />

×