Mountain View July JavaScript Meetup at Google
- 2. About Me
• @jhaynie
• http://blog.jeffhaynie.us
• jhaynie@appcelerator.com
• #titanium_app on freenode
- 4. 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.
- 5. 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
- 8. UI
• Clean separation of Design from Code
• UI is constructed via HTML, CSS
• JavaScript access to create native controls,
native views, windows, etc.
- 9. 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.
- 10. App Assembly
Titanium SDK compiles (using Titanium
Developer) the application using the Mobile
SDK into a native application
- 11. Mobile APIs
Geolocation
Accelerometer
Gesture
Analytics
Media
App
Network
Database
Platform
Filesystem
UI
- 12. Building the UI
• <html> accepted here (including HTML5)
• optimized native UI controls
• hybrid UI composition
- 18. Grouped View Example
var groupedView = Titanium.UI.iPhone.createGroupedView();
groupedView.addSection(optionSection);
groupedView.addSection(buttonSection);
groupedView.addSection(inputSection);
groupedView.open({animated:true});
- 19. 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)
{
});
- 20. 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)
{
});
- 22. Databases
• var db = Titanium.Database.open('mydb');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',
1,'Name 1');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',
2,'Name 2');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',
3,'Name 3');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',
4,'Name 4');
- 24. 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();
- 25. Gestures
function onShake()
{
document.getElementById("status").innerHTML =
'Stop Shaking me';
}
var listenerId = Titanium.Gesture.addEventListener("shake",
onShake);