<p>The general UI design features include:</p>
<ul>
- <li>UI component support
+ <li><a href="ui_components_n.htm">UI component support</a>
<p>You can use basic core UI components, such as buttons, genlists, and sliders, and also create a layout for the Tizen native application by using container UI components.</p></li>
- <li>Theme support
+ <li><a href="theme_n.htm">Theme support</a>
<p>You can create and change a theme that is a preset package containing graphical details. Tizen supports specifying the UI look and feel through a default theme.</p></li>
- <li>Font settings
+ <li><a href="font_setting_n.htm">Font settings</a>
<p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
- <li>Scalability
+ <li><a href="ui_scalability_n.htm">Scalability support</a>
<p>Elementary provides a way to <a href="ui_components_n.htm#scalability">scale UI components</a> in order to be comfortably used with a finger and to make the text more readable.</p></li>
- <li>Event handling and main loop
- <p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="event_handling_n.htm">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
+ <li><a href="event_handling_n.htm">Event handling</a>
+ <p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="event_handling_n.htm">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p></li>
+ <li><a href="core_loop_n.htm">Main loop</a>
<p>The Ecore library provides a main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">handle the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
- <li>UI animating with animators and effects
+ <li><a href="animation_effects_n.htm">UI animating with animators and effects</a>
<p>Tizen supports various methods to <a href="animation_effects_n.htm">create animations and effects</a> in your application.</p></li>
- <li>Data types and tools support
+ <li><a href="data_types_tools_n.htm">Data types and tools support</a>
<p>Tizen supports a core library for data types and some useful tools.</p></li>
- <li>Hardware input event support
+ <li><a href="hw_input_n.htm">Hardware input event support</a>
<p>Tizen supports the <a href="hw_input_n.htm">handling of hardware input events</a>.</p></li>
- <li>Accessibility
+ <li><a href="accessibility_n.htm">Accessibility</a>
<p>For disabled users, Tizen provides various <a href="accessibility_n.htm">accessibility features</a>. You can help low-vision and blind users by incorporating accessibility in your applications.</p></li>
</ul>
<p>The key characteristics of EFL include:</p>
<ul>
- <li><strong>Performance</strong>
+ <li><strong>Fast Performance</strong>
<p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
<li><strong>Small memory footprint</strong>
<p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
<li><strong>Back-end engine support</strong>
<p>EFL supports several back-end engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows, and Mac OS. Applications do not need to deal with each back-end engine separately.</p></li>
<li><strong>GUI and logic separation</strong>
- <p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
+ <p>EFL supports GUI layout(<a href="theme_n.htm">EDC</a>) and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
<li><strong>Themeable</strong>
<p>An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.</p></li>
<li><strong>Scalable</strong>
<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. 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>.</li>
- <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="theme_n.htm">Themes</a> and <a href="component_custom_n.htm">Customizing Components</a>.</li>
- <li>Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Handling the Main Loop</a> guide.</li>
- <li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
- <li>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_tools_n.htm">Data Types and Tools</a>.</li>
+ <li>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>.</li>
+ <li>Edje
(<a href="theme_n.htm">Themes</a>) is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="theme_n.htm">Themes</a> and <a href="component_custom_n.htm">Customizing Components</a>.</li>
+ <li>Ecore
(<a href="core_loop_n.htm">Core loop and OS Interfacing</a>) is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Handling the Main Loop</a> guide.</li>
+ <li>Evas
(<a href="graphical_objects_n.htm">Graphical Objects</a>) is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
+ <li>Eina
(<a href="data_types_tools_n.htm">Data types and Tools</a>) is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_tools_n.htm">Data Types and Tools</a>.</li>
</ul>
<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/index.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/index.html">wearable</a> applications).</p>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<ul>
<li>UI components: These are the components with which you build your application UI.</li>
- <li>Containers: These are the containers that hold the components.</li>
- <li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
+ <li><a href="ui_containers_n.htm">UI Containers</a>: These are the containers that hold the components.</li>
+ <li><a href="component_infra_n.htm">Infrastructure</a>: These are the modules that deal with Elementary as a whole.</li>
</ul>
<h2 id="components" name="components">Using UI Components</h2>
-<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
+<p>The Elementary library is a simple toolkit. It provides several UI components that can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
<p class="figure">Figure: Elementary</p>
<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
</li>
</ul>
-<p>For more information about events related to Elementary objects, see <a href="event_handling_n.htm">Event Handling</a>. For more information about Evas objects and smart objects, see <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
+<p>For more information about events related to Elementary objects, see <a href="event_handling_n.htm">Event Handling</a>. For more information about Evas objects and smart objects, see <a href="graphical_objects_n.htm">Graphical object</a> and <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
<h2 id="config" name="config">Managing Elementary Profiles</h2>
<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
-<p>For <a href="component_custom_n.htm">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
+<p>For <a href="component_custom_n.htm">custom UI Components</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces the default theme of the UI component.</p>
<table class="note">
<tbody>
</tbody>
</table>
+<p>For more information on custom styles, see <a href="component_custom_n.htm">Customizing UI Components.</a></p>
+
<h3 id="config_focus" name="config_focus">Managing Focus</h3>
<p>When an Elementary object has the focus, input events are directly passed to that object in the application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
<p>Elementary supports focus chains that allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components are added to the code. It is also possible to define custom focus chains, when needed.</p>
-<p>For more information on focus, see <a href="component_focus_n.htm">Component Focus</a>.</p>
-
<p>To manage the focus:</p>
<ul>
</li>
</ul>
+<p>For more information on focus, see <a href="component_focus_n.htm">Component Focus</a>.</p>
+
<h2 id="scalability" name="scalability">Scaling UI Components</h2>
<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
elm_object_scale_set(button, 2.0);
</pre>
-<h3 id="Example" name="Example">Example</h3>
+<p id="Example" name="Example"><strong>Example</strong></p>
<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
projects / sdk / online-doc.git / commitdiff