Ubuntu UI

Overview

UbuntuUI is the central access point for all Ubuntu Widget classes. It allows to create objects to manipulate all kinds of widgets like "Pagestack", "Buttons" and "Dialogs". Additionally, the role of the UbuntuUI object is to initialize the Ubuntu HTML5 theme.

Instantiating an UbuntuUI object and initializing the Ubuntu HTML5 theme is usually made when the application starts. The code for it is as follows:

<span class="keyword">var</span> UI = <span class="keyword">new</span> UbuntuUI(); <br>
UI.init();

UbuntuUI is defined in the file /usr/share/ubuntu-html5-theme/0.1/ambiance/js/core.js

Interface definition

interface UbuntuUI {
  Pagestack pagestack;
  void init();
  Button button(DOMString domId);
  Dialog dialog(DOMString domId);
  Popover popover(Element elem, DOMString domId);
  Tabs tabs(DOMString selector);
  Toolbar toolbar(DOMString domId);
  List list(DOMString selector);
};

Attributes

pagestack: type Pagestack
pagestack provides access to the Pagestack object, which allows to show and hide Pages. See classes: Pagestack and Page.

Methods

  • void init(). should be called at the beginning of each Ubuntu HTML5 application. This method creates the application's pagestack with the first element matching the selector [data-role='pagestack']. If the pagestack contains a toolbar - which is the case when the pagestack element has a footer node - a back button is added to it. Similarly, for each page contained in the pagestack, if the page has a toolbar, a back button is added to it. If no such toolbar exists, one is created with a back button and appended to the page's DOM.

  • Button 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. See class: Button

  • Dialog dialog(DOMString domId). creates a new Dialog object having the global id domId. The created object can be used to manipulate, show and hide the dialog widget. See class: Dialog

  • Popover 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 (e.g. open and close it). The position of the popover menu is calculated by taking in account the position of the element elem. See class: Popover

  • Tabs tabs(DOMString selector). creates a new Tabs object for the first element within the document that matches the specified selector. See class: Tabs

  • Toolbar toolbar(DOMString domId). creates a new Toolbar object having the global id domId. The created object can be used to manipulate the toolbar (e.g. show and hide it). See class: Toolbar

  • List list(DOMString selector). creates a new List object for the first element within the document that matches the specified selector. That element must be a section HTML element, having the attribute data-role="list". If selector matches a HTML element which is not a section or does not have the attribute data-role="list", an error is thrown. See class: List