Difference between revisions of "Human Interface Guidelines"
ShiftyAxel (talk | contribs) |
|||
| Line 12: | Line 12: | ||
==Reference Apps== | ==Reference Apps== | ||
The best references to work from when implementing a webOS Ports style UI are the existing core app rewrites: | The best references to work from when implementing a webOS Ports style UI are the existing core app rewrites: | ||
| + | |||
| + | [http://webos-ports.github.com/org.webosports.app.browser/debug.html Browser] | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.browser/ Browser on Github] | ||
| + | |||
| + | [http://webos-ports.github.com/org.webosports.app.calendar/debug.html Calendar] | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.calendar/ Calendar on Github] | ||
| + | |||
| + | <!--[http://webos-ports.github.com/org.webosports.app.contacts/debug.html Contacts]--> | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.contacts/ Contacts on Github] | ||
| + | |||
| + | [http://webos-ports.github.com/org.webosports.app.firstuse/debug.html First Use] | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.firstuse/ First Use on Github] | ||
[http://webos-ports.github.com/org.webosports.app.memos/debug.html Memos] | [http://webos-ports.github.com/org.webosports.app.memos/debug.html Memos] | ||
[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.app.pdf/debug.html PDF] | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.pdf/ PDF on Github] | ||
| + | |||
| + | <!--[http://webos-ports.github.com/org.webosports.app.phone/debug.html Phone]--? | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.phone/ Phone on Github] | ||
[http://webos-ports.github.com/org.webosports.app.settings/debug.html Settings] | [http://webos-ports.github.com/org.webosports.app.settings/debug.html Settings] | ||
[http://github.com/webOS-ports/org.webosports.app.settings/ Settings on Github] | [http://github.com/webOS-ports/org.webosports.app.settings/ Settings on Github] | ||
| + | |||
| + | [http://webos-ports.github.com/org.webosports.app.testr/debug.html Testr] check with Morphis | ||
| + | |||
| + | [http://github.com/webOS-ports/org.webosports.app.testr/ Testr on Github] | ||
Revision as of 16:13, 13 August 2013
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 CollappsingArranger (wide) and CoreNaviArranger (narrow) when necessary.
The first panel should contain the app's main menu, which is referred to as the Menu Panel. The second panel contains the content associated with the main menu's options, and usually starts off blank. This is the Content Panel- 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: