HTML5 Ubuntu Touch

UI Widgets

Created by ElAchèche Bedis / @elacheche_bedis

Content

  • Ubuntu UI
  • Pagestack
  • Page
  • Header / Tabs
  • Toolbar
  • Button
  • Toggle
  • List
  • Text Input
  • Dialog
  • Popover
  • Slider
  • Shape

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

Page

Pages are contained in a pagestack and must have the attribute data-role="page"


Markup declaration


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

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?

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



					

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



					

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

Slider

Sliders have a single handle that can be moved horizontly with the mouse or the touch screen.

Markup declaration



			

Shape

Shapes are “decorators” to make elements like images look as follows

Markup declaration


Thank you

BY ElAchèche Bedis [elacheche.bedis@gmail.com]
fb.com/elacheche.bedis
@elacheche_bedis