UI BUILDER: Update document and screenshot for the new UI/UX

PS2: Reviewed

Change-Id: Iffaa72ddb4147d91c632e75de8ed84d692d7d6db
Signed-off-by: sonbc121.son <sonbc121.son@samsung.com>

diff --git a/org.tizen.studio/html/images/ui_builder_component_designer.png b/org.tizen.studio/html/images/ui_builder_component_designer.png
index 6336b6f..986f87e 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_component_designer.png and b/org.tizen.studio/html/images/ui_builder_component_designer.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_edj.png b/org.tizen.studio/html/images/ui_builder_edj.png
index f9f3739..316f96e 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_edj.png and b/org.tizen.studio/html/images/ui_builder_edj.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_empty_view2.png b/org.tizen.studio/html/images/ui_builder_empty_view2.png
index c4feba5..2243183 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_empty_view2.png and b/org.tizen.studio/html/images/ui_builder_empty_view2.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_event_handler.png b/org.tizen.studio/html/images/ui_builder_event_handler.png
index 3747c60..cdde4df 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_event_handler.png and b/org.tizen.studio/html/images/ui_builder_event_handler.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_palette2.png b/org.tizen.studio/html/images/ui_builder_palette2.png
index 45baf8c..217a841 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_palette2.png and b/org.tizen.studio/html/images/ui_builder_palette2.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_source_tab.png b/org.tizen.studio/html/images/ui_builder_source_tab.png
index da605a6..9975729 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_source_tab.png and b/org.tizen.studio/html/images/ui_builder_source_tab.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_view_drag_and_drop.png b/org.tizen.studio/html/images/ui_builder_view_drag_and_drop.png
new file mode 100644 (file)
index 0000000..e6efec7
Binary files /dev/null and b/org.tizen.studio/html/images/ui_builder_view_drag_and_drop.png differ

diff --git a/org.tizen.studio/html/native_tools/ui_builder_n.htm b/org.tizen.studio/html/native_tools/ui_builder_n.htm
index e86d4b1..a7633e5 100644 (file)
--- a/org.tizen.studio/html/native_tools/ui_builder_n.htm
+++ b/org.tizen.studio/html/native_tools/ui_builder_n.htm
@@ -51,29 +51,38 @@
 
        <h2 id="design">Designing a User Interface</h2>
 
-<p>The native UI Builder offers 2 ways to develop a native application UI:</p>
+<p>The native UI Builder offers 2 ways to develop a native application UI with the UI editor toggle button in the top toolbar area:</p>
 <ul>
-<li>You can use WYSIWYG editing in the <strong>Design</strong> tab.</li>
-<li>You can use XML element editing in the <strong>Source</strong> tab.</li>
+<li>You can use WYSIWYG editing in the <strong>Design</strong> editor.</li>
+<li>You can use XML element editing in the <strong>Source</strong> editor.</li>
 </ul>
 
-<p>The <strong>Design</strong> and <strong>Source</strong> tabs are visible in the <strong>Layout Editor</strong> view. You can switch between the tabs as needed.</p>
+<p>The <strong>Design</strong> and <strong>Source</strong> editors are visible in the <strong>Layout Editor</strong> view. You can switch between the editors as needed.</p>
 
 <h3>Editing the UI Layout in the WYSIWYG Mode</h3>
 
 <p>To create a UI layout:</p>
 <ol>
 <li>Create a view.
+<ul>
+<li>With the <strong>Outline</strong> view:
 <p>A Tizen native application is composed of multiple views through which the user navigates. The view is an editing unit in the native UI Builder.</p>
 <p>To add a new view 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>
 
 <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>With the <strong>Palette</strong>:
+<p>You can add a view from the <strong>Palette</strong>. The <strong>Ctxpopup</strong> view and <strong>Popup</strong> view are available for mobile applications only.</p>
+<p>To add a new view from the <strong>Palette</strong>, drag and drop the view from the <strong>Palette</strong> to the canvas.</p>
+
+<p align="center"><img src="../images/ui_builder_view_drag_and_drop.png" alt="Empty view" /></p>
+</li>
+</ul>
+
+</li>
 <li>Add a UI container to the view.
 <p>Each view must have a root container as the topmost UI component on the canvas. To place the root container, use the components in the <strong>UI containers</strong> category of the <strong>Palette</strong> view. You can drag and drop the component from the <strong>Palette</strong> to the canvas.</p>
