Difference between revisions of "Human Interface Guidelines"

From WebOS-Ports
Jump to navigation Jump to search
m (→‎Basic User Interface: Improve the language.)
Line 44: Line 44:
[http://github.com/webOS-ports/org.webosports.app.memos/ Memos on Github]
[http://github.com/webOS-ports/org.webosports.app.memos/ Memos on Github]
[http://webos-ports.github.com/org.webosports.messaging/app/debug.html Memos]
[http://github.com/webOS-ports/org.webosports.messaging/ Messaging on Github]
[http://webos-ports.github.com/org.webosports.app.pdf/debug.html PDF]
[http://webos-ports.github.com/org.webosports.app.pdf/debug.html PDF]

Revision as of 16:52, 12 January 2015

This page details the steps that need to be taken in order to create a webOS Ports styled UI in EnyoJS. Developers wanting to write core-apps for Open webOS should use this as a guideline.

Basic User Interface

The main user interface in a webOS Ports app generally focuses on a screen size-aware enyo.Panels kind and a gesture area (virtual or otherwise).

The top-level kind is a container for the main app and a virtual gesture area, which is hidden on platforms that provide window.PalmSystem.

The main app normally contains an enyo.Panels kind. This should use a CollapsingArranger by default, which is best for tablets and desktop browsers. The reflow function should be implemented and check enyo.Panels.isScreenNarrow(), switching between CollapsingArranger (wide) and CoreNaviArranger (narrow) when necessary.

The first panel, which is referred to as the Menu Panel, should contain the app's main menu. The second panel contains the content associated with the main menu's options. This is the Content Panel and it usually starts off blank. Most often a second enyo.Panels kind is nested inside this one to allow for easy transitions between content.

Reference Apps

The best references to work from when implementing a webOS Ports style UI are the existing core app rewrites:


Calculator on Github


Calendar on Github


Contacts on Github

File Manager

File Manager on Github


Memos on Github


Messaging on Github


PDF on Github


Settings on Github


Testr on Github