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.

Project Manager


 

The project management page enables creating, deleting, importing, and cloning UI projects. To view this page, click the home icon in the top-left corner.

All projects you create are listed with their names, the time they were last accessed, and options to open, clone, or delete them.

To create a project, select New Project from the upper central region of the view.

To import a project, use the adjacent import button.

To modify a current working project's settings, select Project Settings in the upper right region of the view.

The Export option packs the current working project into an archive and saves it in the browser's default download directory.

Layout View

The layout view is where all the design work is done.

The components of this view are:

  • Pages
    Top-left: In this panel, you can view the application's main pages with a hierarchical presentation of the components in those pages. You can also add or remove pages in this view.
  • Page and Widget Properties
    Bottom-left: Here, you can view the selected page or widget's editable properties and theme. Only basic properties can be edited.
  • Canvas
    Center: This is the main layout canvas where you create the application. Drag and drop widgets from the palette on the right onto the canvas. A visual marker shows where the widget will be placed. You can select any widget to view its properties in the Properties area, or click delete to delete a widget.
  • Widget Categories:
    Top-right: You can view a list of all available widgets organized in groups in this panel. Select a group to filter which widgets are displayed in the palette below.
  • Widgets
    Bottom-right: This panel contains a palette of jQuery Mobile and Tizen widgets that can be dropped onto the application. For details on each widget, see the GUI Builder Widgets page.

Code View

The Code View displays the HTML (in read-only mode) that will be generated when the UI is exported.

This view is also interactive. Select a page or widget in the hierarchical list from the Pages area (top-left) to display and highlight the corresponding code.


Preview Mode

In Preview Mode, the generated HTML is loaded in the browser. You can select a predefined device type: phone, tablet, or netbook. The corresponding default resolution and skin for the device will be displayed. In addition, you can rotate the device or specify a custom resolution.

New devices can be added by selecting the Add Device option and then specifying a name and resolution. These will be persisted and available for future use.