Your SlideShare is downloading. ×
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,661
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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