0
Mobile for the rest of us
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 ...
Product Architecture
                             Mobile                                        Desktop
Titanium




     ...
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...
JavaScript
• JavaScript is used to program Mobile
  Features, Access local Resources,
  Database, Remote Web Services, etc...
App Assembly

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

                Geolocation
Accelerometer
                 Gesture
   Analytics
                  Media
     ...
Building the UI

• <html> accepted here (including HTML5)
• optimized native UI controls
• hybrid UI composition
Typical iPhone UI
Typical Android UI
<html>
Native UI views
Grouped View   Table View
Composite UI
Grouped View Example


   var groupedView = Titanium.UI.iPhone.createGroupedView();
groupedView.addSection(optionSection);...
Button Group Section
   var optionData = [
    {title:'Option 1', selected:true},
    {title:'Option 2'},
    {title:'Opti...
Input Group Section

     var inputData = [
      {title:'Input 1',
       input:switchInstance, image:'iTunes.png'},
    ...
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,...
Camera

  Titanium.Media.showCamera(
{
    success:function(image,details)
    {
        $("status").innerHTML="Uploading....
Video
var video = Titanium.Media.
createVideoPlayer({ contentURL : "movie.mp4"});

var listenerId = video.addEventListener...
Gestures
  function onShake()
{
   document.getElementById("status").innerHTML =
   'Stop Shaking me';  
}
var listenerId ...
Accelerometer

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

   document.getElementById('x').innerHTML = ...
Titanium Info
• http://www.appcelerator.com
• http://github.com/appcelerator
• @appcelerator
• #titanium_app on irc.freeno...
Mountain View July JavaScript Meetup at Google
Upcoming SlideShare
Loading in...5
×

Mountain View July JavaScript Meetup at Google

3,545

Published on

Jeff Haynie presents Appcelerator's Titanium Mobile product at the July meeting of the Mountain View Javascript meetup. This meeting was hosted by Google at the Google Campus in Mountain View, California.

Published in: Technology, Business
2 Comments
5 Likes
Statistics
Notes
  • Nice! This is so much easier and efficient. Time is money is the mobile dev game.

    First mover advantage anyone?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Jeff, sorry I missed the presentation. Awesome code examples. Almost seems simple enough that I could do it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,545
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
55
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Mountain View July JavaScript Meetup at Google"

  1. 1. Mobile for the rest of us
  2. 2. About Me • @jhaynie • http://blog.jeffhaynie.us • jhaynie@appcelerator.com • #titanium_app on freenode
  3. 3. Appcelerator Empower developers to quickly create and commercialize web, desktop and mobile applications
  4. 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. 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
  6. 6. Titanium • Desktop: Win32, OSX, Linux • Mobile: iPhone and Android
  7. 7. Programming Model Titanium supports JavaScript, HTML, CSS for building mobile applications
  8. 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. 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. 10. App Assembly Titanium SDK compiles (using Titanium Developer) the application using the Mobile SDK into a native application
  11. 11. Mobile APIs Geolocation Accelerometer Gesture Analytics Media App Network Database Platform Filesystem UI
  12. 12. Building the UI • <html> accepted here (including HTML5) • optimized native UI controls • hybrid UI composition
  13. 13. Typical iPhone UI
  14. 14. Typical Android UI
  15. 15. <html>
  16. 16. Native UI views Grouped View Table View
  17. 17. Composite UI
  18. 18. Grouped View Example var groupedView = Titanium.UI.iPhone.createGroupedView(); groupedView.addSection(optionSection); groupedView.addSection(buttonSection); groupedView.addSection(inputSection); groupedView.open({animated:true});
  19. 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. 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) { });
  21. 21. Native UI Controls • Toolbars • Tab Bars • Status Bars • Dialogs • Controls
  22. 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');
  23. 23. Camera Titanium.Media.showCamera( {     success:function(image,details)     {         $("status").innerHTML="Uploading...."+image.url; } });
  24. 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. 25. Gestures function onShake() {    document.getElementById("status").innerHTML = 'Stop Shaking me';   } var listenerId = Titanium.Gesture.addEventListener("shake", onShake);
  26. 26. 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 });
  27. 27. Titanium Info • http://www.appcelerator.com • http://github.com/appcelerator • @appcelerator • #titanium_app on irc.freenode.net
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×