-<p>If you select an empty view in the <strong>Outline</strong> view, only the UI container components are shown in the <strong>Palette</strong>. After you place a root container, the other components become visible in the <strong>Palette</strong>.</p>
-<p>The following figures show first the <strong>Palette</strong> with an empty view, and next the <strong>Palette</strong> after adding the root container.</p>
-<p align="center"><img src="../images/ui_builder_palette.png" alt="Palette" /></p>
+<p>The following figure shows the <strong>Outline</strong> view after adding a grid root container from the <strong>Palette</strong> to the empty view.</p>
 <p align="center"><img src="../images/ui_builder_palette2.png" alt="Palette" /></p>
 </li>
 <li>Add a UI component.
@@ -124,24 +133,27 @@
 
 <h3>Editing the UI Layout in the XML Mode</h3>
 
-<p>You can create the UI layout in the native UI Builder by using the XML editor in the <strong>Source</strong> tab to edit the layout file. For more information on the <code>layout.xml</code> file format and supported elements, see <a href="component_attributes_n.htm">Managing UI Component Attributes in layout.xml</a>.</p>
-<p>While editing in the <strong>Source</strong> tab, you can preview the resulting layout in the preview pane.</p>
+<p>You can create the UI layout in the native UI Builder by using the XML editor in the <strong>Source</strong> editor to edit the layout file. For more information on the <code>layout.xml</code> file format and supported elements, see <a href="component_attributes_n.htm">Managing UI Component Attributes in layout.xml</a>.</p>
+<p>While editing in the <strong>Source</strong> editor, you can preview the resulting layout in the preview pane.</p>
 
-<p align="center"><strong>Figure: Source tab</strong></p>
-<p align="center"><img src="../images/ui_builder_source_tab.png" alt="Source tab" /></p>
+<p align="center"><strong>Figure: Source editor</strong></p>
+<p align="center"><img src="../images/ui_builder_source_tab.png" alt="Source editor" /></p>
 
 <p>The native UI Builder provides content assist functionality, which helps you to write code faster and more efficiently. To use this functionality, type a few characters of the word and press <strong>Ctrl + Space</strong>.</p>
 <p>If you select an element in the suggested list with content assist, the auto-complete feature automatically adds the end element.</p>
-<p>If you move a focus to another UI component in the <strong>Source</strong> tab, the selection in the preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the <strong>Source</strong> tab moves accordingly.</p>
+<p>If you move a focus to another UI component in the <strong>Source</strong> editor, the selection in the preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the <strong>Source</strong> editor moves accordingly.</p>
 
        <h2 id="handler">Binding an Event Handler</h2>
 
 <p>An event handler is part of the application logic. It is called by the Tizen framework when any user interaction, such as a mouse click or touch, occurs. The event types vary between UI components, and the event information data depends on the UI component and event type.</p>
-<p>You can add event handlers for UI component events in the <strong>Properties</strong> view. To <a href="storyboard_n.htm">add view transition events between views</a>, use the <strong>Storyboard</strong> tab in the <strong>Layout Editor</strong> view.</p>
-
+<p>You can add event handlers for UI component events in the <strong>Properties</strong> view. To <a href="storyboard_n.htm">add view transition events between views</a>, use the <strong>Storyboard</strong> in the <strong>Layout Editor</strong> view.</p>
+<div class="note">
+       <strong>Note</strong>
+       Since Tizen Studio 2.0, the top <strong>Storyboard</strong> tab has been removed and the storyboard feature has been included in the layout editor. The storyboard feature in the <strong>Layout Editor</strong> view gives you a natural understanding of the overall flow of views when you create a screen, and you can write application prototyping for planning and designing your application.
+</div>
 <h3>Adding an Event Handler to a Specific UI Component</h3>
 
-<p>If you select a UI component in the <strong>Design</strong> tab, all available event types for the selected UI component are displayed in the <strong>Event</strong> section of the <strong>Properties</strong> view:</p>
+<p>If you select a UI component in the <strong>Design</strong> editor, all available event types for the selected UI component are displayed in the <strong>Event</strong> section of the <strong>Properties</strong> view:</p>
 <ul>
 <li>To add an event handler for an event type, click <img src="../images/ui_builder_add.png" alt="Add event handler" /> next to the event type. The area below the event is expanded, and a suggested event handler name is shown in gray color.</li>
 <li>To go to the event handler source, click <img src="../images/ui_builder_get.png" alt="Get the event handler" />.</li>