Feedback

Your feedback is important to keep improving our website and offer you a more reliable experience.

Rapid Interface Builder

Rapid Interface Builder (RIB) is a browser-based design tool to quickly prototype and create the user interface for web applications. It supports UI design by dropping widgets onto a canvas, running the UI in an interactive "Preview mode" and then exporting the generated HTML5 and Javascript.

RIB supports both custom Tizen widgets and jQuery Mobile Widgets. A short summary of each widget is provided below, along with a screenshot, the generated code snippet, and the code used to interface with the widget from Javascript.

jQuery Mobile Widgets

The main widgets are described in detail below. You can also use the other widgets listed. The best way to learn what they do is to experiment with them on your own, in RIB.

Header

Placed at the top of an application. Includes the header title and optional navigation buttons. Part of the default layout.

Generated code:

<div data-role="header" data-theme="c">
  <h1>Header Title</h1>
    <a data-role="button" data-icon="arrow-u" data-theme="e">Home</a>
    <a data-role="button" id="nextBtn" href="#page2" 
       data-icon="arrow-r" data-iconpos="right">Next</a>
</div>

Footer

Placed at the bottom of an application. Part of the default layout.

Generated code:

<div data-role="footer" data-theme="d">
  <h1>Footer Label</h1>
</div>

Button

An element that, when clicked, provides an action.

Generated code:

<a data-role="button" data-icon="refresh">Refresh Button</a>

Label

Static text that does not perform any action when clicked.

Generated code:

<label>A label in action: Lorem ipsum dolor sit amet., consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</label>

Text Input

Allows the user to insert text into a field.

Generated code:

<input type="text" value="Text input default value">

Text Area

A region where the user can enter text.

Generated code:

<textarea></textarea>


Radio Button (in Group)

A group of boolean (multiplexor) options that allows the user to select a single option.

Generated code:

<fieldset data-role="controlgroup">
  <legend></legend>
  <input type="radio" id="radio1" checked="checked" name="radio1">
  <label for="radio1">Radio Button 1</label>
  <input type="radio" id="radio2" name="radio1">
  <label for="radio2">Radio Button 2</label>
  <input type="radio" id="radio3" name="radio1">
  <label for="radio3">Radio Button 3</label>
</fieldset>

Checkbox (in Group)

A group of booleans that allows the user to select zero, one, or more options.

Generated code:

<fieldset data-role="controlgroup">
  <legend></legend>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Checkbox 1</label>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Checkbox 2</label>
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">Checkbox 3</label>
</fieldset>

Unordered List

A list with no particular order for its components, that is the order is neither procedural nor prioritized.

Generated code:

<ul data-role="listview" data-inset="true">
   <li>Unordered list item number 1</li>
   <li>Unordered list item number 2</li>
   <li>Unordered list item number 3</li>
</ul>

Ordered List

A list with a particular order for its components, either procedural or prioritized.

Generated code:

<ol data-role="listview" data-inset="true">
  <li>Ordered list item number 1</li>
  <li>Ordered list item number 2</li>
  <li>Ordered list item number 3</li>
</ol>

Vertical Button Group

A group of buttons displayed vertically.

Generated code:

<div data-role="controlgroup">
  <a data-role="button" data-icon="search">Search Button</a>
  <a data-role="button" data-icon="info">Info Button</a>
  <a data-role="button" data-icon="refresh">Refresh Button</a>
</div>

Toggle Switch

A boolean element that allows the user to select one out of two options.

Generated code:

<select data-role="slider" data-theme="e">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

Slider

Allows the user to select from a ranged value, by means of a sliding thumb.

Generated code:

 <div data-role="fieldcontain">
   <label for="slider1-range">Slider label:</label>
   <input type="range" id="slider1-range" value="25" min="0" max="100">
 </div>

Grid

A table-like element, typically used to arrange widgets on a page.

Generated code:

 <div class="ui-grid-a">
   <div class="ui-block-a">
      ...content...
   </div>
   <div class="ui-block-b">
      ...content...
   </div>
 </div>

List Button

A button which can only belong to a list.

Generated code:

<ul data-role="listview" data-inset="true">
  <li data-icon="back">
    <a>List Button 1</a>
  </li>
  <li data-icon="arrow-u">
    <a>List Button 2</a>
  </li>
  <li data-icon="search">
    <a>List Button 3</a>
  </li>
</ul>

Dropdown

Allows the user to select from among some listed options.

Generated code:

<div data-role="content">
    <select>
       <option value="Value">Option1</option>
       <option value="Value">Option2</option>
       <option value="Value">Option3</option>
    </select>
</div>

Collapsible Section

A collapsible region which may contain other widgets.

Generated code:

<div data-role="content">
     <div data-role="collapsible">
        <h1>Collapsible Area</h1>
            <a data-role="button">Button</a>
     </div>
</div>

Form

A component which contains controls, such as text inputs, buttons, validation fields, etc.

Generated code:

<div data-role="content">
     <form action="http://" method="POST">
         <input type="text">
            <textarea></textarea>
            <fieldset data-role="controlgroup">
               <legend></legend>
               <input type="radio" id="radio1" checked="checked" name="radio1">
               <label for="radio1">Radio Button</label>
               <input type="radio" id="radio2" name="radio1">
               <label for="radio2">Radio Button</label>
               <input type="radio" id="radio3" name="radio1">
               <label for="radio3">Radio Button</label>
            </fieldset>
      </form>
</div>

Tizen Widgets

Tizen widgets are available to complement those found in jQuery Mobile. Additional widgets will be created over time, to provide the most complete set possible.

Vertical Toggle Switch

A toggle switch is an element used to enable or disable a feature.

Generated code:

<div data-role="toggleswitch"></div>

Date Picker

The date picker allows the user to select a date within the application.

Generated code:

 <input type="date">

Calendar Picker

The date picker allows the user to select a calendar day within the application.

Generated code:

<a data-role="calendarpicker" data-icon="grid" data-iconpos="notext" 
    data-inline="true"></a>

Color Palette

The color palette allows the user to select one of the predefined colors.

Generated code:

 <div data-role="colorpalette"></div>

Color Picker Button

The color picker button allows the user to combine HSV channels into a single color.

Generated code:

<div data-role="colorpickerbutton"></div>

Color Title

The color title allows the user to specify a color with a hexadecimal number.

Generated code:

<div data-role="colortitle"></div>

HSV Color Picker

The HSV color picker does the same thing as the color picker button, but it does not need a button to be pressed.

Generated code:

<div data-role="hsvpicker"></div>

Progress Bar

The progress bar is used to indicate the progress of an activity.

Generated code:

<div data-role="processingbar"></div>