JS for Mobile: The Enyo Framework (jsconf.us 2011)

© 2011 Hewlett-Packard Development Company, L.P.1


Ben Combee

Sr. Developer Relations Engineer

Frameworks Team, Palm GBU

Enyo: A JS Framework for Mobile Devices

© 2011 Hewlett-Packard Development Company, L.P.3 Confidential


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


Enyo Begins with Ares


Enyo Applications

6


Anatomy of an Enyo App

7


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 }

– “main” could direct to a different HTML file

– Lots more options documented on developer.palm.com


depends.js

enyo.depends(

"HelloWorld.js",

"HelloWorld.css",

"app/");

– Supports loading both individual JS and CSS files as well as pointing

to directories that have their own depends.js file.

– Strings support expansion of $enyo variable to refer to root of

framework tree for loading extension modules or themes.


index.html

<!doctype html>

<html><head>

<title>enyo HelloWorld</title>

<script src="../../../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


app.js

enyo.kind({

name: "enyo.Canon.HelloWorld",

kind: enyo.Control,

content: "Hello World!"});

– Very simple example, this app is just a <div> with “Hello, World!” as its

content

– Key idea is that your app is a enyo.kind and other code renders it into

the page

– First kind to be rendered has special powers with handling application-

level events


The Philosophy of Enyo


Applications Are the Target


Code Reuse Through Components

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


Kinds and Inheritance

– Each kind has a parent kind

– When overridding a method from parent, can call

this.inherited(arguments) to call parent’s implementation

– enyo.Object is base of the tree

– Implements a property system to allow setting object values on

instantiation with setPROP/getPROP/PROPchanged methods

– 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)


HFlexBox VFlexBox Absolute Nested

Support Flexible Layouts


Favor Code Generation and Layout Tools

http://www.geograph.org.uk/photo/76980


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


Prefer JavaScript Over HTML

{ “js” } > <html>


JS Will Get Faster Quicker Than WebKit

>


Cache DOM in Local JavaScript Objects


Support Device and Desktop


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


Enyo as a Platform

25


The Enyo APIenyo.ActivityButton enyo.AjaxContent enyo.AlphaDivider enyo.AnimatedImage enyo.Animator enyo.AppMenu

enyo.AppMenuItem enyo.BasicCarousel enyo.BasicDrawer enyo.BasicInput enyo.BasicRichText

enyo.BasicScroller enyo.BasicService enyo.BasicWebView enyo.Box enyo.Button enyo.ButtonHeader

enyo.Carousel enyo.CarouselInternal enyo.CheckBox enyo.Component enyo.ConfirmPrompt enyo.Control

enyo.CroppableImage enyo.CrossAppResult enyo.CrossAppUI enyo.CustomButton enyo.CustomListSelector

enyo.Dashboard enyo.DatePicker enyo.DbList enyo.DbRepeaterList enyo.DbService enyo.DbService.Request

enyo.Dialog enyo.DialogPrompt enyo.dispatcher enyo.Divider enyo.DividerDrawer enyo.dom enyo.DomNode

enyo.DomNodeBuilder enyo.Drag enyo.DragScroller enyo.Drawer enyo.EditMenu enyo.FadeScroller

enyo.FilePicker enyo.FlexLayout enyo.FloatingHeader enyo.Flyweight enyo.g11n.FmtStyles.prototype

enyo.g11n.GeoLocator.prototype enyo.g11n.NameFmt.prototype enyo.g11n.PhoneFmt.prototype

enyo.g11n.PhoneNumber.prototype enyo.g11n.TzFmt.prototype enyo.gesture enyo.GrabButton enyo.Grid

enyo.Group enyo.GroupedToolButton enyo.HBox enyo.Header enyo.HelpMenu enyo.HFlexBox enyo.HFlexLayout

enyo.HLayout enyo.HtmlContent enyo.Hybrid enyo.IconButton enyo.Iframe enyo.Image enyo.ImageView

enyo.Input enyo.InputBox enyo.IntegerPicker enyo.Item enyo.json enyo.keyboard enyo.LabeledContainer

enyo.LazyControl enyo.ListSelector enyo.ManagedDomBuilder enyo.Menu enyo.MenuCheckItem enyo.MenuItem

enyo.MockService enyo.NotificationButton enyo.Object enyo.OrderedContainer enyo.PageHeader

enyo.PalmService enyo.palmServices enyo.Pane enyo.PaneLayout enyo.PasswordInput enyo.Picker

enyo.PickerButton enyo.PickerGroup enyo.Popup enyo.PopupList enyo.PopupSelect enyo.PrevNextBanner

enyo.Progress enyo.ProgressBar enyo.ProgressBarItem enyo.ProgressButton enyo.ProgressSlider

enyo.Pushable enyo.RadioButton enyo.RadioGroup enyo.RadioToolButton enyo.RadioToolButtonGroup

enyo.Repeater enyo.Request enyo.RichText enyo.RoundedBox enyo.RoundedInput enyo.RowGroup

enyo.RowItem enyo.Scrim enyo.ScrimmedConfirmPrompt enyo.Scroller enyo.ScrollFades

enyo.ScrollingImage enyo.ScrollStrategy enyo.SearchInput enyo.Selection enyo.Service

enyo.SizeableCanvas enyo.SizeableImage enyo.Slider enyo.SlidingPane enyo.SlidingView

enyo.SnapScroller enyo.Sound enyo.Spacer enyo.Spinner enyo.SpinnerLarge enyo.Stateful enyo.string

enyo.SwipeableItem enyo.SystemService enyo.TabButton enyo.TabGroup enyo.TempDbService

enyo.TimePicker enyo.Toaster enyo.ToggleButton enyo.Toolbar enyo.ToolButton enyo.ToolButton2

enyo.ToolButtonGroup enyo.ToolInput enyo.transitions.Fade enyo.transitions.LeftRightFlyin

enyo.transitions.Simple enyo.VBox enyo.VFlexBox enyo.VFlexLayout enyo.Video enyo.ViewImage

enyo.VirtualCarousel enyo.VirtualList enyo.VirtualRepeater enyo.WebService enyo.WebView enyo.windows


Big Groups of APIs

– Language Extensions

– OOP and Component System

– DOM Management

– Input Controls

– Containers

– Lists and Repeaters

– Services

– Globalization (G11N)

– webOS Platform Support


DEMOS



[email protected]


Technology

JS for Mobile: The Enyo Framework (jsconf.us 2011)