Sencha touch在移动设备的应用

•Download as PPTX, PDF•

2 likes•759 views

sankyu Tang

Technology

Sencha Touch在移动设备的应用悠乐无线 @三桥sankyu nesta.jk.tang@gmail.com http://www.imsankyu.com

Web移动应用JS框架 iUIhttp://code.google.com/p/iui/ PhoneGaphttp://www.phonegap.com/ Sencha Touch http://www.sencha.com/ jQuery Mobile http://jquerymobile.com/

What’s Sencha Touch? a JavaScript framework for building rich mobile apps with web standards

Why Sencha Touch? Built with Web Standards Cross-platform Looks native, feels native Flexible Deployment Highly customisable The World’s Best Devices

Features Enhanced Touch Events Data Integration GEO、Map Video、Audio Scrolling Froms Components More…

Touch Events Tap Double tap Tap and hold Swipe Rotate pinch Drag & drop

Data Integration Models，Stores，Proxies ,[object Object]

Local & server storageEasily consume web services ,[object Object]

Forms HTML5 Email URL Number spinner Toggle Slider

Components Panel Lists Nested, Grouped, Sortable Layout Picker Overlay Toolbars & buttons HTML5 Audio,Video,GeoLocation

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>

demo.js Ext.setup({ onReady: function(){ var panel = new Ext.Panel({ fullscreen: true, html:'hello World' }); } });

Model Manages the data of the application Provide data in its current state Allows you to change state

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" });

Views Multiple views can exist for a single model Renders the model into a form suitable for interaction

app.views.Viewport = Ext.extend(Ext.Panel,{ id : 'viewport', fullscreen : true, initComponent : function(){ …… } });

Controllers Receives input Instructs the model and views

new Ext.Controller({ model : ‘message', onSelected : function(selectionModel,records){ …… }, show : function(){ …… }, save : function(){ …… } });

What's hot

Beyond MDM: 5 Things You Must do to Secure Mobile Devices in the EnterpriseCA API Management

WSO2Con Asia 2014 - Embracing BYOD Trend Without Compromising Security, Emplo...WSO2

Patterns and Practices in Mobile SSOWSO2

Successful Enterprise Single Sign-on: Addressing Deployment ChallengesHitachi ID Systems, Inc.

IBM MobileFirst - Hybrid App DevelopmentWim Tobback

WSO2Con USA 2015: Connected Device Management for Enterprise Mobility and BeyondWSO2

Styr mobile enheder med Mobile Device Management, Martin Vittrup, IBMIBM Danmark

Connecting The Real World With The Virtual WorldPing Identity

Mobile SSO: Give App Users a Break from Typing PasswordsCA API Management

Offline Storage: Build secure, offline-first appsRachelAshton5

Gartner Catalyst: How to succeed with your IT Mobile StrategyLou Sacco

UXT Chicago - Designing Mobile Apps for Enterprise UseJeff Steffgen

Mobile application platforms - IntroductionMobileMonday Switzerland

Digital hour presentation BB10Industree spa

Falcon　authentication samlKatsumi Yamashita

CIS 2013 Ping Identity ChalktalkCraig Wu

Crie Aplicações Mobile Híbridas Escritas em Java, para iOS e AndroidBruno Borges

Case study: integrating azure with google app engine Miguel Scotter

Introduction to ICSamsanjeev

ttv_1215410348toptiervcs

What's hot (20)

Beyond MDM: 5 Things You Must do to Secure Mobile Devices in the Enterprise

WSO2Con Asia 2014 - Embracing BYOD Trend Without Compromising Security, Emplo...

Patterns and Practices in Mobile SSO

Successful Enterprise Single Sign-on: Addressing Deployment Challenges

IBM MobileFirst - Hybrid App Development

WSO2Con USA 2015: Connected Device Management for Enterprise Mobility and Beyond

Styr mobile enheder med Mobile Device Management, Martin Vittrup, IBM

Connecting The Real World With The Virtual World

Mobile SSO: Give App Users a Break from Typing Passwords

Offline Storage: Build secure, offline-first apps

Gartner Catalyst: How to succeed with your IT Mobile Strategy

UXT Chicago - Designing Mobile Apps for Enterprise Use

Mobile application platforms - Introduction

Digital hour presentation BB10

Falcon　authentication saml

CIS 2013 Ping Identity Chalktalk

Crie Aplicações Mobile Híbridas Escritas em Java, para iOS e Android

Case study: integrating azure with google app engine

Introduction to ICS

ttv_1215410348

Similar to Sencha touch在移动设备的应用

Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009

Cross platform mobile application architecture for enterpriseVenkat Alagarsamy

Native, Web or Hybrid Mobile App Development?Sura Gonzalez

Fake it 'til you make itJonathan Snook

Sencha Touch for RubyistsJames Pearce

Building cross platform mobile web appsJames Pearce

HTML5 and the dawn of rich mobile web applicationsJames Pearce

Building Desktop & Mobile Apps with Sencha and Force.comSalesforce Developers

Mobile Web Standards and its FutureSeungyun Lee

HiUED 前端/web 發展和體驗Bobby Chen

Salesforce touchSiva Vittala

Mobile DrupalTwinbit

Device Technology - MobileAlterian

Choosing the Right Mobile Development Platform (Part 6)Chris Griffith

An Overview of All Ericsson Labs APIsEricsson Labs

baidu开发者大会 - Web App开发框架介绍以及分析joylite

San Diego HackathonJames Pearce

Introduction to Mobile DevelopmentFoteini Valeonti

BehavioSec Web Summit START slideshareNeil Costigan

Html5 investigationoppokui

Similar to Sencha touch在移动设备的应用 (20)

Jason.O Keefe.Genuitec.Presentation.Final

Cross platform mobile application architecture for enterprise

Native, Web or Hybrid Mobile App Development?

Fake it 'til you make it

Sencha Touch for Rubyists

Building cross platform mobile web apps

HTML5 and the dawn of rich mobile web applications

Building Desktop & Mobile Apps with Sencha and Force.com

Mobile Web Standards and its Future

HiUED 前端/web 發展和體驗

Salesforce touch

Mobile Drupal

Device Technology - Mobile

Choosing the Right Mobile Development Platform (Part 6)

An Overview of All Ericsson Labs APIs

baidu开发者大会 - Web App开发框架介绍以及分析

San Diego Hackathon

Introduction to Mobile Development

BehavioSec Web Summit START slideshare

Html5 investigation

Recently uploaded

Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA

A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3

Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda

React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech

Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani

Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765

So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda

Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica

Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes

UiPath Community: Communication Mining from Zero to HeroUiPathCommunity

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney

Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh

Scale your database traffic with Read & Write split using MySQL RouterMydbops

Recently uploaded (20)

Long journey of Ruby standard library at RubyConf AU 2024

A Deep Dive on Passkeys: FIDO Paris Seminar.pptx

Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger

React Native vs Ionic - The Best Mobile App Framework

Potential of AI (Generative AI) in Business: Learnings and Insights

Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration

So einfach geht modernes Roaming fuer Notes und Nomad.pdf

Zeshan Sattar- Assessing the skill requirements and industry expectations for...

Glenn Lazarus- Why Your Observability Strategy Needs Security Observability

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes

UiPath Community: Communication Mining from Zero to Hero

The State of Passkeys with FIDO Alliance.pptx

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx

[Webinar] SpiraTest - Setting New Standards in Quality Assurance

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...

Generative AI - Gitex v1Generative AI - Gitex v1.pptx

Scale your database traffic with Read & Write split using MySQL Router

Sencha touch在移动设备的应用

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

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.

14. Validation

15.

16. XML

17.

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

Sencha touch在移动设备的应用

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Sencha touch在移动设备的应用

Similar to Sencha touch在移动设备的应用 (20)

Recently uploaded

Recently uploaded (20)

Sencha touch在移动设备的应用