Mountain View July JavaScript Meetup at Google

About Me

• @jhaynie
• http://blog.jeffhaynie.us
• jhaynie@appcelerator.com
• #titanium_app on freenode

Appcelerator

Empower developers to quickly create and
commercialize web, desktop and mobile
applications

Appcelerator Products
Create, test, and commercialize native mobile and desktop
applications with the web technologies you use today.

Develop Native iPhone Build Desktop apps Cloud services used for Web development tools
and Android apps with that can be deployed testing, packaging, that enable rapid RIA
full access to each with one code base on distribution, and development.
device’s APIs. the PC, Mac, or Linux analytics.
platforms.

Product Architecture
Mobile Desktop
Titanium

Advanced Advanced Advanced APIs
APIs APIs

Analytics Advertising Social Networking Team Collaboration
Appcelerator

- uattro
Q - acebook
F - hare your Project
S
- Usage
Network

- reystripe
G - Twitter - Account Management
- Events
- ahoo
Y

Training
Support

Titanium

• Desktop: Win32, OSX, Linux
• Mobile: iPhone and Android

Programming Model

Titanium supports JavaScript, HTML, CSS for
building mobile applications

UI

• Clean separation of Design from Code
• UI is constructed via HTML, CSS
• JavaScript access to create native controls,
native views, windows, etc.

JavaScript
• JavaScript is used to program Mobile
Features, Access local Resources,
Database, Remote Web Services, etc.
• Use your favorite JS Toolkit - jQuery,YUI,
Dojo, Mootools, etc etc.

App Assembly

Titanium SDK compiles (using Titanium
Developer) the application using the Mobile
SDK into a native application

Mobile APIs

Geolocation
Accelerometer
Gesture
Analytics
Media
App
Network
Database
Platform
Filesystem
UI

Building the UI

• <html> accepted here (including HTML5)
• optimized native UI controls
• hybrid UI composition

Native UI views
Grouped View Table View

Grouped View Example

var groupedView = Titanium.UI.iPhone.createGroupedView();
groupedView.addSection(optionSection);
groupedView.addSection(buttonSection);
groupedView.addSection(inputSection);
groupedView.open({animated:true});

Button Group Section
var optionData = [
{title:'Option 1', selected:true},
{title:'Option 2'},
{title:'Option 3'}
];

var optionSection =
Titanium.UI.iPhone.createGroupedSection({header:'Option
Group', type:'option', data:optionData});

optionSection.addEventListener('click',function(e)
{
});

Input Group Section

var inputData = [
{title:'Input 1',
input:switchInstance, image:'iTunes.png'},
{title:'Sound', input:sliderInstance, image:'Mail.png'},
{title:'Name', input:textInstance},
{title:'Input 2', value:'foo', hasChild:true},
{title:'Input 3'}
];

var inputSection =
Titanium.UI.iPhone.createGroupedSection({header:'Input
Group', type:'input', data:inputData});
inputSection.addEventListener('click',function(e)
{
});

Native UI Controls
• Toolbars
• Tab Bars
• Status Bars
• Dialogs
• Controls

Databases

• var db = Titanium.Database.open('mydb');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',
1,'Name 1');
2,'Name 2');
3,'Name 3');
4,'Name 4');

Camera

Titanium.Media.showCamera(
{
success:function(image,details)
{
$("status").innerHTML="Uploading...."+image.url;
}
});

Video
var video = Titanium.Media.
createVideoPlayer({ contentURL : "movie.mp4"});

var listenerId = video.addEventListener("complete", function()
{
video.removeEventListener('complete', listenerId);
var dlg = Titanium.UI.createAlertDialog({
'title' : 'Video Complete',
'message' : 'video completed',
'buttonNames' : [ 'OK' ]
});
dlg.show();
});
video.play();

Gestures
function onShake()
{
document.getElementById("status").innerHTML =
'Stop Shaking me';
}
var listenerId = Titanium.Gesture.addEventListener("shake",
onShake);

Accelerometer

Titanium.Accelerometer.addEventListener('update',function(e){

document.getElementById('x').innerHTML = e.x;
document.getElementById('y').innerHTML = e.y;
document.getElementById('z').innerHTML = e.z
});

Titanium Info
• http://www.appcelerator.com
• http://github.com/appcelerator
• @appcelerator
• #titanium_app on irc.freenode.net

Mountain View July JavaScript Meetup at Google

Mountain View July JavaScript Meetup at Google

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (12)

Similar a Mountain View July JavaScript Meetup at Google

Similar a Mountain View July JavaScript Meetup at Google (20)

Más de Jeff Haynie

Más de Jeff Haynie (10)

Último

Último (20)

Mountain View July JavaScript Meetup at Google