Scribd
Upload
70 views38 pages

Phonegap + Sencha Touch: Hello World!

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.

Uploaded by

user44448605
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
70 views38 pages

Phonegap + Sencha Touch: Hello World!

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.

Uploaded by

user44448605
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
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