• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
An Introduction to webOS
 

An Introduction to webOS

on

  • 3,403 views

 

Statistics

Views

Total Views
3,403
Views on SlideShare
3,398
Embed Views
5

Actions

Likes
1
Downloads
109
Comments
0

2 Embeds 5

http://www.linkedin.com 3
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Thank every for coming <br /> Thank Solstice for setting this up <br /> <br /> Today: Intro to the webOS platform. <br /> <br /> Background: <br /> Palm Developer Relations Team: Goal is to provide resources to devs in form of training, support, and examples. <br />
  • goal: Provide a high level overview of the webOS architecture, SDK, and ecosystem <br /> <br />
  • What is the webOS? <br /> The webOS is Palm&apos;s mobile operating system. It was designed from the ground up to be a mobile operating system for devices with a touch screen and a physical keyboard. It can scale to different screen sizes and hardware capabilities while presenting a uniform platform to you, the software developer. <br />
  • - Use standard web technologies <br /> - HTML5 = New web specs, NOT strictly HTML5 spec <br /> - Storage <br /> - Geolocation <br /> - CSS3 <br /> - Etc <br /> - Allows of cool UIs such as this one <br /> <br />
  • Other option:- Faster <br /> - Use of standards: Easy porting <br /> <br /> SDL : Input controls and 2D surface APIs <br /> PDL : Palm Specific APIs <br /> <br /> PDK apps can be either pure PDK running as full screen, such as most of our 3D games, or hybrid apps where you mix some native code with an HTML based Mojo app. <br />
  • application architecture <br /> <br /> difference between a webos app and a web app. no webserver. everything is local. you implement state changes and program logic in javascript locally. you don&apos;t call back to a server somewhere. <br />
  • cards, stages, and scenes <br /> <br /> the webos uses the &apos;card&apos; as the core ui metaphor. with a few exceptions, every app is shown as a card. the user switches between apps much as you would deal a deck of cards, flipping from one card to another. this is a very tangable metaphor that everyone can grasp very quickly. <br /> <br /> from an application point of view you have stages and scenes. a stage is a card. a scene is a view within that card. you only see one scene at a time. if this was a webpage then the stage would be the browser window or tab, and the scene would be a page on your site. the user can navigate from scene to scene, or page to page. some apps actually have more than one stage, meaning they have more than one card visible. a good example of this is the email app. there is one card for viewing your mail. it has multiple scenes: one for the list of inboxes, one for the list of mails in your inbox, and one for the mail you are currently useing. the mail app also has secondary stages for when you compose an email. in this case it shows a full separate card so that you can write an email but still switch back to the inbox to read another email before you are done. <br /> <br /> I&#x2019;m not going to cover it in this session, but there is also another kind of stage called a dashboard. This is a little indicator at the bottom of the screen that lets you know you have a message or alert or some other notification. This can be expanded into a full dashboard, which is a wide but short window across the bottom that gives the user more info and the ability to take action. Usually this will open up the full app that created the notification, or it may provide the user with other controls, such as the music player which lets you pause or switch tracks. <br />
  • Very simple scene <br />
  • You then wire up the widgets using JavaScript. This code will turn the &#x2018;destroyPlanet&#x2019; function into an event listener with the bindAsEventListener function. Then it attaches the listener to the button using the &#x2018;listen&#x2019; function on the scene controller. <br />
  • Here&#x2019;s what that view looks like without adding any more code or CSS. <br />
  • <br />
  • The framework defines a variety of widgets for common UI flows. Further more these can be customized directly through CSS and Javascript. <br />
  • <br />
  • <br />
  • The webOS has lots of APIs for all sorts of things so I&#x2019;ve divided them into four sections. First is direct monitoring of the hardware. Pretty much every piece of hardware in the phones has an API for it, such as the accelerometer and the GPS radio. Next are platform services. This are services apis for things that aren&#x2019;t really hardware but let you request features from the operating system. This is stuff like the current state of the network, power settings, and direct embedding of video streams. <br /> Next are application services. This are simply APIs provided to your app to interact with the user&#x2019;s data on the device, with the appropriate privacy safeguards. <br /> Finally we have application actions. These are apis that let you request another application to do something for you, usually by opening that application in a particular state. For example, with the Email API you don&#x2019;t directly send an email. Instead you ask the email app to open up a new message with the recipient and subject you provide. <br />
  • The webOS has lots of APIs for all sorts of things so I&#x2019;ve divided them into four sections. First is direct monitoring of the hardware. Pretty much every piece of hardware in the phones has an API for it, such as the accelerometer and the GPS radio. Next are platform services. This are services apis for things that aren&#x2019;t really hardware but let you request features from the operating system. This is stuff like the current state of the network, power settings, and direct embedding of video streams. <br /> Next are application services. This are simply APIs provided to your app to interact with the user&#x2019;s data on the device, with the appropriate privacy safeguards. <br /> Finally we have application actions. These are apis that let you request another application to do something for you, usually by opening that application in a particular state. For example, with the Email API you don&#x2019;t directly send an email. Instead you ask the email app to open up a new message with the recipient and subject you provide. <br />
  • The webOS has lots of APIs for all sorts of things so I&#x2019;ve divided them into four sections. First is direct monitoring of the hardware. Pretty much every piece of hardware in the phones has an API for it, such as the accelerometer and the GPS radio. Next are platform services. This are services apis for things that aren&#x2019;t really hardware but let you request features from the operating system. This is stuff like the current state of the network, power settings, and direct embedding of video streams. <br /> Next are application services. This are simply APIs provided to your app to interact with the user&#x2019;s data on the device, with the appropriate privacy safeguards. <br /> Finally we have application actions. These are apis that let you request another application to do something for you, usually by opening that application in a particular state. For example, with the Email API you don&#x2019;t directly send an email. Instead you ask the email app to open up a new message with the recipient and subject you provide. <br />
  • We provide a variety of tools to assist with development, SDK command line, Eclipse plugin, Emulator, Ares. <br />
  • We do have an eclipse plugin and our Ares visual tool, but I&apos;m going to just use the core SDK with command line tools to show you what&apos;s really going on. It&apos;s sort of like in math class where your teacher taught you how to add and subtract before showing you how to use the calculator to do it faster. The command line tools also make it very easy to automate your development workflow using ant files, hudson, and other build systems. <br /> <br /> commandline tools <br /> our command line tools are written in [java? python? bash?] so they should run everywhere. The whole SDK is designed to be platform independent and usable from open source tools, which is why we chose VirtualBox as our emulator. <br />
  • The webOS emulator is an instance of the open source project VirtualBox. It&apos;s an x86 build of our whole OS, so it really is very close to a real device except for the different hardware. Not all hardware features are supported, such as the camera. For some hardware like GPS you can simulate events using command line tools. This comes in very handy when building unit tests for your software. <br /> <br /> <br /> [a note on virtual box: you must have version xxx] <br />
  • In addition to the key strokes for simple accelerometer events you can also simulate some radio features from the command line. For example you can fake an incoming phone call like this. And you can fake a GPS fix like this. <br /> <br /> You can also use the luna-send command to control the GPS Auto Drive feature. This lets you use a fake GPS route out of a csv file. It&#x2019;s good for simulating the full GPS experience. Even if you have a real device to test on this can be useful for unit tests of edge cases. <br />
  • As of 1.4.1 we added a mini webserver to the emulator. This lets you browse your apps from another webbrowser over an SSH tunnel. This is great for debugging. Just create a tunnel and then open our desktop browser to this page. <br /> <br /> Does not work will all applications. <br />
  • As of 1.4.1 we added a mini webserver to the emulator. This lets you browse your apps from another webbrowser over an SSH tunnel. This is great for debugging. Just create a tunnel and then open our desktop browser to this page. <br /> <br /> Does not work will all applications. <br />
  • <br />
  • Ares is our new visual IDE and gui builder. It lets you build webOS apps with a drag and drop gui builder. It&#x2019;s entirely webbased but uses the real emulator locally on your computer. It can even deploy straight to your USB connected phone. It really makes coding webOS apps easier and faster. <br />
  • There are a few differences between Ares and regular Mojo apps. Ares wraps the mojo widgets in lightweight containers and handles a lot of the boilerplate code for you. You can drop down to regular Mojo APIs if you want to, which sometimes you have to do for the widgets that Ares hasn&#x2019;t wrapped yet. <br />
  • Now let&#x2019;s look at an example of Ares <br /> <br /> open ares, create a simple one stage application with a header and the same &#x2018;activate&#x2019; and &#x2018;destroy&#x2019; buttons. make the destroy button have the negative class. <br /> change orientation to show how stuff resizes automatically <br /> run the app in the preview <br /> show property sheet, add event handler to the button which prints to the log. <br /> show the logging, undo/redo, jslint. <br /> run the app in the emulator <br /> use the &#x2018;email&#x2019; non visual component to create a new message when the activate button is pressed <br />
  • app catalog <br /> rules and structure <br /> submission process <br />
  • <br />
  • extras: <br /> sources of graphics and icons <br /> tools to use: cssedit, jedit, netbeans & eclipse <br />

