<h1>UI Builder</h1>
-<p>The Tizen native UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen native UIs by allowing you to arrange widgets using a drag-and-drop WYSIWYG (What You See Is What You Get) editor.</p>
+<p>The Tizen native UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen native UIs by allowing you to arrange UI Components using a drag-and-drop WYSIWYG (What You See Is What You Get) editor.</p>
-<p>The UI Builder supports a variety of UI
widgets and <a href="#views">views and editors</a>.</p>
+<p>The UI Builder supports a variety of UI
Components and <a href="#views">views and editors</a>.</p>
<p>The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the UI Builder project.</p>
<p align="center"><img alt="Outline view" src="../images/nuib_outline_001.png" /></p>
<p>The <strong>Outline</strong> view provides the following features:</p>
<ul>
-<li>Widget navigation
+<li>UI Component navigation
<ul>
- <li>You can see the widget hierarchy.</li>
+ <li>You can see the UI Component hierarchy.</li>
</ul>
</li>
-<li>Widget management
+<li>UI Component management
<ul>
- <li>You can copy, cut, paste, delete, and rename widgets.</li>
+ <li>You can copy, cut, paste, delete, and rename UI Components.</li>
</ul>
</li>
</ul>
<h3 id="properties" name="properties">Properties View</h3>
-<p>The <strong>Properties</strong> view displays the properties of the widget selected in the <strong>WYSIWYG Editor </strong>view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window > Show View > Other > General > Properties</strong>.</p>
+<p>The <strong>Properties</strong> view displays the properties of the UI Component selected in the <strong>WYSIWYG Editor </strong>view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window > Show View > Other > General > Properties</strong>.</p>
-<p>The <strong>Properties</strong> helps you to edit widget and events.</p>
+<p>The <strong>Properties</strong> helps you to edit UI Component and events.</p>
<p class="figure">Figure: Properties view</p>
<p align="center"><img alt="Properties view" src="../images/properties_1.png" width="420" height="349" /></p>
<p>The <strong>Properties </strong>view consists of <strong>Attributes</strong>, and <strong>Event</strong> tabs:</p>
<ul>
<li><strong>Attributes</strong>
-<p>In the <strong>Attributes</strong> tab, you can edit widget attributes. Attributes are categorized into common (common widget properties) and widget specification (widget-specific properties) attributes. The widget specification attributes are divided into categories according to the widget attributes.</p>
+<p>In the <strong>Attributes</strong> tab, you can edit UI Component attributes. Attributes are categorized into common (common UI Component properties) and UI Component specification (UI Component-specific properties) attributes. The UI Component specification attributes are divided into categories according to the UI Component attributes.</p>
<ul>
<li><strong>Common</strong>
-<p>The <strong>Common</strong> category only includes the ID attribute, which is the default widget identifier in the code.</p>
+<p>The <strong>Common</strong> category only includes the ID attribute, which is the default UI Component identifier in the code.</p>
</li>
-<li><strong>Widget specification</strong>
-<p>The <strong>Widget specification</strong> category includes all widget-specific attributes.</p>
+<li><strong>UI Component specification</strong>
+<p>The <strong>UI Component specification</strong> category includes all UI Component-specific attributes.</p>
</li>
</ul>
<p align="center"><img alt="Properties specification" src="../images/properties_specification_1.png" /></p>
<p>You can import files or folders.</p>
</li>
<li>Easy editing
-<p>You can edit the resource property of the widgets using drag and drop.</p>
+<p>You can edit the resource property of the UI Components using drag and drop.</p>
</li>
</ul>
<ul>
<li>
<p>Palette</p>
-<p>The palette contains EFL widgets, which you can select and add to the design area.</p>
+<p>The palette contains EFL UI Components, which you can select and add to the design area.</p>
<ul>
-<li>Supported widgets for mobile applications:
+<li>Supported UI Components for mobile applications:
<p>Scroller, Grid, Table, Box, Panes, Panel, Button, Check, Radio, Colorselector, Entry, Spinner, Slider, Naviframe, List, Genlist, Toolbar, Multibuttonentry, Gengrid, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
-<li>Supported widgets for wearable applications:
+<li>Supported UI Components for wearable applications:
<p>Scroller, Grid, Table, Box, Panel, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
</ul>
</li>
</li>
<li>
<p>Design area</p>
-<p>You can work with widgets visually so that you can see what your application looks like as you build it.</p>
+<p>You can work with UI Components visually so that you can see what your application looks like as you build it.</p>
</li>
</ul>
</body>
-</html>
\ No newline at end of file
+</html>
<h3 id="design" name="design">Using the WYSIWYG Editor View</h3>
<p>You can configure the design area of the <strong>WYSIWYG Editor</strong> view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to the available screen space.</p>
-<p>You can add a UI widget in the <strong>WYSIWYG Editor</strong> view and set its properties:</p>
+<p>You can add a UI Component in the <strong>WYSIWYG Editor</strong> view and set its properties:</p>
<ol>
-<li>In the <strong>Project Explorer</strong> view, double-click the <strong>layout.tuml</strong> file to which you want to add widgets.
+<li>In the <strong>Project Explorer</strong> view, double-click the <strong>layout.tuml</strong> file to which you want to add UI Components.
<p>A design area is displayed in the <strong>WYSIWYG Editor </strong>view.</p>
</li>
-<li>Drag the widget from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view.
+<li>Drag the UI Component from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view.
<p align="center"><img alt="Designing page layout" src="../../images/nuib_cadvl_wysiwyg_editor.png" width="696" height="688" /></p>
</li>
-<li>Select the widget in the <strong>WYSIWYG Editor</strong> or <strong>Outline</strong> view.</li>
-<li>In the <strong>Properties</strong> view, set the widget properties.</li>
+<li>Select the UI Component in the <strong>WYSIWYG Editor</strong> or <strong>Outline</strong> view.</li>
+<li>In the <strong>Properties</strong> view, set the UI Component properties.</li>
</ol>
-<p>You can move the widgets around in the <strong>WYSIWYG Editor</strong>.</p>
+<p>You can move the UI Components around in the <strong>WYSIWYG Editor</strong>.</p>
-<h3 id="widget" name="widget">Placing Widgets</h3>
-<p>You can place a variety of widgets in the <strong>WYSIWYG Editor </strong>view.</p>
-<p>To place a widget, drag the widget from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view. The next empty position in the <strong>WYSIWYG Editor</strong> view is marked with a dotted rectangle.</p>
-<p>You can add child widgets in a container, such as a Table. For example, you can add a set of Image widgets in a Table container widget. When adding the Image widget, some areas in the Table container change to the blue color, which implies that the widget can be placed.</p>
+<h3 id="widget" name="widget">Placing UI Components</h3>
+<p>You can place a variety of UI Components in the <strong>WYSIWYG Editor </strong>view.</p>
+<p>To place a UI Component, drag the UI Component from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view. The next empty position in the <strong>WYSIWYG Editor</strong> view is marked with a dotted rectangle.</p>
+<p>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.</p>
<h2 name="event" id="event">Handling Events and Testing</h2>
- <p>You can select a UI widget from the design area of the <strong>WYSIWYG Editor</strong> view and add event handlers to it.</p>
-<p>To add an event handler to a selected widget:</p>
+ <p>You can select a UI Component from the design area of the <strong>WYSIWYG Editor</strong> view and add event handlers to it.</p>
+<p>To add an event handler to a selected UI Component:</p>
<ol>
<li>In the <strong>Properties</strong> view, select the <strong>Event</strong> sub-tab.</li>
<li>In the list, select the event to which you want to add an event handler.</li>
<li>Press <strong>Ctrl+s</strong>.<br />
The Tizen native application is rendered as it is on the Emulator (target).</li>
</ol>
-<p>All widgets have their own unique ID in a specific view, and you can access the widgets in the event handler code using the ID. You can view and edit the widget ID in the <strong>Outline</strong> view.</p>
+<p>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 <strong>Outline</strong> view.</p>
<p>For example, if your view (with the <span style="font-family: Courier New,Courier,monospace">view1</span> ID) has a button (with the <span style="font-family: Courier New,Courier,monospace">button1</span> ID), you can create an event handler for the button tap that changes the heading text:</p>
<pre class="prettyprint">
void view1_button1_onclicked(uib_view1_view_context *vc, Evas_object *obj, void *event_info)
<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
</div>
<!--start-->
- <script type="text/javascript">\r
-var _gaq = _gaq || [];\r
-_gaq.push(['_setAccount', 'UA-25976949-1']);\r
-_gaq.push(['_trackPageview']);\r
-(function() {\r
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
-})();\r
+ <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
</script>
<!--end-->
</body>
-</html>
\ No newline at end of file
+</html>
projects / sdk / online-doc.git / commitdiff
