Mobile native Wearable native

Creating Application UIs with UI Builder

Tizen provides a WYSIWYG (What You See Is What You Get) UI Builder tool in the IDE for creating application UIs. The UI Builder includes the following features:

Creating a UI Builder Project

A UI Builder project creates the source code and required files and folders in the IDE workspace for building a Tizen native application using the UI Builder. You can use the UI Builder to create and modify the page layout using a graphical user interface.

To create a native UI Builder project:

  1. In the IDE, select File > New > Tizen Native Project.

    If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Native UI Builder). To switch perspectives, go to Window > Open Perspective > Other and select the perspective you need.

  2. In the New Tizen Native Project window, select the Template tab and define the project details:
    • Select the Tizen Native UI Builder project type.
    • Define the name for your project.
      Note
      The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-z OR A-Z][a-z OR A-Z OR 0-9]{2,49}.

      The default location for your application project is defined.

  3. Click Finish.

The new application project is shown in the Project Explorer view of the IDE, with default content in the app.xml file as well as in several project folders.

Structure of a UI Builder Project

The following figure illustrates the default project folder structure for Tizen UI Builder applications.

Figure: Default project folder structure

Default project folder structure

The following table describes the content of the default project folders.

Table: Default project folder content
File or folder Content
Default project folder structureincludes Native UI framework
Default project folder structureres Icons or images
Default project folder structuresrc Application source files
Default project folder structurelayout Layout folder
Default project folder structurelib Library folder
Default project folder structureshared Shared folder
Default project folder structureres Resource folder of the Tizen IDE
Default project folder structurelayout.tuml Layout meta file (tuml: Tizen UI Markup Language)
Default project folder structurenativeuibuilder Application icon file
Default project folder structureapp.xml Application information file
Default project folder structuretizen-manifest.xml Manifest XML file of the Tizen IDE

Creating and Designing Page Layouts

You can create and design native UI Builder application pages in the WYSIWYG Editor view.

Creating a New Native UI Builder Application View

You can create multiple views for a native UI Builder application. To add a new view:

  1. In the IDE, select File > New > Project.
  2. In the New window, select Tizen Native Project and click Next.
  3. Select UI Builder Application > Empty Application.
  4. Enter the new project name in the Project Name field.
  5. Click Finish.

    The new project appears in the Project Explorer view.

Using the WYSIWYG Editor View

You can configure the design area of the WYSIWYG Editor view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to the available screen space.

You can add a UI component in the WYSIWYG Editor view and set its properties:

  1. In the Project Explorer view, double-click the layout.tuml file to which you want to add UI components.

    A design area is displayed in the WYSIWYG Editor view.

  2. Drag the UI component from the Palette area to the WYSIWYG Editor view.

    Designing page layout

  3. Select the UI component in the WYSIWYG Editor or Outline view.
  4. In the Properties view, set the UI component properties.

You can move the UI components around in the WYSIWYG Editor.

Placing UI Components

You can place a variety of UI components in the WYSIWYG Editor view.

To place a UI component, drag the UI component from the Palette area to the WYSIWYG Editor view. The next empty position in the WYSIWYG Editor view is marked with a dotted rectangle.

You can add child UI components in a container, such as a Table. For example, you can add a set of Image UI components in a Table container UI component. When adding the Image UI component, some areas in the Table container change to the blue color, which implies that the UI component can be placed.

Handling Events and Testing

You can select a UI component from the design area of the WYSIWYG Editor view and add event handlers to it.

To add an event handler to a selected UI component:

  1. In the Properties view, select the Event sub-tab.
  2. In the list, select the event to which you want to add an event handler.
  3. If you want to add a click event, click the + button on the right side of the clicked label.
  4. Click the right arrow on the right side of Combo.

    The UI Builder generates a skeleton code for the event handler, and the event handler for the selected event is displayed.

  5. Enter the application-specific event handler-related code.
  6. Press Ctrl+s.

    The Tizen native application is rendered as it is on the Emulator (target).

All UI components have their own unique ID in a specific view, and you can access the UI components in the event handler code using the ID. You can view and edit the UI component ID in the Outline view.

For example, if your view (with the view1 ID) has a button (with the button1 ID), you can create an event handler for the button tap that changes the heading text:

void view1_button1_onclicked(uib_view1_view_context *vc, Evas_object *obj, void *event_info) 
{
   elm_object_text_set(vc->button1, "Hello button1");
}

Testing a UI Builder Project

To test the UI Builder project:

  1. Select the project in the Project Explorer view.
  2. In the IDE menu, select Run > Run as > Tizen Native Application to test the project on the Emulator or target device.
Go to top