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

Published on

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

No Downloads
Views
Total Views
2,668
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

×