<p>You can approach the task of designing a native application with several methods. On the one hand, you can edit the application in the Tizen Studio after creating it with a basic template. On the other hand, you can edit the application in another editor and build it with the CLI interface of the Tizen Studio. As a third option, you can use the native UI Builder in the Tizen Studio.</p>
-<p>This documentation has been created based on the mobile profile.</p>
+<p>This topic describes the design of a mobile application with the UI Builder. The process for a wearable application is similar.</p>
-<p>The native UI Builder offers 2 ways to develop a native application:</p>
+<p>The native UI Builder offers 2 ways to develop a native application in the <strong>WYSIWYG Editor</strong> view:</p>
<ul>
<li>You can use WYSIWYG editing in the <strong>Design</strong> tab.</li>
<li>You can use XML document editing in the <strong>Source</strong> tab.</li>
</ul>
-<p>The <strong>Design</strong> and <strong>Source</strong> tabs are visible in the <strong>WYSIWYG Editor</strong> view. You can switch between the tabs as needed.</p>
+<p>You can switch between the tabs as needed.</p>
<h2 id="project">Creating a Project</h2>
<p>To create a native UI Builder project:</p>
<ol>
- <li>In the Tizen Studio, select <strong>File > New > Tizen Native Project</strong>.
- <p>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 <strong>Window > Open Perspective > Other</strong> and select the perspective you need.</p>
- <p>In the <strong>New</strong> dialog, select <strong>Tizen Native Project</strong> and click <strong>Next</strong>.</p>
+ <li>In the Tizen Studio, select <strong>File > New > Tizen Project</strong>.</li>
+ <li>In the Project Wizard, create a template-based mobile native application, and select a Tizen native UI Builder project template.
+ <p>The <strong>UI Builder - Navigation View</strong> template creates an application with 3 default views, while the <strong>UI Builder - Single View</strong> template offers a single view. For more information on the Project Wizard and templates, see <a href="../../../../org.tizen.studio/html/native_tools/project_wizard_n.htm">Creating Tizen Projects with Tizen Project Wizard</a>.</p>
- <p align="center"><img alt="New dialog" src="../../images/ui_builder_new_dialog.png" /></p>
- </li>
- <li>In the <strong>New Tizen Native Project</strong> window, select the <strong>Template</strong> tab and define the project details:
- <ul>
- <li>Select a Tizen native UI Builder project template.</li>
- <li>Define the name for your project.
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="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}.</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>A default location for your application project is used by default.</li>
- </ul>
- <p>Click <strong>Finish</strong>.</p>
- <p align="center"><img alt="Project details" src="../../images/ui_builder_project_details.png" /></p>
+ <p align="center"><img alt="Project templates" src="../../images/ui_builder_templates.png" /></p>
</li>
+ <li>Define the project details, and click <strong>Finish</strong>.
+ <p align="center"><img alt="Project templates" src="../../images/ui_builder_project_details.png" /></p></li>
</ol>
-<p>After you have created the project, the Tizen Studio changes to the Tizen native UI Builder interface and the project structure is shown in the <strong>Project Explorer</strong> view.</p>
+<p>After you have created the project, the Tizen Studio changes to the <strong>UI Builder</strong> perspective with the applicable views, and the project structure is shown in the <strong>Project Explorer</strong> view.</p>
-<p class="figure">Figure: UI Builder views</p>
-<p align="center"><img alt="UI Builder views" src="../../images/ui_builder_views.png" /></p>
-
-<p class="figure">Figure: Default project structure</p>
-<p align="center"><img alt="Default project structure" src="../../images/ui_builder_project_structure.png" /></p>
+<p class="figure">Figure: UI Builder views and default project structure</p>
+<p align="center"><img alt="UI Builder views and default project structure" src="../../images/ui_builder_views.png" /></p>
<p>The following table describes the content of the default project folders and files.</p>
</tr>
<tr>
<td><img alt="Layout" src="../../images/ui_builder_layout.png" /> <span style="font-family: Courier New,Courier,monospace">layout.xml</span></td>
- <td>Layout meta file (xml: Extensible Markup Language)</td>
+ <td>Layout meta file</td>
</tr>
<tr>
<td><img alt="Icon" src="../../images/ui_builder_icon.png" /> <span style="font-family: Courier New,Courier,monospace">icon.png</span></td>
<h2 id="view">Designing a UI Layout for a View</h2>
-<h3>Using the GUI Editor (WYSIWYG)</h3>
+<h3>Using the WYSIWYG Editor</h3>
<p>To create a UI with the WYSIWYG Editor:</p>
<ol>
<li>Each view must have a root container as a top-level UI component (see the <a href="ui_builder_overview_mn.htm#UI_figure">UI hierarchy structure</a> figure). To design a view, first place the top-level UI component, the root container, on the canvas.
- <p>To place a top-level UI component, use the components in the <strong>UI Component Container</strong> category of the Palette. You can drag & drop the component from the palette to the canvas, or select the component in the palette and click in the canvas. After you have added the component, you can see it in the <strong>Outline</strong> view.</p>
- <p>In this example, a grid component is added as a root container. The following figures show how to drag a grid component from the Palette and drop it on the canvas. In the final figure, you can see the new root grid component in the <strong>Outline</strong> view.</p>
+ <p>To place a top-level UI component, use the components in the <strong>UI container</strong> category of the <strong>Palette</strong>. You can drag and drop the component from the palette to the canvas, or select the component in the palette and click in the canvas. After you have added the component, you can see it in the <strong>Outline</strong> view.</p>
<p align="center"><img alt="Drag a grid UI component from the Palette" src="../../images/ui_builder_drag.png" /></p>
- <p align="center"><img alt="Drop the grid UI component on the canvas" src="../../images/ui_builder_drop.png" /></p>
<p align="center"><img alt="Root container in the Outline view" src="../../images/ui_builder_root.png" /></p>
</li>
<li>After placing the root container, you can place any other UI components you want.
- <p>The native UI Builder provides a useful visual feedback. When you drag a UI component on the canvas, a feedback shows whether you can place the component. If the component can be placed in the selected position, a blue dashed rectangle is shown. If not, a red background is shown and you have to move the component to another position.</p>
+ <p>The native UI Builder provides a useful visual feedback. When you drag a UI component on the canvas, a feedback shows whether you can place the component. If the component can be placed in the selected position, the cursor shows a + sign. If not, the canvas turns red and the cursor displays a rejection sign.</p>
<p>The following figures show an example of positive and negative feedback.</p>
<p align="center"><img alt="Positive feedback" src="../../images/ui_builder_positive.png" /></p>
<p align="center"><img alt="Negative feedback" src="../../images/ui_builder_negative.png" /></p>
</li>
<li>After placing the UI components, you can set their properties and bind any event handlers for specific events.
- <p>Select the component you want to modify in the <strong>Design</strong> tab, and it is shown with a red-dotted line. Use the <strong>Properties</strong> view to set the properties and bind event handlers for the selected component.</p>
+ <p>Select the component you want to modify in the <strong>Design</strong> tab, and it is shown with a blue line. Use the <strong>Properties</strong> view to set the properties and bind event handlers for the selected component.</p>
<p align="center"><img alt="Set the component properties" src="../../images/ui_builder_properties.png" /></p>
</li>
</ol>
<h3>Using the XML Editor</h3>
<p>Another UI programming method of the native UI Builder is to use the XML editor. You can edit your layout file in the <strong>Source</strong> tab. This section describes some of the features that are available in the <strong>Source</strong> tab.</p>
-<p>For more information about the XML schema of the layout file, see XML specification.</p>
+<p>For more information about the XML schema of the layout file, see <a href="../../../../org.tizen.studio/html/native_tools/component_attributes_n.htm">Managing UI Component Attributes in layout.xml</a>.</p>
-<p>To use the XML Editor and its helpful features:</p>
+<p>To use the XML editor and its helpful features:</p>
<ul>
<li><strong>Source</strong> tab
- <p>You can switch to the XML editor by clicking the <strong>Source</strong> tab at the bottom of the <strong>WYSIWYG Editor</strong> view. In the <strong>Source</strong> tab, you can edit the layout XML file.</p>
+ <p>You can switch to the XML editor by clicking the <strong>Source</strong> tab at the top of the <strong>WYSIWYG Editor</strong> view. In the <strong>Source</strong> tab, you can edit the layout XML file.</p>
<p class="figure">Figure: Source tab</p>
<p align="center"><img alt="Source tab" src="../../images/ui_builder_source.png" /></p>
</li>
</li>
</ul>
-<p>To add a view with the <strong>Navigation</strong> view:</p>
+<h3>Adding Views</h3>
+<p>To add a new view:</p>
<ol>
- <li>To add a new view, do one of the following:
- <ul>
- <li>Click the <strong>Empty View</strong> icon in the <strong>Navigation</strong> view toolbar.</li>
- <li>Press the <strong>Ctrl+A</strong> shortcut.
- <p align="center"><img alt="Adding a view using the toolbar or shortcut" src="../../images/ui_builder_addview1.png" /></p>
- </li>
- <li>Open the <strong>Navigation</strong> view context menu, and select <strong>New</strong>.
- <p align="center"><img alt="Adding a view using the context menu" src="../../images/ui_builder_addview2.png" /></p>
- <p>In this case, a <strong>New View</strong> dialog opens with thumbnails and you can select a predefined view template for creating the view. Select the template you want, enter a name (ID) for the view, and click <strong>Finish</strong>.</p>
- <p align="center"><img alt="New View" src="../../images/ui_builder_new_view.png" /></p>
- </li>
- </ul>
- <p>After adding a view, you can see it in the <strong>Navigation</strong> view and the <strong>Source</strong> tab.</p>
- <p align="center"><img alt="View in the Navigation view and Source tab" src="../../images/ui_builder_view_shown.png" /></p>
- </li>
- <li>To design a new view:
- <ol type="a">
- <li>To activate the view you want to edit, double-click the desired view in the <strong>Navigation</strong> view.
- <p align="center"><img alt="Changing an editing view" src="../../images/ui_builder_change_view.png" /></p>
- </li>
- <li>After selecting the view, create a layout for it.
- <p align="center"><img alt="Designing a view" src="../../images/ui_builder_design_view.png" /></p>
- </li>
- </ol>
+<li>In the <strong>Outline</strong> view, click the <strong>Empty View</strong> icon in the toolbar (marked by a red circle in the following figure), or right-click the <strong>Outline</strong> view area and select <strong>Add</strong> and the applicable view.
+
+<p align="center"><img src="../../images/ui_builder_empty_view.png" alt="Empty view" /> <img src="../../images/ui_builder_empty_view2.png" alt="Empty view" /></p>
+</li>
+
+<li>If you select <strong>View From Template List</strong>, a collection of predefined view templates for creating the view is shown. Select the template you want, enter a name (ID) for the view, and click <strong>Finish</strong>.
+<p align="center"><img alt="View templates" src="../../images/ui_builder_new_view.png" /></p>
+
+<p>After adding a view, you can see it in the <strong>Outline</strong> view and the <strong>Source</strong> tab.</p>
+ <p align="center"><img alt="View in the Outline view and Source tab" src="../../images/ui_builder_view_shown.png" /></p>
</li>
+<li>To activate the view for editing, click it in the <strong>Outline</strong> view.</li>
+<li>After selecting the view, create a layout for it by adding UI components from the <strong>Palette</strong> and defining their properties in the <strong>Properties</strong> view.</li>
</ol>
<h2 id="binding">Binding an Event Handler to the UI Component</h2>
<ol>
<li>Select a UI component in the <strong>Design</strong> tab.</li>
- <li>In the <strong>Properties</strong> view, select the <strong>Event</strong> tab.
+ <li>In the <strong>Properties</strong> view, scroll down to the <strong>Events</strong> panel.
<p align="center"><img alt="Event tab" src="../../images/ui_builder_event_tab.png" /></p>
- <p>The <strong>Event</strong> tab shows all available event types for the selected UI component:</p>
+ <p>The <strong>Events</strong> panel shows all available event types for the selected UI component:</p>
<ul>
<li>To add an event handler for an event type, click <img alt="Add" src="../../images/ui_builder_add.png" /> next to the event type.
- <p>The <strong>Event</strong> tab is expanded and you can see the suggested event handler name in gray color. Change the function name of the event handler, if needed. You can see the added event element in the <strong>Source</strong> tab.</p></li>
+ <p>The <strong>Events</strong> panel expands and you can see the suggested event handler name in gray color. Change the function name of the event handler, if needed. You can see the added event element in the <strong>Source</strong> tab.</p></li>
<li>To go to the event handler source, click <img alt="Go" src="../../images/ui_builder_go.png" />.</li>
<li>To remove the event handler, click <img alt="Remove" src="../../images/ui_builder_remove.png" />.</li>
</ul>
<h2 id="storyboard">Adding an Event Handler from the Storyboard</h2>
<p>To transition between pages in your application, use the Storyboard feature of the UI Builder. In the <strong>Storyboard</strong> tab, you can see all the views of your application. In the Storyboard, transitioning between the application views based on some UI component event is called a connection from a UI component to the target view. The target view is the view to be opened when performing a specific event on the UI component.</p>
-
-<p class="figure">Figure: All views mode in the Storyboard tab</p>
-<p align="center"><img alt="All views mode in the Storyboard tab" src="../../images/ui_builder_storyboard_all.png" /></p>
<p>To create a connection:</p>
<p align="center"><img alt="Drop the connection" src="../../images/ui_builder_storyboard_drop.png" /></p>
<p>Selecting an event from the context menu generates the code for the view transition and creates a connection between the 2 views.</p>
</li>
- <li>To see the properties of the created event, select the UI component and go to the <strong>Event</strong> tab in the <strong>Properties</strong> view.
+ <li>To see the properties of the created event, select the UI component (or the connection arrow) and go to the <strong>Events</strong> panel in the <strong>Properties</strong> view.
<p align="center"><img alt="Event properties" src="../../images/ui_builder_storyboard_properties.png" /></p>
</li>
<li>To manage the connection options, right-click the connection, and select <strong>Go to Source Code</strong> to access the source code or <strong>Delete Connection</strong> to delete the connection.
<p align="center"><img alt="Connection options" src="../../images/ui_builder_storyboard_options.png" /></p>
<p>The <strong>Go to Source Code</strong> option takes you to the source code, where 2 functions have been generated:</p>
<ul>
- <li>One is called before the transition is performed to the target view (<span style="font-family: Courier New,Courier,monospace">view1_button1_onclicked()</span>).</li>
- <li>One is provided after the transition has been performed (<span style="font-family: Courier New,Courier,monospace">view1_button1_onclicked_post()</span>).</li>
+ <li>One is called before the transition is performed to the target view (<span style="font-family: Courier New,Courier,monospace">view1_<UI_component>_<event>()</span>).</li>
+ <li>One is provided after the transition has been performed (<span style="font-family: Courier New,Courier,monospace">view1_<UI_component>_<event>_post()</span>).</li>
</ul>
<p>You can perform whatever pre or post transition operations you want in these functions.</p>
<p align="center"><img alt="Pre and post transition operations" src="../../images/ui_builder_storyboard_transitions.png" /></p>
<h2 id="emulator">Running the Application in the Emulator</h2>
-<p>You can run your application in the
Emulator. The device Emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying to a real target device. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">Running Applications on the Emulator</a>.</p>
+<p>You can run your application in the
emulator. The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying to a real target device. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">Running Applications on the Emulator</a>.</p>
<p>To run the application:</p>
projects / sdk / online-doc.git / commitdiff
