[SAMPLE APP][DATA-CONTROL-CONSUMER] ui-builder - view description

Change-Id: I05c0b8f6274f11c9abc3d90c36312854ec20539b
Signed-off-by: Michal Skorupinski <m.skorupinsk@samsung.com>

diff --git a/org.tizen.sampledescriptions/html/images/data_control_consumer/Data-Control-Consumer-ui-builder-views.png b/org.tizen.sampledescriptions/html/images/data_control_consumer/Data-Control-Consumer-ui-builder-views.png
new file mode 100644 (file)
index 0000000..c872eec
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/data_control_consumer/Data-Control-Consumer-ui-builder-views.png differ

diff --git a/org.tizen.sampledescriptions/html/images/data_control_consumer/data_control_consumer_naviframe_view.png b/org.tizen.sampledescriptions/html/images/data_control_consumer/data_control_consumer_naviframe_view.png
new file mode 100644 (file)
index 0000000..382cfa2
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/data_control_consumer/data_control_consumer_naviframe_view.png differ

diff --git a/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm
index 190b0e7..8cf23f8 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/data_control_consumer_sd_mn.htm
@@ -38,7 +38,6 @@
                <img alt="The 'Map' view" height="364" hspace="20" src="../images/data_control_consumer/data_control_consumer_view_map.png" />
                <img alt="The 'Sql' view" height="364" hspace="20" src="../images/data_control_consumer/data_control_consumer_view_sql.png" />
        </p>
-
        <p>The sample application's user interface consists of two views:</p>
                <ul>
                        <li>Map view - allows to use the 'map' communication method;</li>
@@ -86,14 +85,37 @@
                        </ul>
                </ul>
 
+       <h2>Implementation</h2>
+
+       <h3>GUI</h3>
+
+       <p>The GUI was created using the WYSWIG UI-Builder editor which is a part of the Tizen SDK.</p>
+       <p>A GUI project consist of the following elements:</p>
+       <ul>
+               <li>app.xml file - contains base UI information;</li>
+               <li>layout/layout.tuml file - contains the layout structure (widget positions, callback names etc.);</li>
+               <li>src/managed folder - contains the *.c and *.h files generated by the ui-builder. This folder is created when the application is built and removed when the 'clean' option is used. It is also updated when the layout.tuml file is saved. Contents of this folder mustn't be modified manually;</li>
+               <li>src/event_handler folder - contains the event handlers code generated by the ui-builder. The ui-builder creates stubs of callback functions that can be edited by the user. </li>
+       </ul>
+
+       <h4>Layout editor</h4>
+       <p>The user can create the UI using the WYSWIG editor. Widgets can be added and modified using drag&drop. The parameters of the selected widget can be adjusted using the panel on the right (check the ui-builder documentation for details). There are two project templates for ui-builder applications: single-view and navigation. The data-control-consumer app is created using the navigation template. The UI uses an elm_conformant widget as root. This is created by default for an ui-builder application and cannot be changed. An elm_naviframe is used as the conformant's <a href = "#ui-struct">layout</a>. The naviframe can switch between two views: 'Map' and 'Sql'. </p>
 
+       <p class="figure">Figure: UI-Builder View display</p>
+       <p style="text-align:center;">
+               <img alt="UI-Builder View display" src="../images/data_control_consumer/Data-Control-Consumer-ui-builder-views.png" />
+       </p>
 
+       <p>Note that there are three views available. The first one is the naviframe while the second and third contain the displayed pages. The first view doesn't allow the user to add any widgets using drag&drop. In this view you can select one of the remaining views to be used as the default content pushed to the naviframe.</p>
 
+       <p class="figure">Figure: The naviframe view</p>
+       <p id="ID" style="text-align:center;">
+               <img alt="Naviframe view" height="364" hspace="20" src="../images/data_control_consumer/data_control_consumer_naviframe_view.png" />
+       </p>
 
 
 <!-- ********************************************************************************** -->
 
-
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>