MySQL: Creating a user and granting rights

Overview

Lists are predefined widgets that mostly look like their native counterparts.

Markup declaration

A container is declared as a list by setting the attribute data-role="list. Lists consist of an <ul> element, containing <li> elements (i.e. list items).

The following code declares a list consisting of two list items:

<section data-role="list">
  <ul>
    <li>
      <p>Label</p>
    </li>
    <li>
      <p>Label</p>
      <p>Secondary Label</p>
    </li>
  </ul>
</section>  

List can contain header-elements.

<section data-role="list">
  <header>Header</header>
  <ul>
    <li>
      <p>Label</p>
    </li>
  </ul>
</section>  

Here is a screenshot of a header element and a "normal" list element:

Ubuntu HTML5 Lists with "progression" effect

To give the user the illusion of "progression", list items can be designed to have an arrow on the right side. This is realized by surrounding a list-item with an a-element:

<section data-role="list">
  <header>Header</header>
  <ul>
    <li>
      <a href="#">
        <p>Open this item</p>
      </a>
    </li>
  </ul>
</section>  

Ubuntu HTML5 Lists with "progression" effect

List items can have an icon on the left side:

<section data-role="list">
  <header>Header</header>
  <ul>
    <li>
      <a>
        <aside>
          <img src="avatar_contacts_list@8.png">
        </aside>
        <p>Label</p>
      </a>
    </li>
  </ul>
</section>

Ubuntu HTML5 Lists with with items having labels

Lists can also contain other elements like text inputs, switches and checkboxes:

<section data-role="list">
  <ul>
    <li>
      <p>Switch</p>
      <label>
        <input type="checkbox" checked="" data-type="switch">
          <span class="toggle">
            <span class="toggle-handle"></span>
            <span class="toggle-bg"></span>
          </span>
      </label>
     </li>
    <li>
      <p>Checkbox</p>
      <label>
        <input type="checkbox">
        <span></span>
      </label>
    </li>
  </ul>
</section>

Ubuntu HTML5 Lists with checkboxs

Javascript access method

Accessing the list widget is made as follows:

var UI = new UbuntuUI();
UI.init();
var list= UI.list("#id"); // a selector is passed as argument

Interface definition

interface List{
  void setHeader(DOMString text);
  void append(DOMSting text, DOMString label, DOMString id, AsyncOperationCallback onClick, Object user_data);
  Element at(unsigned long index);
  void remove(unsigned long index);
  void removeAllItems();
  void forEach(AsyncOperationCallback func);
};

Method

  • void 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.

  • void append(DOMSting text, DOMString label, DOMString id, AsyncOperationCallback onClick, Object userData). appends a new list element to the list. The only mandatory parameter is text, the other parameters are optional. text is displayed on the left side of the created list element, label is normally used to show an image or a toggle, it is displayed on the right side. With "id" the list element gets assigned an "id"-attribute. A click event-handler can be passed with onclick. data allows to pass supplementary data to the event-handler. The following example shows how to use the append method:

UI.list('somelist').append("The"); 
UI.list('somelist').append("answer"); 
UI.list('somelist').append("is"); 
UI.list('somelist').append("42", "path/to/image.png", "clickMeId", onClick, {num: 42});
  • Element at(unsigned long index). returns the n-th list item of the list, null on failure.

  • void remove(unsigned long index). removes the n-th list item of the list, if it exists. If that element does not exist, nothing happens. List item indexes start at 1.

  • void removeAllItems(unsigned long index). removes all the items from the list.

  • void forEach(AsyncOperationCallback func). iterates over the list items and calls the func function on each item. The func function gets the DOM node and its index. In the following example, forEach() is used to assign a CSS class named "odd" to each second item:

UI.list('list').forEach(function(element, index) {
   if(index % 2 === 1)
      element.classList.add("odd");
});
Written on July 9, 2010