--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>UI Hierarchy Analysis</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../images/mobile_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#tree">Hierarchy Tree view</a></li>
+ <li><a href="#overview">Overview</a></li>
+ <li><a href="#uiobject">UI Object view</a></li>
+ <li><a href="#properties">Properties view</a></li>
+ <li><a href="#layout">Layout view</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<!-- Summary -------------------------------------------------------------------------------------------------------------------------------->
+<h1>UI Hierarchy Analysis</h1>
+ <p>The <strong>UI Hierarchy</strong> tab of the dynamic analyzer shows the information of <b>EFL UI objects (Evas, Elementary, Edje)</b>. You can see the hierarchy relationship of all UI objects and the detailed information of each UI object.</p>
+ <p>The tab consists of the following views:</p>
+ <ol>
+ <li><a href="#tree">Hierarchy Tree view</a> shows the relationship of UI objects in tree format. </li>
+ <li><a href="#overview">Overview</a> shows the outline of the <a href="#tree">Hierarchy Tree view.</a></li>
+ <li><a href="#uiobject">UI Object view</a> shows the basic information of the selected UI object from the <a href="#tree">Hierarchy Tree view.</a></li>
+ <li><a href="#properties">Properties view</a> shows the properties of the selected UI object from the <a href="#tree">Hierarchy Tree view.</a></li>
+ <li><a href="#layout">Layout view</a> shows a block representation of your application.</li>
+ </ol>
+
+ <p class="figure">Figure: UI Hierarchy Analysis</p>
+ <p align="center"> <img alt="UI Hierarchy Analysis" src="../images/da_ui_hierarchy_viewer.png" width=764 height=559 /> </p>
+
+<p>To use the UI Hierarchy analysis, do the following.</p>
+ <p class="figure">Figure: Setting for UI Hierarchy Analysis</p>
+ <p align="center"> <img alt="Setting for UI Hierarchy Analysis" src="../images/da_ui_hierarchy_setting.png" width=845 height=368 /> </p>
+<!-- Hierarchy Tree view -------------------------------------------------------------------------------------------------------------------------------->
+ <h2 name="tree" id="tree">Hierarchy Tree view</h2>
+ <p>The Hierarchy Tree view provides you with following features.</p>
+ <ul>
+ <li>You can see the relationships between the UI objects of your application.</li>
+ <li>You can zoom in and out the tree in the Hierarchy Tree view.</li>
+ <li>You can easily find the UI objects you want to see by using filtering options.</li>
+ <li>You can export the tree in the Hierarchy Tree view to an image file.</li>
+ </ul>
+
+ <p class="figure">Figure: Hierarchy Tree view</p>
+ <p align="center"> <img alt="Hierarchy Tree" src="../images/da_ui_hierarchy_tree.png" width=650 height=607 /> </p>
+
+ <h3 id="refresh">Displaying current information of the UI objects</h3>
+ <p> When the UI of your application changes, the Hierarchy Tree view is not automatically updated. To update it, do the following :</p>
+ <ol>
+ <li>If you want to see only <b>Elementary</b> UI objects without <b>Evas and Edje</b>, select the <b>elm Only</b> check box at the upper left of the Hierarchy Tree view.</li>
+ <li> Click the refresh button <img src="../images/da_ui_hierarchy_refresh.png" width=15 height=15 /> at the upper left of the Hierarchy Tree view. In the view, each node represents the corresponding UI object and shows its type (e.g. elm_win).</li>
+ </ol>
+<h3>Exporting the tree in the Hierarchy Tree view to an image file</h3>
+To save a screenshot of tree view to an image file (PNG), click the export button <img src="../images/da_ui_hierarchy_export.png" width=15 height=15 /> at the upper right of the Hierarchy Tree view. And then the Save As dialog box appears.
+
+<h3>Finding the UI object</h3>
+<p>To find the UI objects in the tree, do the following :
+<ol>
+ <li> Select a filtering option in the combo box at the lower left of the Hierarchy Tree view. The options are :
+ <ul>
+ <li><strong>Type</strong> : the type of UI object (e.g. elm_win, elm_button)</li>
+ <li><strong>Name</strong> : the name set by the EFL API <b>evas_object_name_set()</b>. </li>
+ <li><strong>Text</strong> : the text in UI object. Some UI objects (e.g. Label, Text) have its text. </li>
+ </ul>
+ </li>
+ <li> Enter the text in the search box at the lower left of the Hierarchy Tree view. The nodes that contain the search text will be highlighted with blue color. </li>
+</ol>
+
+<h3>Zooming in/out a tree view</h3>
+To zoom in/out a tree view, use the slider at the lower right of the Hierarchy Tree view, or use your keyboard shortcut (Ctrl + mouse scroll wheel).
+
+<!-- Overview -------------------------------------------------------------------------------------------------------------------------------->
+<h2 name="overview" id="overview">Overview</h2>
+<p>The Overview represents the entire tree as the map style. The Hierarchy Tree view displays an enlarged tree which indicates a particular part of the whole tree in the Overview.</p>
+<p>Through the Overview, you can also move around the whole hierarchy tree. Select and move the shaded rectangle in the Overview, and then the tree in the rectangle is displayed as an enlarged tree in the Hierarchy Tree view.</p>
+<p class="figure">Figure: Overview</p>
+ <p align="center"> <img alt="Overview" src="../images/da_ui_hierarchy_overview.png" width=293 height=331 /> </p>
+
+<!-- UI Object view -------------------------------------------------------------------------------------------------------------------------------->
+<h2 name="uiobject" id="uiobject">UI Object view</h2>
+When you select a node in the Hierarchy Tree view, the basic information of the UI object appears in a small balloon above the node.
+<p class="figure">Figure: UI Object view</p>
+ <p align="center"> <img alt="UI Object view" src="../images/da_ui_hierarchy_object.png" width=545 height=445 /> </p>
+In this small balloon, you can see the following:
+<ul>
+ <li><p><b>Image</b>: The actual image of the UI object as displayed in your application. When the image is not available, a message appears instead. The messages are the following : </p>
+ <ul>
+ <li><strong>App In Background</strong> : If the application is running in background, you cannot see the image. To see the image, you should bring the application to foreground and select the node again.</li>
+ <li><strong>Not In Tracing</strong> : If you stop tracing the application, you cannot see the image. To see the image, you should start tracing.</li>
+ <li><strong>No Image</strong> : When the UI object has no image, this message appears. (in case that the width or height of the UI object is 0.)</li>
+ <li><strong>No Object</strong> : When the UI object does not exist anymore in the application, this message appears. This may happen because the Hierarchy Tree view is not automatically updated. See the <a href="#refresh">Displaying current information of the UI objects</a>.</li>
+ </ul>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">If there are other UI objects intersecting the position of the UI object, those are also displayed.</td>
+ </tr>
+ </tbody>
+ </table> </li>
+</li>
+<li> <b>Name</b> : The name set by the EFL API <b>evas_object_name_set()</b>. If the name is not set, the message <b>"No Name"</b> appears instead of a name.</li>
+<li> <b>Number of children</b> : The number of children UI objects. If the UI object has no child, the message <b>"0 children"</b> appears.</li>
+<li> <b>Address</b> : The memory address of the UI object.</li>
+</ul>
+
+<!-- Properties view -------------------------------------------------------------------------------------------------------------------------------->
+<h2 name="properties" id="properties">Properties view</h2>
+
+<p>The Properties view shows a list of the properties for the selected UI object from the Hierarchy Tree view. To find an individual property, expand a category name by clicking the arrow on its left. And then all the properties in that category are displayed.</p>
+ <p class="figure">Figure: Properties view</p>
+ <p align="center"> <img alt="Properties view" src="../images/da_ui_hierarchy_properties.png" width=664 height=504 /> </p>
+<p>The properties are categorized by the <b>type of EFL UI object (Evas, Elementary, Edje)</b>. The Properties view always shows <b>Evas</b> category because all of the EFL UI objects are the subtype of <b>Evas</b>.</p>
+<p>If the UI object is the type of <b>Elementary</b> or <b>Edje</b>, the view shows those categories too. Each type's own properties are also categorized (e.g. elm_label).</p>
+
+<!-- Layout view -------------------------------------------------------------------------------------------------------------------------------->
+<h2 name="layout" id="layout">Layout view</h2>
+The Layout view shows a block representation of the application. When you select a node in the Hierarchy Tree view, the corresponding image is displayed and highlighted.
+<p class="figure">Figure: Layout view</p>
+ <p align="center"> <img alt="Layout view" src="../images/da_ui_hierarchy_layout.png" width=290 height=457 /> </p>
+
+<!-- Meta -------------------------------------------------------------------------------------------------------------------------------->
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<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>
+
+<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>
+
+</body>
+</html>
+
projects / sdk / online-doc.git / commitdiff
