UI Builder update for Tizen Studio 1.1

PS4: [LB] Reviewed

Change-Id: I6ddac0d26553d3483d451d40bd4420cbfacdeebc
Signed-off-by: jungwook.ryu <jungwook.ryu@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
new file mode 100644 (file)
index 0000000..6336b6f
Binary files /dev/null and b/org.tizen.studio/html/images/ui_builder_component_designer.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_component_designer_btn.png b/org.tizen.studio/html/images/ui_builder_component_designer_btn.png
new file mode 100644 (file)
index 0000000..9acd59f
Binary files /dev/null and b/org.tizen.studio/html/images/ui_builder_component_designer_btn.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 26bfa01..f9f3739 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_event_handler.png b/org.tizen.studio/html/images/ui_builder_event_handler.png
index a841bdc..3747c60 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_link_to_edc.png b/org.tizen.studio/html/images/ui_builder_link_to_edc.png
new file mode 100644 (file)
index 0000000..cb9af52
Binary files /dev/null and b/org.tizen.studio/html/images/ui_builder_link_to_edc.png differ

diff --git a/org.tizen.studio/html/images/ui_builder_properties.png b/org.tizen.studio/html/images/ui_builder_properties.png
index cfde1b6..1aa4be5 100644 (file)
Binary files a/org.tizen.studio/html/images/ui_builder_properties.png and b/org.tizen.studio/html/images/ui_builder_properties.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 9d18ee3..c0d84a2 100644 (file)
--- a/org.tizen.studio/html/native_tools/ui_builder_n.htm
+++ b/org.tizen.studio/html/native_tools/ui_builder_n.htm
@@ -88,8 +88,40 @@
 <h4>Using EDJ for UI Design</h4>
 
 <p>In addition to the UI Builder, you can create a UI layout using the EDC script. If the built-in UI components are not enough, design the UI layout using the <a href="edc_editor_n.htm">EDC Editor</a>. To include the EDC script (an EDJ file) in your application, add a layout UI component to the view, and set the EDJ file path and group name properly in the <strong>Properties</strong> view.</p>
+<p>You can also create a new EDC script or edit an included EDC script directly from the WYSIWYG editor: Double-click the <img alt="EDC Editor" src="../images/ui_builder_link_to_edc.png"/> icon in the layout component, and the selected EDJ opens for editing in the EDC Editor.</p>
+
+<p align="center"><strong>Figure: EDC script</strong></p>
 <p align="center"><img src="../images/ui_builder_edj.png" alt="EDC script" /></p>
 
+<h4>Customizing the UI Component Style</h4>
+
+<p>You can edit and extend the existing styles of a UI component by using the <a href="component_designer_n.htm">Component Designer</a> from the UI Builder.</p>
+<div class="note">
+       <strong>Note:</strong>
+       This feature is available since the 3.0 platform.
+</div>
+
+<p>To open the dialog for managing styles, click the <img alt="Component Designer" src="../images/ui_builder_component_designer_btn.png"/> icon next to the style combo in the <strong>Properties</strong> view.</p>
+
+<p align="center"><strong>Figure: Style management dialog</strong></p>
+<p align="center"><img alt="Style management dialog" src="../images/ui_builder_component_designer.png"/></p>
+
+<p>The dialog displays a list of the UI component styles with the following markings:</p>
+<ul>
+<li><strong>(*)</strong>: Changed embedded style</li>
+<li><strong>[ ]</strong>: New style</li>
+<li>No mark: Embedded style</li>
+</ul>
+
+<p>Use the buttons in the dialog to manage the styles:</p>
+<ul>
+<li><strong>Delete</strong>: Remove a user-created style which is enclosed in <strong>[ ]</strong>. Embedded styles cannot be removed.</li>
+<li><strong>Modify</strong>: Change the information of the selected style with the Component Designer.</li>
+<li><strong>Extend</strong>: Create a new style based on the selected style with the Component Designer.</li>
+<li><strong>Reset</strong>: Restore the original embedded style. You can use this button only with styles marked with  <strong>(*)</strong>.</li>
+</ul>
+
+
 <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.</p>
@@ -183,4 +215,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>