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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,071
On Slideshare
2,619
From Embeds
452
Number of Embeds
3

Actions

Shares
Downloads
33
Comments
0
Likes
2

Embeds 452

http://www.imsankyu.com 436
url_unknown 15
http://cache.baidu.com 1

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