Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
36 views38 pages

Phonegap + Sencha Touch: Hello World!

Uploaded by

user44448605

This document discusses using PhoneGap and Sencha Touch together for mobile app development. It provides an overview of both frameworks, examples of how to use common APIs like accessing device information, accelerometer, and camera with PhoneGap, and how to create UI elements like tab panels, carousels, and data views with Sencha Touch. It also includes links to the PhoneGap and Sencha Touch documentation and installation guides.

Copyright:

Attribution Non-Commercial (BY-NC)
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

Phonegap + Sencha Touch: Hello World!

Uploaded by

user44448605
36 views38 pages
This document discusses using PhoneGap and Sencha Touch together for mobile app development. It provides an overview of both frameworks, examples of how to use common APIs like accessing device information, accelerometer, and camera with PhoneGap, and how to create UI elements like tab panels, carousels, and data views with Sencha Touch. It also includes links to the PhoneGap and Sencha Touch documentation and installation guides.

Original Title

Presentation

Copyright

© Attribution Non-Commercial (BY-NC)

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

This document discusses using PhoneGap and Sencha Touch together for mobile app development. It provides an overview of both frameworks, examples of how to use common APIs like accessing device information, accelerometer, and camera with PhoneGap, and how to create UI elements like tab panels, carousels, and data views with Sencha Touch. It also includes links to the PhoneGap and Sencha Touch documentation and installation guides.

Copyright:

Attribution Non-Commercial (BY-NC)
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
36 views38 pages

Phonegap + Sencha Touch: Hello World!

Uploaded by

user44448605
This document discusses using PhoneGap and Sencha Touch together for mobile app development. It provides an overview of both frameworks, examples of how to use common APIs like accessing device information, accelerometer, and camera with PhoneGap, and how to create UI elements like tab panels, carousels, and data views with Sencha Touch. It also includes links to the PhoneGap and Sencha Touch documentation and installation guides.

Copyright:

Attribution Non-Commercial (BY-NC)
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 38

PhoneGap + Sencha Touch

Hello world!

PhoneGap + Sencha Touch

Filipe Cruz Http://tpolm.org/~ps

PhoneGap + Sencha Touch


LEIC + MEI @ FEUP (Porto) Head Software Developer (Coimbra) 2 years @ Take The Wind Freelance Software Developer (Helsinkia) Interactive Media Mobile Apps

PhoneGap + Sencha Touch


Topics 1) Things you should already know 2) Things you might not know 3) PhoneGap 4) Sencha Touch 5) Q&A

PhoneGap + Sencha Touch

Things you should already know

PhoneGap + Sencha Touch

Internet is the shit

PhoneGap + Sencha Touch

Web development has a lot of demand

PhoneGap + Sencha Touch

Smartphones have Angry Birds

PhoneGap + Sencha Touch

Everybody wants a smartphone

PhoneGap + Sencha Touch

Smartphones are a bitch for developers a) Different APIs / OS b) Different screen resolutions

PhoneGap + Sencha Touch

Things you might not know

PhoneGap + Sencha Touch

Since the internet is the shit => Smartphones come with native browsers

PhoneGap + Sencha Touch

Even though most of them are crap They have basic functionality Crippled HTML5 + CSS3 + JS support

PhoneGap + Sencha Touch

But it works! So why not use it? Widgets / WebApps use it! And so can we!

PhoneGap + Sencha Touch

Smartphones are a bitch for developers a) Different APIs / OS b) Different screen resolutions

PhoneGap + Sencha Touch

PhoneGap solves a) Different API / OS

PhoneGap + Sencha Touch

Hooray for PhoneGap!

PhoneGap + Sencha Touch

PhoneGap + Sencha Touch

Installation Guides http://phonegap.com/start

PhoneGap + Sencha Touch

API Documentation http://docs.phonegap.com/en/1.2.0/

PhoneGap + Sencha Touch

Examples Include phonegap.js in our .html


<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

PhoneGap + Sencha Touch


Device Info
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var element = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device PhoneGap: ' + device.phonegap + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Version: ' + device.version + '<br />';

PhoneGap + Sencha Touch


Acceleration
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); } function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); }

PhoneGap + Sencha Touch


Camera
navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; } function onFail(message) { alert('Failed because: ' + message); }

PhoneGap + Sencha Touch

Smartphones are a bitch for developers a) Different APIs / OS b) Different screen resolutions

PhoneGap + Sencha Touch

Sencha Touch solves b) Different screen resolutions

PhoneGap + Sencha Touch

Hooray Sencha Touch!

PhoneGap + Sencha Touch

PhoneGap + Sencha Touch

http://www.sencha.com/learn/hello-world

PhoneGap + Sencha Touch

http://docs.sencha.com/touch/2-0/

PhoneGap + Sencha Touch

Examples Include sencha in our .html


<script src="sencha-touch.js" type="text/javascript"></script> <link href="sencha-touch.css" rel="stylesheet" type="text/css"/>

PhoneGap + Sencha Touch


TabPanel
Ext.create('Ext.TabPanel', { fullscreen: true, defaults: { styleHtmlContent: true }, items: [{ title: 'Home', html: 'Home Screen' },{ title: 'Contact', html: 'Contact Screen' }] });

PhoneGap + Sencha Touch


Carousel
Ext.create('Ext.Carousel', { fullscreen: true, defaults: { styleHtmlContent: true }, items: [{ html : 'Item 1', style: 'background-color: #5E99CC' },{ html : 'Item 2', style: 'background-color: #759E60' },{ html : 'Item 3' }] });

PhoneGap + Sencha Touch

DatePicker
var datePicker = Ext.create('Ext.picker.Date', { value: new Date() }); datePicker.show();

PhoneGap + Sencha Touch


DataStore
Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'firstName', type: 'string'}, {name: 'age', type: 'int'}, ] }); var myStore = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url : '/users.json', reader: { type: 'json', root: 'users' } }, autoLoad: true });

PhoneGap + Sencha Touch


DataView
Ext.create('Ext.DataView', { fullscreen: true, cls: 'twitterView', store: { autoLoad: true, fields: ['from_user', 'text', 'profile_image_url'], proxy: { type: 'jsonp', url: 'http://search.twitter.com/search.json?q=Sencha Touch', reader: { type: 'json', root: 'results' } } }, itemTpl: '<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p><div style="clear: both"></div>' });

PhoneGap + Sencha Touch

http://dev.sencha.com/deploy/touch/examples/kitchensink/

PhoneGap + Sencha Touch

Http://tpolm.org/~ps/codebits5/ Q&A

You might also like