Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro To webOS

16,083 views

Published on

Josh Marinacci introduces you to the fundamentals of Palm's webOS.

Published in: Technology
  • Login to see the comments

Intro To webOS

  1. 1. An Introduction to webOS Josh Marinacci Developer Relations Engineer April 23, 2010
  2. 2. Overview • webOS Architecture • Application Architecture • Building an App • Emulator and Ares • Advanced APIs • App Catalog
  3. 3. About Me • Java Programmer @ Sun • Swing Hacks • JavaFX • Java Store • Swing Windows L&F
  4. 4. Web Tech Then • Slow execution • Page refreshes • No access to local resources • Text Heavy documents
  5. 5. Web Tech Now • AJAX • V8 and Squirrel Fish • Canvas, SVG, & WebGL • HTML 5 Storage • Web Workers
  6. 6. The Web Is Open • That’s why I joined Palm
  7. 7. What Is the webOS?
  8. 8. Devices and Market
  9. 9. Decisions • Built from the DNA of the web • HTML CSS widgets • JavaScript APIs • Tracking HTML 5 standards
  10. 10. webOS Architecture Applications App Services Services UI System Manager Cloud Window Manager Mojo Framework Window Server Application Manager NPAPI Browser Palm Bus Wireless Media DocViewers OS Services OS Middleware Kernel/User Space Boundary Linux Kernel FileSystem TCP/IP Bootie Drivers
  11. 11. Application Architecture • Everything local • Application • Stages • Scenes • Widgets
  12. 12. Stages & Scenes
  13. 13. Scene Lifecycle initialize Find Scene Push This Scene (constructor setup Start Transition ready readytoactivate activate End Transition Push New Scene deactivate Start Pop This Scene Transition cleanup Scene Framework
  14. 14. Widgets • Model View Controller • View (HTML) • Assistant (JavaScript) • Model (optional)
  15. 15. View / Markup <div id="myActivateButton" class="palm-button"> Activate </div> <div id="myDestroyButton" class="palm-button negative"> Destroy! </div>
  16. 16. JavaScript ActivateAssistant.prototype.setup = function() { //turn destroyPlanet function into an event handler this.destroyPlanetHandler = this.destroyPlanet.bindAsEventListener(this); //attach handler to the button with tap events this.controller.listen("myDestroyButton", Mojo.Event.tap, this.destroyPlanetHandler); } ActivateAssistant.prototype.destroyPlanet = function(event) { console.log("destroying the planet with event " + event); };
  17. 17. Cleaning Up • Clean up your references
  18. 18. APIs • Addressbook and calendar • Network services (upload and download) • Hardware: Camera, GPS, and accelerometer
  19. 19. Send an Email this.controller.serviceRequest( "palm://com.palm.applicationManager", { method: 'open', parameters: { id: "com.palm.app.email", params: { summary: "test subject", text: "Test email text.", recipients: [{ type:"email", role:1, value:"marvin@planet.org", contactDisplay:"Marvin the Martian" }] } } } );
  20. 20. Threading & Network this.controller.serviceRequest('palm://com.palm.downloadmanager/', { method: 'upload', parameters: { 'fileName': filename, 'fileLabel':'media', 'url': 'http://twitpic.com/api/uploadAndPost', 'contentType': 'image/jpg', "postParameters": [ {"key":"username" , "data": username}, {"key":"password" , "data": password}, ], "subscribe": true }, onSuccess : function (resp){ Mojo.Log.info('Success : ' + Object.toJSON(resp)); }, onFailure : function (e){ Mojo.Log.info('Failure : ' + Object.toJSON(e)); }.bind(this) });
  21. 21. Hardware Access this.controller.stageController.pushScene( { appId : 'com.palm.app.camera', name: 'capture' }, { sublaunch : true, filename : '/media/internal/testpicture.jpg' } );
  22. 22. PDK: Plug-in Development Kit • C/C++ • Posix, OpenGL, SDL, PDL • When you need speed and low level access • Full screen or hybrid • Come back tomorrow!
  23. 23. Break!
  24. 24. Building Your First App
  25. 25. Generate App palm-generate -t new_app DestroyWorld
  26. 26. Directory Structure
  27. 27. appinfo.json { "id": "com.palm.dts.destroyworld", "version": "1.0.0", "vendor": "World Destroyer, Inc.", "type": "web", "main": "index.html", "title": "DestroyWorld", "icon": "icon.png" }
  28. 28. Initial HTML <!DOCTYPE html> <html> <head> <title>DestroyWorld</title> <script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo- version="1"></script> <!-- application stylesheet should come in after the one loaded by the framework --> <link href="stylesheets/destroyworld.css" media="screen" rel="stylesheet" type="text/ css"> </head> </html>
  29. 29. First Scene palm-generate -t new_scene -p "name=Activate" DestroyWorld
  30. 30. StageAssistant.js StageAssistant.prototype.setup = function() { this.controller.pushScene("Activate"); };
  31. 31. Activate-scene.html <div class="palm-body-text"> <div id="myActivateButton" class="palm-button">Activate</div> <div id="myDestroyButton" class="palm-button negative">Destroy!</div> </div>
  32. 32. Package & Run palm-package DestroyWorld palm-install com.palm.dts.destroyworld_1.0.0_all.ipk
  33. 33. Activate-assistant.js ActivateAssistant.prototype.setup = function() { //turn destroyPlanet function into an event handler this.destroyPlanetHandler = this.destroyPlanet.bindAsEventListener(this); //attach handler to the button with tap events this.controller.listen("myDestroyButton", Mojo.Event.tap, this.destroyPlanetHandler); }; ActivateAssistant.prototype.destroyPlanet = function(event) { console.log("destroying the planet with event " + event); };
  34. 34. The webOS Emulator • VirtualBox (version xxx required) • x86 build of webOS • Most things identical • Not all hardware features supported (camera, multitouch) • Simulate events
  35. 35. Navigating the Emulator • Esc = back gesture • Left / Right = flip between apps • Home = minimize / maximize card • End = bring up launcher • Mouse = single touch events • F5 – F9 = accelerometer event simulation
  36. 36. Simulating Events luna-send -n 1 luna://com.palm.pmradiosimulator/set_incomingcall {"number":"14086177431"} luna-send -n 1 luna://com.palm.pmradiosimulator/set_position {"lat":"37.3","long":"-122"}
  37. 37. Emulator Host Mode • Embedded web server • Use your desktop browser • Good for inspecting HTML • ssh -p 5522 -L 5581:localhost:8080 root@localhost • http://localhost:5581/Apps
  38. 38. Logging palm-log -f com.palm.dts.destroyworld
  39. 39. Ares
  40. 40. Ares • Visual IDE and GUI builder: WYSIWYG • Runs in the browser • Makes the same apps as the command-line SDK • Works with local emulator, debugging, logging • Works with real devices • Makes most coding tasks much faster
  41. 41. Ares vs. Mojo • Slightly different style of coding • Mojo widgets contained in lightweight wrappers • Not all widgets are supported (more coming) • Code is more concise
  42. 42. Saving • Project stored on Palm’s servers • Export source bundle • Export packaged app
  43. 43. Demo Ares
  44. 44. Break
  45. 45. Advanced APIs • Overview • Network Web Services • Camera • Storage • Accelerometer
  46. 46. Comprehensive APIs • Hardware • Accelerometer, GPS, Display • Platform Services • Camera, Audio, Video, Power, Connection Manager • Application Services • Alarms, Contacts, Calendar, Photos, Storage • Application Actions • Email, Maps, Phone, YouTube, Browser, Document Viewers, Messaging
  47. 47. Access an XML Webservice var url = "http://myserver.com/webservice?results=all"; var request = new Ajax.Request(url, { method: 'get', evalJSON: 'false', onCreate: function(){console.info('******* onCreate happened')}, onLoading: function(){console.info('******* onLoading happened')}, onLoaded: function(){console.info('******* onLoaded happened')}, onSuccess: function(){console.info('******* onComplete happened')}, onComplete: this.gotResults.bind(this), onFailure: this.failure.bind(this) });
  48. 48. Parse Response with DOM & XPath StartAssistant.prototype.gotResults = function(event){ var xmlstring = event.responseText; var doc = (new DOMParser()).parseFromString(xmlstring, "text/xml"); // Use xpath to parse xml object var items = document.evaluate("/root/item", doc, null, XPathResult.ANY_TYPE, null); var item = nodes.iterateNext(); while (section) { console.log("id = " + item.attributes['id'].nodeValue); item = items.iterateNext(); } }
  49. 49. Use the Camera //launch the camera view this.controller.stageController.pushScene( { appId : 'com.palm.app.camera', name: 'capture' }, { sublaunch : true, filename : '/media/internal/testpicture.jpg' } ); //the activate function on your scene activate: function(event) { if(event != undefined) { //the camera returned console.log("json = " + Object.toJSON(event)); console.log("filename of the photo = " + event.filename); } }
  50. 50. Use the Accelerometer (Tilt Sensor) • Orientation events • Shake Events • Raw events
  51. 51. Orientation Events • Pitch & roll in degrees • Numeric codes for different orientations • 0 = face up • 1 = face down • 2 = up / normal portrait • 3 = down / reverse portrait • 4 = left / landscape, left side down • 5 = right / landscape, right side down
  52. 52. 'orientationchange' property this.controller.listen(document, 'orientationchange', this.handleOrientation.bindAsEventListener(this)); ... StartAssistant.prototype.handleOrientation = function(event) { console.log("position = " + event.position + " pitch = " + event.pitch + " roll = " + event.roll); };
  53. 53. Shake Events • 'shakestart' • 'shaking' • 'shakeend'
  54. 54. 'shaking' property this.controller.listen(document, 'shaking', this.handleShaking.bindAsEventListener(this)); ... StartAssistant.prototype.handleShaking = function(event) { console.log("Shaking with magnitude: " + event.magnitude); };
  55. 55. Raw Accelerometer Events • Raw x/y/z acceleration values • Default 4Hz (four times per second) • Option for 30Hz (good for games) • 'acceleration' property
  56. 56. 'acceleration' property this.controller.listen(document, 'acceleration', this.handleAcceleration.bindAsEventListener(this)); ... StartAssistant.prototype.handleAcceleration = function(event) { console.log("X: "+ event.accelX + " Y:"+ event.accelY + " Z:"+ event.accelZ + " time: "+ event.time); };
  57. 57. Storage APIs • Mojo Cookies • Mojo Depot • HTML 5
  58. 58. Mojo Cookies • Store simple values • 4k of storage • Good for preferences, version numbers, etc. • Stored as a single JSON value in the Depot
  59. 59. Cookies var SCROLL_MODE_KEY = “SCROLL_MODE_KEY”; ... //set the current mode var scrollModeCookie = new Mojo.Model.Cookie(SCROLL_MODE_KEY); scrollModeCookie.put(scrollMode); //retrieve it later var scrollModeCookie = new Mojo.Model.Cookie(SCROLL_MODE_KEY); console.log(“mode = “ + scrollModeCookie.get());
  60. 60. Mojo Depot • Simple object store for JSON • No schemas or SQL queries • Up to 1MB of storage • > 1MB available in media storage • Object -> SQL translation underneath • Not as efficient as true HTML database • Uses callbacks extensively
  61. 61. Create var db = new Mojo.Depot( {'name':‘DestroyWorldDB'}, function(code) { console.log(“open db succeed”); }, function(code) { console.log("open db failed"); } ); console.log("created db : " + db);
  62. 62. Store var db = new Mojo.Depot( { 'name' : 'DestroyWorldDB' }, function(code) { console.log("open db succeeded " + db); var value = { 'target':"world", 'action':"destroy"}; db.add("object1", value, function(){console.log("saved okay");}, function(){console.log("save failed");} ); }, function(code) {console.log("open db failed");} );
  63. 63. Retrieve var db = new Mojo.Depot( { 'name' : 'DestroyWorldDB' }, var db = new Mojo.Depot( function(code) { { 'name' : 'DestroyWorldDB' }, console.log("open db succeeded " + db); function(code) { 'target':"world", 'action':"destroy"}; var value = { console.log("open db succeeded " + db); db.add("object1", value, db.get("object1", function(){console.log("saved okay");}, function(obj){ function(){console.log("save failed");} ); console.log("got object. target = " + obj.target); }, }, function(code) {console.log("open db failed");} function(){console.log("get failed");} ); ); }, function(code) {console.log("open db failed");} );
  64. 64. HTML 5 Database • Database object from HTML 5 spec, but not storage object • True SQL database • Transactional • Databases associated with applications • Private, no inter-app sharing • Up to 1MB of storage • > 1MB available in media storage • Work is ongoing to match the spec
  65. 65. Execute SQL Statements var myDB = openDatabase(name:"thisDB"); myDB.transaction( (function (transaction) { transaction.executeSql('SOME SQL', [] , this.successHandler.bind(this) , this.failureHandler.bind(this)); }).bind(this);
  66. 66. Debugging • [break for Steve Lemke]
  67. 67. App Catalog • App Catalog built into all devices • 70/30 revenue split (Developer/Palm) • Multiple Catalogs • Multiple Countries
  68. 68. Catalog Options • On Device Catalog • Web Feed • Beta Feed • Open Source Apps
  69. 69. App Submission
  70. 70. International Apps • Translating is strongly encouraged, not required • Set prices for each country • Metadata for each language (title, description, screenshots, etc.) • Auto-generate prices for each currency zone
  71. 71. Palm Hot Apps Promotion
  72. 72. Palm Hot Apps Promotion • Total payout: One Million Dollars • Earn a bonus based on • Free: downloads • Paid: total revenue • Feb 1 – June 30 • Still plenty of time to win! • Leader board updated daily • http://PalmHotApps.com/
  73. 73. Break
  74. 74. Roadmap Now Soon End of Summer Mojo SDK apps Fullscreen OS update PDK apps with new APIs
  75. 75. Links developer.palm.com palmhotapps.com

×