<h1>Configuring Accessibility on a Device</h1>
<p>Tizen provides the following accessibility features:</p>
-<ul><li><strong>Font size</strong>
-<p>The user can configure system-wide font size settings, such as enlarge the fonts to suit visually-impaired users' needs.</p></li>
+<ul>
<li><strong>Screen reader</strong>
-<p>Visually-impaired users can interact with a Tizen device through intuitive touch screen gestures. The screen reader reacts to the gestures by examining the elements of the graphical user interface, reading aloud, and highlighting the currently focused content of the screen.</p></li></ul>
+<p>Visually-impaired users can interact with a Tizen device through intuitive touch screen gestures. The screen reader reacts to the gestures by examining the elements of the graphical user interface, reading aloud, and highlighting the currently focused content of the screen.</p></li>
+<li><strong>Font size</strong>
+<p>The user can configure system-wide font size settings, such as enlarge the fonts to suit visually-impaired users' needs.</p></li>
+</ul>
<p>You can enable 1 or more accessibility features at the same time to better suit the device to your needs and preferences. Some features (such as the screen reader) require the use of a small set of specific gestures to operate them, while others (such as changing font size) only need to be enabled in the device settings.</p>
circle_obj = eext_circle_object_add(parent, surface);
eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
</pre>
-<p>To get the current color of circle object, use the <code>eext_circle_object_color_get()</code> function.</p>
+<p>To get the current color of the circle object, use the <code>eext_circle_object_color_get()</code> function.</p>
</li>
<li>
<p>To set the color of a certain item in a circle object, use the <code>eext_circle_object_item_color_set()</code> function.</p>
<div class="note">
<strong>Note</strong>
- A maximum of 11 items can be displayed in one page of the rotary selector. Any exceeding items are arranged in the next page.
+ A maximum of 11 items can be displayed on one page of the rotary selector. Any excess items are arranged on the next page.
</div>
<p>To add an item:</p>
<h1>Customizing UI Components</h1>
<p>This topic explains how to customize UI components. Before learning the process of customization, you must understand the concept of "style" and "theme" in EFL and how EFL applies the right style for a UI component.</p>
-<p>EFL provides the EDC script as a way
to define a look for UI components. For more information on how to write an EDC script, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</p>
+<p>EFL provides the EDC script as a way
for defining a look for UI components. For more information on how to write an EDC script, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</p>
<h2 id="theme">Style, Theme, and EDC</h2>
<h1>Flipselector</h1>
-<p>The flipselector UI component has a set of text items and
flips up or down the selector to change the text on it. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Flipselector.html">Flipselector</a> API.</p>
+<p>The flipselector UI component has a set of text items and
a selector that flips up or down to change the text on it. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Flipselector.html">Flipselector</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
<h2 id="basic">Basic Usage</h2>
-<p>The gengrid UI component is based on the same idea as <a href="component_genlist_mn.htm">genlist</a>. It aims
at displaying objects on a grid layout and rendering only the visible ones. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Gengrid.html">Gengrid</a> API.</p>
+<p>The gengrid UI component is based on the same idea as <a href="component_genlist_mn.htm">genlist</a>. It aims
to display objects on a grid layout and render only the visible ones. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Gengrid.html">Gengrid</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
-<p>To save up memory and speed up processing when many items exist, the gengrid has the concept of "realization" when managing items. It means that a gengrid item creates its text and content when the user scrolls the grid and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Gengrid_Item_Class</code> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <code>text_get</code> and <code>content_get</code> functions defined in the gengrid item class.</p>
+<p>To save memory and speed up processing when many items exist, the gengrid uses the concept of "realization" when managing items. It means that a gengrid item creates its text and content (realizes) when the user scrolls the grid and the item shows up on the screen, and frees them (unrealizes) when the item is scrolled out of the screen. To enable the item realization, you must create and fill an <code>Elm_Gengrid_Item_Class</code> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <code>text_get</code> and <code>content_get</code> functions defined in the gengrid item class.</p>
<h2 id="basic">Basic Usage</h2>
<li>Define the gengrid item class:
<ol type="a">
<li>Create a gengrid item class with the <code>elm_gengrid_item_class_new()</code> function, set a style to the item class, and register the callback functions.
-<p>The genlist item class must be freed manually with <code>elm_gengrid_item_class_free()</code> function after all items are appended.</p>
+<p>The gengrid item class must be freed manually with <code>elm_gengrid_item_class_free()</code> function after all items are appended.</p>
<pre class="prettyprint">
Elm_Gengrid_Item_Class *itc = elm_gengrid_item_class_new();
</pre>
</li>
<li>Define the <code>text_get</code> function.
-<p>When a gengrid item becomes realized, the <code>text_get</code> function is called repeatedly for all text parts in that item. After the text is set to the part, it is freed automatically (do not free it manually).</p>
+<p>When a gengrid item becomes realized, the <code>text_get</code> function is called repeatedly for all text parts in that item. After the text is set to the part, it is freed automatically. Do not free it manually.</p>
<pre class="prettyprint">
static char*
_item_label_get(void *data, Evas_Object *obj, const char *part)
</pre>
</li>
<li>Define the <code>content_get</code> function.
-<p>The <code>content_get</code> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <code>NULL</code> (when no content is desired). The object is deleted by the gengrid on its deletion or when the item is unrealized.</p>
+<p>The <code>content_get</code> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set, or <code>NULL</code> when no content is desired. The object is deleted by the gengrid on its deletion or when the item is unrealized.</p>
<pre class="prettyprint">
static Evas_Object*
_item_content_get(void *data, Evas_Object *obj, const char *part)
</tr>
<tr>
<td><code>unrealized</code></td>
- <td>An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.</td>
+ <td>The item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
<td><code>drag,start,up</code></td>
- <td>The item in the list is dragged (not scrolled) up.</td>
+ <td>The item in the grid is dragged (not scrolled) up.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
<td><code>drag,start,down</code></td>
- <td>The item in the list is dragged (not scrolled) down.</td>
+ <td>The item in the grid is dragged (not scrolled) down.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
<td><code>drag,start,left</code></td>
- <td>The item in the list is dragged (not scrolled) left.</td>
+ <td>The item in the grid is dragged (not scrolled) left.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
<td><code>drag,start,right</code></td>
- <td>The item in the list is dragged (not scrolled) right.</td>
+ <td>The item in the grid is dragged (not scrolled) right.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
<td><code>drag,stop</code></td>
- <td>The item in the list has stopped being dragged.</td>
+ <td>The item in the grid has stopped being dragged.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
<td><code>drag</code></td>
- <td>The item in the list is being dragged.</td>
+ <td>The item in the grid is being dragged.</td>
<td><code>Elm_Object_Item</code> object that contains the dragged item</td>
</tr>
<tr>
</tr>
<tr>
<td><code>edge,top</code></td>
- <td>The genlist is scrolled to the top edge.</td>
+ <td>The gengrid is scrolled to the top edge.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>edge,bottom</code></td>
- <td>The genlist is scrolled to the bottom edge.</td>
+ <td>The gengrid is scrolled to the bottom edge.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>edge,left</code></td>
- <td>The genlist is scrolled to the left edge.</td>
+ <td>The gengrid is scrolled to the left edge.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>edge,right</code></td>
- <td>The genlist is scrolled to the right edge.</td>
+ <td>The gengrid is scrolled to the right edge.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>moved</code></td>
- <td>A genlist item is moved in the reorder mode.</td>
+ <td>The item is moved in the reorder mode.</td>
<td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
<td><code>pressed</code></td>
- <td>The genlist item is pressed by mouse down.</td>
+ <td>The item is pressed by mouse down.</td>
<td><code>Elm_Object_Item</code> object that contains the pressed item</td>
</tr>
<tr>
<td><code>released</code></td>
- <td>The genlist item is released by mouse up.</td>
+ <td>The item is released by mouse up.</td>
<td><code>Elm_Object_Item</code> object that contains the released item</td>
</tr>
<tr>
<td><code>clicked,right</code></td>
<td>The item is right-clicked.</td>
- <td>The right-clicked gengrid item</td>
+ <td>Right-clicked gengrid item</td>
</tr>
<tr>
<tr>
<td><code>changed</code></td>
- <td>An item is added, removed, resized, or moved, and the gengrid is resized or has <code>horizontal</code> property changes.</td>
+ <td>The item is added, removed, resized, or moved, and the gengrid is resized or has <code>horizontal</code> property changes.</td>
<td></td>
</tr>
<tr>
<p>The genlist UI component displays a scrollable list of items. It allows you to manage a lot of items while still being fast and having a low memory footprint, as only visible items are allocated in the memory. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Genlist.html">Genlist</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
-<p>To save up memory and speed up processing when many items exist, genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). Since item realization is dynamic, you cannot set content in advance. You need to fill the item in the form of a callback function. That is the key point of using a genlist component.</p>
+<p>To save memory and speed up processing when many items exist, the genlist uses the concept of "realization" when managing items. It means that a genlist item creates its text and content (realizes) when the user scrolls the list and the item shows up on the screen, and frees them (unrealizes) when the item is scrolled out of the screen. Since item realization is dynamic, you cannot set content in advance. You need to fill the item in the form of a callback function. That is the key point of using a genlist component.</p>
<h2 id="basic">Basic Usage</h2>
</pre>
</li>
<li>Define the <code>content_get</code> function.
-<p>The <code>content_get</code> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set or <code>NULL</code> when no content is desired. The object is deleted by the genlist on its deletion or when the item is unrealized.</p>
+<p>The <code>content_get</code> function is called repeatedly for all swallow parts in the item. It must return a valid object handle to be set, or <code>NULL</code> when no content is desired. The object is deleted by the genlist on its deletion or when the item is unrealized.</p>
<pre class="prettyprint">
static Evas_Object*
_item_content_get(void *data, Evas_Object *obj, const char *part)
<p>The genlist has a separate style for itself and for its items. The genlist style determines the characteristics of the entire scrollable area.</p>
-<p>The genlist items have a gradient opacity from the top to the bottom rather than an explicit divider since Tizen 2.4. Each item is identified by its color made by blending its opacity and background color (or image). The <code>solid</code> prefix in a genlist style name means that genlist items have an explicit divider and background color. To set a genlist with a solid background color:</p>
+<p>The genlist items have a gradient opacity from the top to the bottom rather than an explicit divider since Tizen 2.4. Each item is identified by its color, made by blending its opacity and background color (or image). The <code>solid</code> prefix in a genlist style name means that genlist items have an explicit divider and background color. To set a genlist with a solid background color:</p>
<pre class="prettyprint">
elm_object_style_set(genlist, "solid/default");
</pre>
</tr>
<tr>
<td><code>unrealized</code></td>
- <td>An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.</td>
+ <td>The item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.</td>
<td><code>Elm_Object_Item</code></td>
</tr>
<tr>
</tr>
<tr>
<td><code>moved</code></td>
- <td>A genlist item is moved in the reorder mode.</td>
+ <td>The item is moved in the reorder mode.</td>
<td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
<td><code>moved,after</code></td>
- <td>A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
+ <td>The item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
<td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
<td><code>moved,before</code></td>
- <td>A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
+ <td>The item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
<td><code>Elm_Object_Item</code> object that contains the moved item</td>
</tr>
<tr>
</tr>
<tr>
<td><code>tree,effect,finished</code></td>
- <td>A genlist tree effect is finished.</td>
+ <td>The genlist tree effect is finished.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>pressed</code></td>
- <td>The genlist item is pressed by mouse down.</td>
+ <td>The item is pressed by mouse down.</td>
<td><code>Elm_Object_Item</code> object that contains the pressed item</td>
</tr>
<tr>
<td><code>released</code></td>
- <td>The genlist item is released by mouse up.</td>
+ <td>The item is released by mouse up.</td>
<td><code>Elm_Object_Item</code> object that contains the released item</td>
</tr>
</tbody>
<h2 id="items">Defining the Genlist Item Class</h2>
-<p>To save up memory and speed up processing when many items exist, the genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Genlist_Item_Class</code> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+<p>To save memory and speed up processing when many items exist, the genlist uses the concept of "realization" when managing items. It means that a genlist item creates its text and content (realizes) when the user scrolls the list and the item shows up on the screen, and frees them (unrealizes) when the item is scrolled out of the screen. To enable the item realization, you must create and fill an <code>Elm_Genlist_Item_Class</code> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
<p>You can use the genlist item class for the following purposes:</p>
<ul><li>Setting the item styles</li>
<p>The <code>PART</code> parameter is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <code>strdup()</code> function) corresponding to the <code>PART</code> parameter. The caller is in charge of freeing the string when done.</p></li>
<li><code>content_get()</code>
- <p>The <code>PART</code> parameter is the name string of one of the existing swallow parts in the Edje group. The function returns a valid object handle or <code>NULL</code> (when no content is desired). The object is deleted by the genlist on its deletion or when the item is <code>unrealized</code>.</p></li>
+ <p>The <code>PART</code> parameter is the name string of one of the existing swallow parts in the Edje group. The function returns a valid object handle, or <code>NULL</code> when no content is desired. The object is deleted by the genlist on its deletion or when the item is <code>unrealized</code>.</p></li>
<li><code>state_get()</code>
<p>The <code>PART</code> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <code>EINA_FALSE</code> for false/off or <code>EINA_TRUE</code> for true/on. The default is false. When the state is true, the genlist emits a signal to the <code>PART</code> parameter's theming Edje object using <code>elm,state,xxx,active</code> as the <code>emission</code> parameter and <code>elm</code> as the <code>source</code> parameter. xxx is the name of the (state) part.</p></li>
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be collapsed.</p></li>
<li><code>realized</code>: The item is created as a real evas object.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be created.</p></li>
- <li><code>unrealized</code>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
+ <li><code>unrealized</code>: The item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be deleted.</p></li>
<li><code>drag,start,up</code>: The item in the list is dragged (not scrolled) up.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pinched item.</p></li>
<li><code>swipe</code>: The genlist is swiped.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
- <li><code>moved</code>: A genlist item is moved in the reorder mode.
+ <li><code>moved</code>: The item is moved in the reorder mode.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
- <li><code>moved,after</code>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.
+ <li><code>moved,after</code>: The item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
- <li><code>moved,before</code>: A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.
+ <li><code>moved,before</code>: The item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.
<p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
<li><code>language,changed</code> The program language is changed.
<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
- <li><code>tree,effect,finished</code>: A genlist tree effect is finished.
+ <li><code>tree,effect,finished</code>: The genlist tree effect is finished.
<p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
</ul>
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
-<p>The OpenGL® ES surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying OpenGL® ES surface.</p>
+<p>The OpenGL® ES surface is destroyed and recreated in the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying OpenGL® ES surface.</p>
</li>
<li>
<p>Set the GLView rendering policy.</p>
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
-<p>The OpenGL® ES surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying OpenGL® ES surface.</p>
+<p>The OpenGL® ES surface is destroyed and recreated in the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying OpenGL® ES surface.</p>
</li>
<li>
<p>Set the GLView rendering policy.</p>
<h1>Icon</h1>
-<p>The icon UI component is used to display standard icon images ("delete", "home", and "apps") or images coming from a custom file (such as PNG, JPG, and Edje) on icon contexts. The icon component inherits from the <a href="component_image_mn.htm">image</a> component, which means that image functions can be used on icon objects. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Icon.html">Icon</a> API.</p>
+<p>The icon UI component is used to display standard icon images ("delete", "home", and "apps") or images coming from a custom file (such as PNG, JPG, and Edje) in icon contexts. The icon component inherits from the <a href="component_image_mn.htm">image</a> component, which means that image functions can be used on icon objects. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Elm__Icon.html">Icon</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
<p>To configure the image component:</p>
<ul>
-<li><p>Disable Elementary scaling so that the image does not scale but resizes on both directions:</p>
+<li><p>Disable Elementary scaling so that the image does not scale but resizes in both directions:</p>
<pre class="prettyprint">
elm_image_no_scale_set(image, EINA_TRUE);
elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
<p>To configure the image component:</p>
<ul>
-<li><p>Disable Elementary scaling so that the image does not scale but resizes on both directions:</p>
+<li><p>Disable Elementary scaling so that the image does not scale but resizes in both directions:</p>
<pre class="prettyprint">
elm_image_no_scale_set(image, EINA_TRUE);
elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
<div id="container"><div id="contents"><div class="content">
<h1>Index</h1>
-<p>The index UI component gives you an index for quick access to a group of other UI items. The index component is
by default hidden, but it appears when the user clicks over its reserved area on the canvas. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Elm__Index.html">Index</a> API.</p>
+<p>The index UI component gives you an index for quick access to a group of other UI items. The index component is
hidden by default, but it appears when the user clicks over its reserved area on the canvas. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Elm__Index.html">Index</a> API.</p>
<p>This feature is supported in mobile applications only.</p>
<p>This feature is supported in wearable applications only.</p>
-<p>The index component gives you an index for quick access to a group of other UI items. The index component is by default hidden, but it appears when the user clicks over its reserved area on the canvas.</p>
+<p>The index component gives you an index for quick access to a group of other UI items. The index component is hidden by default, but it appears when the user clicks over its reserved area on the canvas.</p>
<p>In the default theme, the index component is a one-finger-wide area on the right side of the index component's container. Generally, it is used together with lists, generic lists, or generic grids.</p>
label = elm_label_add(parent);
</pre>
</li>
-<li>Set a text to the label with the <code>elm_object_text_set()</code> function. Label is based on <a href="evas_objects_n.htm#block">textblock</a>, which means you can use every markup for textblock to a text in a label.
+<li>Set a text to the label with the <code>elm_object_text_set()</code> function. Label is based on <a href="evas_objects_n.htm#block">textblock</a>, which means you can use textblock markup in a label text.
<pre class="prettyprint">
elm_object_text_set(label, "This is a label.");
</pre>
<h2 id="callback">Using the List Callbacks</h2>
- <p>To receive notifications about the list events, listen for the following signals:</p>
+ <p>To receive notifications about list events, listen for the following signals:</p>
<ul>
<li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
<p>The <code>event_info</code> callback parameter points at the activated item.</p></li>
<h2 id="callback">Using the List Callbacks</h2>
- <p>To receive notifications about the list events, listen for the following signals:</p>
+ <p>To receive notifications about list events, listen for the following signals:</p>
<ul>
<li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
<p>The <code>event_info</code> callback parameter points at the activated item.</p></li>
elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
elm_map_zoom_set(map, 12);
-/* Show a region (2 2 N, 48 8 E) */
+/* Show a region (2.2 N, 48.8 E) */
elm_map_region_show(map, 2.2, 48.8);
evas_object_show(map);
</tr>
<tr>
<td><code>clicked</code></td>
- <td>The map is clicked without dragging around.</td>
+ <td>The map is clicked without dragging.</td>
<td><code>Evas_Event_Mouse_Up</code></td>
</tr>
<tr>
</tr>
<tr>
<td><code>longpressed</code></td>
- <td>The map is pressed down for a long time without dragging around.</td>
+ <td>The map is pressed down for a long time without dragging.</td>
<td><code>Evas_Event_Mouse_Down</code></td>
</tr>
<tr>
<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component's position within the parent window. The <code>ELM_NOTIFY_ALIGN_FILL</code> value can be used to fill the notify component in each axis direction.</p>
-<p>To align the notify object on the bottom center of the parent object:</p>
+<p>To align the notify object to the bottom center of the parent object:</p>
<pre class="prettyprint">
elm_notify_align_set(notify, 0.5, 1.0);
</pre>
<p>This feature is supported in mobile applications only.</p>
- <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it quickly, and fit it nicely on the screen. It is optimized for the <code>.jpeg</code> image format and has a low memory footprint.</p>
+ <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom the photo, load it quickly, and fit it nicely on the screen. It is optimized for the <code>.jpeg</code> image format and has a low memory footprint.</p>
<p>The photocam component implements the scroller interface, which means that scroller functions can be used with the photocam component.</p>
</pre>
</li>
<li>
-<p>Zoom in a specific region.</p>
-<p>To zoom in a region starting at the coordinates (200 x 200) with a width of 400 px and a height of 300 px:</p>
+<p>Zoom in on a specific region.</p>
+<p>To zoom in on a region starting at the coordinates (200 x 200) with a width of 400 px and a height of 300 px:</p>
<pre class="prettyprint">
elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
</pre>
<p>To receive notifications about the photocam events, listen for the following signals:</p>
<ul>
- <li><code>clicked</code>: The photo is clicked without dragging around.</li>
+ <li><code>clicked</code>: The photo is clicked without dragging.</li>
<li><code>press</code>: The photo is pressed.</li>
- <li><code>longpressed</code>: The photo is pressed down for a long time without dragging around.</li>
+ <li><code>longpressed</code>: The photo is pressed down for a long time without dragging.</li>
<li><code>clicked,double</code>: The photo is double-clicked.</li>
<li><code>load</code>: The photo load begins.</li>
<li><code>loaded</code>: The image file load is complete for the first view (a low resolution blurry version).</li>
<li><code>scroll</code>: The content is scrolled.</li>
<li><code>scroll,anim,start</code>: The scrolling animation starts.</li>
<li><code>scroll,anim,stop</code>: The scrolling animation stops.</li>
- <li><code>scroll,drag,start</code>: Dragging the content around starts.</li>
- <li><code>scroll,drag,stop</code>: Dragging the content around stops.</li>
+ <li><code>scroll,drag,start</code>: Dragging the content starts.</li>
+ <li><code>scroll,drag,stop</code>: Dragging the content stops.</li>
</ul>
<div class="note">
<p>This feature is supported in mobile applications only.</p>
-<p>The plug component shows an <code>Evas_Object</code> created by another process. It can be used anywhere the same way as any other Elementary UI component.</p>
+<p>The plug component shows an <code>Evas_Object</code> created by another process. It can be used anywhere in the same way as any other Elementary UI component.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Plug.html">Plug</a> API.</p>
<p>To use the plug:</p>
<ol>
<li>
-<p>The socket image provides the service where to connect the plug component. Use the <code>elm_plug_connect()</code> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
+<p>The socket image provides the service to which the plug component is connected. Use the <code>elm_plug_connect()</code> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
<p>To connect to a service named <code>plug_test</code> on the number 0:</p>
</pre>
</li>
<li>
-<p>Retrieve the <code>Evas_Object</code> corresponding to the distant image with the <code>elm_plug_image_object_get()</code> function:</p>
+<p>Retrieve the <code>Evas_Object</code> corresponding to the remote image with the <code>elm_plug_image_object_get()</code> function:</p>
<pre class="prettyprint">
Evas_Object *plug_img = elm_plug_image_object_get(plug);
<p>This feature is supported in wearable applications only.</p>
-<p>The plug component shows an <code>Evas_Object</code> created by another process. It can be used anywhere the same way as any other Elementary UI component.</p>
+<p>The plug component shows an <code>Evas_Object</code> created by another process. It can be used anywhere in the same way as any other Elementary UI component.</p>
<p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Plug.html">Plug</a> API.</p>
<p>To use the plug:</p>
<ol>
<li>
-<p>The socket image provides the service where to connect the plug component. Use the <code>elm_plug_connect()</code> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
+<p>The socket image provides the service to which the plug component is connected. Use the <code>elm_plug_connect()</code> function, and define as parameters the service name and number set by the socket you want to connect to.</p>
<p>To connect to a service named <code>plug_test</code> on the number 0:</p>
</pre>
</li>
<li>
-<p>Retrieve the <code>Evas_Object</code> corresponding to the distant image with the <code>elm_plug_image_object_get()</code> function:</p>
+<p>Retrieve the <code>Evas_Object</code> corresponding to the remote image with the <code>elm_plug_image_object_get()</code> function:</p>
<pre class="prettyprint">
Evas_Object *plug_img = elm_plug_image_object_get(plug);
elm_object_text_set(button2, "Cancel");
/* Set the buttons to the action area */
-elm_object_part_content_set(popup, "button1";, button1);
+elm_object_part_content_set(popup, "button1", button1);
elm_object_part_content_set(popup, "button2", button2);
</pre>
</li>
<p>The toolbar offers the following options for shrinking its content:</p>
<ul>
<li><code>ELM_TOOLBAR_SHRINK_NONE</code>: Set a minimum size to the toolbar so that all of them fit without scrolling.</li>
- <li><code>ELM_TOOLBAR_SHRINK_HIDE</code>: Hide exceeding items that do not fit in.</li>
- <li><code>ELM_TOOLBAR_SHRINK_SCROLL</code>: Scroll to show the items that do not fit in.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_HIDE</code>: Hide excess items that do not fit.</li>
+ <li><code>ELM_TOOLBAR_SHRINK_SCROLL</code>: Scroll to show the items that do not fit.</li>
<li><code>ELM_TOOLBAR_SHRINK_MENU</code>: Insert a button to pop up a menu with hidden items.</li>
<li><code>ELM_TOOLBAR_SHRINK_EXPAND</code>: Expand all items according to the size of the toolbar.</li>
</ul>
<p>You can define 2 or more states for an item. Each state has its own icon, label, and function to call when an item is clicked.</p>
-<p>To create 2 states to the an item with the same icon but 2 different labels:</p>
+<p>To create 2 states for an item with the same icon but 2 different labels:</p>
<pre class="prettyprint">
Elm_Object_Item *it;
<h2 id="basic">Basic Usage</h2>
-<p>You can customize a layout by writing an EDC file, or use a predefined, frequently used layouts provided by Tizen.</p>
+<p>You can customize a layout by writing an EDC file, or use a predefined layout provided by Tizen.</p>
<h3>Customized Layout</h3>
</li>
</ol>
-<p>The following example shows a simple use case of the layout component, with a simple EDC script in the <code>example.edc</code> file and a connection from the resulted EDJ file to the C code.</p>
+<p>The following example shows a simple use case of the layout component, with a simple EDC script in the <code>example.edc</code> file and a connection from the resulting EDJ file to the C code.</p>
<p align="center" class="Table"><strong>Example: Layout use case</strong></p>
<table border="0">
<p>To use panes in your application:</p>
<ol>
- <li>Add a panes with the <code>elm_panes_add()</code> function:
+ <li>Add a panes container with the <code>elm_panes_add()</code> function:
<pre class="prettyprint">
Evas_Object *panes;
</pre>
</li>
<li>Add content to the panes with the <code>elm_object_part_content_set()</code> function:
- <ul><li>Add a content to the left pane:
+ <ul><li>Add content to the left pane:
<pre class="prettyprint">
Evas_Object *left_button;
elm_object_part_content_set(panes, "left", left_button);
</pre>
</li>
- <li>Add a content to the right pane:
+ <li>Add content to the right pane:
<pre class="prettyprint">
Evas_Object *right_button;
elm_object_part_content_set(panes, "right", right_button);
</pre>
</li></ul></li>
- <li>Set the direction of the panes with the <code>elm_panes_horizontal_set()</code> function. A panes is vertical by default. Horizontal panes have "top" and "bottom" content, while vertical panes have "left" and "right" content.
+ <li>Set the direction of the panes with the <code>elm_panes_horizontal_set()</code> function. A panes container is vertical by default. Horizontal panes have "top" and "bottom" content, while vertical panes have "left" and "right" content.
<pre class="prettyprint">
elm_panes_horizontal_set(panes, EINA_TRUE);
elm_object_part_content_set(panes, "top", top_button);
/* Starting right after <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
/* (win - conformant - naviframe) */
-/* Add a panes to contain 2 buttons and push the panes into the naviframe */
+/* Add a panes container to contain 2 buttons and push the panes into the naviframe */
panes = elm_panes_add(nf);
elm_object_content_set(nf, panes);
evas_object_show(panes);
</tr>
<tr>
<td><code>clicked</code></td>
- <td>The panes is clicked (press and release).</td>
+ <td>The panes container is clicked (press and release).</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>clicked,double</code></td>
- <td>The panes is double-clicked.</td>
+ <td>The panes container is double-clicked.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>pressed</code></td>
- <td>The panes is pressed.</td>
+ <td>The panes container is pressed.</td>
<td><code>NULL</code></td>
</tr>
<tr>
<td><code>unpressed</code></td>
- <td>The panes is released after being pressed.</td>
+ <td>The panes container is released after being pressed.</td>
<td><code>NULL</code></td>
</tr>
</tbody>
<h2 id="example">Example</h2>
- <p>A good example of the scroller use is a picture slideshow: add images to the scroller and limit the scrolling to pages, meaning that one picture at a time is shown.</p>
+ <p>A good example of scroller use is a picture slideshow: add images to the scroller and limit the scrolling to pages, meaning that one picture is shown at a time.</p>
<p>A scroller can limit scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single page at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <code>elm_scroller_page_size_set()</code> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Table</h1>
-<p>The table container acts like
box, but with 2 dimensions. It provides the same kind of APIs as a box. An item inside a table can span multiple columns and rows, and even overlap with other items. For more information, see the Table API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Table.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Table.html">wearable</a> applications).</p>
+<p>The table container acts like
a box container, but with 2 dimensions. It provides the same kind of APIs as a box. An item inside a table can span multiple columns and rows, and even overlap with other items. For more information, see the Table API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Table.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Table.html">wearable</a> applications).</p>
<p align="center"><strong>Figure: Table component structure</strong></p>
<p align="center"><img alt="Table component structure" src="../../../images/table.png"/></p>
</li>
<li>
-<p>To sort an inline array, use the <code>eina_inarray_sort()</code> function, which applies a quick sorting algorithm to the inline array:</p>
+<p>To sort an inline array, use the <code>eina_inarray_sort()</code> function, which applies a quick sort algorithm to the inline array:</p>
<ul><li>The first parameter is a pointer to the array returned by the <code>eina_inarray_new()</code> function.</li>
<li>The last parameter is the <code>Eina_Compare_Cb</code> callback comparison function, which compares data1 and data2.
<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
<p>In addition to the most important libraries explained above, the EFL includes other libraries, such as Eet, Embryo, and Emotion. Support for those libraries is planned in the future Tizen releases.</p>
<h2 id="how">How EFL Works</h2>
-<p>EFL brings a few new or different paradigms to the table. Some of these mesh well with what is already done, while others are vastly different, but bring major benefits if understood and used correctly. One of the major paradigms is the rendering and canvas model that EFL has thanks mostly to Evas, Ecore, and Edje. In order to understand it, you must first understand the general event and work flow model. Everything slots in nicely if this model is embraced (and extended appropriately).</p>
+<p>EFL brings a few new or different paradigms to the table. Some of these mesh well with what is already done, while others are vastly different, but bring major benefits if understood and used correctly. One of the major paradigms is the rendering and canvas model that EFL has, thanks mostly to Evas, Ecore, and Edje. In order to understand it, you must first understand the general event and work flow model. Everything slots in nicely if this model is embraced (and extended appropriately).</p>
<p>EFL has embraced the same main loop concept that GTK+ and many other toolkits and software have adopted. It has rolled it wholeheartedly into the system as the core. The idea is that you do some initialization of the application and then enter a main loop function (in Ecore it is the <code>ecore_mainloop_begin()</code> function, or if you use Elementary, it wraps this with a shorter <code>elm_run()</code> function):</p>
<p>In EFL, the main loop is not "dumb" and does not consume CPU resources unless there is work to do. It sleeps and consumes no CPU time until an event happens (except in rare circumstances, for example, when you use Idlers that are called in a loop during what normally would be idle time waiting for something to happen). From EFL's point of view, all of this is handled in Ecore, and it supports many constructs for manipulating the main loop in a logical and flexible way. EFL handles animation through animators, where the main loop handles timing out and scheduling these at regularly spaced intervals in time (on a best-effort basis), as with timers, pollers, idle enterers, idle exiters, idlers, jobs, fd handlers (file descriptor handlers) and event handlers.</p>
-<p>In the EFL view, the application, when executing any callbacks other than idlers, is "active". It goes in and out of this active state by calling the idle enterer and exiter callbacks (edge-triggered callbacks), which are triggered whenever going in and out of the idle state. Idlers themselves do not transition the main loop as such from being in an idle state, so any Idler that needs to "wake up" the loop conceptually to become active needs to queue something that ordinarily wakes up the main loop, such as a job or timer. This is the only exception due to the conceptual model and the need for efficiency (not entering and exiting idle per idler call).</p>
+<p>In the EFL view, the application, when executing any callbacks other than idlers, is "active". It goes in and out of this active state by calling the idle enterer and exiter callbacks (edge-triggered callbacks), which are triggered whenever going in and out of the idle state. Idlers themselves do not transition the main loop as such from being in an idle state, so any idler that needs to "wake up" the loop (to make the application conceptually active) needs to queue something that ordinarily wakes up the main loop, such as a job or timer. This is the only exception due to the conceptual model and the need for efficiency (not entering and exiting idle per idler call).</p>
<p>Besides the above exception, the loop model basically starts by calling the idle enterers, and then sleeps until something happens. What happens depends on the system, but wake-up events can be time-based (timers and animators) and these are scheduled by Ecore on a "best effort" basis. That means they use the system sleep mechanism (such as <code>select()</code> function with a timeout or <code>epoll()</code> function) to send the CPU to sleep and wait until an event on an input (a file descriptor) wakes up, or until the timeout happens.</p>
<h2 id="elementary" name="elementary">Scalability Using Elementary UI Components</h2>
-<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use the Elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using Elementary UI components, make sure you understand some core concepts, such as how to create effective layouts with containers, and how to use weight and align properties.</p>
+<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use the Elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using Elementary UI components, make sure you understand some core concepts, such as how to create effective layouts with containers, and how to use the weight and align properties.</p>
<div class="note">
<strong>Note</strong>
</tr>
<tr>
<td><a href="component_flipselector_mn.htm">Flipselector</a></td>
- <td>The flipselector component shows a set of text items one at a time. The user can flip up or down the selector to change the text on it.</td>
+ <td>The flipselector component shows a set of text items one at a time. The user can flip the selector up or down to change the text on it.</td>
</tr>
<tr>
<td><a href="component_calendar_mn.htm">Calendar</a></td>
<h1>UI Components</h1>
-<p>Elementary library provides a set of pre-built UI components that allow you to build a rich graphical user interface for your applications. Each profile provides different set of UI components, as you can see in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</p>
+<p>Elementary library provides a set of pre-built UI components that allow you to build a rich graphical user interface for your applications. Each profile provides
a different set of UI components, as you can see in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</p>
<p>The preconditions of using Elementary UI components are covered in <a href="getting_started_n.htm">Getting Started with EFL UI Programming</a>. Elementary UI components share the same APIs for general features. For more information, see the General API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__General.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__General.html">wearable</a> applications).</p>
<h2 id="ui_container">UI Containers</h2>
-<p>EFL supports building layouts in the form of special Elementary UI components, classified as <strong>containers</strong>. Elementary provides a set of UI containers which enable displaying UI components in an organized layout. Each UI container has a different purpose and behaviors, so it is important to select the most suitable one for your layout.</p>
+<p>EFL supports building layouts in the form of special Elementary UI components, classified as <strong>containers</strong>. Elementary provides a set of UI containers which enable displaying UI components in an organized layout. Each UI container has a different purpose and distinct behaviors, so it is important to select the most suitable one for your layout.</p>
<p>Container UI components do not have their own visual identity. They only have logical structures for assignment or placement of other UI components. The use of container UI components only differs from the use of the UI components due to the absence of a visual identity.</p>
projects / sdk / online-doc.git / commitdiff