TDC2013: Arquitetura de apps com Sencha Touch 2
3 likes•1,798 views
This document discusses building mobile apps with Sencha Touch 2, an open source JavaScript framework. It introduces Sencha Touch components for building interfaces, models and stores for managing data, themes for styling, and tools for testing and building apps. It also compares native, web-based and hybrid mobile development approaches, and explains how to access device capabilities when using Sencha Touch.
![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
});](https://image.slidesharecdn.com/senchatouch2-tdc2013-130716075746-phpapp02/85/TDC2013-Arquitetura-de-apps-com-Sencha-Touch-2-22-320.jpg)
![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!');
}
});](https://image.slidesharecdn.com/senchatouch2-tdc2013-130716075746-phpapp02/85/TDC2013-Arquitetura-de-apps-com-Sencha-Touch-2-24-320.jpg)
!["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"
}
]](https://image.slidesharecdn.com/senchatouch2-tdc2013-130716075746-phpapp02/85/TDC2013-Arquitetura-de-apps-com-Sencha-Touch-2-31-320.jpg)
TDC2013: Arquitetura de apps com Sencha Touch 2
- 1. Trilha Mobile Loiane Groner http://loiane.com @loiane Arquitetura de apps com Sencha Touch 2
- 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
- 3. Momento Jabá packpub.com ou amazon.com
- 10. Mobile
- 11. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
- 12. Nativo x Web 2
- 14. App Híbrida?
- 16. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não Híbrido Sim ? Sussa* Sim Sim
- 18. Sencha Touch 3
- 19. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
- 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 });
- 23. Forms
- 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!'); } });
- 25. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
- 26. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
- 27. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
- 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" } ]
- 33. Nossa App 4
- 35. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
- 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
- 39. M O C K U P
- 41. cd senchaTouchSDK sencha app generate MyContacts ../TDC2013/MyContacts
- 43. Testes Locais
- 47. chrome dev tools
- 48. iWebInspector
- 49. Weinre
- 51. Build
- 52. sencha app build sencha app build native sencha app package run packager.json
- 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
- 57. Sencha Touch não tem Acelerômetro Compass File
- 58. Phone Gap