An Introduction to webOS An Introduction to webOS Presentation Transcript

  • An Introduction to webOS Kevin Decker Enda McGrath
  • Overview • webOS Overview • Application Architecture • Mojo Framework • Development • App Catalog
  • What is webOS?
  • SDK: HTML • HTML, CSS, JS • Tracking HTML5 standards • Open Stack • Linux • WebKit • v8 • http://opensource.palm.com
  • PDK: Plugin Development Kit • C/C++ • Posix, OpenGL, SDL, PDL • when you need speed & low level access • full screen or hybrid
  • Application Architecture • Stages • Scenes • Widgets • Dashboards • Mojo Framework
  • Stages & Scenes
  • HTML <div id="activate-button" class="palm-button">Activate</div> <div id="destroy-button" class="palm-button negative">Destroy!</div>
  • JavaScript ActivateAssistant.prototype.setup = function() {     this.controller.listen(         "destroy-button", Mojo.Event.tap, this.destroy.bind(this)); };   ActivateAssistant.prototype.destroy = function(event) {     console.log("destroying with event " + event); };
  • Rendered
  • Mojo Development Framework • Common UI elements • JavaScript APIs • Loosely follows Model View Controller (MVC) Pattern • Customizable
  • Widgets • Buttons • Button, Radio, toggle • Containers • Drawer, Scroller • Dialogs • Alert, Error, Custom • Indicators • Progress Bars, Spinner • Lists • Basic, Custom, Filter • Menus • Pickers • Date, Number, Time, File, Contact • Selectors • Checkbox, List, Slider • Text Input • Filter, Text, Password, Rich • Viewers • Image View, WebView
  • Example - Textfield Widget HTML <div id="text-field" x-mojo-element="TextField"></
  • Example - Textfield Widget Javascript var attributes = {     modelProperty: 'original',     focusMode: Mojo.Widget.focusSelectMode,     maxLength: 30, }; this.model = {     original: 'initial value',     disabled: false };  
  • Service APIs • Asynchronous dbus communication to lower layers • JSON parameters • Subscriptions • Comprehensive Set
  • Service APIs • Hardware • Accelerometer, GPS, Display, Connection Manager, Camera, Power • Application Services • Alarms, Contacts, Calendar, Photos, Download/Upload • Application Actions • Email, Maps, Phone, Video, Browser, Document Viewers, Messaging
  • Example - Connection Manager ConnectionManagerAssistant.prototype.handleButtonPressed = function(){     this.controller.serviceRequest('palm://com.palm.connectionmanager', {         method: 'getstatus',         parameters: {subscribe:true},         onSuccess: this.handleOKResponse,         onFailure: this.handleErrResponse     }); }; ConnectionManagerAssistant.prototype.handleOKResponse = function(response){     Mojo.Log.info(Object.toJSON(response)); }; ConnectionManagerAssistant.prototype.handleErrResponse = function(response){     Mojo.Log.info(Object.toJSON(response)); };
  • Development
  • webOS SDK • Standard HTML Development Process • Optional Eclipse Plugin • Command-line SDK tools • OS X, Linux, Windows support
  • The webOS Emulator • VirtualBox • x86 build of webOS • most things identical • not all hardware features supported (camera, multitouch) • simulate events
  • Simulating Events root@qemux86:/# luna-send -n 1 palm://com.palm.pmradiosimulator/set_incomingcall {"number":"14086177000"} ** Message: serviceResponse Handling: 2, { "returnValue": true, "Code": 0, "Text":"Virtura ate your number" } root@qemux86:/# luna-send -n 1 palm://com.palm.pmradiosimulator/set_position {"lat":"37.3","long":"-122"} ** Message: serviceResponse Handling: 2, { "returnValue": true, "Code": 0, "Text":"Virtura ate your fix" }
  • Palm Inspector • WebKit Inspector Based • Connects to Emulator • HTML Object View/Change • Console
  • 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
  • Ares
  • 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
  • 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
  • Ares Demo
  • App Catalog • App Catalog built into all devices • 70/30 revenue split (Developer/Palm) • Multiple Catalogs • Multiple Countries • Free submission • PDK Hotapps Promotion • $1 Million in prizes • Downloads (Free apps) and Revenue (Paid Apps)
  • International Apps • Translating is strongly encouraged, not required • Metadata for each language (title, description, screenshots, etc.) • Set prices for each country
  • Links • http://developer.palm.com • http://ares.palm.com • http://ares.palm.com/AresDebug/ • http://palmhotapps.com