Post on 14-May-2015
description
© 2011 Hewlett-Packard Development Company, L.P.1
© 2011 Hewlett-Packard Development Company, L.P.2
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
© 2011 Hewlett-Packard Development Company, L.P.4 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
© 2011 Hewlett-Packard Development Company, L.P.5
Enyo Begins with Ares
© 2011 Hewlett-Packard Development Company, L.P.6
Enyo Applications
6
© 2011 Hewlett-Packard Development Company, L.P.7
Anatomy of an Enyo App
7
© 2011 Hewlett-Packard Development Company, L.P.8 Confidential
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.9 Confidential
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
© 2011 Hewlett-Packard Development Company, L.P.10 Confidential
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.
© 2011 Hewlett-Packard Development Company, L.P.11 Confidential
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
© 2011 Hewlett-Packard Development Company, L.P.12 Confidential
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
© 2011 Hewlett-Packard Development Company, L.P.13
The Philosophy of Enyo
© 2011 Hewlett-Packard Development Company, L.P.14
Applications Are the Target
© 2011 Hewlett-Packard Development Company, L.P.15
Code Reuse Through Components
http://www.flickr.com/photos/hugosimmelink/1506521934
© 2011 Hewlett-Packard Development Company, L.P.16 Confidential
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)
© 2011 Hewlett-Packard Development Company, L.P.17 Confidential
HFlexBox VFlexBox Absolute Nested
Support Flexible Layouts
© 2011 Hewlett-Packard Development Company, L.P.18
Favor Code Generation and Layout Tools
http://www.geograph.org.uk/photo/76980
© 2011 Hewlett-Packard Development Company, L.P.19 Confidential
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.20
Prefer JavaScript Over HTML
{ “js” } > <html>
© 2011 Hewlett-Packard Development Company, L.P.21
JS Will Get Faster Quicker Than WebKit
>
© 2011 Hewlett-Packard Development Company, L.P.22
Cache DOM in Local JavaScript Objects
© 2011 Hewlett-Packard Development Company, L.P.23
Support Device and Desktop
© 2011 Hewlett-Packard Development Company, L.P.24 Confidential
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
© 2011 Hewlett-Packard Development Company, L.P.25
Enyo as a Platform
25
© 2011 Hewlett-Packard Development Company, L.P.26 Confidential
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
© 2011 Hewlett-Packard Development Company, L.P.27 Confidential
Big Groups of APIs
– Language Extensions
– OOP and Component System
– DOM Management
– Input Controls
– Containers
– Lists and Repeaters
– Services
– Globalization (G11N)
– webOS Platform Support
© 2011 Hewlett-Packard Development Company, L.P.28
DEMOS
© 2011 Hewlett-Packard Development Company, L.P.29
© 2011 Hewlett-Packard Development Company, L.P.30
developer.palm.compdc@palm.com
© 2011 Hewlett-Packard Development Company, L.P.31