JavaScript on HP webOS: Enyo and Node.js


Ben CombeeSr. Developer Relations EngineerFrameworks Team, Palm GBU

The JavaScriptBehind HP webOS: Enyo and Node.js


http://j.mp/winHPVeer

Sign up by noon to win a HP Veer phone


webOS Service Bus

Activity Manager

Compiled App“Hybrid” AppWeb App

Web App Runtime (WebKit + v8)

Compiled App Runtime

UI System Manager

Low-level OS Components (Linux)

Node.js Service Runtime

Built-in webOS

Services

JS Service

HP webOS Architecture


The Philosophy of Enyo


Target Application Developers


Enyo Applications

8


Enyo Applications

9


Enyo Applications

10


Enyo Applications

11


Code Reuse Through Components

http://www.flickr.com/photos/hugosimmelink/1506521934


Interoperate with GUI Tools like Ares


Prefer JavaScript Over HTML

{ “js” } > <html>


HFlexBox VFlexBox Absolute Nested

Support Flexible Layouts


Support Device and Desktop


Anatomy of an Enyo App

17


Anatomy of a Enyo Application

– appinfo.json• Standard webOS application metadata, not needed for use in browser

– index.html• Initial page loaded by system manager, pulls in enyo framework and creates app object

– depends.js• Loaded by enyo.js, JS code to declare what other files are needed for your app

– app.js• Main application object

– app.css• Any styles needed specifically for your application


appinfo.json

{ "id": "com.palmdts.enyo.helloworld“, "version": "1.0.0", "vendor": "HP“, "type": "web“, "main": "index.html“, "title": "Enyo HelloWorld“, "icon": "icon.png“, "uiRevision": 2 }


app.js

enyo.kind({ name: "enyo.Canon.HelloWorld", kind: enyo.Control, content: "Hello World!"});

– This declares a new constructor “HelloWorld”, defined as a property of the enyo.Canon object.

– Your app is it’s own kind, and it gets rendered into your document body by script in your index.html

– Kinds can own other objects in a complex hierarchy of controls and events


components: [ {kind: "AppMenu", components: [ {caption: "Show on One Page", onclick: "showOnePage"}]}, {kind: "VFlexBox", width: "320px", style: "border-right: 1px solid gray;", components: [ {kind: "RadioGroup", style: "padding: 10px;", onChange: "radioGroupChange", components: [ {caption: "Packages", flex: 1}, {caption: "Index", flex: 1} ]}, {kind: "Pane", flex: 1, onclick: "tocClick", className: "selectable", domAttributes: {"enyo-pass-events": true},

……

Example of Application Structure


index.html

<!doctype html><html><head> <title>enyo HelloWorld</title> <script src=“../0.10/framework/enyo.js”></script></head><body> <script type="text/javascript"> new enyo.Canon.HelloWorld(). renderInto(document.body); </script></body></html>

– Can add launch=“debug” to <script> tag to load all framework source


Kinds and Inheritance

– Each kind has a parent kind

– When overridding a method from parent, can callthis.inherited(arguments) to call parent’s implementation

– enyo.Object is base of the tree

– set/get/changed methods created for each property

– enyo.Component is base of all items that go into app tree

– Components can own a nested collection of objects

– Components have a “$” hash of all owned objects by name, e.g.this.$.button.setEnabled(true)


Lots of APIs

– Object Oriented Programming & Components

– DOM Utilities & User Interface Generation

– Buttons & Input Controls

– Dialogs, Popups, and Toasters

– Lists and Repeaters

– Web Services and Databases

– Globalization

– webOS Platform Support


Support webOS Special Features

– Wrappers for Palm System Services

– Support for talking to application-provided node.js services

– Mocking of Palm services for desktop development/testing

– Notifications using dashboard

– Multiple card/window management

– IFRAME-based cross-app launching

– OBJECT-based hybrid applications

– Wireless Printing support


Node.js and System Services


webOS Service Bus

Activity Manager

Compiled App“Hybrid” AppWeb App

Web App Runtime (WebKit + v8)

Compiled App Runtime

UI System Manager

Low-level OS Components (Linux)

Node.js Service Runtime

Built-in webOS

Services

JS Service

HP webOS Architecture


webOS as a Mobile Browser OS

– webOS device is a combination browser, server, and cache

– Apps run in cards (think tabs in your desktop browser)

– Secret to effective multitasking!

– Apps can talk to system services, application services, or outside web servers

– Local services use Palm system bus for instead of HTTP

29


webOS Service Bus

– Only exposed on the device

– Point to point connections

– Named services using palm:// URL format

– JSON required for data transport

– Subscription support for getting status updates

– Built-in security and application authentication

– Can be used for both web and PDK applications

30


Example: Opening a URL

# luna-send -P -n 1 -a com.palmdts.launcher palm://com.palm.applicationManager/open '{"target":"http://2011.texasjavascript.com/"}'

{ "processId": "success", "returnValue": true }

– Public and private buses

– URL-based targets, JSON-based payloads

– Can get one or many responses

– luna-send is the services equivalent of “curl”

31


Why Write a Service?

– Run code without showing a card user interface

– Process lots of data without blocking the UI

– Full access to the USB file system

– Cache data from web services for use when offline

– Integration with HP Synergy system to extend contacts, calendar, email, messaging, and media sharing

32


Implementing Your Own Services

– Node.js 0.2.3 used as service execution engine

– services.json file maps service IDs to JavaScript constructors

– Services can use node.js built-in methods or webOS-specific Foundation classes

– Service calls use webOS Futures framework to manage request & responses

– No support for binary node.js extensions, but can run separate apps bundled with service using ChildProcess API

– Services shut down when inactive to save power & memory

33


Fortune Cookie Demo!


developer.hpwebos.com

[email protected]


http://j.mp/winHPVeer

Sign up by noon to win a HP Veer phone

JavaScript on HP webOS: Enyo and Node.js

Technology

Transcript of JavaScript on HP webOS: Enyo and Node.js