Ubuntu HTML5 platform: Header, Progress bars, Text inputs, Ubuntu Shapes

This is one further article about the Ubuntu HTML5 platform and the last article on widgets. We will examine the application header, progress bars, text inputs and ubuntu shapes.

Header

The header is an UI component which sits on top of an application. It

  • shows the user, where he is
  • switches tabs, which are views of equal importance (see the guidelines)

To show a header containing several tabs,

  • create a section container having an attribute data-role="header"
  • add list items to that section-element having the attribute data-role="tab"

Here is explanatory code snippet:

<header data-role="header">
  <nav class="tabs" data-role="navbar">
    <div class="tabs-inner">
      <ul data-role="tabs">
        <li class="active" data-role="tab">
          <a href="#item1" id="firstTab"<First</a>
        </li>
        <li class="inactive" data-role="tab">
          <a href="#item2" id="secondTab">Second</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

And here is a screenshot of such a header UI element:

[caption id="attachment_1215" align="alignnone" width="333"]Header Header[/caption]

There is no predefined UI method to bind a callback function to a tab, yet. So, I created a small example to show how to switch pages when the user clicks on a tab: JS Bin - Header and tabs.

Progress bars

Progress bars are new HTML5 elements. Ubuntu HTML5 comes with CSS styling instructions to style them.

Declaring progress bars is made as follows:

<progress></progress>
<progress class="bigger"></progress>

Here is a link to try out progress bars on JS Bin: JS Bin - Progress bars

Progress bars with attributes like "value" or "max" are not styled yet (as of Ubuntu HTML5 Theme version 0.1). Here is an example that will NOT be styled correctly:

<progress max="100" value="80"></progress>

Text inputs

HTML5 brings new input types like "number", "url", "email", etc. These new input types have several advantages:

  • Different on screen-keyboards might be used. For example, "numbers" might be entered with a numeric keyboard.
  • The input can be validated by the browser before submitting a form to a server. E.g. the type "email" will show an error when the user tries to submit an email address without a "@"-character.

Here are some examples to show the individual input types:

<div class="inset">
  <input type="text" placeholder="simple text field">
</div>
<div class="inset">
  <input type="text" disabled="" placeholder="disabled text field">
</div>
<div class="inset">
  <input type="tel" placeholder="telephone field">
</div>
<div class="inset">
  <input type="search" placeholder="search field">
</div>
<div class="inset">
  <input type="number" placeholder="number field">
</div>
<div class="inset">
  <input type="url" placeholder="url field">
</div>
<div class="inset">
  <input type="password" placeholder="password with echo">
</div>
<div class="inset">
  <textarea placeholder="the placeholder text is a text which is displayed when there is no content in the TextArea"></textarea>
</div>

This code can be tried online: JS Bin - Inputs types.

No UI methods are needed to access the values of these input fields, document.getElementById("elementid").value suffices.

Shapes

Shapes are "decorators" to make elements like images look as follows: [caption id="attachment_1216" align="alignnone" width="106"]Ubuntu Shape Ubuntu Shape[/caption]

Using them is simple:

<div data-role="shape">
  <img src="http://cordova.apache.org/images/cordova_bot.png">
</div>

Since Shapes are created by using images, setting height and width might make them look bad.

The example can be tried online here: JS Bin - Shapes

The next article will focus on the storage options localstorage, WebSQL, and IndexedDB.

Written on September 24, 2013