HTML5 Ubuntu Touch - UI Widgets

# 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

    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?

# 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

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