Download as KEY, PPTX
![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) { });](https://image.slidesharecdn.com/openworld-090813175705-phpapp01/75/Open-Source-World-Using-Web-Technologies-to-build-native-iPhone-and-Android-applications-34-2048.jpg)
![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) { });](https://image.slidesharecdn.com/openworld-090813175705-phpapp01/75/Open-Source-World-Using-Web-Technologies-to-build-native-iPhone-and-Android-applications-35-2048.jpg)
![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();](https://image.slidesharecdn.com/openworld-090813175705-phpapp01/75/Open-Source-World-Using-Web-Technologies-to-build-native-iPhone-and-Android-applications-40-2048.jpg)
Uploaded byJeff Haynie
Open Source World : Using Web Technologies to build native iPhone and Android applications
The document discusses the use of web technologies to develop native mobile applications for iPhone and Android devices, highlighting the growth and market share of these platforms. It introduces Appcelerator and its Titanium SDK, which allows developers to create applications using familiar web development tools like HTML, CSS, and JavaScript while accessing native device features. The document emphasizes the importance of user experience and provides coding examples for building user interfaces and managing databases in mobile applications.
Open Source World : Using Web Technologies to build native iPhone and Android applications
- 1. Using Web Technologiesto Build Native iPhone and Android Applications Mobile for the rest of us Jeff Haynie @jhaynie
- 2. About Me • @jhaynie •http://blog.jeffhaynie.us • jhaynie@appcelerator.com • #titanium_app on freenode
- 3. Why Mobile? 4 Billiondevices worldwide
- 4. iPhone • 50 MillioniPhones - 5 Million this past quarter • 1.5 Billions application downloads • 65K+ applications • iPhone has raised bar and proven how to make money in mobile
- 5. Android • 1M phonesalready shipping (900% growth expected) • 20 new phones coming out EY 2009 • Thousands and thousands of applications • It’s Google
- 6. iPhone: 8% marketshare but 43% of mobile web
- 7. Explosion of opportunities 20% year over year growth anticipated for next 5 years in smart phones
- 8. Oh no. • iPhone(Objective-C, 28th!) • Android (Java, Google Style) • RIM (Java, Blackberry or Midlet style) • Symbian (old school C) • Palm Pre (Web 2.0) • Windows Mobile (.NET compact) • Maemo (GTK+)
- 9. Oh, yeah... • WebBrowsers • Desktop Apps • Net books • E-Book readers • Tablets • etc etc.
- 10. We Web • HTML, CSS, JavaScript • Presentation / UI can easily be built with HTML/ CSS • JavaScript API for mobile features, platform, UI • Run locally, integrate cloud services
- 11. It’s the UX Buildapplications that fit the use cases that are tailored for the modality
- 15. What we want •Skills • Tools • Reusability • Platforms • Portability • Speed / Cost • Open source / Standards
- 16. Appcelerator Empower developers toquickly create and commercialize web, desktop and mobile applications
- 18. 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.
- 19. 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
- 20. Titanium • Desktop: Win32,OSX, Linux • Mobile: iPhone and Android
- 21. Programming Model Titanium supportsJavaScript, HTML, CSS for building mobile applications
- 22. UI • Clean separationof Design from Code • UI is constructed via HTML, CSS • JavaScript access to create native controls, native views, windows, etc.
- 23. JavaScript • JavaScript isused to program Mobile Features, Access local Resources, Database, Remote Web Services, etc. • Use your favorite JS Toolkit - jQuery,YUI, Dojo, Mootools, etc etc.
- 24. App Assembly Titanium SDKcompiles (using Titanium Developer) the application using the Mobile SDK into a native application
- 25. Mobile APIs Geolocation Accelerometer Gesture Analytics Media App Network Database Platform Filesystem UI
- 26. Building the UI •<html> accepted here (including HTML5) • optimized native UI controls • hybrid UI composition
- 27.
- 28.
- 29.
- 30. Native UI views GroupedView Table View
- 31.
- 32.
- 33. Grouped View Example vargroupedView = Titanium.UI.iPhone.createGroupedView(); groupedView.addSection(optionSection); groupedView.addSection(buttonSection); groupedView.addSection(inputSection); groupedView.open({animated:true});
- 34. 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) { });
- 35. 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) { });
- 36. Native UI Controls •Toolbars • Tab Bars • Status Bars • Dialogs • Controls
- 37.
- 38. 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');
- 39. Camera Titanium.Media.showCamera( { success:function(image,details) { $("status").innerHTML="Uploading...."+image.url; } });
- 40. 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();
- 41. Gestures function onShake() { document.getElementById("status").innerHTML= 'Stop Shaking me'; } var listenerId = Titanium.Gesture.addEventListener("shake", onShake);
- 42. 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 });
- 43. Titanium Info • http://www.appcelerator.com •http://github.com/appcelerator • @appcelerator • #titanium_app on irc.freenode.net • http://slideshare.net/jhaynie