<p>To manage the badge:</p>
<ul>
-<li>Get the count attribute with the <code>badge_get_count()</code> function. The count attribute is displayed in the right corner of the badge and its value must be an integer.
+<li>Get the count attribute with the <code>badge_get_count()</code> function. The count attribute is displayed in the upper-right corner of the badge and its value must be an integer.
<p>The parameters are the name of the application whose badge count is retrieved, and the current badge count.</p>
<pre class="prettyprint">
unsigned int count = 0;
<li>A new application is launched from the request of your application.</li>
<li>The user requests to go to the home screen.</li>
<li>A system event (such as an incoming phone call) occurs and causes a resident application with a higher priority to become active and temporarily hide your application.</li>
- <li>An alarm is triggered for another application, which becomes the top-most window and hides your application.</li>
+ <li>An alarm is triggered for another application, which becomes the topmost window and hides your application.</li>
</ul>
<p>Since Tizen 2.4, an application in the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work in the background. In this case, the application can <a href="efl_ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>
/*
You steal focus away from the elm focus model and start to do things
manually, so elm has no clue what is up. Tell elm to unfocus
- the top level UI component
+ the top-level UI component
*/
elm_object_focus_set(elm_object_top_widget_get(window->elm_window), EINA_FALSE);
evas_object_focus_set(window->ewk_view, focus);
<p>A window at the computer screen is associated with its own <strong>window space</strong>. A <strong>viewport</strong> is defined in the window space, as shown in the following figure.</p>
-<p align="center"><strong>Figure: Viewport in the window space is defined by its lower left corner point (MinX, MinY), height H, width W, and the depth range [MinZ, MaxZ]</strong></p>
+<p align="center"><strong>Figure: Viewport in the window space is defined by its bottom-left corner point (MinX, MinY), height H, width W, and the depth range [MinZ, MaxZ]</strong></p>
<p align="center"><img src="../../images/viewport.png" alt="Viewport" /></p>
<p>A viewport is created by the <code>glViewport()</code> function. Then, the <code>glDepthRangef()</code> function is called to specify the desired depth range. The initial values for the first and second parameter are 0.0 and 1.0, respectively. The process of converting the scene object (within the 2<sup>3</sup>-sized box in the View frustrum figure) into the viewport of the window space is called <strong>viewport transform</strong>.</p>
<p align="center"><strong>Figure: Parent origin</strong></p>
<p align="center"><img alt="Parent origin" src="../../../images/parent_origin.png"/></p>
-<p>The default is top-left (<code>Dali::ParentOrigin::TOP_LEFT</code>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
+<p>The default is top left (<code>Dali::ParentOrigin::TOP_LEFT</code>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
<p>For more information, see the <code>Dali::Actor::SetParentOrigin()</code> function.</p>
</li>
}
</pre>
-<p>The stage is the top-most root object, so it can receive application-wide key events.</p>
+<p>The stage is the topmost root object, so it can receive application-wide key events.</p>
<p>DALi provides its own key codes for several special keys, such as <code>DALI_KEY_ESCAPE</code> or <code>DALI_KEY_BACK</code>. The following table lists the available DALi key codes.</p>
<h2 id="format">Stylesheet Format</h2>
-<p>A style sheet has several top level <strong>sections</strong>, which are named JSON objects. The following table lists the available sections.</p>
+<p>A style sheet has several top-level <strong>sections</strong>, which are named JSON objects. The following table lists the available sections.</p>
<p align="center" class="Table"><strong>Table: Stylesheet sections</strong></p>
<table>
Actor hitActor = touchData.GetHitActor( 0 );
</pre>
</li>
-<li>To retrieve the local hit actor and screen positions, use the <code>GetLocalPosition()</code> and <code>GetScreenPosition()</code> functions. The function returns the coordinates relative to the top-left of the hit actor or screen at the specific point.
+<li>To retrieve the local hit actor and screen positions, use the <code>GetLocalPosition()</code> and <code>GetScreenPosition()</code> functions. The function returns the coordinates relative to the top left of the hit actor or screen at the specific point.
<pre class="prettyprint">
const Vector2& screen = touchData.GetScreenPosition( 0 );
</li>
<li>Set a swallow part:
<pre class="prettyprint">
-/* Load content at the top most layer of the background */
+/* Load content at the topmost layer of the background */
elm_object_content_set(bg, evas_object);
</pre>
</li>
</li>
<li>Set a swallow part:
<pre class="prettyprint">
-/* Load content at the top most layer of the background */
+/* Load content at the topmost layer of the background */
elm_object_content_set(bg, evas_object);
</pre>
</li>
<pre class="prettyprint">
elm_progressbar_unit_format_set(progressbar, "%1.2f%%");
</pre>
-<p>If you set the <code>elm.text.bottom.right</code> text part, you cannot use a unit label. You can choose 1 unit label or the bottom right label. The default unit label format is <code>%.0f%%</code>.</p>
+<p>If you set the <code>elm.text.bottom.right</code> text part, you cannot use a unit label. You can choose 1 unit label or the bottom-right label. The default unit label format is <code>%.0f%%</code>.</p>
</li>
</ul>
</li>
<div id="container"><div id="contents"><div class="content">
<h1>Win</h1>
-<p>Win stands for window, and the win component is a graphical control element containing the graphical user interface of a program. The window component is the bottom
-most UI component in an EFL application. In most cases, when an application is launched, a window that fits into the device screen is created and shown. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Win.html">Win</a> API.</p>
+<p>Win stands for window, and the win component is a graphical control element containing the graphical user interface of a program. The window component is the bottommost UI component in an EFL application. In most cases, when an application is launched, a window that fits into the device screen is created and shown. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Win.html">Win</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
<h2 id="basic">Basic Usage</h2>
<div id="container"><div id="contents"><div class="content">
<h1>Win</h1>
-<p>Win stands for window, and the win component is a graphical control element containing the graphical user interface of a program. The window component is the bottom
-most UI component in an EFL application. In most cases, when an application is launched, a window that fits into the device screen is created and shown. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Win.html">Win</a> API.</p>
+<p>Win stands for window, and the win component is a graphical control element containing the graphical user interface of a program. The window component is the bottommost UI component in an EFL application. In most cases, when an application is launched, a window that fits into the device screen is created and shown. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Win.html">Win</a> API.</p>
<p>This feature is supported in wearable applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Naviframe</h1>
-<p>The naviframe container manages many views by stacking them and displaying the top
-most one. For more information, see the Naviframe API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Naviframe.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Naviframe.html">wearable</a> applications).</p>
+<p>The naviframe container manages many views by stacking them and displaying the topmost one. For more information, see the Naviframe API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Naviframe.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Naviframe.html">wearable</a> applications).</p>
<h2 id="basic">Basic Usage</h2>
<p>The <code>default</code> text part is the title, and the <code>default</code> swallow part is the main content area. You can fill these parts with the <code>elm_naviframe_item_push()</code> function as well.</p>
</li></ul>
</li>
- <li>Repeat step 2 for each view you have. You can pop and delete the top-most view during the process using the <code>elm_naviframe_item_pop()</code> function.</li>
+ <li>Repeat step 2 for each view you have. You can pop and delete the topmost view during the process using the <code>elm_naviframe_item_pop()</code> function.</li>
</ol>
<p>The following example shows a simple use case of the naviframe component in a mobile application.</p>
<h2 id="starting">Starting from a Window</h2>
<p>EFL UI programming starts from adding a window. Basically, the way to build an EFL UI application is by adding a window and setting content in it.</p>
-<p>The window is the bottom-most UI component in an EFL application. Usually, when an application is launched, a window that fits into the device screen is created and shown.</p>
+<p>The window is the bottommost UI component in an EFL application. Usually, when an application is launched, a window that fits into the device screen is created and shown.</p>
<p align="center"><strong>Figure: Empty window</strong></p>
<p align="center"><img alt="Empty window" src="../../../images/window.png" /></p>
-<p>Windows are provided by the Elementary library. Since Elementary is a high-level wrapper on the top-most layer in the EFL hierarchy, you can start EFL UI programming with the Elementary library and expand the scope to lower-level libraries, as needed.</p>
+<p>Windows are provided by the Elementary library. Since Elementary is a high-level wrapper on the topmost layer in the EFL hierarchy, you can start EFL UI programming with the Elementary library and expand the scope to lower-level libraries, as needed.</p>
<p>The following code snippet shows how to add a window:</p>
</tr>
<tr>
<td>Elementary</td>
- <td>Elementary (<a href="ui_components_n.htm">UI Components</a>) is the top
-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life-cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</td>
+ <td>Elementary (<a href="ui_components_n.htm">UI Components</a>) is the topmost library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life-cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</td>
</tr>
<tr>
<td>Edje</td>
<h1 id="images_block" name="images_block">Images Block</h1>
-<p>The <code>images</code> block is used to list the image files used in the theme. The used compression methods are also defined here. In addition to the top-level, the <code>images</code> blocks can be included inside other blocks, usually <code>collections</code>, <code>group</code>, and <code>part</code>. Using the <code>images</code> block on the top-level makes file list maintenance easier when the theme is split among multiple files.</p>
+<p>The <code>images</code> block is used to list the image files used in the theme. The used compression methods are also defined here. In addition to the top level, the <code>images</code> blocks can be included inside other blocks, usually <code>collections</code>, <code>group</code>, and <code>part</code>. Using the <code>images</code> block on the top level makes file list maintenance easier when the theme is split among multiple files.</p>
<p align="center"><strong>Figure: Images block</strong></p>
<p align="center"><img width="450" alt="Images block" src="../../../images/diagram_images.png"/></p>
}
</pre>
-<p>The <code>set</code> block is used to define an image with different content depending on its size. In addition to the top-level, the <code>set</code> blocks can be included inside other blocks, normally <code>collections</code>, <code>group</code>, and <code>part</code>. Using the <code>set</code> block on the top-level makes file list maintenance easier when the theme is split among multiple files.</p>
+<p>The <code>set</code> block is used to define an image with different content depending on its size. In addition to the top level, the <code>set</code> blocks can be included inside other blocks, normally <code>collections</code>, <code>group</code>, and <code>part</code>. Using the <code>set</code> block on the top level makes file list maintenance easier when the theme is split among multiple files.</p>
<ul>
<li><code>name [image name]</code>
}
</pre>
-<p>The <code>rel1</code> and <code>rel2</code> blocks are used to define the position of each corner of the part's container. <code>rel1</code> refers to the top left corner and <code>rel2</code> to the bottom right corner.</p>
+<p>The <code>rel1</code> and <code>rel2</code> blocks are used to define the position of each corner of the part's container. <code>rel1</code> refers to the top-left corner and <code>rel2</code> to the bottom-right corner.</p>
<ul>
}
</pre>
-<p>The <code>origin</code> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element's top left corner.</p>
+<p>The <code>origin</code> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element's top-left corner.</p>
<ul>
<li id="description_map_color"><code>color [point] [red] [green] [blue] [alpha]</code>
<p>Sets the color of a vertex in the map. The colors are linearly interpolated between vertex points through the map. The default color of a vertex in a map is white solid (255, 255, 255, 255), which means it has no affect on modifying the part pixels. Currently only 4 points are supported:</p>
<ul>
-<li>0: Top left point of a part</li>
-<li>1: Top right point of a part</li>
-<li>2: Bottom left point of a part</li>
-<li>3: Bottom right point of a part</li>
+<li>0: Top-left point of a part</li>
+<li>1: Top-right point of a part</li>
+<li>2: Bottom-left point of a part</li>
+<li>3: Bottom-right point of a part</li>
</ul>
</li>
<li id="description_map_rotation" name="description_map_rotation"><code>map.rotation</code> block
}
</pre>
</li>
-<li>Define the position of the part in the <code>rel1</code> and <code>rel2</code> blocks, which determine the upper-left corner and the lower-right corner of the part.
+<li>Define the position of the part in the <code>rel1</code> and <code>rel2</code> blocks, which determine the top-left corner and the bottom-right corner of the part.
<p>The position can be defined in relation to another part (with the <code>relative</code> property), or as an offset (with the <code>offset</code> property). When using relative positioning, the <code>to</code>, <code>to_x</code> and <code>to_y</code> properties are used to define in relation to which part the positioning is done. If nothing else is specified, the positioning is in relation to the parent's part.</p>
-<p>To demonstrate relative positioning, the following example creates another rectangle part and positions it under the first part created above. The upper-left corner of the new part starts at the lower-left corner of the previous one.</p>
+<p>To demonstrate relative positioning, the following example creates another rectangle part and positions it under the first part created above. The top-left corner of the new part starts at the bottom-left corner of the previous one.</p>
<pre class="prettyprint">
part {
<p>The default value is <code>0.5 0.5</code>.</p></li>
<li><code>rel1</code>/<code>rel2</code>
-<p>Specifies the position of the top left and bottom right corners of the part's container.</p>
+<p>Specifies the position of the top-left and bottom-right corners of the part's container.</p>
<ul><li><code>relative</code>: X-axis Y-axis
<p>Specifies the relative position of the part's container.</p>
<p>The default value is <code>0.0 0.0</code> for <code>rel1.relative</code> and <code>1.0 1.0</code> for <code>rel2.relative</code>.</p></li>
</tr>
<tr>
<td><a href="container_naviframe_n.htm">Naviframe</a></td>
- <td>Manage many views by stacking them and displaying the top-most one.</td>
+ <td>Manage many views by stacking them and displaying the topmost one.</td>
</tr>
<tr>
<td><a href="container_panes_mn.htm">Panes</a> <strong>in mobile applications only</strong></td>
<h1>Application Icons</h1>
- <p>When an application has new information requiring user attention, such as missed calls or new messages, it has a number in the upper right hand corner of the application icon. This number is called a badge. For example, when a new message is received, the badge appears on the application icon. The badge remains until the user reads the message.</p>
+ <p>When an application has new information requiring user attention, such as missed calls or new messages, it has a number in the upper-right corner of the application icon. This number is called a badge. For example, when a new message is received, the badge appears on the application icon. The badge remains until the user reads the message.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<li><code>allow-same-origin</code>\r
<p>Enables the content <a href="#Sandboxed_Cookies">to be treated as belonging to the same origin</a>.</p></li>\r
<li><code>allow-top-navigation</code>\r
-<p>Enables <a href="#Sandboxed_Page"> navigation to the top-level browsing context</a>.</p></li>\r
+<p>Enables <a href="#Sandboxed_Page"> navigation for the top-level browsing context</a>.</p></li>\r
<li><code>allow-forms</code>\r
<p>Enables <a href="#Sandboxed_Form">form submission</a>.</p></li>\r
<li><code>allow-scripts</code><p> Enables script execution, but blocks pop-ups.</p></li>\r
try {\r
location = 'warning.html';\r
} catch (e) {\r
- alert('HTML5 Sandbox prevented top level navigation.');\r
+ alert('HTML5 Sandbox prevented top-level navigation.');\r
}\r
</script>\r
</pre></li>\r
<li>Create the keyframes to implement the flow for the Tizen logo:
<ul>
<li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>
-<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>
+<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top values, the logo is positioned at the top-right corner of the screen.</li>
<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li>
</ul>
<pre class="prettyprint">
<h2 id="size" name="size">Setting the Column Number and Width</h2>
<p> When the layout is set to a constant number of columns using the <code>column-count</code> (or <code>-webkit-column-count)</code> property, the column width is set to fill the available horizontal space.</p>
-<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>
+<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown at the top), the column width is 116 px, whereas on a 720 x 1280 display (shown at the bottom), the column with is 143 px.</p>
<p>The following code snippet demonstrates how to use the <code>column-count</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
<pre class="prettyprint">
article {
<li>You can view the relationships between the UI objects of your application.
<p>When the application UI changes, the Hierarchy Tree view is not automatically updated. To update the view:</p>
<ol>
- <li>To see only Elementary UI objects without Evas and Edje, select the <strong>Elementary</strong> check box at the top left corner.</li>
+ <li>To see only Elementary UI objects without Evas and Edje, select the <strong>Elementary</strong> check box in the upper-left corner.</li>
<li>Click the refresh button (<img alt="Refresh button" src="../images/da_ui_refresh_button.png"/>).</li>
</ol>
<p>In the view, each node represents a corresponding UI object and shows its type (such as <code>elm_win</code>).</p>
</li>
<li>You can zoom the hierarchy tree in and out.
- <p>To zoom in or out of the tree, use the slider at the bottom right corner, or use a keyboard shortcut (<strong>Ctrl + mouse scroll wheel</strong>).</p></li>
+ <p>To zoom in or out of the tree, use the slider in the lower-right corner, or use a keyboard shortcut (<strong>Ctrl + Mouse wheel scroll</strong>).</p></li>
<li>You can easily find the UI objects you want to see by using filtering options.
<p>To find UI objects in the tree:</p>
<ol>
- <li>Select a filtering option in the combo box at the bottom left corner:
+ <li>Select a filtering option in the combo box in the lower-left corner:
<ul>
<li><strong>Type</strong>: Type of the UI object (such as <code>elm_win</code> or <code>elm_button</code>)</li>
<li><strong>Name</strong>: Name set by the EFL <code>evas_object_name_set()</code> function</li>
</ol>
</li>
<li>You can export the hierarchy tree to an image file.
- <p>To save a screenshot of the tree view to an image file (PNG), click the export button (<img alt="Export button" src="../images/da_ui_export_button.png"/>) at the top right corner. In a dialog box, click <strong>Save As</strong> and define a location for the file.</p>
+ <p>To save a screenshot of the tree view to an image file (PNG), click the export button (<img alt="Export button" src="../images/da_ui_export_button.png"/>) in the upper-right corner. In the dialog box, click <strong>Save As</strong> and define a location for the file.</p>
<p align="center"><strong>Figure: Hierarchy tree</strong></p>
<p align="center"><img alt="Hierarchy tree" src="../images/da_ui_hierarchy_tree.png"/></p>
<h3>Tools</h3>
<p>The workspace has various tools that allow you to manipulate it:</p>
<ul>
-<li>The size of the previewed group can be changed through the container border. The container has a small rectangle in the bottom right corner: use it to change the size with the mouse.
+<li>The size of the previewed group can be changed through the container border. The container has a small rectangle at the bottom-right corner: use it to change the size with the mouse.
<p>Another way is to use the spinners placed at the beginning of the toolbar to set the container size. The chain between the spinners determines whether the width and height changes are made simultaneously. The toggle on the left blocks all size changes.</p>
<p>In the following figure, the setting at the bottom blocks all size changes, and the width and height changes are not linked. At the top, the size changes are not blocked, and the width and height changes are linked.</p>
<p align="center"><strong>Figure: Container size</strong></p>
<p>The workspace can demonstrate 2 possible behaviors:</p>
<ul>
<li>Normal
-<p>This mode is used to manipulate the group primitives in the development stage. All parts are represented on the workspace, including containers and spacers. Each of the non-visible primitive types has their own pattern and color. This makes it possible to understand the markup of the group and the dependencies between primitives. Text parts are bordered to show the area from the top left to bottom right corners. In addition, text parts set the part name as content if there is no preset text in that part (it can be set in the text block in the properties).</p>
+<p>This mode is used to manipulate the group primitives in the development stage. All parts are represented on the workspace, including containers and spacers. Each of the non-visible primitive types has their own pattern and color. This makes it possible to understand the markup of the group and the dependencies between primitives. Text parts are bordered to show the area from the top-left to bottom-right corners. In addition, text parts set the part name as content if there is no preset text in that part (it can be set in the text block in the properties).</p>
<p>You can select primitives directly on the workspace in this mode. You can also select parts inside the part/program navigation panel, as usual. The selected part is covered by the resizing control element, which shows handlers that change the maximum size of the primitive.</p>
<p align="center"><strong>Figure: Normal mode</strong></p>
<p align="center"><img alt="Normal mode" src="../images/comp_des_mode_normal.png" /></p></li>
<p>The preview area tools contain buttons for 6 frequently-used part types: Rect, Text, Image, Swallow, Textblock, and Spacer. Click the applicable button, and the corresponding part object appears in the preview.</p>
</li>
<li>Set the position and size
- <p>The position and size of a part object in pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed on the top left and bottom right boxes.</p>
+ <p>The position and size of a part object in pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed at the top-left and bottom-right corners.</p>
<p>Change the position and size of a part object by dragging the control points placed on each edge of the part object. To move the part object without changing the size, drag the object itself. To move the object position pixel by pixel, use the arrow keys.</p>
<p>Each part in a layout can be constructed with a relative or fixed size:</p>
</ul>
<h2 id="opening">Opening the Project Explorer View</h2>
-<p>Usually, the <strong>Project Explorer</strong> view is located in the top left side in the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window > Show View > Other > General</strong>.</p>
+<p>Usually, the <strong>Project Explorer</strong> view is located in the upper-left side of the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window > Show View > Other > General</strong>.</p>
<p align="center"><strong>Figure: Opening the view</strong></p>
<p align="center"> <img alt="Opening the view" src="../images/proj_explorer_general.png" /> </p>
<p>Display projects in a flat or hierarchical form.</p>
</li>
<li><strong>Top Level Elements</strong>
- <p>Show working sets or projects as top level elements. Choosing working sets allows easy grouping of projects in large workspaces.</p>
+ <p>Show working sets or projects as top-level elements. Choosing working sets allows easy grouping of projects in large workspaces.</p>
</li>
<li><strong>Folder Presentation</strong>
<p>Display folders in a flat or grouped form.</p>
<h2 id="max_min_view">Maximizing and Minimizing Views</h2>
-<p>You can maximize and minimize a set of views in the <strong>Storyboard</strong> tab by toggling the icon in the top right corner of the respective views.</p>
+<p>You can maximize and minimize a set of views in the <strong>Storyboard</strong> tab by toggling the icon in the upper-right corner of the respective views.</p>
<p>Use this feature to reduce the clutter of multiple views present in the application without compromising on losing the overall sight of the application project.</p>
-<p>The startup view can be identified by an arrow symbol in the top left corner of the view.</p>
+<p>The startup view can be identified by an arrow symbol in the upper-left corner of the view.</p>
<p align="center"><strong>Figure: Maximizing and minimizing views</strong></p>
<p align="center"><img src="../images/storyboard_max_min.png" alt="Maximizing and minimizing views" /></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>Add a UI container to the view.
-<p>Each view must have a root container as the top-most 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>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 align="center"><strong>Figure: Tizen Studio preferences</strong></p>
<p align="center"><img alt="Tizen Studio preferences" src="../images/ide_pref_tizen_studio.png" /></p>
-<p>The preferences are listed in the left pane, and you can search for items by using the search box on the top left.</p>
+<p>The preferences are listed in the left pane, and you can search for items by using the search box in the upper left.</p>
<h2 id="widget">Widget ID</h2>
</ul>
<h2 id="opening">Opening the Project Explorer View</h2>
-<p>Usually, the <strong>Project Explorer</strong> view is located in the left-top side in the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window > Show View > Other > General</strong>.</p>
+<p>Usually, the <strong>Project Explorer</strong> view is located in the upper-left side of the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window > Show View > Other > General</strong>.</p>
<p align="center"><strong>Figure: Opening the view</strong></p>
<p align="center"> <img alt="Opening the view" src="../images/proj_explorer_general.png" /> </p>
<p>Display projects in a flat or hierarchical form.</p>
</li>
<li><strong>Top Level Elements</strong>
- <p>Show working sets or projects as top level elements. Choosing working sets allows easy grouping of projects in large workspaces.</p>
+ <p>Show working sets or projects as top-level elements. Choosing working sets allows easy grouping of projects in large workspaces.</p>
</li>
<li><strong>Folder Presentation</strong>
<p>Display folders in a flat or grouped form.</p>
<p>The panel also provides an input area to configure geographical data being sent from the device. Additionally, a map is displayed and updated in accordance to the changing of data.</p>
<p>To simulate a custom, multi-point route:</p>
<ol>
- <li>Click the red location marker button at the upper right corner of the map.</li>
+ <li>Click the red location marker button in the upper-right corner of the map.</li>
<li>Click the desired location points.</li>
<li>Double-click the map to end route creation.</li>
<li>To send the geolocation data to the application along the defined route, click the play button. You can also set the speed of playback.</li>
</ul>
-<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. "N" in the icon stands for the native application profiles and "W" for the Web application profiles.</p>
+<p>When using the Tizen documentation, look for the profile icons in the upper-right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. "N" in the icon stands for the native application profiles and "W" for the Web application profiles.</p>
<p align="center" class="Table"><strong>Table: Tizen profiles</strong></p>
<table border="1">
<li>A new application is launched by the request of your application.</li>
<li><p>The user requests to go to the home screen.</p></li>
<li><p>A system event (such as an incoming phone call) occurs and causes a resident application with a higher priority to become active and temporarily hide your application.</p></li>
- <li><p>An alarm is triggered for another application, which becomes the top-most window and hides your application.</p> </li>
+ <li><p>An alarm is triggered for another application, which becomes the topmost window and hides your application.</p> </li>
</ul>
<p>Since Tizen 2.4, an application in the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work in the background. In this case, the application can <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>
<li>Create the frame event callback functions by adding them to the top of the <code>create_base_gui()</code> function:
<ul>
-<li>The code of the <code>_advance_frame()</code> timeline animation frame event callback function specifies the new size, position, and color of the square. It changes the blue square to red and grows it larger as it moves to the bottom right. The style applied to the animation is <code>ECORE_POS_MAP_LINEAR</code>, which keeps the animation moving at a certain speed.</li>
+<li>The code of the <code>_advance_frame()</code> timeline animation frame event callback function specifies the new size, position, and color of the square. It changes the blue square to red and grows it larger as it moves toward the bottom right. The style applied to the animation is <code>ECORE_POS_MAP_LINEAR</code>, which keeps the animation moving at a certain speed.</li>
<li>The code of the <code>_advance_frame2()</code> timeline animation frame event callback function also specifies the size, position, and color of a square. The style applied to the animation is <code>ECORE_POS_MAP_BOUNCE</code>, which creates a vibration like a bouncing ball. It slows to a stop after bouncing off the ending point.</li>
<p align="center"><img alt="Emulator Control Panel" src="../../images/sensor_accelerator_emulator.png" /></p>
</li>
- <li>Click <strong>Next</strong> in the bottom right corner until you see the <strong>3-Axis</strong> box.</li>
+ <li>Click <strong>Next</strong> in the lower-right corner until you see the <strong>3-Axis</strong> box.</li>
<li>Click the box and select the <strong>Acceleration</strong> tab.</li>
<li>Drag the 3 sliders one at a time. If the X, Y, and Z values change on the application screen, it means you have correctly received the acceleration data in your application.
<ol type="a">
<li>Right-click the emulator and select <strong>Control Panel</strong>.</li>
- <li>Click <strong>Next</strong> in the bottom right corner until you see the <strong>Proximity</strong> box.</li>
+ <li>Click <strong>Next</strong> in the lower-right corner until you see the <strong>Proximity</strong> box.</li>
<li>Click the box to toggle between <strong>Far</strong> and <strong>Near</strong> values. The <strong>Near</strong> value in the control panel makes the second label component on the application screen show <strong>0.0</strong>. If you change the value to <strong>Far</strong>, the label component displays <strong>5.0</strong>.
<p align="center"><img alt="Proximity sensor emulator control panel" src="../../images/sensor_proximity_emulator.png" /></p>
<p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
<ul>
- <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life-cycle of a view, and add UI components (a full set with, for example, buttons, boxes, scrollers, and sliders).</li>
+ <li>Elementary is the topmost library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life-cycle of a view, and add UI components (a full set with, for example, buttons, boxes, scrollers, and sliders).</li>
<li>EFL Core Library consists of several libraries that build on top of each other in layers, steadily becoming higher-level, yet allowing access to lower levels.
<p>EFL Core Library provides the following main libraries:</p>
<ul>
<p align="center"><img alt="View hierarchy for multiple views" src="../../images/ui_builder_view_hierarchy.png" /></p>
<ul>
- <li><strong>Window</strong> is the bottom-most UI component holding a canvas object for drawing, and represents a block of memory that gets composited to the screen.</li>
+ <li><strong>Window</strong> is the bottommost UI component holding a canvas object for drawing, and represents a block of memory that gets composited to the screen.</li>
<li><strong>Conformant</strong> shows the virtual keyboard, indicator, softkey, and clipboard areas.
<p>If you do not need those components, you do not need the conformant either.</p></li>
<li><strong>Naviframe</strong> is used in applications that show multiple views with back and forth transitions between them.
<ul>
<li><strong>Win</strong> is the root window component that is often used in an application. It allows you to create some content in it, and it is handled by the window manager.</li>
<li><strong>Conformant</strong> is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey areas.</li>
- <li><strong>Naviframe</strong> consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</li>
+ <li><strong>Naviframe</strong> consists of a stack of views. New views are pushed on top of previous ones, and only the topmost view is displayed.</li>
<li><strong>Popup</strong> shows a popup area that can contain a title area, a content area, and an action area.</li>
<li><strong>Ctxpopup</strong> is a contextual popup that can show a list of items.</li>
<li><strong>Scroller</strong> holds (and clips) a single object and allows you to scroll across it.</li>
projects / sdk / online-doc.git / commitdiff