JavaScript on HP webOS: Enyo and Node.js
-
Upload
ben-combee -
Category
Technology
-
view
13.359 -
download
0
Transcript of JavaScript on HP webOS: Enyo and Node.js
© 2011 Hewlett-Packard Development Company, L.P. 1
© 2011 Hewlett-Packard Development Company, L.P. 2
Ben CombeeSr. Developer Relations EngineerFrameworks Team, Palm GBU
The JavaScriptBehind HP webOS: Enyo and Node.js
© 2011 Hewlett-Packard Development Company, L.P. 3
© 2011 Hewlett-Packard Development Company, L.P. 4
http://j.mp/winHPVeer
Sign up by noon to win a HP Veer phone
© 2011 Hewlett-Packard Development Company, L.P. 5
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
© 2011 Hewlett-Packard Development Company, L.P. 6
The Philosophy of Enyo
© 2011 Hewlett-Packard Development Company, L.P. 7
Target Application Developers
© 2011 Hewlett-Packard Development Company, L.P. 8
Enyo Applications
8
© 2011 Hewlett-Packard Development Company, L.P. 9
Enyo Applications
9
© 2011 Hewlett-Packard Development Company, L.P. 10
Enyo Applications
10
© 2011 Hewlett-Packard Development Company, L.P. 11
Enyo Applications
11
© 2011 Hewlett-Packard Development Company, L.P. 12
Code Reuse Through Components
http://www.flickr.com/photos/hugosimmelink/1506521934
© 2011 Hewlett-Packard Development Company, L.P. 13
Interoperate with GUI Tools like Ares
© 2011 Hewlett-Packard Development Company, L.P. 14
Prefer JavaScript Over HTML
{ “js” } > <html>
© 2011 Hewlett-Packard Development Company, L.P. 15
HFlexBox VFlexBox Absolute Nested
Support Flexible Layouts
© 2011 Hewlett-Packard Development Company, L.P. 16
Support Device and Desktop
© 2011 Hewlett-Packard Development Company, L.P. 17
Anatomy of an Enyo App
17
© 2011 Hewlett-Packard Development Company, L.P. 18
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
© 2011 Hewlett-Packard Development Company, L.P. 19
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 }
© 2011 Hewlett-Packard Development Company, L.P. 20
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
© 2011 Hewlett-Packard Development Company, L.P. 21
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
© 2011 Hewlett-Packard Development Company, L.P. 22
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
© 2011 Hewlett-Packard Development Company, L.P. 23
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)
© 2011 Hewlett-Packard Development Company, L.P. 24
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
© 2011 Hewlett-Packard Development Company, L.P. 25
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
© 2011 Hewlett-Packard Development Company, L.P. 26
© 2011 Hewlett-Packard Development Company, L.P. 27
Node.js and System Services
© 2011 Hewlett-Packard Development Company, L.P. 28
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
© 2011 Hewlett-Packard Development Company, L.P. 29
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
© 2011 Hewlett-Packard Development Company, L.P. 30
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
© 2011 Hewlett-Packard Development Company, L.P. 31
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
© 2011 Hewlett-Packard Development Company, L.P. 32
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
© 2011 Hewlett-Packard Development Company, L.P. 33
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
© 2011 Hewlett-Packard Development Company, L.P. 34
Fortune Cookie Demo!
© 2011 Hewlett-Packard Development Company, L.P. 36
http://j.mp/winHPVeer
Sign up by noon to win a HP Veer phone
© 2011 Hewlett-Packard Development Company, L.P. 37