Contenu connexe Similaire à TDC2013: Arquitetura de apps com Sencha Touch 2 (20) TDC2013: Arquitetura de apps com Sencha Touch 22. Me, Myself & I
•Gerente de Desenv Projetos @Citibank
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•http://loiane.com
•@loiane
20. O que tem no Sencha Touch?
Componentes e Layouts
Themas e Ícones
Orientação e Animação
Eventos Touch e Scroller
Pacote de Dados
MVC
21. Componentes
Lists
- Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms & fields Toolbars & buttons HTML5
- Audio
-Video
- GeoLocation
Lists
- Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms & fields
Toolbars & buttons
HTML5
- Audio
- Video
Components
22. Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
sorters: 'lastName',
grouper: {
groupFn: function(record) {
return record.get('lastName')[0];
}
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
grouped: true
});
24. Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
form.submit({
url: 'url/to/submit/to',
method: 'POST',
success: function() {
alert('form submitted successfully!');
}
});
26. Eventos Touch
Baseado em Eventos Nativos
Abstraído para Performance
Eventos Adicionais:
- Tap
- Double tap
- Tap & hold - Swipe
- Rotate
- Drag & drop
28. Temas
Use CSS3 & SASS
- Flexible themes
- Highly optimized
e.g.
Theming
$base-color: #ff6699
Use CSS3 & SASS
- Flexible themes
- Highly optimized
e.g.
Theming
$base-color: #ff6699
CSS3 com
Sass e Compass
31. "css": [
{
"path": "../../resources/css/base.css",
"update": "delta"
},
{
"path": "resources/css/sencha-touch.css",
"platform": ['chrome', 'safari', 'ios'],
"update": "delta"
},
{
"path": "resources/css/android.css",
"platform": ['android'],
"update": "delta"
},
{
"path": "resources/css/bb.css",
"platform": ['blackberry'],
"update": "delta"
},
{
"path": "resources/css/wp.css",
"platform": ['ie10'],
"update": "delta"
}
]
38. Mockup
Arquitetura da app - MVC
Estrutura UI
Modelagem Dados
Binding Dados - View
Eventos - Controller
Página Detalhe e Form
Customização - Sass e Compass
Testes
Emulação
Teste Device
Produção
55. Acesso Nativo
App in Purchases
Câmera
Contatos (read only)*
Connection (online/offline)
Device Info (nome, plataforma, uuid)
GeoLocation
Notifications (vibrar)
Orientation
Push Notifications
56. Acesso Nativo
App in Purchases
Câmera
Contatos (read only)*
Connection (online/offline)
Device Info (nome, plataforma, uuid)
GeoLocation
Notifications (vibrar)
Orientation
Push Notifications
Sencha Packager*
PhoneGap
Emulator