Ubuntu UI

UbuntuUI is the central access point for all Ubuntu Widget classes. It allows to create objects to manipulate all kinds of widgets and initialize the Ubuntu HTML5 theme
UbuntuUI is defined in /usr/share/ubuntu-html5-theme/0.1/ambiance/js/core.js

Javascript acces methods

var UI = new UbuntuUI();
UI.init();
					

• init() : Should be called at the beginning of each Ubuntu HTML5 application.This method creates the application’s pagestack
• button(DOMString domId) : Creates a new Button object having the global id domId. The created object can be used to add a click-listener to a button
• dialog(DOMString domId) : Creates a new Dialog object having the global id domId. The created object can be used to manipulate the dialog widget

Javascript acces methods

• popover(Element elem, DOMString domId) : Creates a new Popover object having the global id domId. The created object can be used to manipulate a popover menu
• tabs(DOMString selector) : Creates a new Tabs object for the first element that matches the specified selector
• toolbar(DOMString domId) : Creates a new Toolbar object having the global id domId. The created object can be used to manipulate the toolbar
• list(DOMString selector) : Creates a new List object for the first element that matches the specified selector

Pagestack

Pagestack manages pages. It has methods to show and hide pages. Only one page and its toolbar can be displayed at the same time.

Markup declaration

Javascript acces methods

var pagestack = UI.pagestack;
					

• push(DOMString domId): Displays the page having the global id domId and its associated footer. All other pages are made invisible
• pop(): Hides the page which is actually shown, and removes it from the top of the internal stack of pages. Instead, the preceding page, which global id is now on the top of the stack, is shown
• clear(): Makes all pages invisible and clears the internal stack of pages

Javascript acces methods

• isEmpty(): Returns true if the internal stack of pages is empty. Else, false is returned
• currentPage(): Returns the global id of the currently displayed page. If no page is displayed, null is returned.
• depth(): Returns the size of the stack of pages

Header / Tabs

The header is an UI component which sits at the top of an application.
- It shows to the user where he is.
- It contains tabs.

Markup declaration

Javascript acces methods

var tabs = UI.tabs('#tabId');
					

Toolbar

The toolbar is an UI component which sits at the bottom of an application. Toolbar is defined in the file /usr/share/ubuntu-html5-theme/0.1/ambiance/js/toolbar.js

Markup declaration

Javascript methods

var toolbar = UI.toolbar('toolbarId');
					

• show(): Displays the toolbar
• hide(): Hides the toolbar
• toggle(): Shows the toolbar if it is hidden, hides it if it is shown
• touch(AsyncOperationCallback callback): Registers a listener for touch events

List

Markup declaration

Header


Simple Item


Progression item



Item with pic


Switch









Checkbox







					

Javascript methods

var list= UI.list("#listId");
					

• setHeader(DOMString text) : Replaces a header with a new header labelled with text. If several headers exist, an exception is thrown. If no header exists, nothing happens
• append(DOMSting text, DOMString label, DOMString id, AsyncOperationCallback onClick, Object user_data): Appends a new list element to the list
• at(unsigned long index): Returns the n-th list item of the list, null on failure

Javascript methods

• remove(unsigned long index) : Removes the n-th list item of the list, if it exists
• removeAllItems(unsigned long index) : Removes all the items from the list
• forEach(AsyncOperationCallback func): Iterates over the list items and calls the func function on each item

Text Input

Markup declaration

Dialog

Dialogs are modal windows. They disallow any other interaction with the application while waiting on a user interaction.

Markup declaration

Simple Dialog
Are you sure you want to delete this file?

Cancel
Delete



					

Javascript methods

var dialog = UI.dialog('dialogId');
					

• show() : Shows the popover
• hide() : Hides the popover
• toggle() : Shows the popover if it is hidden, hides it if it is shown

Predefined CSS classes :
- shake

Popover

Markup declaration

Item1
Item2


					

gravity=n (north)
gravity=s (south)
gravity=e (east)
gravity=w (west)

Javascript methods

var dialog = UI.popover(document.getElementById('buttonId'), 'dialogId');
					

• show() : Shows the popover
• hide() : Hides the popover
• toggle() : Shows the popover if it is hidden, hides it if it is shown

Predefined CSS classes :
- active

Button

Markup declaration

Standard
					

Ubuntu HTML5 Theme comes with predefined classes to style buttons:
- success
- danger
- warning

Javascript methods

var button = UI.button('#buttonId');
					

• click(AsyncOperationCallback callback): Registers a listener for click events

Toggle

Toggles are UI elements which can be turned on and off.

Markup declaration

Checkbox

Switch

Javascript methods

var toggle = new Toggle('toggleId');
					

• isChecked(): Returns true if the toggle is checked, false otherwise
• check(): Checks the toggle
• uncheck(): Unchecks the toggle
• toggle(): Checks the toggle if it is unchecked, unchecks it if it is checked