Contenu connexe Similaire à An Introduction to Sencha Touch (20) Plus de James Pearce (14) An Introduction to Sencha Touch2. James Pearce
Sr Director, Developer Relations
@ jamespearce
jamesp@sencha.com
4. “ Create amazing apps
built
on web standards
”
13. The native challenge
JS
C# Palm J2ME
Microsoft
RIM RIM
Android
Apple
Apple Air Microsoft
Palm
Obj-C
Java
C++ Android
Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
16. A return to the web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood technologies
18. A New Mobile App Stack
WebFonts Video Audio Graphics
Device Access Server & Services
Camera CSS Styling & Layout HTTP
Location AJAX
Javascript
Contacts Events
SMS Semantic HTML Sockets
Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing
30. What’s in Sencha Touch?
Layouts & components
Theming & icons
Orientation & animation
Touch events & scroller
Data package
MVC framework
34. Touch Events
Built on native events
Abstracted for performance
Additional events
- Tap
- Double tap
- Tap and hold
- Swipe
- Rotate
- Drag & drop
35. Data Package
Models, Stores, and Proxies
- Associations
- Validation
- Local & server storage
Easily consume web services
- JSON/P
- XML
- YQL
36. Theming
Use CSS3 & SASS
- Flexible themes
- Highly optimized
e.g.
$base-color: #ff6699
39. The classic web stack
req/res
User interface Rendering
Business logic
Storage
40. The next web stack
User interface
sync
Security Business logic
Storage Storage
43. “ The Mobile Web
is not a
”
320px Web
46. Views Views
Controllers
Models
Stores
Proxies
json
47. Ext JS Sencha Touch
buttongroup actionsheet
colorpalette button audio
cycle component carousel
editor container list
editorgrid dataview map
grid datepicker nestedlist
multislider panel picker
progress slider pickerslot
splitbutton spacer segbutton
treepanel toolbar sheet
viewport tabpanel tabbar
window video
49. List
var list = new Ext.List({
store: store,
itemTpl:
'{firstName} {lastName}',
grouped: true,
indexBar: true
});
50. Nested List
var list = new Ext.NestedList({
store: store,
displayField: 'name',
title: 'My List',
updateTitleText: true,
getDetailCard:
function(record, parent) {..}
});
51. Carousel
var car = new Ext.Carousel({
direction: 'horizontal',
indicator: true,
items: [
..
]
});
52. Sheets
var sheet = new Ext.ActionSheet({
items: [
{
text: 'Delete draft',
ui: 'decline'
}, {
text: 'Save draft'
}, {
text: 'Cancel',
}
]
});
sheet.show();
61. Location Services
Adaptation Analytics
Web Fonts Data Sync
Video Serving Ad Serving
$
Image Serving Commerce
Network APIs
67. James Pearce
Sr Director, Developer Relations
@ jamespearce
jamesp@sencha.com