Download as PDF, PPTX
![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/soujavaibmmaio2013-130523083229-phpapp01/85/Sencha-Touch-e-PhoneGap-SouJava-IBM-Maio-2013-39-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/soujavaibmmaio2013-130523083229-phpapp01/85/Sencha-Touch-e-PhoneGap-SouJava-IBM-Maio-2013-41-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/soujavaibmmaio2013-130523083229-phpapp01/85/Sencha-Touch-e-PhoneGap-SouJava-IBM-Maio-2013-53-320.jpg)
![function checkConnection() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
checkConnection();
Conexão](https://image.slidesharecdn.com/soujavaibmmaio2013-130523083229-phpapp01/85/Sencha-Touch-e-PhoneGap-SouJava-IBM-Maio-2013-66-320.jpg)
![app.json
"js": [
{
"path": "touch/sencha-touch.js"
},
{
"path": "cordova-2.5.0.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
}
],](https://image.slidesharecdn.com/soujavaibmmaio2013-130523083229-phpapp01/85/Sencha-Touch-e-PhoneGap-SouJava-IBM-Maio-2013-87-320.jpg)
![navigator.contacts.find(
! fields,
! function(deviceContacts) {
! //loop over deviceContacts and create Contact model instances
! var contacts = [];
! for (var i = 0; i < deviceContacts.length; i++) {
! var deviceContact = deviceContacts[ i ];
! ! ! ! ! console.log(deviceContact);
! ! ! ! ! var phone = deviceContact.phoneNumbers[0];
! ! ! ! ! if (phone){
! ! ! ! ! ! phone = phone.value;
! ! ! ! ! } else{
! ! ! ! ! ! phone = "";
! ! ! ! ! }
! ! ! ! ! console.log("phone " + phone);
! var contact = Ext.create('MyContacts.model.Contact',{
! id: deviceContact.id,
! givenName: deviceContact.name.givenName,
! familyName: deviceContact.name.familyName,
! phoneNumber: phone,
! birthday: new Date(deviceContact.birthday),
! notes: deviceContact.note
! });
! contact.deviceContact = deviceContact;
! contacts.push(contact);
! }
! //return model instances in a result set
operation.setResultSet(
! Ext.create('Ext.data.ResultSet', {
! records: contacts,
! total : contacts.length
})
);
! //announce success
! operation.setSuccessful();
! operation.setCompleted();
console.log('operation complete');
! //finish with callback
! if (typeof callback == "function") {
! callback.call(scope || thisProxy, operation);
! }
! },
MyContacts.proxy.ContactsProxy](https://image.slidesharecdn.com/soujavaibmmaio2013-130523083229-phpapp01/85/Sencha-Touch-e-PhoneGap-SouJava-IBM-Maio-2013-88-320.jpg)
Uploaded byLoiane Groner
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
The document discusses the development of mobile applications using Sencha Touch and PhoneGap, highlighting the benefits of cross-platform compatibility and the use of HTML5. It covers various technical aspects such as components, data packages, and device access, along with coding examples. It also emphasizes the importance of performance, design guidelines, and the integration of native features into hybrid applications.
More Related Content
![Planning Adaptive Interfaces [RWD Summit 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/planningadaptiveinterfacesrwdsummit2016-160330235919-thumbnail.jpg?width=640&height=640&fit=bounds)
![Beyond Responsive [18F 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/beyondresponsive18f2015-150812140602-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![There Are No “Buts” in Progressive Enhancement [Øredev 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/therearenobutsinprogressiveenhancementredev-151106102141-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
- 1. Sencha Touch + PhoneGap Loiane Groner Encontro 21 Maio 2013 IBM São Paulo
- 2. Loiane Groner Java JUGLeader Sencha Community Leader 7+ XP Java 4+ XP Sencha Software Developer Manager @ Citibank http://loiane.com @loiane
- 3.
- 4.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro ParcialSussa Sim Não Sim Não Híbrido Sim ? Sussa* Sim Sim ? Sussa* Já vamos discutir Já vamos discutir
- 12.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. Our biggest mistake wasbetting too much on HTML5
- 20.
- 21. “So, when MarkZuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”
- 24.
- 31.
- 32.
- 33.
- 34. Android Java BackBerry Java iOSObjective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
- 35.
- 36. Primeiro framework Javascriptpara desenvolvimento de apps mobile ricas usando padrões web - HTML 5
- 37. O que temno Sencha Touch? Componentes e Layouts Themas e Ícones Orientação e Animação Eventos Touch e Scroller Pacote de Dados MVC
- 38. 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
- 39. 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 });
- 40.
- 41. 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!'); } });
- 42. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughoutall components: Lists Carousel Pickers
- 43. Eventos Touch Baseado emEventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
- 44. Data Package Models, Stores,e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
- 46.
- 47.
- 48. Local Storage Web SQL(SQLite)
- 49.
- 50. 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
- 53. "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" } ]
- 54.
- 55.
- 56.
- 57. Acesso Nativo App inPurchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications Sencha Packager* PhoneGap Emulator
- 58. Sencha Touch nãotem Acelerômetro Compass File
- 59.
- 61. function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + 'n' + 'Acceleration Y: ' + acceleration.y + 'n' + 'Acceleration Z: ' + acceleration.z + 'n' + 'Timestamp: ' + acceleration.timestamp + 'n'); }; function onError() { alert('onError!'); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); Acceleration
- 62. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess,onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } Capturar Foto
- 63. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess,onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } Capturar Foto com Edição
- 64. function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess,onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button> Busca Foto do Dispositivo
- 65. function onSuccess(heading) { alert('Heading:' + heading.magneticHeading); }; function onError(error) { alert('CompassError: ' + error.code); }; navigator.compass.getCurrentHeading(onSuccess, onError); Compass/Bússula
- 66. function checkConnection() { varnetworkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; alert('Connection type: ' + states[networkState]); } checkConnection(); Conexão
- 67. function onDeviceReady() { varelement = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Model: ' + device.model + '<br />' + 'Device Version: ' + device.version + '<br />'; } Propriedades do Dispositivo
- 68. var ref =window.open('http://loiane.com', '_blank', 'location=yes'); ref.addEventListener('loadstart', function() { alert('start: ' + event.url); }); ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); }); ref.addEventListener('exit', function() { alert(event.type); }); In App Browser
- 69. navigator.notification.alert( 'Alerta!', // message alertDismissed,// callback 'Titulo', // title 'Botão' // buttonName ); Notification - Alert
- 70. function showConfirm() { navigator.notification.confirm( 'Confirmar?',// message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); } Notification - Confirm
- 71. // Beepa 3vezes function playBeep() { navigator.notification.beep(3); } Notification - Beep Não funciona no iOS
- 72. // Vibra por2 segundos function vibrate() { navigator.notification.vibrate(2000); } Notification - Vibrar
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 82.
- 83.
- 84.
- 85.
- 87. app.json "js": [ { "path": "touch/sencha-touch.js" }, { "path":"cordova-2.5.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
- 88. navigator.contacts.find( ! fields, ! function(deviceContacts){ ! //loop over deviceContacts and create Contact model instances ! var contacts = []; ! for (var i = 0; i < deviceContacts.length; i++) { ! var deviceContact = deviceContacts[ i ]; ! ! ! ! ! console.log(deviceContact); ! ! ! ! ! var phone = deviceContact.phoneNumbers[0]; ! ! ! ! ! if (phone){ ! ! ! ! ! ! phone = phone.value; ! ! ! ! ! } else{ ! ! ! ! ! ! phone = ""; ! ! ! ! ! } ! ! ! ! ! console.log("phone " + phone); ! var contact = Ext.create('MyContacts.model.Contact',{ ! id: deviceContact.id, ! givenName: deviceContact.name.givenName, ! familyName: deviceContact.name.familyName, ! phoneNumber: phone, ! birthday: new Date(deviceContact.birthday), ! notes: deviceContact.note ! }); ! contact.deviceContact = deviceContact; ! contacts.push(contact); ! } ! //return model instances in a result set operation.setResultSet( ! Ext.create('Ext.data.ResultSet', { ! records: contacts, ! total : contacts.length }) ); ! //announce success ! operation.setSuccessful(); ! operation.setCompleted(); console.log('operation complete'); ! //finish with callback ! if (typeof callback == "function") { ! callback.call(scope || thisProxy, operation); ! } ! }, MyContacts.proxy.ContactsProxy
- 89.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98. sencha app build senchaapp build native
- 99.
- 101.
- 102.
- 103.
- 104.
- 105. Parece uma App Parece app iOS diferente web Aprendaa desenvolver para mobile, não web App únicaButtons, iOS Human Interface Design Guidelines Eventos Touch, não Web Pinch, Zoom #fail Agregador de links App Intuitiva Hyperlink
- 107.