- DALi is supported in both mobile applications and wearable applications in Tizen 3.0.
PS5: [LB] Reviewed
PS7: [LB] Review for PS6 changes
PS8: [LB] Link fixes and wearable DALi API addition to Tizen APIs topic
PS10: [LB] Reviewed new touch data content
PS11: [LB] Fixed training section topic based on new CSS
PS13: [LB] New DALi application section topics edited
PS17: [LB] New UI application section and DALi section topics edited
PS19: [LB] New Visuals topic edited
PS20: [LB] Visuals open issues closed
Change-Id: I92cb4faec186990110f3f9c3c8cfbcd0920f79ec
Signed-off-by: Seoyeon Kim <seoyeon2.kim@samsung.com>
</ul>\r
<p><strong>Attributes:</strong> </p>\r
<ul>\r
- <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>\r
+ <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg_table">background category</a></p></li>\r
</ul><p><strong>Example:</strong> </p>\r
<pre class="prettyprint"><tizen:background-category value="media" /></pre> \r
</td>\r
</ul>\r
<p><strong>Attributes:</strong> </p>\r
<ul>\r
- <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>\r
+ <li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg_table">background category</a></p></li>\r
</ul><p><strong>Example:</strong> </p>\r
<pre class="prettyprint"><tizen:background-category value="media" /></pre> \r
</td>\r
<ul>
<li><a href="native/app_management/applications_n.htm">Applications</a>
<ul>
- <li><a href="native/app_management/ui_app_n.htm">UI Application</a></li>
- <li><a href="native/app_management/dali_app_n.htm">DALi Application</a></li>
- <li><a href="native/app_management/service_app_n.htm">Service Application</a></li>
- <li><a href="native/app_management/widget_app_n.htm">Widget Application</a></li>
- <li><a href="native/app_management/watch_app_n.htm">Watch Application</a></li>
+ <li><a href="native/app_management/ui_app_n.htm">UI Applications</a>
+ <ul>
+ <li><a href="native/app_management/dali_app_n.htm">DALi Applications</a>
+ <ul>
+ <li><a href="native/app_management/dali_basic_app_n.htm">Basic UI Application</a></li>
+ <li><a href="native/app_management/dali_watch_app_n.htm">Watch Application</a></li>
+ </ul>
+ </li>
+ <li><a href="native/app_management/efl_app_n.htm">EFL Applications</a>
+ <ul>
+ <li><a href="native/app_management/efl_ui_app_n.htm">Basic UI Application</a></li>
+ <li><a href="native/app_management/watch_app_n.htm">Watch Application</a></li>
+ <li><a href="native/app_management/widget_app_n.htm">Widget Application</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="native/app_management/service_app_n.htm">Service Applications</a></li>
</ul>
</li>
<li><a href="native/app_management/app_resources_n.htm">Application Resources</a></li>
<li><a href="native/ui/dali/layout_n.htm">Layout Management</a></li>
</ul>
</li>
- <li><a href="native/ui/dali/event_handling_n.htm">Event Handling</a></li>
+ <li><a href="native/ui/dali/event_handling_n.htm">Event Handling</a>
+ <ul>
+ <li><a href="native/ui/dali/touchdata_n.htm">Touch Data</a></li>
+ </ul>
+ </li>
<li><a href="native/ui/dali/ui_components_n.htm">UI Components</a>
<ul>
+ <li><a href="native/ui/dali/styling_n.htm">Styling UI Components</a></li>
+ <li><a href="native/ui/dali/visuals_n.htm">Visuals</a></li>
<li><a href="native/ui/dali/buttons_n.htm">Buttons</a></li>
<li><a href="native/ui/dali/itemview_n.htm">ItemView</a></li>
<li><a href="native/ui/dali/scrollview_n.htm">ScrollView</a></li>
<li><a href="native/ui/dali/tableview_n.htm">TableView</a></li>
<li><a href="native/ui/dali/textfield_n.htm">TextField</a></li>
<li><a href="native/ui/dali/textlabel_n.htm">TextLabel</a></li>
+ <li><a href="native/ui/dali/texteditor_n.htm">TextEditor</a></li>
<li><a href="native/ui/dali/imageview_n.htm">ImageView</a></li>
+ <li><a href="native/ui/dali/flexcontainer_n.htm">FlexContainer</a></li>
+ <li><a href="native/ui/dali/model3dview_n.htm">Model3dView</a></li>
+ <li><a href="native/ui/dali/slider_n.htm">Slider</a></li>
+ <li><a href="native/ui/dali/videoview_n.htm">VideoView</a></li>
<li><a href="native/ui/dali/control_base_n.htm">Control</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="native/ui/dali/resources_n.htm">Resources</a></li>
- <li><a href="native/ui/dali/rendering_effects_n.htm">Rendering and Effects</a></li>
+ <li><a href="native/ui/dali/rendering_effects_n.htm">Rendering and Effects</a>
+ <ul>
+ <li><a href="native/ui/dali/rendering_tutorial_n.htm">Shape Drawing</a></li>
+ <li><a href="native/ui/dali/svg_rendering_n.htm">SVG Rendering</a></li>
+ </ul>
+ </li>
<li><a href="native/ui/dali/background_n.htm">Background Knowledge</a>
<ul>
<li><a href="native/ui/dali/handle_n.htm">Handle/Body Pattern</a></li>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">If you only need to monitor a fundamental system event, such as the USB connection status, to launch a service application, and no condition is required, use <a href="../app_management/ui_app_n.htm#callback">event callbacks</a>. In these cases, using the event system instead of the contextual trigger is more efficient, as the contextual trigger runs a rule engine to manage state changes of multiple event and condition items simultaneously.</td>
+ <td class="note">If you only need to monitor a fundamental system event, such as the USB connection status, to launch a service application, and no condition is required, use <a href="../app_management/efl_ui_app_n.htm#callback">event callbacks</a>. In these cases, using the event system instead of the contextual trigger is more efficient, as the contextual trigger runs a rule engine to manage state changes of multiple event and condition items simultaneously.</td>
</tr>
</tbody>
</table>
<p>Tizen provides various application models to allow you to create applications targeted for specific tasks:</p>
<ul>
- <li><a href="ui_app_n.htm">UI Application</a>
+ <li><a href="ui_app_n.htm">UI Applications</a>
<p>The UI application is the most general Tizen application that has a graphical user interface. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging and embedded Web browsing functionality.</p></li>
- <li><a href="dali_app_n.htm">DALi Application</a>
- <p>The DALi application is one of the Tizen native applications based on Dynamic Animation Library. The DALi internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the scene graph. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p></li>
-
- <li><a href="service_app_n.htm">Service Application</a>
+ <li><a href="service_app_n.htm">Service Applications</a>
<p>The service application is a Tizen native application without a graphical user interface that runs in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p></li>
-
- <li><a href="widget_app_n.htm">Widget Application</a>
- <p>The widget application (or widget) is the specialized application that is useful in providing users with quick view of specific information from the parent application. Also, the widget allows users to access certain features without launching the applications. Combined with their parent application, your widgets can have various features to increase usability of your applications.</p></li>
-
- <li><a href="watch_app_n.htm">Watch Application</a> <strong>in wearable applications only</strong>
- <p>Tizen watch application is one of Tizen native applications for wearable devices. It can be shown on the idle screen of the wearable device. For low-powered wearable devices, Tizen watch application supports a special ambient mode. In ambient mode, Tizen watch application on the idle screen can show limited UI and receive only ambient tick events each minute to reduce power consumption.</p></li>
</ul>
<h2 id="life-cycle">Native Application Life-Cycle</h2>
<li>An alarm is triggered for another application, which becomes the top-most window and hides your application.</li>
</ul>
-<p>Since Tizen 2.4, the application on 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 on the background. In this case, the application can <a href="ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>
+<p>Since Tizen 2.4, the application on 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 on 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>
<p>When your application becomes visible again, the <span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span> callback is invoked. The visibility returns, when:</p>
<ul>
<p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
-<p>Application state changes are managed by the underlying framework. For more information about application state transitions, see <a href="ui_app_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
+<p>Application state changes are managed by the underlying framework. For more information about application state transitions, see <a href="efl_ui_app_n.htm#state_trans">Application States and Transitions</a>.</p>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>DALi Application</title>
+ <title>DALi Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#dali">Dali Fundamentals</a></li>
- <li><a href="#create">Creating a DALi Application</a></li>
+ <li><a href="#dali">Basic Fundamentals</a></li>
+ <li><a href="#app_type">Application Types</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>DALi Application</h1>
+<h1>DALi Applications</h1>
-<p>Dynamic Animation Library (DALi) internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a>. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p>
-<p>There are various types of nodes, such as image, text, and buttons.</p>
+<p>You can use the Dynamic Animation Library (DALi) 3D UI toolkit to create a high-performance rich UI application. For 2D-based Tizen native applications, use the <a href="../ui/efl/efl_n.htm">Enlightenment Foundation Libraries (EFL) UI toolkit</a>.</p>
-<h2 id="dali" name="dali">DALi Fundamentals</h2>
+<p>Dynamic Animation Library (DALi) internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a>.</p>
-<p>Before starting UI programming with DALi, familiarize yourself with the basic concepts.</p>
+<p>A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members. There are various types of nodes, such as image, text, and buttons.</p>
-<h3>Actor and Stage</h3>
+<h2 id="dali" name="dali">Basic Fundamentals</h2>
-<p>Actor is the primary object for interaction in DALi applications. Actors are effective nodes that receive input (such as touch events) and act as a container for drawable elements and other actors. A DALi application uses a hierarchy of actor objects to position visible content. An actor inherits a position relative to its parent, and can be moved relative to this point. UI components can be built by combining multiple actors.</p>
-<p>Stage is a top-level node of the scene graph used for displaying a tree of actors. To display an actor, add it to the stage.</p>
-
-<h3>Signal and Slot</h3>
-
-<p>In DALi applications, a <a href="https://en.wikipedia.org/wiki/Signals_and_slots" target="_blank">signal and slot</a> mechanism is used for communication between objects. This means that, in the DALi event system, objects can send signals containing event information, which can be received by other objects using special functions known as slots.</p>
-
-<p>Signal events are emitted when a certain action or event occurs. The application can connect to these signals. Standard C-style functions can be used to connect to these signals if no local data needs to be accessed, otherwise a class function can also be connected.</p>
-<p>Applications can manually disconnect from signals when required. However, DALi also provides safe signal disconnection. This means that when the connecting object is deleted, the signal is automatically disconnected.</p>
-
-<h3 id="coordinate" name="coordinate">Coordinate System</h3>
-
-<p>DALi uses a left-handed coordinate system with the origin at the top-left corner, with positive X to right, positive Y going downwards, and positive Z going outside the screen with the default camera. This is convenient when creating 2D views.</p>
-
-<p>The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with the default camera.</p>
-
-<p class="figure">Figure: DALi coordinate system</p>
- <p align="center"><img alt="DALi coordinate system" src="../../images/actor_coordinates.png"/></p>
-
-<h3>Camera</h3>
-
-<p>DALi has a concept of a camera to display its virtual 3D world to a 2D screen. There are 2 ways of using the camera in DALi:</p>
-<ul>
- <li>For <strong>2D</strong> applications, you do not need to care about the camera at all. The default camera is already best suited for 2D applications (configured to have the origin of the coordinate system at the top-left corner of the screen, and unit 1 as 1 pixel of the screen). This is a typical way.</li>
- <li>For <strong>3D</strong> applications, you can change the view by manipulating the camera. You can translate or rotate the camera in this case. Note that the top-left corner of the screen and unit 1 no longer are (0,0,0) and 1 pixel after manipulating the camera.</li>
-</ul>
-
-
-<h3>DALi Modules</h3>
-
-<p>DALi consists of the following modules:</p>
+<p>Before you start UI programming with DALi, you must familiarize yourself with the basic DALi fundamentals. DALi consists of the following modules:</p>
<ul>
<li><strong>DALi Core</strong>
-<p>This module provides core functionalities, such as scene graph-based rendering, animation, and event handling. It is a base module and forms the biggest part of DALi. </p>
+<p>This module provides core functionalities, such as scene graph-based rendering, animation, and event handling. It is a base module and forms the biggest part of DALi.</p>
</li>
<li><strong>DALi Adaptor</strong>
-<p>This module is a platform adaptation layer. It initializes and sets up DALi appropriately and provides many platform-related services with its internal module, platform abstraction. Several signals can be connected to it to keep you informed when certain platform-related activities occur.
-</p></li>
+<p>This module is a platform adaptation layer. It initializes and sets up DALi appropriately and provides many platform-related services with its internal module, platform abstraction. Several signals can be connected to it to keep you informed when certain platform-related activities occur.</p></li>
<li><strong>DALi Toolkit</strong>
<p>This module provides UI components and various effects on top of the DALi core.</p></li>
</ul>
-<p class="figure">Figure: Layer diagram for DALi modules</p>
-<p align="center"><img alt="Layer diagram for DALi modules" src="../../images/dali_modules.png" /></p>
-
-<h2 id="create" name="create">Creating a DALi Application</h2>
-
-<p>To create a 'Hello World' application with Dali:</p>
-<ol>
-<li>Create a DALi project:
-<ol type="a">
-<li>In the Tizen Studio menu, go to <strong>File > New > Tizen Project</strong>.</li>
-<li>In the Project Wizard, select <strong>Template > Mobile or Wearable > Native Application > Basic UI with DALi</strong>.</li>
-<li>Click <strong>Finish</strong>, and your project is created at the default location. If you want to change the location, uncheck <strong>Use default location</strong> and set a new location. For more information, see <a href="../../../../org.tizen.training/html/native/process/app_dev_process_n.htm#creating">Creating the Application Project</a>.
-
-<p align="center"><img alt="Create a DALi project" src="../../images/tizen_project_dali.png" /></p>
-</li>
-<li>The new project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio. If you open the <span style="font-family: Courier New,Courier,monospace;">src/basicuiwithdali.cpp</span> file, you can see the source code of the basic DALi application:
-<pre class="prettyprint">
-#include <dali-toolkit/dali-toolkit.h>
-
-using namespace Dali;
-using namespace Dali::Toolkit;
-
-// This example shows how to create and display Hello World using a simple TextLabel
-
-class HelloWorldExample : public ConnectionTracker
-{
- public:
-
- HelloWorldExample( Application& application )
- : mApplication( application )
- {
- // Connect to the application's init signal
- mApplication.InitSignal().Connect( this, &HelloWorldExample::Create );
- }
-
- ~HelloWorldExample()
- {
- // Nothing to do here
- }
-
- // Init signal is received once (only) during the application lifetime
- void Create( Application& application )
- {
- // Get a handle to the stage
- Stage stage = Stage::GetCurrent();
- stage.SetBackgroundColor( Color::WHITE );
-
- TextLabel textLabel = TextLabel::New( "Hello World" );
- textLabel.SetSize( stage.GetSize() );
- textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
- textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
- textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
- stage.Add( textLabel );
-
- // Connect to touch and key event signals
- stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
- stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
- }
-
- bool OnTouch( Actor actor, const TouchEvent& event )
- {
- // Quit the application
- mApplication.Quit();
-
- return true;
- }
-
- void OnKeyEvent( const KeyEvent& event )
- {
- if( event.state == KeyEvent::Down )
- {
- if( IsKey( event, DALI_KEY_ESCAPE ) || IsKey( event, DALI_KEY_BACK ) )
- {
- mApplication.Quit();
- }
- }
- }
-
- private:
- Application& mApplication;
-};
+<p>For more detailed information on how to implement a 3D world using DALi, see <a href="../ui/dali/dali_overview_n.htm">DALi Overview</a>. It helps you to understand how to use DALi easily, while providing a Hello World example of constructing a virtual 3D world.</p>
-// Entry point for DALi applications
-int main( int argc, char **argv )
-{
- Application application = Application::New( &argc, &argv );
- HelloWorldExample test( application );
- application.MainLoop();
-
- return 0;
-}
-</pre>
-</li>
-</ol>
-</li>
-<li>Initialize the DALi application:
-
-<ul><li>
-<p>To use the DALi APIs, you only need to include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> file. It includes the header files of DALi Core and DALi Adaptor as well as DALi Toolkit.</p>
-
-<pre class="prettyprint">
-#include <dali-toolkit/dali-toolkit.h>
-</pre>
-<p>Using the following 2 using-directives can be convenient, because all DALi APIs are contained in either the <span style="font-family: Courier New,Courier,monospace;">Dali</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit</span> namespace:</p>
-<pre class="prettyprint">
-using namespace Dali;
-using namespace Dali::Toolkit;
-</pre>
-<p>Other code samples in the Tizen DALi documentation assume they already have those directives.</p>
-</li>
-
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>
-
-<p>Create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance:</p>
-
-<pre class="prettyprint">
-Application application = Application::New( &argc, &argv );
-</pre></li>
-<li>
-<p>Several signals can be connected to keep you informed when certain platform-related activities occur, and ensure that, upon system events, DALi is called in a thread-safe manner.</p>
-<p>To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way for starting a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals (for more information, see <a href="../ui/dali/event_handling_n.htm#automatic">Automatic Connection Management</a>). The <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample</span> class is used in other code samples in the Tizen DALi documentation.</p>
-
-<p>After getting the initialized signal from the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance, you can use the DALi APIs for building the scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">DALi::Application::InitSignal()</span> function:</p>
-
-<pre class="prettyprint">
-mApplication.InitSignal().Connect( this, &HelloWorldExample::Create );
-</pre></li></ul>
-
-</li>
-<li>Create an actor and add it to the stage:
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> UI component (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function.</p>
-
-<pre class="prettyprint">
-Stage stage = Stage::GetCurrent();
-stage.SetBackgroundColor( Color::WHITE );
-
-TextLabel textLabel = TextLabel::New( "Hello World" );
-textLabel.SetSize( stage.GetSize() );
-textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
-textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
-stage.Add( textLabel );
-</pre>
-
-<p>The above code additionally sets the background color of the <span style="font-family: Courier New,Courier,monospace;">stage</span> and the anchor point, a point defining a position of a child actor from its parent, of the <span style="font-family: Courier New,Courier,monospace;">textLabel</span>. The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
-
-</li>
-<li>Connect to input signals:
-
-<p>The application can handle touch and key event signals as follows:</p>
-<pre class="prettyprint">
-stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
-stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
-</pre>
-<p>Any key inputs and touches on the stage are handled by 2 callback functions, <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnKeyEvent</span> and <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span>.</p>
-
-<p>Note that the first parameter of the <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span> callback (<span style="font-family: Courier New,Courier,monospace;">actor</span>) is passed by a value, not by a reference or a pointer. You can simply pass instances of most DALi classes by value, when the class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications). This is due to the <a href="../ui/dali/handle_n.htm">handle/body pattern</a> widely used in DALi.</p>
-
-<pre class="prettyprint">
-bool OnTouch( Actor actor, const TouchEvent& event )
-</pre>
-</li>
-
-<li>Start the application main loop:
-
-<p>To run the application, start its main loop. This ensures that images are displayed, and events as well as signals are dispatched and captured.</p>
-<pre class="prettyprint">
-application.MainLoop();
-</pre>
+<h2 id="app_type" name="app_type">Application Types</h2>
+<p>With the DALi UI, you can create the following application types:</p>
+<ul>
+<li><a href="dali_basic_app_n.htm">Basic UI application</a>
+<p>A basic UI application provides a DALi-based user interface which allows the user to interact with the application.</p>
+<p>The basic UI application is available for both mobile and wearable devices.</p>
</li>
-<li>Build the DALi application:
-
-<p>To build your application, select <strong>Project > Build Project</strong> or press <strong>F10</strong> in the Tizen Studio.</p>
-<p>The Tizen Studio automatically packages the project after building. Note that you need to register your certificate when building for the first time. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a> and <a href="../../../../org.tizen.training/html/native/process/building_app_n.htm">Building Applications</a>.</p>
-
+<li><a href="dali_watch_app_n.htm">Watch application</a> <strong>in wearable applications only</strong>
+<p>A watch application provides a watch face with the current time (updated every second) as its user interface. You can take advantage of various DALi features to create the watch face.</p>
+<p>The watch application is available for wearable devices only, and it is shown on the idle screen of the device. For low-powered wearable devices, the watch application supports a special ambient mode. The ambient mode reduces power consumption by showing a limited UI and updating the time on the screen only once per minute.</p>
</li>
-<li>Run the DALi application:
-
-<p>To run your application, select <strong>Run > Run</strong> or press <strong>Ctrl+F11</strong> in the Tizen Studio.</p>
- <p>For more information, see <a href="../../../../org.tizen.training/html/native/process/running_app_n.htm">Running Applications</a>.</p>
-</li></ol>
-
-<p>The following figure illustrates the basic DALi application running on a Tizen emulator.</p>
- <p class="figure">Figure: Basic DALi application</p>
-<p align="center"><img alt="Basic DALi application" src="../../images/hello_world_dali.png" /></p>
+</ul>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>DALi Basic UI Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#api">Main Application Class</a></li>
+ <li><a href="#mainloop">Event Loop</a></li>
+ <li><a href="#callback">Event Callbacks</a></li>
+ <li><a href="#create">Basics of Creating a DALi Application</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">Dali::Application API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">Dali::Application API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DALi Basic UI Application</h1>
+
+<p>To create a DALi basic UI application, you must:</p>
+
+<ul>
+ <li>Use the <a href="#api">Dali::Application class</a>.</li>
+ <li>Make sure you <a href="#mainloop">start the event loop</a>.</li>
+ <li><a href="#callback">React to application events</a> with callbacks.</li>
+</ul>
+
+<p>For the steps of creating the basic parts of a simple DALi UI application, see <a href="#create">Basics of Creating a DALi Application</a>.</p>
+
+<h2 id="api">Main Application Class</h2>
+
+<p>If you want to use DALi for your application UI, you must create the application with the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications). This class provides the means for initializing the resources required by DALi.</p>
+
+<p>The following table lists the main functions you need in your application. They are all provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>Function</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">New()</span></td>
+ <td>Constructs the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GetWindow()</span></td>
+ <td>Retrieves the window used by the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SetViewMode()</span></td>
+ <td>Sets the viewing mode for the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">Quit()</span></td>
+ <td>Quits the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="mainloop">Event Loop</h2>
+
+<p>Like all ordinary Tizen applications, the DALi application must start the main event loop. Afterwards, it can receive events from the platform.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">mainloop()</span> function is used to start event loop. If you do not call the function and start the event loop, DALi cannot call any callback functions for application events.</p>
+
+<h2 id="callback">Event Callbacks</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class emits several signals, which you can connect to.</p>
+
+<p>The following table lists the callbacks for the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class. These signals originally occur in the Tizen application framework, and you can use the callbacks to react to them.</p>
+
+<table>
+ <caption>Table: Callbacks for basic application event signals</caption>
+ <tbody>
+ <tr>
+ <th>Callback</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">InitSignal()</span></td>
+ <td>Called when the DALi application is ready to start. The signal is emitted when the DALi core components (windows, resource, thread) are ready for use.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResumeSignal()</span></td>
+ <td>Called when the application becomes visible. The signal is most useful when the application is ready to restart from the paused state.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PauseSignal()</span></td>
+ <td>Called when the application becomes invisible. The signal is emitted when the application is paused due to another application becoming active (for example, because of a call, alarm, or message alert).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TerminateSignal()</span></td>
+ <td>Called when the application is terminated. The signal is useful when the application has resources to release at the end. By releasing those resources, you allow other applications to use them.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizeSignal()</span></td>
+ <td>Called when the window size is changes. The signal is called when a window is created or resized. You can use the signal to change the UI layout according to the new window size.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">AppControlSignal()</span></td>
+ <td>Called when an <a href="app_controls_n.htm">application control</a> signal is emitted from another application. This provides the means to communicate between applications.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">LanguageChangedSignal()</span></td>
+ <td>Called when the language is changed on the device. You can use the signal to refresh the display with the new language.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">RegionChangedSignal()</span></td>
+ <td>Called when the region is changed. You can use the signal to refresh any region-specific information on the screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">BatteryLowSignal()</span></td>
+ <td>Called when the battery state is low. You can use the signal to save any crucial information in case the battery state becomes so low that the application is forcefully terminated.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MemoryLowSignal()</span></td>
+ <td>Called when the memory state is low. You can use the signal to release any unused memory.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>For more information about Tizen UI applications in general, see <a href="ui_app_n.htm">UI Application</a>.</p>
+
+<h2 id="create">Basics of Creating a DALi Application</h2>
+
+<p>To create a DALi basic UI application:</p>
+
+<ol>
+<li>Initialize the application:
+<ol type="a">
+<li>To use the functions and data types of the DALi API, (in <a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><dali-toolkit/dali-toolkit.h></span> header file in your application:
+
+<pre class="prettyprint">
+#include <dali-toolkit/dali-toolkit.h>
+</pre>
+</li>
+<li>Use the following 2 <span style="font-family: Courier New,Courier,monospace;">using</span> directives for convenience, because all DALi APIs are contained in either <span style="font-family: Courier New,Courier,monospace;">Dali</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit</span> namespace:
+
+<pre class="prettyprint">
+using namespace Dali;
+using namespace Dali::Toolkit;
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Create the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class instance to initialize and set up DALi:
+
+<pre class="prettyprint">
+Application application = Application::New( &argc, &argv );
+</pre>
+</li>
+
+<li>Connect signals to keep yourself informed when certain system events occur.
+
+<p>To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way to start a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals.</p>
+
+<p>When the application receives the <span style="font-family: Courier New,Courier,monospace;">InitSignal()</span>, it can build the 3D scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorld::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">Dali::Application::InitSignal()</span> function:</p>
+
+<pre class="prettyprint">
+mApplication.InitSignal().Connect( this, &HelloWorld::Create );
+</pre>
+</li>
+
+<li>Create an actor and add it to the stage.
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> UI component (in <a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string.</p>
+<p>To display the text label, add it to a stage. The stage instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function:</p>
+
+<pre class="prettyprint">
+Stage stage = Stage::GetCurrent();
+
+TextLabel textLabel = TextLabel::New( "Hello World" );
+stage.Add( textLabel );
+</pre>
+
+<p>The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
+</li>
+
+<li>Handle touch and key event signals:
+
+<pre class="prettyprint">
+stage.GetRootLayer().TouchSignal().Connect( this, &HelloWorld::OnTouch );
+stage.KeyEventSignal().KeyEventSignal().Connect( this, &HelloWorld::OnKeyEvent );
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>DALi Watch Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#api">Main Application Classes</a></li>
+ <li><a href="#mainloop">Event Loop</a></li>
+ <li><a href="#callback">Event Callbacks</a></li>
+ <li><a href="#create">Basics of Creating a DALi Watch Application</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="dali_basic_app_n.htm">Dali Basic UI Application</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">Dali::Application API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>DALi Watch Application</h1>
+
+<p>You can create a watch application with DALi to retrieve the current date and time and display it accurately on the screen.</p>
+
+<p>This feature is supported in wearable applications only.</p>
+
+<p>To create a DALi watch application, you must:</p>
+
+<ul>
+ <li>Use the <a href="#api">Dali::WatchApplication class</a>.
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">A DALi watch application is implemented similarly to a <a href="dali_basic_app_n.htm">DALi basic UI application</a>, since the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1WatchApplication.html">Dali::WatchApplication</a> class inherits from the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">Dali::Application</a> class. Consequently, make sure you are familiar with the basic UI application details before tackling a watch application.</td>
+ </tr>
+ </tbody>
+ </table></li>
+ <li>Make sure you <a href="#mainloop">start the event loop</a>.</li>
+ <li><a href="#callback">React to application events</a> with callbacks.</li>
+ <li>Manage the time handle and display the time with the DALi 3D UI.
+ <p>The <span style="font-family: Courier New,Courier,monospace;">TimeTickSignal()</span> and <span style="font-family: Courier New,Courier,monospace;">AmbientTickSignal()</span> functions trigger callback functions to update the display with the new accurate time. The <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle is provided with the callback function to help you to update the current time properly.</p></li>
+</ul>
+
+<p class="figure">Figure: DALi watch application</p>
+<p align="center"><img alt="DALi watch application" src="../../images/dali_watch_application.png"/></p>
+
+<p>For the steps of creating the basic parts of a simple DALi watch application, see <a href="#create">Basics of Creating a DALi Watch Application</a>.</p>
+
+<h2 id="api">Main Application Classes</h2>
+
+<p>If you want to use DALi for your watch application, you must create the application with the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class. This class provides the means for initializing the resources required by DALi.</p>
+
+<p>The following table lists the main functions you need in your application to retrieve the current time. They are all provided by the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1WatchTime.html">Dali::WatchTime</a> class.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>Function</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GetHour()</span></td>
+ <td>Get the hour from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GetHour24()</span></td>
+ <td>Get the hour from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle in the 24-hour format.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GetMinute()</span></td>
+ <td>Get the minute from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GetSecond()</span></td>
+ <td>Get the second from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> handle.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="mainloop">Event Loop</h2>
+
+<p>Like all ordinary Tizen applications, the DALi watch application must start the main event loop. Afterwards, it can receive usual platform events and dedicated watch events from the platform.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">mainloop()</span> function is used to start event loop. If you do not call the function and start the event loop, DALi cannot call any callback functions for application events.</p>
+
+<h2 id="callback">Event Callbacks</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class emits several signals, which you can connect to.</p>
+
+<p>The following table lists the callbacks for the watch application signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class. These signals originally occur in the Tizen application framework, and you can use the callbacks to react to them.</p>
+
+<table>
+<caption>Table: Callbacks for watch application event signals</caption>
+ <tbody>
+ <tr>
+ <th>Callback</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TimeTickSignal()</span></td>
+ <td>Called every second. You can use the signal to update the time on the screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">AmbientTickSignal()</span></td>
+ <td>Called every minute when the device is in the ambient mode. You can use the signal to update the time on the screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">AmbientChangedSignal()</span></td>
+ <td>Called when the device enters or exits the ambient mode.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="create">Basics of Creating a DALi Watch Application</h2>
+
+<p>To create a DALi watch application, set the time, and draw the UI:</p>
+
+<ol>
+<li>Initialize the application:
+<ol type="a">
+<li>To use the functions and data types of the DALi watch application, include the <span style="font-family: Courier New,Courier,monospace;"><dali/public-api/dali-wearable.h></span> header file in your application:
+
+<pre class="prettyprint">
+#include <dali/public-api/dali-wearable.h>
+</pre>
+</li>
+<li>Like in a basic UI application, use the following 2 <span style="font-family: Courier New,Courier,monospace;">using</span> directives for convenience, because all DALi APIs are contained in either <span style="font-family: Courier New,Courier,monospace;">Dali</span> or <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit</span> namespace:
+
+<pre class="prettyprint">
+using namespace Dali;
+using namespace Dali::Toolkit;
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Create the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication</span> class instance to initialize and set up DALi for a watch application:
+
+<pre class="prettyprint">
+WatchApplication application = WatchApplication::New( &argc, &argv );
+</pre>
+</li>
+
+<li>Connect signals to keep yourself informed when certain system events occur.
+
+<ol type="a">
+<li>To manage signal connection safely, DALi provides the <a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">Dali::ConnectionTracker</a> class. A typical way to start a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals.
+
+<p>When the application receives the <span style="font-family: Courier New,Courier,monospace;">InitSignal()</span>, it can create UI components. Connect the <span style="font-family: Courier New,Courier,monospace;">WatchExample::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">Dali::WatchApplication::InitSignal()</span> function:</p>
+
+<pre class="prettyprint">
+class WatchExample : public ConnectionTracker
+{
+ public:
+ WatchExample( WatchApplication& application )
+ : mApplication( application )
+ {
+ mApplication.InitSignal().Connect( this, &WatchExample::Create );
+ }
+
+ void Create( Application& application )
+ {
+ // Create a DALi UI component
+ }
+
+ private:
+ WatchApplication& mApplication;
+}
+</pre>
+</li>
+<li>Handle the tick signals.
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TimeTickSignal()</span> callback is triggered once per second. Retrieve the current time from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> time handle to draw the updated time.</p>
+
+<p>You can get the current hour, minute, and second from the <span style="font-family: Courier New,Courier,monospace;">WatchTime</span> time handle by using the <span style="font-family: Courier New,Courier,monospace;">time.GetHour()</span>, <span style="font-family: Courier New,Courier,monospace;">time.GetMinute()</span>, and <span style="font-family: Courier New,Courier,monospace;">time.GetSecond()</span> functions.</p>
+
+<pre class="prettyprint">
+mApplication.TimeTickSignal().Connect( this, &WatchExample::OnTimeTick );
+
+// Update clock hands on the tick event
+void OnTimeTick( Application& application, const WatchTime& time )
+{
+ UpdateClockHands(time.GetHour(), time.GetMinute(), time.GetSecond());
+}
+
+void UpdateClockHands(int hour, int min, int sec)
+{
+ // Update the angle of each hand
+}
+</pre>
+</li></ol></li></ol>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>EFL Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 2.3.1 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#basic">Basic Fundamentals</a></li>
+ <li><a href="#app_type">Application Types</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API reference for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API reference for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>EFL Applications</h1>
+
+<p>You can use the Enlightenment Foundation Libraries (EFL) to create a 2D-based Tizen native application. However, EFL supports 2.5D and 3D effects and 3D objects as well. For 3D-based Tizen native applications, you can use the <a href="../ui/dali/dali_n.htm">Dynamic Animation Library (DALi) UI toolkit</a> as well.</p>
+
+<p>EFL is a collection of libraries that are independent or can build on top of each-other. They provide useful features that complement an OS's existing environment, rather than wrap and abstract it, trying to be their own environment and OS in its entirety. This means that EFL expects you to use other system libraries and APIs in conjunction with EFL libraries to provide a whole working application or library - simply using EFL as a set of convenient pre-made libraries to accomplish a whole host of complex or painful tasks for you.</p>
+
+<h2 id="basic" name="basic">Basic Fundamentals</h2>
+
+<p>Before you start UI programming with EFL, you must familiarize yourself with the basic EFL fundamentals. EFL consists of the following main libraries:</p>
+
+<ul>
+<li><strong>Elementary</strong>
+<p>Elementary 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.</p>
+</li>
+<li><strong>Edje</strong>
+<p>Edje provide a powerful theme for your application. You can also use Edje to create your own objects and use them in your application, or even extend the default theme.</p>
+</li>
+<li><strong>Ecore</strong>
+<p>Ecore manages the main loop of your application. The main loop is where events are handled, and where you interact with the user through the callback mechanism.</p>
+</li>
+<li><strong>Evas</strong>
+<p>Evas is the canvas engine responsible for managing the drawing of your content. All graphical objects that you create are Evas objects.</p>
+</li>
+<li><strong>Eina</strong>
+<p>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.</p>
+</li></ul>
+
+<p>For more detailed information on how to get started with EFL programming, see <a href="../ui/efl/getting_started_n.htm">Getting Started with EFL UI Programming</a>. It helps you to understand how to EFL works, and how you can create a simply EFL application with basic features.</p>
+
+<h2 id="app_type" name="app_type">Application Types</h2>
+
+<p>With the EFL UI, you can create the following application types:</p>
+
+<ul>
+<li><a href="efl_ui_app_n.htm">Basic UI application</a>
+<p>A basic UI application provides a DALi-based user interface which allows the user to interact with the application.</p>
+<p>The basic UI application is available for both mobile and wearable devices.</p>
+</li>
+<li><a href="watch_app_n.htm">Watch application</a> <strong>in wearable applications only</strong>
+<p>A watch application provides a watch face with the current time (updated every second) as its user interface. You can take advantage of various DALi features to create the watch face.</p>
+<p>The watch application is available for wearable devices only, and it is shown on the idle screen of the device. For low-powered wearable devices, the watch application supports a special ambient mode. The ambient mode reduces power consumption by showing a limited UI and updating the time on the screen only once per minute.</p>
+</li>
+<li><a href="widget_app_n.htm">Widget application</a>
+<p>A widget application (or widget) is a specialized application that provides the user a quick view of specific information from the parent application. In addition, the widget allows the user to access certain features without launching the parent applications. Combined with the parent application, your widget can have various features to increase the usability of your application.</p>
+<p>The widget application is available for both mobile and wearable devices.</p>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>EFL Basic UI Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 2.3.1 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#callback">Event Callbacks</a></li>
+ <li><a href="#state_trans">Application States and Transitions</a></li>
+ <li><a href="#prerequisites">Prerequisites</a></li>
+ <li><a href="#fundamentals">Handling the Application Fundamentals</a></li>
+ <li><a href="#allow_bg">Background Categories</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>EFL Basic UI Application</h1>
+
+<p>To create an EFL basic UI application, you must:</p>
+<ul>
+ <li>Define the <a href="#fundamentals">the application fundamentals</a>, mainly the entry point and life-cycle callbacks.
+<p>The entry point starts the event loop, which is mandatory for every Tizen native application. Within the event loop, the application can receive both basic system events and application state change events. You can register <a href="#callback">callbacks for these events</a> to react to them.</p></li>
+ <li>Manage <a href="#state_trans">application states and transitions</a> during its life-cycle.</li>
+ <li>Define a <a href="#allow_bg">background category</a> for your application, if you want it to run on the background.</li>
+</ul>
+
+<h2 id="callback" name="callback">Event Callbacks</h2>
+<p>The following table lists the application state change events.</p>
+
+ <table>
+ <caption>
+ Table: Application state change events
+ </caption>
+ <tbody>
+ <tr>
+ <th>Callback</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_create_cb()</span></td>
+ <td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span></td>
+ <td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span></td>
+ <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback, re-allocate those resources here before the application resumes.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span></td>
+ <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>For more information, see <a href="#state_trans">Application State and Transition Management</a>.</p>
+
+<p>To listen to system events, use the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function. The system events are triggered with the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback function. The following table lists the event types.</p>
+
+ <table>
+ <caption>
+ Table: Event types
+ </caption>
+ <tbody>
+ <tr>
+ <th>Event type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_MEMORY</span></td>
+ <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY</span></td>
+ <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LANGUAGE_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for taking necessary actions before entering the suspended state or after exiting from the state. (Supported since Tizen 2.4.)</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="state_trans" name="state_trans">Application States and Transitions</h2>
+
+<p>The Tizen native application can be in one of several different <a href="applications_n.htm#state_change">application states</a>.</p>
+
+<p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must <a href="#fundamentals">react to each state change appropriately</a>.</p>
+
+ <table>
+ <caption>
+ Table: Application states
+ </caption>
+ <tbody>
+ <tr>
+ <th>State</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
+ <td>Application is launched.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td>
+ <td>Application starts the main loop.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
+ <td>Application is running and visible to the user.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td>
+ <td>Application is running but invisible to the user.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
+ <td>Application is terminated.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The following figure illustrates the application state transitions.</p>
+
+ <p class="figure">Figure: Application state transitions</p>
+ <p align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
+
+
+
+<h2 id="prerequisites">Prerequisites</h2>
+<p>To use the functions and data types of the Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
+<pre class="prettyprint">
+#include <app.h>
+</pre>
+
+ <h2 id="fundamentals" name="fundamentals">Handling the Application Fundamentals</h2>
+
+<p>The Application API is a simple framework all Tizen applications are based on. It only handles interactions between applications and the operating system. In order for an application to operate successfully, it must receive events from the platform. For this, it must start the main event loop - this is mandatory for all Tizen native applications.</p>
+
+<p>To manage the application life-cycle:</p>
+<ol>
+<li>
+<p>Start the application with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the Application API and starts the main event loop with the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. Before calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> structure variable, which is passed to the function.</p>
+<p>The following code is a minimal application using the Application API. It only builds and runs.</p>
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+ /* Create a ui_app_lifecycle_callback_s object and initialize its contents to 0 */
+ ui_app_lifecycle_callback_s event_callback = {0,};
+
+ /* Run the application */
+ return ui_app_main(&argc, &argv, &event_callback, NULL);
+}
+</pre>
+</li>
+<li>Define the application state callbacks.
+<p>The Application API has 2 classes of application state callbacks: those about the application life-cycle and those about the system.</p>
+<ul>
+<li>
+<p>Application life-cycle callbacks:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">create</span>: Called after the <span style="font-family: Courier New,Courier,monospace;">ui_app_main()</span> function and used to initialize the UI.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">control</span>: Triggered when the application is started to do something. It can be called several times during the lifespan of an application, and it shows the screen for the action requested. It requires specific information given to the callback.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: Saves work, releases resources, and exits.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: Sets the application window not visible and switches to a mode which uses less resources.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: Sets the application window to be visible again.</li>
+</ul>
+</li>
+
+<li>
+<p>System-related events (handled with the <span style="font-family: Courier New,Courier,monospace;">app_event_cb()</span> callback):</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_MEMORY</span>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The event is also used to release any cached data in the main memory to secure more free memory.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_BATTERY</span>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The event is also used to stop heavy CPU consumption or power consumption activities to save the remaining power.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span>: Used to change the display orientation to match the device orientation.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LANGUAGE_CHANGED</span>: Used to refresh the display into a new language.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_REGION_FORMAT_CHANGED</span>: Used to refresh the display into a new time zone.</li>
+</ul>
+</li>
+</ul>
+<p>The following example shows a basic application state callback implementation:</p>
+<pre class="prettyprint">
+/*
+ Structure to store the data for application logic; it is given
+ to each callback invoked through the Application API
+*/
+struct appdata {
+ char *several;
+ char *fields;
+};
+typedef struct appdata appdata_s;
+
+static bool
+app_create(void *data)
+{
+ /*
+ Hook to take necessary actions before main event loop starts; this
+ usually means initializing the UI and application data (the "data"
+ parameter to this function)
+ */
+
+ appdata_s *ad = data;
+ create_gui(ad);
+
+ /* If this function returns true, the main loop starts */
+ /* If this function returns false, the application is terminated */
+ return true;
+}
+
+static void
+app_control(app_control_h app_control, void *data)
+{
+ /*
+ Handle the launch request, show the user the task requested through the
+ "app_control" parameter (see the next step)
+ */
+}
+
+static void
+app_pause(void *data)
+{
+ /* Take necessary actions when application becomes invisible */
+}
+
+static void
+app_resume(void *data)
+{
+ /* Take necessary actions when application becomes visible */
+}
+
+static void
+app_terminate(void *data)
+{
+ /* Release all resources */
+ appdata_s *ad = data;
+
+ if (!ad)
+ return;
+
+ /*
+ If specific steps are needed:
+ destroy_gui(ad);
+ */
+}
+
+int
+main(int argc, char *argv[])
+{
+ appdata_s ad = {0,};
+ ui_app_lifecycle_callback_s event_callback = {0,};
+
+ /* Set the callbacks for the application logic */
+ event_callback.create = app_create;
+ event_callback.terminate = app_terminate;
+ event_callback.pause = app_pause;
+ event_callback.resume = app_resume;
+ event_callback.app_control = app_control;
+
+ /* Note the &ad below is how the struct is given to the callbacks */
+ return ui_app_main(argc, argv, &event_callback, &ad);
+}
+</pre>
+</li>
+<li>
+<p>Define any required application controls. An app control is a mechanism through which the application receives additional information about why it was started and with which parameters.</p>
+<p>The application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control</span> callback. The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through API functions, such as:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: Retrieve a string describing which operation the application was started for.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: Retrieve the MIME type of the data (such as image/jpg).</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: Get the string value associated with a given key.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: Get the string array associated with a given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with the key is an array).</li>
+</ul>
+<p>For other available functions, see the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header file.</p>
+<p>For more information about launching other applications from your application using application controls, see <a href="app_controls_n.htm">Application Controls</a>.</p>
+</li>
+</ol>
+
+<h2 id="allow_bg" name="allow_bg">Background Categories</h2>
+
+<p>Since Tizen 2.4, the application is not allowed to run on the background except when it is explicitly declared to do so. The following table lists the background categories that allow the application to run on the background.</p>
+
+<table id="allow_bg_table">
+ <caption>Table: Allowed background application policy</caption>
+ <tbody>
+ <tr>
+ <th>Background category</th>
+ <th>Description</th>
+<th>Related APIs</th>
+<th>Manifest file <background-category> element value</th>
+ </tr>
+ <tr>
+ <td>Media</td>
+ <td>Playing audio, recording, and outputting streaming video on the background</td>
+<td>Multimedia API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">wearable</a> applications)</td>
+<td><span style="font-family: Courier New,Courier,monospace">media</span></td>
+ </tr>
+ <tr>
+ <td>Download</td>
+ <td>Downloading data with the Tizen Download-manager API</td>
+<td>Download API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> applications)</td>
+<td><span style="font-family: Courier New,Courier,monospace">download</span></td>
+ </tr>
+ <tr>
+ <td>Background network</td>
+ <td>Processing general network operations on the background (such as sync-manager, IM, and VOIP)</td>
+<td>Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>
+<td><span style="font-family: Courier New,Courier,monospace">background-network</span></td>
+ </tr>
+<tr>
+ <td>Location</td>
+ <td>Processing location data on the background</td>
+<td>Location API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">wearable</a> applications)</td>
+<td><span style="font-family: Courier New,Courier,monospace">location</span></td>
+ </tr>
+<tr>
+ <td>Sensor (context)</td>
+ <td>Processing context data from the sensors, such as gesture</td>
+<td>Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications)</td>
+<td><span style="font-family: Courier New,Courier,monospace">sensor</span></td>
+ </tr>
+<tr>
+ <td>IoT Communication/Connectivity</td>
+ <td>Communicating between external devices on the background (such as Wi-Fi and Bluetooth)</td>
+<td>Wi-Fi (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications) and Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications)</td>
+<td><span style="font-family: Courier New,Courier,monospace">iot-communication</span></td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3 id="bg-category" name="bg-category">Describing the Background Category</h3>
+<p>An application with a background running capability must declare the background category in its manifest file:</p>
+
+<pre class="prettyprint">
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.4" package="org.tizen.test" version="1.0.0">
+ <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false" taskmanage="true" nodisplay="false">
+ <icon>rest.png</icon>
+ <label>rest</label>
+ <!--For API version 2.4 and higher-->
+ <background-category value="media"/>
+ <background-category value="download"/>
+ <background-category value="background-network"/>
+ </ui-application>
+ <service-application appid="org.tizen.test-service" exec="test-service" multiple="false" type="capp">
+ <background-category value="background-network"/>
+ <background-category value="location"/>
+ </service-application>
+</manifest>
+</pre>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The <span style="font-family: Courier New,Courier,monospace"><background-category></span> element is supported since the API version 2.4. An application with a <span style="font-family: Courier New,Courier,monospace"><background-category></span> element declared can fail to be installed on devices with a Tizen version lower than 2.4. In this case, declare the background category as <span style="font-family: Courier New,Courier,monospace"><metadata key="http://tizen.org/metadata/background-category/<value>"/></span>.</td>
+ </tr>
+ <tr>
+<td class="note">
+<pre class="prettyprint">
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3" package="org.tizen.test" version="1.0.0">
+ <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false" taskmanage="true" nodisplay="false">
+ <icon>rest.png</icon>
+ <label>rest</label>
+ <!--For API version lower than 2.4-->
+ <metadata key="http://tizen.org/metadata/background-category/media"/>
+ <metadata key="http://tizen.org/metadata/background-category/download"/>
+ <metadata key="http://tizen.org/metadata/background-category/background-network"/>
+ </ui-application>
+ <service-application appid="org.tizen.test-service" exec="test-service" multiple="false" type="capp">
+ <metadata key="http://tizen.org/metadata/background-category/background-network"/>
+ <metadata key="http://tizen.org/metadata/background-category/location"/>
+ </service-application>
+</manifest>
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace"><metadata key="http://tizen.org/metadata/bacgkround-category/<value>"/></span> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 and higher devices, it has the same effect as the <span style="font-family: Courier New,Courier,monospace"><background-category></span> element.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The background category of your application can be specified in the
+<a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
</ul>
<p>The application can be suspended while in the background, causing a pause in event handling. Since the application cannot receive events in the suspended state, they are all delivered in series after the application exits the suspended state. Consider how to manage this situation and prevent the application from being flooded with events:</p>
-<ul><li>To handle events in the background without going to a suspended state, <a href="ui_app_n.htm#allow_bg">declare a background category</a>. </li>
-<li>To avoid receiving any events that are triggered while the application is suspended, remove the event handler before entering the suspended state and add it back after exiting the suspended state. You can <a href="ui_app_n.htm#callback">manage the event handler</a> addition and removal in the <span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span> event callback, which is triggered each time the application enters and exist the suspended state.</li></ul>
+<ul><li>To handle events in the background without going to a suspended state, <a href="efl_ui_app_n.htm#allow_bg">declare a background category</a>. </li>
+<li>To avoid receiving any events that are triggered while the application is suspended, remove the event handler before entering the suspended state and add it back after exiting the suspended state. You can <a href="efl_ui_app_n.htm#callback">manage the event handler</a> addition and removal in the <span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span> event callback, which is triggered each time the application enters and exist the suspended state.</li></ul>
<h2 id="prerequisites">Prerequisites</h2>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Service Application</title>
+ <title>Service Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Service Application</h1>
+<h1>Service Applications</h1>
<p>Service applications are Tizen native applications with no graphical user interface that run in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>UI Application</title>
+ <title>UI Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li>Tizen 2.4 and Higher for Mobile</li>
<li>Tizen 2.3.1 and Higher for Wearable</li>
</ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#callback">Event Callbacks</a></li>
- <li><a href="#state_trans">Application States and Transitions</a></li>
- <li><a href="#prerequisites">Prerequisites</a></li>
- <li><a href="#fundamentals">Handling the Application Fundamentals</a></li>
- <li><a href="#allow_bg">Background Categories</a></li>
- </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">DALi API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>UI Application</h1>
+ <h1>UI Applications</h1>
-<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. The additional features have constraints, such as a relatively small screen size and lack of system resources compared to a larger system. For example, for power management reasons, the application can take actions to reduce usage when it finds out that it has its display window covered over by another application window. State change events are delivered to make it possible to detect these situations.</p>
-
-<p>The main Application API features include:</p>
-<ul>
- <li>Application fundamentals
- <p>You can <a href="#fundamentals">define the application entry point and life-cycle callbacks</a>. The entry point starts the event loop, which is mandatory for every Tizen native application.</p>
- <p>Within the event loop, the application can receive both basic system events and application state change events. You can register <a href="#callback">callbacks for these events</a> to react to them.</p></li>
- <li>Application states and transitions
- <p>A Tizen native application has several different <a href="#state_trans">states, which it transitions through</a> during its life-cycle.</p></li>
- <li>Background categories
- <p>You can <a href="#allow_bg">define a background category</a> for your application to allow it to run on the background.</p></li>
-</ul>
-
-<h2 id="callback" name="callback">Event Callbacks</h2>
-<p>The following table lists the application state change events.</p>
-
- <table>
- <caption>
- Table: Application state change events
- </caption>
- <tbody>
- <tr>
- <th>Callback</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_create_cb()</span></td>
- <td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span></td>
- <td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_resume_cb()</span></td>
- <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback, re-allocate those resources here before the application resumes.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_terminate_cb()</span></td>
- <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td>
- </tr>
- </tbody>
- </table>
+<p>UI applications are Tizen native applications with a graphical user interface that run in the foreground. Since they have a UI, they allow the user to easily interact with them.</p>
-<p>For more information, see <a href="#state_trans">Application State and Transition Management</a>.</p>
-
-<p>To listen to system events, use the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function. The system events are triggered with the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback function. The following table lists the event types.</p>
-
- <table>
- <caption>
- Table: Event types
- </caption>
- <tbody>
- <tr>
- <th>Event type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_MEMORY</span></td>
- <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY</span></td>
- <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span></td>
- <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LANGUAGE_CHANGED</span></td>
- <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td>
- <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_SUSPENDED_STATE_CHANGED</span></td>
- <td>Event type for the callback function that is responsible for taking necessary actions before entering the suspended state or after exiting from the state. (Supported since Tizen 2.4.)</td>
- </tr>
- </tbody>
- </table>
-
-<h2 id="state_trans" name="state_trans">Application States and Transitions</h2>
-
-<p>The Tizen native application can be in one of several different <a href="applications_n.htm#state_change">application states</a>.</p>
-
-<p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must <a href="#fundamentals">react to each state change appropriately</a>.</p>
-
- <table>
- <caption>
- Table: Application states
- </caption>
- <tbody>
- <tr>
- <th>State</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">READY</span></td>
- <td>Application is launched.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">CREATED</span></td>
- <td>Application starts the main loop.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">RUNNING</span></td>
- <td>Application is running and visible to the user.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">PAUSED</span></td>
- <td>Application is running but invisible to the user.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">TERMINATED</span></td>
- <td>Application is terminated.</td>
- </tr>
- </tbody>
- </table>
-
-<p>The following figure illustrates the application state transitions.</p>
-
- <p class="figure">Figure: Application state transitions</p>
- <p align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
-
-
-
-<h2 id="prerequisites">Prerequisites</h2>
-<p>To use the functions and data types of the Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
-<pre class="prettyprint">
-#include <app.h>
-</pre>
-
- <h2 id="fundamentals" name="fundamentals">Handling the Application Fundamentals</h2>
-
-<p>The Application API is a simple framework all Tizen applications are based on. It only handles interactions between applications and the operating system. In order for an application to operate successfully, it must receive events from the platform. For this, it must start the main event loop - this is mandatory for all Tizen native applications.</p>
-
-<p>To manage the application life-cycle:</p>
-<ol>
-<li>
-<p>Start the application with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the Application API and starts the main event loop with the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. Before calling the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function, set up the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> structure variable, which is passed to the function.</p>
-<p>The following code is a minimal application using the Application API. It only builds and runs.</p>
-<pre class="prettyprint">
-int
-main(int argc, char *argv[])
-{
- /* Create a ui_app_lifecycle_callback_s object and initialize its contents to 0 */
- ui_app_lifecycle_callback_s event_callback = {0,};
-
- /* Run the application */
- return ui_app_main(&argc, &argv, &event_callback, NULL);
-}
-</pre>
-</li>
-<li>Define the application state callbacks.
-<p>The Application API has 2 classes of application state callbacks: those about the application life-cycle and those about the system.</p>
-<ul>
-<li>
-<p>Application life-cycle callbacks:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">create</span>: Called after the <span style="font-family: Courier New,Courier,monospace;">ui_app_main()</span> function and used to initialize the UI.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">control</span>: Triggered when the application is started to do something. It can be called several times during the lifespan of an application, and it shows the screen for the action requested. It requires specific information given to the callback.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: Saves work, releases resources, and exits.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: Sets the application window not visible and switches to a mode which uses less resources.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: Sets the application window to be visible again.</li>
-</ul>
-</li>
-
-<li>
-<p>System-related events (handled with the <span style="font-family: Courier New,Courier,monospace;">app_event_cb()</span> callback):</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_MEMORY</span>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The event is also used to release any cached data in the main memory to secure more free memory.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_BATTERY</span>: Used to save data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The event is also used to stop heavy CPU consumption or power consumption activities to save the remaining power.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span>: Used to change the display orientation to match the device orientation.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LANGUAGE_CHANGED</span>: Used to refresh the display into a new language.</li>
- <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_REGION_FORMAT_CHANGED</span>: Used to refresh the display into a new time zone.</li>
-</ul>
-</li>
-</ul>
-<p>The following example shows a basic application state callback implementation:</p>
-<pre class="prettyprint">
-/*
- Structure to store the data for application logic; it is given
- to each callback invoked through the Application API
-*/
-struct appdata {
- char *several;
- char *fields;
-};
-typedef struct appdata appdata_s;
-
-static bool
-app_create(void *data)
-{
- /*
- Hook to take necessary actions before main event loop starts; this
- usually means initializing the UI and application data (the "data"
- parameter to this function)
- */
-
- appdata_s *ad = data;
- create_gui(ad);
-
- /* If this function returns true, the main loop starts */
- /* If this function returns false, the application is terminated */
- return true;
-}
-
-static void
-app_control(app_control_h app_control, void *data)
-{
- /*
- Handle the launch request, show the user the task requested through the
- "app_control" parameter (see the next step)
- */
-}
-
-static void
-app_pause(void *data)
-{
- /* Take necessary actions when application becomes invisible */
-}
-
-static void
-app_resume(void *data)
-{
- /* Take necessary actions when application becomes visible */
-}
+<p>A Tizen native UI application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. The additional features have constraints, such as a relatively small screen size and lack of system resources compared to a larger system. For example, for power management reasons, the application can take actions to reduce usage when it finds out that it has its display window covered over by another application window. State change events are delivered to make it possible to detect these situations.</p>
-static void
-app_terminate(void *data)
-{
- /* Release all resources */
- appdata_s *ad = data;
+<p>When creating a native UI application, you can select between the EFL and DALi UI frameworks:</p>
- if (!ad)
- return;
-
- /*
- If specific steps are needed:
- destroy_gui(ad);
- */
-}
-
-int
-main(int argc, char *argv[])
-{
- appdata_s ad = {0,};
- ui_app_lifecycle_callback_s event_callback = {0,};
-
- /* Set the callbacks for the application logic */
- event_callback.create = app_create;
- event_callback.terminate = app_terminate;
- event_callback.pause = app_pause;
- event_callback.resume = app_resume;
- event_callback.app_control = app_control;
-
- /* Note the &ad below is how the struct is given to the callbacks */
- return ui_app_main(argc, argv, &event_callback, &ad);
-}
-</pre>
-</li>
-<li>
-<p>Define any required application controls. An app control is a mechanism through which the application receives additional information about why it was started and with which parameters.</p>
-<p>The application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control</span> callback. The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through API functions, such as:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: Retrieve a string describing which operation the application was started for.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: Retrieve the MIME type of the data (such as image/jpg).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: Get the string value associated with a given key.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: Get the string array associated with a given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with the key is an array).</li>
+<li>DALi UI framework
+ <p>The DALi application is based on the Dynamic Animation Library. The DALi internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the scene graph. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p>
+
+ <p>For more information on the available application types for the DALi framework, see <a href="dali_app_n.htm">DALi Applications</a>.</p>
+ </li>
+
+<li>EFL UI framework
+ <p>The EFL application is based on the Enlightenment Foundation Library. The EFL application provides a 2D-based Tizen native application, and streamlined graphic core libraries you need to create powerful applications. EFL needs relatively low memory but provides high performance, and supports a retained mode graphics system and user-centric features, such as themes, 2D/3D effects, and accessibility. In addition, EFL supports various resolutions with the same layout, fast and small file systems, a variety of programming language bindings, and a separate UI and logic.</p>
+
+ <p>For more information on the available application types for the EFL framework, see <a href="efl_app_n.htm">EFL Applications</a>.</p>
+ </li>
</ul>
-<p>For other available functions, see the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header file.</p>
-<p>For more information about launching other applications from your application using application controls, see <a href="app_controls_n.htm">Application Controls</a>.</p>
-</li>
-</ol>
-
-<h2 id="allow_bg" name="allow_bg">Background Categories</h2>
-<p>Since Tizen 2.4, the application is not allowed to run on the background except when it is explicitly declared to do so. The following table lists the background categories that allow the application to run on the background.</p>
-
-<table id="allow_bg_table">
- <caption>Table: Allowed background application policy</caption>
- <tbody>
- <tr>
- <th>Background category</th>
- <th>Description</th>
-<th>Related APIs</th>
-<th>Manifest file <background-category> element value</th>
- </tr>
- <tr>
- <td>Media</td>
- <td>Playing audio, recording, and outputting streaming video on the background</td>
-<td>Multimedia API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">media</span></td>
- </tr>
- <tr>
- <td>Download</td>
- <td>Downloading data with the Tizen Download-manager API</td>
-<td>Download API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">download</span></td>
- </tr>
- <tr>
- <td>Background network</td>
- <td>Processing general network operations on the background (such as sync-manager, IM, and VOIP)</td>
-<td>Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">background-network</span></td>
- </tr>
-<tr>
- <td>Location</td>
- <td>Processing location data on the background</td>
-<td>Location API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">location</span></td>
- </tr>
-<tr>
- <td>Sensor (context)</td>
- <td>Processing context data from the sensors, such as gesture</td>
-<td>Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">sensor</span></td>
- </tr>
-<tr>
- <td>IoT Communication/Connectivity</td>
- <td>Communicating between external devices on the background (such as Wi-Fi and Bluetooth)</td>
-<td>Wi-Fi (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications) and Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications)</td>
-<td><span style="font-family: Courier New,Courier,monospace">iot-communication</span></td>
- </tr>
- </tbody>
- </table>
-
-<h3 id="bg-category" name="bg-category">Describing the Background Category</h3>
-<p>An application with a background running capability must declare the background category in its manifest file:</p>
-
-<pre class="prettyprint">
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.4" package="org.tizen.test" version="1.0.0">
- <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false" taskmanage="true" nodisplay="false">
- <icon>rest.png</icon>
- <label>rest</label>
- <!--For API version 2.4 and higher-->
- <background-category value="media"/>
- <background-category value="download"/>
- <background-category value="background-network"/>
- </ui-application>
- <service-application appid="org.tizen.test-service" exec="test-service" multiple="false" type="capp">
- <background-category value="background-network"/>
- <background-category value="location"/>
- </service-application>
-</manifest>
-</pre>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace"><background-category></span> element is supported since the API version 2.4. An application with a <span style="font-family: Courier New,Courier,monospace"><background-category></span> element declared can fail to be installed on devices with a Tizen version lower than 2.4. In this case, declare the background category as <span style="font-family: Courier New,Courier,monospace"><metadata key="http://tizen.org/metadata/background-category/<value>"/></span>.</td>
- </tr>
- <tr>
-<td class="note">
-<pre class="prettyprint">
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3" package="org.tizen.test" version="1.0.0">
- <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false" taskmanage="true" nodisplay="false">
- <icon>rest.png</icon>
- <label>rest</label>
- <!--For API version lower than 2.4-->
- <metadata key="http://tizen.org/metadata/background-category/media"/>
- <metadata key="http://tizen.org/metadata/background-category/download"/>
- <metadata key="http://tizen.org/metadata/background-category/background-network"/>
- </ui-application>
- <service-application appid="org.tizen.test-service" exec="test-service" multiple="false" type="capp">
- <metadata key="http://tizen.org/metadata/background-category/background-network"/>
- <metadata key="http://tizen.org/metadata/background-category/location"/>
- </service-application>
-</manifest>
-</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace"><metadata key="http://tizen.org/metadata/bacgkround-category/<value>"/></span> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 and higher devices, it has the same effect as the <span style="font-family: Courier New,Courier,monospace"><background-category></span> element.</p>
- </td>
- </tr>
- </tbody>
- </table>
-
-<p>The background category of your application can be specified in the
-<a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Watch Application</title>
+ <title>EFL Watch Application</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="container"><div id="contents"><div class="content">
-<h1>Watch Application</h1>
+<h1>EFL Watch Application</h1>
<p>Tizen allows you to create a watch application and manage its life-cycle to <a href="#current">retrieve the current date and time</a> and display it accurately on the screen.</p>
<p>This feature is supported in wearable applications only.</p>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Widget Application</title>
+ <title>EFL Widget Application</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="container"><div id="contents"><div class="content">
-<h1>Widget Application</h1>
+<h1>EFL Widget Application</h1>
<p>You can create widget applications, which are Tizen native applications shown on the home screen. They are launched by the home screen when the user selects them in the <strong>Add Widget</strong> menu.</p>
<p>The main features of the Widget Application API include:</p>
<li>Try to avoid writing a heavy fragment shader. If the same data apply to all fragments, do not compute the data in the fragment shader but compute them at the CPU side and provide them as uniforms. On the other hand, whenever the data can be computed at the vertex shader, use it.</li>
<li>In general, the <span style="font-family: Courier New,Courier,monospace">glReadPixels()</span> function is quite slow, because it reinforces CPU-GPU synchronization, drastically decreasing the overall performance. In most cases, it is possible to obtain the desired result with the framebuffer object (FBO), avoiding the use of <span style="font-family: Courier New,Courier,monospace">glReadPixels()</span>. With FBO, you can access the pixels of the framebuffer (the output of GPU processing) through a texture object (render-to-texture). Since it uses texture data from a GPU stage to another GPU stage, CPU does not have to be synchronized. If the application must use the <span style="font-family: Courier New,Courier,monospace">glReadPixels()</span>function, use another thread to avoid blocking the main thread.</li>
<li>With FBO, various effects can be made. Consider an application requiring a number of rendering chains for making a complex effect: A framebuffer is mapped to a texture, the texture is used to render another framebuffer, the framebuffer is mapped to another texture, and so on. This enables you to create a very complex scene, but unfortunately the rendering chain cannot be parallelized. Make the rendering chains as small as possible.</li>
-<li>According to the <a href="../app_management/ui_app_n.htm#state_trans">application life-cycle</a>, the application gets the <span style="font-family: Courier New,Courier,monospace">app_pause()</span> callback when the application runs at the background. Then, you must stop calling drawcalls during the pause state.
+<li>According to the <a href="../app_management/efl_ui_app_n.htm#state_trans">application life-cycle</a>, the application gets the <span style="font-family: Courier New,Courier,monospace">app_pause()</span> callback when the application runs at the background. Then, you must stop calling drawcalls during the pause state.
<p>As presented in <a href="interactive_ui_n.htm">Interactive UI</a>, the application can control the rendering loop by using an animator internally and then stop the animator in the <span style="font-family: Courier New,Courier,monospace">app_pause()</span> callback.</p></li>
</ol>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<h2 id="bg_app" name="bg_app">New Background Application Policy</h2>
<p>Since Tizen 2.4, the application on the background goes into a suspended state.</p>
<p>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 on the background. In this case, the application can designate their background category as an allowed category to avoid going into the suspended state.</p>
-<p>For more information, and a list of background categories that allow the application to run on the background, see <a href="app_management/ui_app_n.htm#allow_bg">Allowing Applications to Run on the Background</a>.</p>
+<p>For more information, and a list of background categories that allow the application to run on the background, see <a href="app_management/efl_ui_app_n.htm#allow_bg">Allowing Applications to Run on the Background</a>.</p>
<p>You can receive an event when the background application goes to the suspended state. Pass <span style="font-family: Courier New,Courier,monospace;">APP_EVENT_SUSPENDED_STATE_CHANGED</span> as <span style="font-family: Courier New,Courier,monospace;">event_type</span> to the <span style="font-family: Courier New,Courier,monospace;">ui_app_add_event_handler()</span> or <span style="font-family: Courier New,Courier,monospace;">service_app_add_event_handler()</span> function to handle the suspended event. You must release the resources properly when your application goes to the suspended state.</p>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<ul>
<li><strong>UI Components</strong> are used to organize the application appearance. For more information, see <a href="ui_components_n.htm">UI Components</a>.</li>
-<li><strong>Camera actor</strong> determines which view of the whole virtual 3D world is rendered on the screen. By default, it is best suited for 2D applications, so you do not need to care about it in this case. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">Dali::CameraActor</a> class.</li>
+<li><strong>Camera actor</strong> determines which view of the whole virtual 3D world is rendered on the screen. By default, it is best suited for 2D applications, so you do not need to care about it in this case. For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::CameraActor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1CameraActor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1CameraActor.html">wearable</a> applications).</li>
-<li><strong>Layer</strong> provides a mechanism for overlaying groups of actors on top of each other. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">Dali::Layer</a> class.</li>
+<li><strong>Layer</strong> provides a mechanism for overlaying groups of actors on top of each other. For more information, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Layer</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Layer.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Layer.html">wearable</a> applications).</li>
</ul>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html">Dali::AlphaFunction API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1AlphaFunction.html">Dali::AlphaFunction API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">Dali::Animation API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1TimePeriod.html">Dali::TimePeriod API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_Animation" target="_blank">(DALi) Animation Sample Description</a></li>
</ul>
</div></div>
<h2 id="alpha" name="alpha">Using Alpha Functions</h2>
-<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">Dali::AlphaFunction::BuiltinFunction</a> enumeration.</p>
+<p>Alpha functions are used in animations to specify the rate of change of the animation parameter over time. This allows the animation to be, for example, accelerated, decelerated, repeated, or bounced. The built-in supported functions can be viewed in the <span style="font-family: Courier New,Courier,monospace;">Dali::AlphaFunction::BuiltinFunction</span> enumeration (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1AlphaFunction.html#aacf7780cdb2077166a3cd20a8a9faf4b">wearable</a> applications).</p>
<pre class="prettyprint">
animation.SetDefaultAlphaFunction( Dali::AlphaFunction::EASE_IN );
</pre>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">Dali::Path API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1KeyFrames.html">Dali::KeyFrames API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">Dali::Path API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<pre class="prettyprint">
path.GenerateControlPoints( 0.25f );
</pre>
-<p>Here 0.25f represents the curvature of the path you require. For more information, see the <span style="font-family: Courier New,Courier,monospace;">GenerateControlPoints()</span> function in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">Dali::Path</a> class.</p>
+<p>Here 0.25f represents the curvature of the path you require. For more information, see the <span style="font-family: Courier New,Courier,monospace;">GenerateControlPoints()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Path.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Path.html">wearable</a> applications).</p>
<p>To animate <span style="font-family: Courier New,Courier,monospace;">actor1</span> along this path, use the following function:</p>
<pre class="prettyprint">
animation.Animate( actor1, path, Vector3::ZERO );
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Button.html">Dali::Toolkit::Button API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_Button" target="_blank">(DALi) Button Sample Description</a></li>
</ul>
</div></div>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">DALi::Constraint API for Wearable Native</a></li>
</ul>
</div></div>
</div>
}
</pre>
-<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">Dali::Constraint</a> class.</p>
+<p>For more information, see the <span style="font-family: Courier New,Courier,monospace;">New()</span> function in the <span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications).</p>
<h3>Using Functors as Constraint Functions</h3>
</tr>
<tr>
<td>Need an actor to appear centered around the bottom-right corner of its parent.</td>
- <td>Use the <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ParentOrigin.html">Dali::ParentOrigin</a> and <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1AnchorPoint.html">Dali::AnchorPoint</a> namespaces.
+ <td>Use the <span style="font-family: Courier New,Courier,monospace;">Dali::ParentOrigin</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ParentOrigin.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ParentOrigin.html">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace;">Dali::AnchorPoint</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1AnchorPoint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1AnchorPoint.html">wearable</a> applications) namespaces.
<p>For more information, see <a href="actors_n.htm#position">Positioning Actors</a>.</p></td>
</tr>
<tr>
<td>Need to lay out a series of controls with various alignment requirements.</td>
- <td>Use either <span style="font-family: Courier New,Courier,monospace;">ParentOrigin</span> and <span style="font-family: Courier New,Courier,monospace;">AnchorPoint</span> settings, or the <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView</a> class.</td>
+ <td>Use either <span style="font-family: Courier New,Courier,monospace;">ParentOrigin</span> and <span style="font-family: Courier New,Courier,monospace;">AnchorPoint</span> settings, or the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TableView</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">wearable</a> applications).</td>
</tr>
<tr>
<td>Need to automatically modify the position property of one actor based on the position property of another actor that is neither a parent or a child.</td>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__dali.html">DALi API References for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API References for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>DALi is a cross-platform 3D UI Toolkit for embedded systems. Its 3D user interface engine enables you to create rich and high-performance UI applications. DALi is based on OpenGL ES 2.0, but provides a clean cross-platform C++ framework. This means that you can use high-level DALi APIs instead of accessing low-level OpenGL APIs directly.</p>
-<p>This feature is supported in mobile applications only.</p>
-
<p>When creating a DALi application, make sure you understand the following main features:</p>
<ul>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__dali.html">DALi API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>To create a 'Hello World' application with Dali:</p>
<ol>
-<li><strong>Create a DALi project:</strong>
+<li>Create a DALi project:
<ol type="a">
-<li>In the Tizen Studio menu, go to <strong>File > New > Tizen Project</strong>.
-<p>Select a template for a mobile native application and create a project using the <strong>Basic UI with DALi</strong> template. Click <strong>Finish</strong>, and your project is created at the default location. If you want to change the location, uncheck <strong>Use default location</strong> and set a new location. For more information, see <a href="../../../../../org.tizen.training/html/native/process/app_dev_process_n.htm#creating">Creating the Application Project</a>.</p>
+<li>In the Tizen Studio menu, go to <strong>File > New > Tizen Project</strong>.</li>
+<li>In the Project Wizard, select <strong>Template > Mobile or Wearable > Native Application > Basic UI with DALi</strong>.</li>
+<li>Click <strong>Finish</strong>, and your project is created at the default location. If you want to change the location, uncheck <strong>Use default location</strong> and set a new location. For more information, see <a href="../../../../../org.tizen.training/html/native/process/app_dev_process_n.htm#creating">Creating the Application Project</a>.
<p align="center"><img alt="Create a DALi project" src="../../../images/tizen_project_dali.png" /></p>
</li>
-<li>The new project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio. If you open the <span style="font-family: Courier New,Courier,monospace;">src/basicdaliapplication.cpp</span> file, you can see the source code of the basic DALi application:
+<li>The new project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio. If you open the <span style="font-family: Courier New,Courier,monospace;">src/basicuiwithdali.cpp</span> file, you can see the source code of the basic DALi application:
<pre class="prettyprint">
#include <dali-toolkit/dali-toolkit.h>
stage.SetBackgroundColor( Color::WHITE );
TextLabel textLabel = TextLabel::New( "Hello World" );
+ textLabel.SetSize( stage.GetSize() );
textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
- textLabel.SetName( "hello-world-label" );
+ textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+ textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
stage.Add( textLabel );
// Connect to touch and key event signals
- stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
+ stage.GetRootLayer().TouchSignal().Connect( this, &HelloWorldExample::OnTouch );
stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
}
- bool OnTouch( Actor actor, const TouchEvent& event )
+ bool OnTouch( Actor actor, const TouchData& touch )
{
// Quit the application
mApplication.Quit();
</li>
</ol>
</li>
-<li><strong>Initialize the DALi application:</strong>
+<li>Initialize the DALi application:
<ul><li>
<p>To use the DALi APIs, you only need to include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> file. It includes the header files of DALi Core and DALi Adaptor as well as DALi Toolkit.</p>
</li>
<li>
-<p>The <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">Dali::Application</a> class initializes and sets up DALi.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Application.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Application.html">wearable</a> applications) initializes and sets up DALi.</p>
<p>Create a <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance:</p>
</pre></li>
<li>
<p>Several signals can be connected to keep you informed when certain platform-related activities occur, and ensure that, upon system events, DALi is called in a thread-safe manner.</p>
-<p>To manage signal connection safely, DALi provides the <
a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">Dali::ConnectionTracker</a> class. A typical way for starting a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals (for more information, see <a href="event_handling_n.htm#automatic">Automatic Connection Management</a>). The <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample</span> class is used in other code samples in the Tizen DALi documentation.</p>
+<p>To manage signal connection safely, DALi provides the <
span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). A typical way for starting a DALi application is to create a class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class and use its member functions as callback functions for DALi signals (for more information, see <a href="event_handling_n.htm#automatic">Automatic Connection Management</a>). The <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample</span> class is used in other code samples in the Tizen DALi documentation.</p>
<p>After getting the initialized signal from the <span style="font-family: Courier New,Courier,monospace;">Dali::Application</span> instance, you can use the DALi APIs for building the scene graph. Connect the <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::Create()</span> callback to the <span style="font-family: Courier New,Courier,monospace;">DALi::Application::InitSignal()</span> function:</p>
</pre></li></ul>
</li>
-<li><strong>Create an actor and add it to the stage:</strong>
+<li>Create an actor and add it to the stage:
-<p>The <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel</a> UI component renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> UI component (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">wearable</a> applications) renders a short text string. To display the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component, add it to a stage. The <span style="font-family: Courier New,Courier,monospace;">stage</span> instance is a singleton object (the only instance of its class during the lifetime of the program), so you can get it using a static function.</p>
<pre class="prettyprint">
Stage stage = Stage::GetCurrent();
stage.SetBackgroundColor( Color::WHITE );
TextLabel textLabel = TextLabel::New( "Hello World" );
+textLabel.SetSize( stage.GetSize() );
textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-textLabel.SetName( "hello-world-label" );
+textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
stage.Add( textLabel );
</pre>
<p>The above code additionally sets the background color of the <span style="font-family: Courier New,Courier,monospace;">stage</span> and the anchor point, a point defining a position of a child actor from its parent, of the <span style="font-family: Courier New,Courier,monospace;">textLabel</span>. The application stores the actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Even if the <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> component is removed from the stage, it remains alive through the reference.</p>
</li>
-<li><strong>Connect to input signals:</strong>
+<li>Connect to input signals:
<p>The application can handle touch and key event signals as follows:</p>
<pre class="prettyprint">
-stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
+stage.GetRootLayer().TouchSignal().Connect( this, &HelloWorldExample::OnTouch );
stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
</pre>
<p>Any key inputs and touches on the stage are handled by 2 callback functions, <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnKeyEvent</span> and <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span>.</p>
-<p>Note that the first parameter of the <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span> callback (<span style="font-family: Courier New,Courier,monospace;">actor</span>) is passed by a value, not by a reference or a pointer. You can simply pass instances of most DALi classes by value, when the class inherits from the <
a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle</a> class. This is due to the <a href="handle_n.htm">handle/body pattern</a> widely used in DALi.</p>
+<p>Note that the first parameter of the <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span> callback (<span style="font-family: Courier New,Courier,monospace;">actor</span>) is passed by a value, not by a reference or a pointer. You can simply pass instances of most DALi classes by value, when the class inherits from the <
span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications). This is due to the <a href="handle_n.htm">handle/body pattern</a> widely used in DALi.</p>
<pre class="prettyprint">
-bool OnTouch( Actor actor, const TouchEvent& event )
+bool OnTouch( Actor actor, const TouchData& touch )
</pre>
</li>
-<li><strong>Start the application main loop:</strong>
+<li>Start the application main loop:
<p>To run the application, start its main loop. This ensures that images are displayed, and events as well as signals are dispatched and captured.</p>
<pre class="prettyprint">
</li>
-<li><strong>Build the DALi application:</strong>
+<li>Build the DALi application:
<p>To build your application, select <strong>Project > Build Project</strong> or press <strong>F10</strong> in the Tizen Studio.</p>
<p>The Tizen Studio automatically packages the project after building. Note that you need to register your certificate when building for the first time. For more information, see <a href="../../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a> and <a href="../../../../../org.tizen.training/html/native/process/building_app_n.htm">Building Applications</a>.</p>
</li>
-<li><strong>Run the DALi application:</strong>
+<li>Run the DALi application:
<p>To run your application, select <strong>Run > Run</strong> or press <strong>Ctrl+F11</strong> in the Tizen Studio.</p>
<p>For more information, see <a href="../../../../../org.tizen.training/html/native/process/running_app_n.htm">Running Applications</a>.</p>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#touch">Touch Events</a></li>
+ <li><a href="#touch">Touch Data</a></li>
<li><a href="#key">Key Events</a></li>
<li><a href="#input">Input Signals</a></li>
<li><a href="#gesture">Gestures</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">Dali::LongPressGestureDetector API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">Dali::PanGestureDetector API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">Dali::PinchGestureDetector API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Signal.html">Dali::Signal API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">Dali::TapGestureDetector API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">Dali::Toolkit::KeyboardFocusManager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li>Many-to-many relationship: 1 slot can connect to many signals and 1 signal can be connected to many slots, for example</li>
</ul>
-<h2 id="touch" name="touch">Touch Events</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides the <span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span> function to inform the application that a user touches the actor. It is defined as follows:</p>
+<h2 id="touch" name="touch">Touch Data</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">wearable</a> applications) provides the <span style="font-family: Courier New,Courier,monospace;">TouchSignal()</span> function to inform the application that a user touches the actor. It is defined as follows:</p>
<pre class="prettyprint">
-typedef Signal<bool ( Actor, const TouchEvent& )> TouchSignalType;
-TouchSignalType& TouchedSignal();</pre>
+typedef Signal<bool ( Actor, const TouchData& )> TouchDataSignalType;
+TouchDataSignalType& TouchSignal();</pre>
-<p>This means that a slot of the following type can be connected to the return value of the <span style="font-family: Courier New,Courier,monospace;">Actor::TouchedSignal()</span> function:</p>
+<p>This means that a slot of the following type can be connected to the return value of the <span style="font-family: Courier New,Courier,monospace;">Actor::TouchSignal()</span> function:</p>
<pre class="prettyprint">
-bool YourCallbackName( Actor actor, const TouchEvent& event );
+bool YourCallbackName( Actor actor, const TouchData& data );
</pre>
<p>The return value <span style="font-family: Courier New,Courier,monospace;">true</span> indicates that the touch event must be consumed. Otherwise, the signal is emitted on the next sensitive parent of the actor. Note that a callback function signature varies depending on its corresponding signal type. Some signal types do not have a return value in their callback functions.</p>
<p>Each point on the screen being or having been touched is represented by the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchPoint</span> object. This object stores information about the state of the touch point (such as down, up, or motion.) and the coordinates of the touch.</p>
-<p>A collection of touch points at a specific moment in time is collated into the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> object. When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>
+<p>A collection of touch points at a specific moment in time is collated into the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> object (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TouchData.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TouchData.html">wearable</a> applications). When a multi-touch event occurs, each touch point represents the points that are currently being touched or the points where touch has stopped.</p>
<p>The following example shows how a connection to a touch event signal can be established:</p>
Stage::GetCurrent().Add( control );
// Connect to a touch signal emitted by the control
- control.TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
+ control.TouchSignal().Connect( this, &HelloWorldExample::OnTouch );
}
-bool HelloWorldExample::OnTouch( Actor actor, const TouchEvent& event )
+bool HelloWorldExample::OnTouch( Actor actor, TouchData& touch )
{
- bool handled = false;
- unsigned int pointCount = event.GetPointCount();
+ const std::size_t pointCount = touch.GetPointCount();
if( pointCount == 1 )
{
- if( event.GetPoint( 0 ).state == TouchPoint::Down )
+ // Single touch event
+
+ // Get touch state of the primary point
+ PointState::Type pointState = touch.GetState( 0 );
+ if( pointState == PointState::DOWN )
{
- // Act on the first touch on screen
- handled = true;
+ // User has just pressed on the device
}
- }
- else if( pointCount > 1 )
- {
- if( event.GetPoint( pointCount-1 ).state == TouchPoint::Down )
+ else if( pointState == PointState::UP )
{
- // Act on a multi-touch on screen
- handled = true;
+ // User has just released their finger from the device
}
}
- // true if the touch has been handled, false otherwise
- return handled;
+ else
+ {
+ // Multi-touch event
+ }
+
+ return true; // Touch handled
}
</pre>
<p>If a parent and child actor both connect to the touch signal, the touch event is first offered to the child. If it is consumed by the child, the parent is not informed.</p>
+<p>For more information on handling touch event data, see <a href="touchdata_n.htm">Touch Data</a>.</p>
+
<h2 id="key" name="key">Key Events</h2>
<p>The following example shows how to handle key events on the stage:</p>
<p>The basic DALi input signals are as follows:</p>
<ul>
-<li><strong>Touched signal</strong> notifies you of a screen touch or mouse click</li>
+<li><strong>Touch signal</strong> notifies you of a screen touch or mouse click</li>
<li><strong>Hovered signal</strong> notifies you of mouse hovering</li>
<li><strong>Wheel event signal</strong> notifies you of wheel rolling (for example, mouse wheel)</li>
<li><strong>Key event signal</strong> notifies you of a keyboard input</li>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TouchSignal()</span></td>
<td>Emitted when touch input is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Actor actor, const TouchEvent& event );</span></p></td>
+ <p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Actor actor, const TouchData& touch );</span></p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
</li>
<li>
-<span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span>
+<span style="font-family: Courier New,Courier,monospace;">Dali::Stage</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">wearable</a> applications)
<table>
<caption>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal()</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TouchSignal()</span></td>
<td>Emitted when touch input is received.
- <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( const TouchEvent& event )</span></p></td>
+ <p>Callback: <span style="font-family: Courier New,Courier,monospace;">void YourCallbackName( const TouchData& data )</span></p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">HoveredSignal()</span></td>
</li>
<li>
-<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span>
+<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications)
<table>
<caption>
<p>Callback: <span style="font-family: Courier New,Courier,monospace;">bool YourCallbackName( Control control );</span></p></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">TouchedSignal(), HoveredSignal(), KeyEventSignal()</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TouchSignal(), HoveredSignal(), KeyEventSignal()</span></td>
<td>Same as the ones supported by <span style="font-family: Courier New,Courier,monospace;">Actor</span>.
</td>
</tr>
</li>
<li>
-<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span>
+<span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1KeyboardFocusManager.html">wearable</a> applications)
<table>
<caption>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::AccessibilityFocusManager</span> </li>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> </li>
</ul>
-<p>For the signals of each class and their usage, see the API Reference.</p>
+<p>For the signals of each class and their usage, see the DALi API Reference (in <a href="../../../../../org.tizen.native.mobile.apireference/group__dali.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__dali.html">wearable</a> applications).</p>
<h2 id="gesture" name="gesture">Gestures</h2>
-<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <span style="font-family: Courier New,Courier,monospace;">Dali::GestureDetector</span> class analyzes a stream of touch events and attempts to determine the intention of the user. </p>
+<p>Gesture is a user-friendly high-level event produced from a stream of touch events. The <span style="font-family: Courier New,Courier,monospace;">Dali::GestureDetector</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1GestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1GestureDetector.html">wearable</a> applications) analyzes a stream of touch events and attempts to determine the intention of the user. </p>
<p>If an actor is attached to a gesture detector and the detector recognizes a user intention (detects a predefined pattern in a stream of touch events), the actor emits a detected gesture signal to the application.</p>
<p>DALi currently supports following gesture detectors:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> detects when the user does a long-press action.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> detects when the user does a tap action.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> detects when the user moves 2 fingers towards or away from each other.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> detects when the user moves one or more fingers in the same direction.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::LongPressGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1LongPressGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1LongPressGestureDetector.html">wearable</a> applications) detects when the user does a long-press action.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::TapGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TapGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TapGestureDetector.html">wearable</a> applications) detects when the user does a tap action.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PinchGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1PinchGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PinchGestureDetector.html">wearable</a> applications) detects when the user moves 2 fingers towards or away from each other.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::PanGestureDetector</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1PanGestureDetector.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1PanGestureDetector.html">wearable</a> applications) detects when the user moves one or more fingers in the same direction.</li>
</ul>
<p>The following example shows how an application can be notified of a pan gesture:</p>
<p>If you have a pair of a connected signal (for example, a button clicked signal) and a slot (for example, a toolbar object having the callback for the signal), and one of them (the button or the toolbar) is deleted without any notification, the application crashes when the signal is emitted or the slot tries to disconnect the signal.</p>
-<p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. It tracks connections between signals and slots, and performs an automatic disconnection when either the signal or slot is deleted.</p>
+<p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). It tracks connections between signals and slots, and performs an automatic disconnection when either the signal or slot is deleted.</p>
<p>Due to this mechanism, all the DALi sample codes start with a controller class derived from the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class. This is a safe and typical way of making a DALi application. You can, of course, create other structures using the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> class.</p>
-
-
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>FlexContainer</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating a Flexbox Layout with FlexContainer</a></li>
+ <li><a href="#property">Modifying FlexContainer Properties</a></li>
+ <li><a href="#childproperty">Modifying FlexItem Properties</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1FlexContainer.html">Dali::Toolkit::FlexContainer API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1FlexContainer.html">Dali::Toolkit::FlexContainer API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>FlexContainer</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::FlexContainer</span> class provides a control that implements a subset of the <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module Level 1 specification (defined by W3C)</a>.</p>
+
+<p>The flexible box (flexbox) is a CSS3 Web layout model, which allows responsive elements within a container, automatically arranged to different size screens or devices. The following figure illustrates the various directions and terms applied to a flex container with the "flex direction" defined as "row".</p>
+
+<p class="figure">Figure: Flex container terms</p>
+ <p align="center"><img alt="Flex container terms" src="../../../images/dali_flexcontainer1.png"/></p>
+
+
+<h2 id="create">Creating a Flexbox Layout with FlexContainer</h2>
+
+<p>The following basic example shows how to create a gallery-like flexbox layout using the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::FlexContainer</span> object.</p>
+
+<p class="figure">Figure: Flex container example</p>
+<p align="center"><img alt="Flex container example" src="../../../images/dali_flexcontainer_demo.png"/></p>
+
+<ol>
+<li>Create a flex container as the whole view and set its resize policy to fill its parent (the stage):
+
+<pre class="prettyprint">
+// Create the main flex container
+FlexContainer flexContainer = FlexContainer::New();
+flexContainer.SetParentOrigin( ParentOrigin::TOP_LEFT );
+flexContainer.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+flexContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+// Set the background color to be white
+flexContainer.SetBackgroundColor( Color::WHITE );
+// Add the container to the stage
+Stage::GetCurrent().Add( flexContainer );
+</pre>
+</li>
+
+<li>Set the flex direction of the main container to "column" to make the toolbar and the actual content display vertically:
+
+<pre class="prettyprint">
+// Display toolbar and content vertically
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN );
+</pre>
+</li>
+
+<li>Create a new flex container as the toolbar and add it to the main container. Because the flex direction in the main container is column, the toolbar is arranged at the top of the main container.
+
+<pre class="prettyprint">
+// Create the toolbar
+FlexContainer toolBar = FlexContainer::New();
+toolBar.SetParentOrigin( ParentOrigin::TOP_LEFT );
+toolBar.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+// Set the background color for the toolbar
+toolBar.SetBackgroundColor( Color::CYAN );
+// Add it to the main container
+flexContainer.Add( toolBar );
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN );
+</pre>
+</li>
+
+<li>To make the buttons and title display horizontally and be vertically aligned to the center of the toolbar, set the toolbar flex direction to "row" and set its <span style="font-family: Courier New,Courier,monospace;">ALIGN_ITEMS</span> property to center.
+<p>Set the <span style="font-family: Courier New,Courier,monospace;">FLEX</span> property to make the toolbar and the actual content share the height of the main container, so that the toolbar occupies 10 percent of the whole vertical space and the content occupies the rest of the vertical space.</p>
+
+<pre class="prettyprint">
+// Display toolbar items horizontally
+toolBar.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
+// Align toolbar items vertically center
+toolBar.SetProperty( FlexContainer::Property::ALIGN_ITEMS, FlexContainer::ALIGN_CENTER );
+// 10 percent of available space in the cross axis
+toolBar.SetProperty( FlexContainer::ChildProperty::FLEX, 0.1f );
+</pre>
+</li>
+
+<li>Create a third flex container as the content area to display the image. It is displayed at the bottom of the main container.
+<p>Make the item inside the content area container horizontally and vertically centered, so that the image is always at the center of the content area.</p>
+
+<pre class="prettyprint">
+// Create the content area
+FlexContainer content = FlexContainer::New();
+content.SetParentOrigin( ParentOrigin::TOP_LEFT );
+content.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+// Display items horizontally
+content.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
+// Align items horizontally center
+content.SetProperty( FlexContainer::Property::JUSTIFY_CONTENT, FlexContainer::JUSTIFY_CENTER );
+// Align items vertically center
+content.SetProperty( FlexContainer::Property::ALIGN_ITEMS, FlexContainer::ALIGN_CENTER );
+// 90 percent of available space in the cross axis
+content.SetProperty( FlexContainer::ChildProperty::FLEX, 0.9f );
+// Add it to the main container
+flexContainer.Add( content );
+</pre>
+</li>
+
+<li>Add items to the toolbar.
+<p>The toolbar has 1 button on the left, 1 button on the right, and a title always in the center (regardless of the screen size). To achieve that, make the title flexible so that it automatically takes all the available horizontal space left. To make the layout look nicer, also add some space around the items.</p>
+
+<pre class="prettyprint">
+// Add a button to the left of the toolbar
+PushButton prevButton = PushButton::New();
+prevButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+prevButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+// Minimum size the button must keep
+prevButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) );
+// Set 10 pixel margin around the button
+prevButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+toolBar.Add( prevButton );
+// Set the button text
+Property::Map labelMap;
+labelMap["text"] = "Prev";
+labelMap["textColor"] = Color::BLACK;
+prevButton.SetProperty( Button::Property::LABEL, labelMap );
+// Add a title to the center of the toolbar
+TextLabel title = TextLabel::New( "Gallery" );
+title.SetParentOrigin( ParentOrigin::TOP_LEFT );
+title.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+title.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+title.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+// Take all the available space left apart from the 2 buttons
+title.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f );
+// Set 10 pixel margin around the title
+title.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+toolBar.Add( title );
+// Add a button to the right of the toolbar
+PushButton nextButton = PushButton::New();
+nextButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+nextButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+// Minimum size the button must keep
+nextButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) );
+// Set 10 pixel margin around the button
+nextButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+toolBar.Add( nextButton );
+// Set the button text
+labelMap["text"] = "Next";
+nextButton.SetProperty( Button::Property::LABEL, labelMap );
+</pre>
+
+<p>The above settings are very convenient when running the application on different size devices or when changing the screen orientation, because the toolbar expands or shrinks based on the available space and the title is always at the center, keeping the layout of the toolbar the same.</p>
+</li>
+
+<li>Add the image to the content area:
+
+<pre class="prettyprint">
+// Add an image to the center of the content area
+ImageView imageView = ImageView::New( "image.jpg" );
+imageView.SetParentOrigin( ParentOrigin::TOP_LEFT );
+imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+content.Add( imageView );
+</pre>
+</li>
+</ol>
+
+
+<h2 id="property">Modifying FlexContainer Properties</h2>
+
+<p>You can modify the flex container appearance and behavior through the following properties:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">CONTENT_DIRECTION</span>
+
+<p>This property specifies the primary direction in which content is ordered on a line.</p>
+
+<p class="figure">Figure: CONTENT_DIRECTION LTR</p>
+ <p align="center"><img alt="CONTENT_DIRECTION LTR" src="../../../images/dali_flexcontainer_content-direction-ltr.png"/></p>
+
+<p class="figure">Figure: CONTENT_DIRECTION RTL</p>
+ <p align="center"><img alt="CONTENT_DIRECTION RTL" src="../../../images/dali_flexcontainer_content-direction-rtl.png"/></p>
+
+<table>
+<caption>Table: CONTENT_DIRECTION values</caption>
+ <tbody>
+ <tr>
+ <th>Property value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INHERIT</span></td>
+ <td>Inherits the parent's direction</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">LTR</span></td>
+ <td>From left to right</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">RTL</span></td>
+ <td>From right to left</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">FLEX_DIRECTION</span>
+
+<p>This property specifies the direction of the main axis, which determines the direction in which the flex items are laid out.</p>
+
+<p class="figure">Figure: FLEX_DIRECTION</p>
+ <p align="center"><img alt="FLEX_DIRECTION" src="../../../images/dali_flexcontainer_flex-direction.png"/></p>
+
+<table>
+<caption>Table: FLEX_DIRECTION values</caption>
+ <tbody>
+ <tr>
+ <th>Property value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">COLUMN</span></td>
+ <td>Flex items are laid out vertically as a column</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">COLUMN_REVERSE</span></td>
+ <td>Flex items are laid out vertically as a column, but in a reverse order</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ROW</span></td>
+ <td>Flex items are laid out horizontally as a row</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ROW_REVERSE</span></td>
+ <td>Flex items are laid out horizontally as a row, but in a reverse order</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">FLEX_WRAP</span>
+
+<p>This property specifies whether the flex items must wrap if there is not enough room for them on 1 flex line.</p>
+
+<p class="figure">Figure: FLEX_WRAP</p>
+ <p align="center"><img alt="FLEX_WRAP" src="../../../images/dali_flexcontainer_flex-wrap.png"/></p>
+
+<table>
+<caption>Table: FLEX_WRAP values</caption>
+ <tbody>
+ <tr>
+ <th>Property value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">NO_WRAP</span></td>
+ <td>Flex items laid out in a single line (shrunk to fit the flex container along the main axis)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">WRAP</span></td>
+ <td>Flex items laid out in multiple lines, if needed</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_CONTENT</span>
+
+<p>This property specifies the alignment of flex items when they do not use all available space on the main axis.</p>
+
+<p class="figure">Figure: JUSTIFY_CONTENT</p>
+ <p align="center"><img alt="JUSTIFY_CONTENT" src="../../../images/dali_flexcontainer_justify-content.png"/></p>
+
+<table>
+<caption>Table: JUSTIFY_CONTENT values</caption>
+ <tbody>
+ <tr>
+ <th>Property value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_FLEX_START</span></td>
+ <td>Items are positioned at the beginning of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_CENTER</span></td>
+ <td>Items are positioned at the center of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_FLEX_END</span></td>
+ <td>Items are positioned at the end of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_SPACE_BETWEEN</span></td>
+ <td>Items are positioned with equal space between the lines</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">JUSTIFY_SPACE_AROUND</span></td>
+ <td>Items are positioned with equal space before, between, and after the lines</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace;">ALIGN_ITEMS</span>
+
+<p>This property specifies the alignment of flex items when they do not use all available space on the cross axis.</p>
+
+<p class="figure">Figure: ALIGN_ITEMS</p>
+ <p align="center"><img alt="ALIGN_ITEMS" src="../../../images/dali_flexcontainer_align-items.png"/></p>
+
+<table>
+<caption>Table: ALIGN_ITEMS values</caption>
+ <tbody>
+ <tr>
+ <th>Property value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_START</span></td>
+ <td>Items are aligned at the beginning of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_CENTER</span></td>
+ <td>Items are aligned at the center of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_END</span></td>
+ <td>Items are aligned at the end of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_STRETCH</span></td>
+ <td>Items are stretched to fit the container</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ALIGN_CONTENT</span>
+
+<p>This property specifies the alignment of flex lines when they do not use all available space on the cross axis, so only works when there are multiple lines.</p>
+
+<p class="figure">Figure: ALIGN_CONTENT</p>
+ <p align="center"><img alt="ALIGN_CONTENT" src="../../../images/dali_flexcontainer_align-content.png"/></p>
+
+<table>
+<caption>Table: ALIGN_CONTENT values</caption>
+ <tbody>
+ <tr>
+ <th>Property value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_START</span></td>
+ <td>Items are aligned at the beginning of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_CENTER</span></td>
+ <td>Items are aligned at the center of the container</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ALIGN_FLEX_END</span></td>
+ <td>Items are aligned at the end of the container</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+</ul>
+
+<h2 id="childproperty">Modifying FlexItem Properties</h2>
+
+<p>The flex item properties are non-animatable properties registered dynamically to each child that is to be added to the flex container, and once added, their values cannot be changed. When an actor is added to the flex container, these properties are checked to decide how to lay out the actor inside the flex container.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">FLEX</span>
+
+<p>By default, the items in the flex container are not flexible. If set, this property makes the item flexible, which means the item can alter its width and height in order to receive the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes are proportional to the specified flex factor. Flex items do not shrink below their minimum size (if set using the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::SetMinimumSize()</span> function).</p>
+
+<p class="figure">Figure: FLEX</p>
+<p align="center"><img alt="FLEX" src="../../../images/dali_flexcontainer_flex.png"/></p>
+
+<p>The following example shows how the items achieve the proportion of free space as illustrated in the above figure:</p>
+
+<pre class="prettyprint">
+// Create the flex container
+FlexContainer flexContainer = FlexContainer::New();
+// Set the flex direction to lay out the items horizontally
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
+
+// Create flex items and set the proportion
+Control item1 = Control::New();
+item1.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f );
+flexContainer.Add( item1 );
+Control item2 = Control::New();
+item2.SetProperty( FlexContainer::ChildProperty::FLEX, 3.0f );
+flexContainer.Add( item2 );
+Control item3 = Control::New();
+item3.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f );
+flexContainer.Add( item3 );
+Control item4 = Control::New();
+item4.SetProperty( FlexContainer::ChildProperty::FLEX, 2.0f );
+flexContainer.Add( item4 );
+Control item5 = Control::New();
+item5.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f );
+flexContainer.Add( item5 );
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ALIGN_SELF</span>
+
+<p>This property specifies how the item aligns along the cross axis. If set, this property overrides the default alignment for all items defined by the container's <span style="font-family: Courier New,Courier,monospace;">ALIGN_ITEMS</span> property.</p>
+<p class="figure">Figure: ALIGN_SELF</p>
+<p align="center"><img alt="ALIGN_SELF" src="../../../images/dali_flexcontainer_align-self.png"/></p>
+
+<p>The following example shows how the items achieve the alignment on the cross axis as illustrated in the above figure:</p>
+
+<pre class="prettyprint">
+// Create the flex container
+FlexContainer flexContainer = FlexContainer::New();
+// Set the flex direction to lay out the items horizontally
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
+// Set the items to be aligned at the beginning of the container on the cross axis by default
+flexContainer.SetProperty( FlexContainer::Property::ALIGN_ITEMS, FlexContainer::ALIGN_FLEX_START );
+
+// Create flex items and add them to the flex container
+Control item1 = Control::New();
+// Align item1 at the center of the container
+item1.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF, FlexContainer::ALIGN_CENTER );
+flexContainer.Add( item1 );
+Control item2 = Control::New();
+// item2 is aligned at the beginning of the container
+flexContainer.Add( item2 );
+Control item3 = Control::New();
+// Align item3 at the bottom of the container
+item3.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF, FlexContainer::ALIGN_FLEX_END );
+flexContainer.Add( item3 );
+Control item4 = Control::New();
+// item4 is aligned at the beginning of the container
+flexContainer.Add( item4 );
+</pre>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace;">FLEX_MARGIN</span>
+
+<p>Each flex item inside the flex container is treated as a box (in CSS term) that is made up of:</p>
+
+<ul>
+<li>Content: The content of the item
+</li>
+<li>Padding: The space around the content (inside the border) of the item
+</li>
+<li>Border: The border that goes around the padding and the content of the item
+</li>
+<li>Flex margin: The space outside the border
+</li>
+</ul>
+<p class="figure">Figure: FLEX_MARGIN</p>
+<p align="center"><img alt="FLEX_MARGIN" src="../../../images/dali_flexcontainer_flex-margin.png"/></p>
+
+<p>In DALi, the size of the flex item = content size + padding + border. The flex margin specifies the space around the flex item.</p>
+
+<p>The following example shows how to add some space around the items.</p>
+
+<pre class="prettyprint">
+// Create the flex container
+FlexContainer flexContainer = FlexContainer::New();
+// Create flex item
+Control item = Control::New();
+// Add the margin around the item
+item.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+// Add the item to the container
+flexContainer.Add( item );
+</pre>
+</li>
+</ul>
+
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>DALi widely adopts the handle/body pattern (also known as the pimpl pattern), which separates the implementation details (body class) from its interface (handle class).</p>
-<p>The <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle</a> is a base class for handle classes in DALi. It additionally provides smart-pointer semantics, which manage internal objects with reference counts. Most of the classes in the DALi public API are handle classes, which means they inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BaseHandle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">wearable</a> applications) is a base class for handle classes in DALi. It additionally provides smart-pointer semantics, which manage internal objects with reference counts. Most of the classes in the DALi public API are handle classes, which means they inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> class.</p>
<p>The handle/body pattern structure is beneficial for both DALi users and developers:</p>
<ul>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__dali__core__images.html">Dali::Images API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__dali__toolkit__controls__image__view.html">Dali::ImageView API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali__core__images.html">Dali::Images API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali__toolkit__controls__image__view.html">Dali::ImageView API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_ImageView" target="_blank">(DALi) ImageView Sample Description</a></li>
</ul>
</div></div>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Mobile Native</a></li>
- <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemFactory.html">Dali::Toolkit::ItemFactory API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemLayout.html">Dali::Toolkit::ItemLayout API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Toolkit_1_1ItemRange.html">Dali::Toolkit::ItemRange API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ItemView.html">Dali::Toolkit::ItemView API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_ItemView" target="_blank">(DALi) ItemView Sample Description</a></li>
</ul>
</div></div>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>DALi provides rule-based layout management (size negotiation), which is used to allocate the actor sizes on the stage based on the dependency rules between the actors.</p>
<h2 id="dimension" name="dimension">Dimensions</h2>
-<p>The notion of width and height is generalized into a concept of a dimension. Several functions take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">Dali::Dimension::Type</a> enum specifies the available dimensions as bit fields:</p>
+<p>The notion of width and height is generalized into a concept of a dimension. Several functions take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dali::Dimension::Type</span> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">wearable</a> applications) specifies the available dimensions as bit fields:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>
<h2 id="resize" name="resize">Resize Policies</h2>
-<p>The <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">Dali::ResizePolicy::Type</a> enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::ResizePolicy::Type</span> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1ResizePolicy.html#a8c47ec1e0b9c73e0fa8e40cfdd99276a">wearable</a> applications) specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>
<table>
<caption>
<h3>Adjusting the Negotiated Size</h3>
-<p>When an actor must maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SetSizeScalePolicy()</span> function with the <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">Dali::SizeScalePolicy::Type</a> enum. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>
+<p>When an actor must maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SetSizeScalePolicy()</span> function with the <span style="font-family: Courier New,Courier,monospace;">Dali::SizeScalePolicy::Type</span> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1SizeScalePolicy.html#affa6f549dbc4400ff47af52b1675a6af">wearable</a> applications). This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>
<p>You can use the following resize policies:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Model3dView</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating a Model3dView</a></li>
+ <li><a href="#property">Modifying Model3dView Properties</a></li>
+ <li><a href="#model">Specifying the Illumination Model</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Model3dView.html">Dali::Toolkit::Model3dView API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Model3dView.html">Dali::Toolkit::Model3dView API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Model3dView</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Model3dView</span> is a control for displaying static 3D content. It is capable of reading <span style="font-family: Courier New,Courier,monospace;">.obj</span> and <span style="font-family: Courier New,Courier,monospace;">.mtl</span> files, and up to 3 textures, with a single light and 3 simple illumination types.</p>
+
+<p>The OBJ or <span style="font-family: Courier New,Courier,monospace;">.obj</span> (object) file is a geometry definition file format and the MTL or <span style="font-family: Courier New,Courier,monospace;">.mtl</span> (material) file contains one or more material definitions, each of which includes the color, texture, and reflection map of individual materials.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Model3dView</span> control automatically scales the loaded geometry to fit within its size boundary.</p>
+
+<h2 id="create">Creating a Model3dView</h2>
+
+<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Model3dView</span> object:</p>
+
+<pre class="prettyprint">
+// You must define the path to the geometry and material files, and the images directory
+Model3dView model3dView = Model3dView::New( MODEL_FILE, MATERIAL_FILE, IMAGE_PATH );
+model3dView.SetParentOrigin( ParentOrigin::CENTER );
+model3dView.SetAnchorPoint( AnchorPoint::CENTER );
+model3dView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+Stage::GetCurrent().Add( model3dView );
+</pre>
+
+
+<h2 id="property">Modifying Model3dView Properties</h2>
+
+<p>You can modify the <span style="font-family: Courier New,Courier,monospace;">Model3dView</span> appearance and behavior through its properties. To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The resource properties require absolute references as their paths. However, the root resource path for your application can be obtained through the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function of the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications), and relative paths can be appended to that root path. If you want to use relative paths, you must specify them in your build files.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The following table lists the available <span style="font-family: Courier New,Courier,monospace;">Model3dView</span> properties.</p>
+
+<table>
+ <caption>Table: Model3dView properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>Type</th>
+ <th>Descriptions</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GEOMETRY_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Location of the geometry resource (the OBJ file)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MATERIAL_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Location of the material resource (the MTL file) to render the object with a material</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">IMAGES_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Location of the images directory</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ILLUMINATION_TYPE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td>Type of illumination</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXTURE0_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Path to the first texture (diffuse texture)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXTURE1_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Path to the second texture (normal map)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXTURE2_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Path to the third texture (gloss texture)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">LIGHT_POSITION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector3</span></td>
+ <td>Coordinates of the light</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The MTL material file references the texture files using a relative path. The <span style="font-family: Courier New,Courier,monospace;">IMAGES_URL</span> property is used to define the location of the root of this path. The textures are set automatically when the material URL is loaded.</p>
+
+<h2 id="model">Specifying the Illumination Model</h2>
+
+<p>Illumination models are used to calculate the intensity of light that is reflected at a given point on a surface. The diffuse reflection is the reflection of light from a surface such that an incident ray is reflected at many angles rather than at just one angle as in the case of specular reflection.</p>
+
+<p>The following table illustrates the available illumination models.</p>
+
+<table>
+ <caption>
+ Table: Available illumination models</caption>
+ <tbody>
+ <tr>
+ <th>Illumination type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">DIFFUSE</span></td>
+ <td>Render the model with simple lighting using the actor color</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_TEXTURE</span></td>
+ <td>Render the model with specular highlighting on the supplied diffuse and gloss textures</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_NORMAL_MAP</span></td>
+ <td>Render the model with specular highlighting with the supplied diffuse, gloss, and normal map textures</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<p>Each of the illumination models takes account of the light position, which can be specified using the <span style="font-family: Courier New,Courier,monospace;">Model3dView::Property::LIGHT_POSITION</span> property. To position the light in front of the 3D model, give it a positive Z value.</p>
+
+<p>The following figure illustrates the illumination models: <span style="font-family: Courier New,Courier,monospace;">DIFFUSE</span> (top left), <span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_TEXTURE</span> (top right), and <span style="font-family: Courier New,Courier,monospace;">DIFFUSE_WITH_NORMAL_MAP</span> (bottom).</p>
+
+<p class="figure">Figure: Illumination models</p>
+<p align="center"><img alt="DIFFUSE model" src="../../../images/dali_model1.png"/> <img alt="DIFFUSE_WITH_TEXTURE model" src="../../../images/dali_model2.png"/></p>
+<p align="center"><img alt="DIFFUSE_WITH_NORMAL_MAP model" src="../../../images/dali_model3.png"/></p>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">DALi::Handle API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">DALi::Handle API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Handle API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Property.html">Dali::Property API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">Dali::Handle API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Property.html">Dali::Property API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The difference between properties and ordinary C++ member variables is that a property can be dynamically added to or removed from an existing object at runtime, enabling more flexible, script-like programming with DALi.</p>
-<p>The <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">Dali::Handle</a> class provides functions to manage properties. Because of this, the DALi classes that inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (most of classes that you use) have a number of predefined properties and can have any number of user-defined custom properties.
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Handle.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">wearable</a> applications) provides functions to manage properties. Because of this, the DALi classes that inherit from the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class (most of classes that you use) have a number of predefined properties and can have any number of user-defined custom properties.
</p>
<h2 id="access" name="access">Accessing Property Values</h2>
<p>Property values of an object can usually be accessed in 2 ways: by its class member functions or by property getters and setters (<span style="font-family: Courier New,Courier,monospace;">GetProperty()</span> and <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function of the <span style="font-family: Courier New,Courier,monospace;">Dali::Handle</span> class).</p>
- <p>For example, the following table lists the predefined properties of the <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor</a> class.</p>
+ <p>For example, the following table lists the predefined properties of the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">wearable</a> applications).</p>
<table>
<caption>
<h3>Animating Objects</h3>
-<p>The <
a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">Dali::Animation</a> class is used to <a href="animation_n.htm">animate the properties</a> of any number of objects.</p>
+<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Animation.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Animation.html">wearable</a> applications) is used to <a href="animation_n.htm">animate the properties</a> of any number of objects.</p>
<p>For example, the following code animates the value of the <span style="font-family: Courier New,Courier,monospace;">POSITION</span> property of a radio button to (100.0, 200.0, 0.0) for 2 seconds:</p>
<h3>Imposing Constraints on Objects</h3>
-<p>The <
a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">Dali::Constraint</a> class is used to <a href="constraints_n.htm">modify the property of an object based on other properties of other objects</a>.</p>
+<p>The <
span style="font-family: Courier New,Courier,monospace;">Dali::Constraint</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Constraint.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Constraint.html">wearable</a> applications) is used to <a href="constraints_n.htm">modify the property of an object based on other properties of other objects</a>.</p>
<p>For example, the following code makes the <span style="font-family: Courier New,Courier,monospace;">SIZE</span> property value of an actor the same as the <span style="font-family: Courier New,Courier,monospace;">SIZE</span> property value of its parent actor:</p>
</tbody>
</table>
-<p>For more information about properties, see the API reference of each class. For example, for the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class, see the <a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Actor_1_1Property.html">Dali::Actor::Property</a> struct. For information on the supported property types, see <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">Dali::Property::Type</a> and <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1PropertyTypes.html">Dali::PropertyTypes</a>.</p>
+<p>For more information about properties, see the API reference of each class. For example, for the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class, see the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor::Property</span> struct (in <a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Actor_1_1Property.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Actor_1_1Property.html">wearable</a> applications). For information on the supported property types, see <span style="font-family: Courier New,Courier,monospace;">Dali::Property::Type</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace;">Dali::PropertyTypes</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1PropertyTypes.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1PropertyTypes.html">wearable</a> applications).</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>With the Google cardboard viewer or a similar device, you can transform your phone into a basic virtual reality headset.</p>
+<p>For more information about DALi rendering and practical examples of rendering shapes and SVG graphics, see <a href="rendering_tutorial_n.htm">Shape Drawing</a> and <a href="svg_rendering_n.htm">SVG Rendering</a>.</p>
+
<h2 id="stereo" name="stereo">Stereoscopic Rendering in DALi</h2>
<p>The <span style="font-family: Courier New,Courier,monospace;">STEREO_HORIZONTAL</span> mode presents the left image on the top half of the screen and the right image on the bottom half. It is intended to be used in landscape orientation, so the images are rotated 90 degrees counter-clockwise. The <span style="font-family: Courier New,Courier,monospace;">STEREO_VERTICAL</span> mode, on the other hand, renders the left image on the left half of the screen and the right image on the right half.</p>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Shape Drawing</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#line">Drawing a Line</a></li>
+ <li><a href="#triangle">Drawing a Triangle</a></li>
+ <li><a href="#cube">Drawing a Cube</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Shader.html">Dali::Shader API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Geometry.html">Dali::Geometry API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Renderer.html">Dali::Renderer API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Shader.html">Dali::Shader API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Geometry.html">Dali::Geometry API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Renderer.html">Dali::Renderer API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Shape Drawing</h1>
+
+<p>DALi offers a low-level rendering API. Do not use it for building user interfaces - DALi UI controls must be used instead. For example, if you need to display an icon, you can do it using the rendering API, but it requires a lot more effort than simply creating an ImageView UI control.</p>
+
+<p>This topic shows how to use the rendering API through examples that draw a line, triangle, and cube.</p>
+
+<h2 id="line">Drawing a Line</h2>
+
+<p>To draw a line with the renderer API:</p>
+
+<ol>
+<li>Create the shader source code:
+<ol type="a">
+<li>You must create a shader suitable for drawing lines. The vector (x,y) position for each point on the line is passed using the <span style="font-family: Courier New,Courier,monospace">aPosition</span> attribute. The vertex shader transforms this to match the size and position of an actor.
+
+<pre class="prettyprint">
+const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
+ attribute mediump vec2 aPosition;
+ uniform mediump mat4 uMvpMatrix;
+ uniform mediump vec3 uSize;
+ void main()
+ {
+ mediump vec4 vertexPosition = vec4( aPosition, 0.0, 1.0 );
+ vertexPosition.xyz *= uSize;
+ gl_Position = uMvpMatrix * vertexPosition;
+ }
+);
+</pre>
+</li>
+<li>The fragment shader applies the actor's color:
+
+<pre class="prettyprint">
+const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+ uniform lowp vec4 uColor;
+ void main()
+ {
+ gl_FragColor = uColor;
+ }
+);
+</pre>
+</li></ol>
+</li>
+<li>Create geometry.
+
+<p>Specify a vertex format matching the shader attributes: the format is specified using a list of string/value pairs in a <span style="font-family: Courier New,Courier,monospace">Property::Map</span>. The vertex format and data (in this case 2 points) are stored in a <span style="font-family: Courier New,Courier,monospace">PropertyBuffer</span>. Finally, a <span style="font-family: Courier New,Courier,monospace">LINES</span>-type <span style="font-family: Courier New,Courier,monospace">Geometry</span> object is created.</p>
+
+<pre class="prettyprint">
+Property::Map vertexFormat;
+vertexFormat["aPosition"] = Property::VECTOR2;
+PropertyBuffer vertices = PropertyBuffer::New( vertexFormat );
+
+struct Vertex { Vector2 position1; };
+Vertex vertexData[2] =
+{
+ { Vector2( 0.5f, 0.5f) },
+ { Vector2( -0.5f, -0.5f) }
+};
+const unsigned short INDEX_LINES[] = { 0, 1 };
+vertices.SetData( vertexData, 2 );
+
+Geometry geometry = Geometry::New();
+geometry.AddVertexBuffer( vertices );
+geometry.SetIndexBuffer( &INDEX_LINES[0], sizeof(INDEX_LINES)/sizeof(INDEX_LINES[0]) );
+geometry.SetType( Geometry::LINES );
+</pre>
+</li>
+<li>Create a renderer.
+
+<p>You can create a renderer with the shader source and geometry. In order to position the renderer on-screen, it must be added to an actor which must be placed on the stage.</p>
+
+<pre class="prettyprint">
+Shader shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER );
+Renderer renderer = Renderer::New( geometry, shader );
+
+Stage stage = Stage::GetCurrent();
+stage.SetBackgroundColor( Color::WHITE );
+
+Actor actor = Actor::New();
+actor.SetSize( stage.GetSize() );
+actor.SetParentOrigin( ParentOrigin::CENTER );
+actor.SetAnchorPoint( AnchorPoint::CENTER );
+actor.SetColor( Color::BLACK );
+actor.AddRenderer( renderer );
+stage.Add( actor );
+</pre>
+
+<p>In this example, the line is rendered from one corner of the screen to the other.</p>
+<p align="center"><img alt="Line" src="../../../images/dali_rendering_line.png"/></p>
+</li>
+</ol>
+
+<h2 id="triangle">Drawing a Triangle</h2>
+
+<p>To draw a triangle, use the same shader and renderer set-up as in the previous "Drawing a Line" example, and simply modify the geometry to draw the triangle:</p>
+
+<pre class="prettyprint">
+Vertex vertexData[3] =
+{
+ { Vector2( 0.45f, 0.45f) },
+ { Vector2( -0.45f, 0.45f) },
+ { Vector2( 0.0f, -0.45f) }
+};
+const unsigned short INDEX_TRIANGLES[] = { 0, 1, 2 };
+vertices.SetData( vertexData, 3 );
+
+Geometry geometry = Geometry::New();
+geometry.AddVertexBuffer( vertices );
+geometry.SetIndexBuffer( &INDEX_TRIANGLES[0], sizeof(INDEX_TRIANGLES)/sizeof(INDEX_TRIANGLES[0]) );
+geometry.SetType( Geometry::TRIANGLES );
+</pre>
+
+<p>You can also call the <span style="font-family: Courier New,Courier,monospace;">Actor::SetColor(Color::RED)</span> function to get a more colorful end result, as shown in the following figure.</p>
+
+<p class="figure">Figure: Triangle</p>
+<p align="center"><img alt="Triangle" src="../../../images/dali_rendering_triangle.png"/></p>
+
+<h2 id="cube">Drawing a Cube</h2>
+
+<p>To draw a colored cube, you need a slightly more complicated shader and geometry format:</p>
+
+<ol>
+<li>Create the shader source code:
+<ol type="a">
+<li>The <span style="font-family: Courier New,Courier,monospace;">aPosition</span> attribute must be changed to <span style="font-family: Courier New,Courier,monospace;">vec3</span>, since the cube has 3 dimensions:
+
+<pre class="prettyprint">
+const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
+ attribute mediump vec3 aPosition;
+ attribute mediump vec3 aColor;
+ uniform mediump mat4 uMvpMatrix;
+ uniform mediump vec3 uSize;
+ varying mediump vec4 vColor;
+ void main()
+ {
+ mediump vec4 vertexPosition = vec4( aPosition, 1.0 );
+ vertexPosition.xyz *= uSize;
+ gl_Position = uMvpMatrix * vertexPosition;
+ vColor = vec4( aColor, 1.0 );
+ }
+);
+</pre>
+</li>
+<li>Each face of the cube is given a different color using the <span style="font-family: Courier New,Courier,monospace;">vColor</span> varying:
+
+<pre class="prettyprint">
+const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+ varying mediump vec4 vColor;
+ void main()
+ {
+ gl_FragColor = vColor;
+ }
+);
+</pre>
+</li></ol>
+</li>
+<li>Create the cube geometry.
+
+<p>The vertex format is extended to match the shader. Each of the 6 cube faces requires 4 vertices (24 in total). Each vertex consists of a <span style="font-family: Courier New,Courier,monospace;">vec3</span> and RGB color component.</p>
+
+<pre class="prettyprint">
+Property::Map vertexFormat;
+vertexFormat["aPosition"] = Property::VECTOR3;
+vertexFormat["aColor"] = Property::VECTOR3;
+PropertyBuffer vertices = PropertyBuffer::New( vertexFormat );
+
+struct Vertex
+{
+ Vector3 position;
+ Vector3 color;
+};
+
+Vertex vertexData[24] =
+{
+ { Vector3( -0.5, -0.5, 0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+ { Vector3( 0.5, -0.5, 0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+ { Vector3( -0.5, 0.5, 0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+ { Vector3( 0.5, 0.5, 0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+ { Vector3( -0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+ { Vector3( 0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+ { Vector3( -0.5, 0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+ { Vector3( 0.5, 0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+ { Vector3( -0.5, -0.5, -0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+ { Vector3( 0.5, -0.5, -0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+ { Vector3( -0.5, -0.5, 0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+ { Vector3( 0.5, -0.5, 0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+ { Vector3( -0.5, 0.5, -0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+ { Vector3( 0.5, 0.5, -0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+ { Vector3( -0.5, 0.5, 0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+ { Vector3( 0.5, 0.5, 0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+ { Vector3( -0.5, -0.5, -0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+ { Vector3( -0.5, 0.5, -0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+ { Vector3( -0.5, -0.5, 0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+ { Vector3( -0.5, 0.5, 0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+ { Vector3( 0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+ { Vector3( 0.5, 0.5, -0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+ { Vector3( 0.5, -0.5, 0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+ { Vector3( 0.5, 0.5, 0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+};
+
+const unsigned short INDEX_CUBE[] = { 0, 2, 3, 0, 3, 1,
+ 5, 7, 6, 5, 6, 4,
+ 8, 10, 11, 8, 11, 9,
+ 14, 12, 13, 14, 13, 15,
+ 16, 17, 19, 16, 19, 18,
+ 22, 23, 21, 22, 21, 20 };
+
+vertices.SetData( vertexData, 24 );
+
+Geometry geometry = Geometry::New();
+geometry.AddVertexBuffer( vertices );
+geometry.SetIndexBuffer( &INDEX_CUBE[0], sizeof(INDEX_CUBE)/sizeof(INDEX_CUBE[0]) );
+geometry.SetType( Geometry::TRIANGLES );
+</pre>
+</li>
+<li>Create a renderer.
+
+<p>There is no <span style="font-family: Courier New,Courier,monospace;">SetColor()</span> function needed for the actor, since you are not using the <span style="font-family: Courier New,Courier,monospace;">uColor</span> uniform. Face culling is enabled to hide the backward facing sides of the cube.</p>
+
+<pre class="prettyprint">
+Shader shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER );
+Renderer renderer = Renderer::New( geometry, shader );
+renderer.SetProperty( Renderer::Property::FACE_CULLING_MODE, FaceCullingMode::BACK );
+
+Actor actor = Actor::New();
+float length = stage.GetSize().width * 0.5f;
+actor.SetSize( length, length, length );
+actor.SetParentOrigin( ParentOrigin::CENTER );
+actor.AddRenderer( renderer );
+stage.Add( actor );
+
+mAnimation = Animation::New( 10.0f );
+mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree( 180 ) ), Vector3::ZAXIS ) );
+mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree( 180 ) ), Vector3::YAXIS ) );
+mAnimation.Play();
+</pre>
+
+<p>The following figure shows the running animation.</p>
+<p align="center"><img alt="Cube" src="../../../images/dali_rendering_cube.png"/></p>
+</li></ol>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">DALi::BufferImage API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h3>Load Time Resizing</h3>
-<p>An application loading images from an external source often wants to display those images at a lower resolution than their native ones. To support this, DALi can resize an image at load time so that its in-memory copy uses less space and its visual quality benefits from being prefiltered. The <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1FittingMode.html">Dali::FittingMode</a> namespace provides 4 algorithms, which can be used to fit an image to a desired rectangle, a desired width, or a desired height.</p>
+<p>An application loading images from an external source often wants to display those images at a lower resolution than their native ones. To support this, DALi can resize an image at load time so that its in-memory copy uses less space and its visual quality benefits from being prefiltered. The <span style="font-family: Courier New,Courier,monospace;">Dali::FittingMode</span> namespace (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1FittingMode.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1FittingMode.html">wearable</a> applications) provides 4 algorithms, which can be used to fit an image to a desired rectangle, a desired width, or a desired height.</p>
<p>The following code snippet is an example of rescaling:</p>
<h2 id="buffer" name="buffer">Using a Buffer Image</h2>
-<p>A <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">DALi::BufferImage</a> class represents an image resource in the form of pixel buffer data. The application can write to this buffer as required and the image is updated on the screen:</p>
+<p>A <span style="font-family: Courier New,Courier,monospace;">Dali::BufferImage</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1BufferImage.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BufferImage.html">wearable</a> applications) represents an image resource in the form of pixel buffer data. The application can write to this buffer as required and the image is updated on the screen:</p>
<pre class="prettyprint">
// Create a 200 by 200 pixel buffer with a color-depth of 32-bits (with alpha)
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Mobile Native</a></li>
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1DefaultRuler.html">Dali::Toolkit::DefaultRuler API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1FixedRuler.html">Dali::Toolkit::FixedRuler API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Ruler.html">Dali::Toolkit::Ruler API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RulerDomain.html">Dali::Toolkit::RulerDomain API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Scrollable.html">Dali::Toolkit::Scrollable API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollView.html">Dali::Toolkit::ScrollView API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewEffect.html">Dali::Toolkit::ScrollViewEffect API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ScrollViewPagePathEffect.html">Dali::Toolkit::ScrollViewPagePathEffect API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_ScrollView" target="_blank">(DALi) ScrollView Sample Description</a></li>
</ul>
</div></div>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Slider</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating a Slider</a></li>
+ <li><a href="#property">Modifying Slider Properties</a></li>
+ <li><a href="#customize">Customizing the Slider Appearance</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Slider.html">Dali::Toolkit::Slider API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Slider.html">Dali::Toolkit::Slider API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Slider</h1>
+
+<p>The slider is a control used to indicate a value within a specific range. The user can drag a handle left or right to set the current value between a specified minimum and maximum. The base class for the slider control is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span>.</p>
+
+<p class="figure">Figure: Slider</p>
+ <p align="center"><img alt="Slider" src="../../../images/dali_slider.png"/></p>
+
+<p>The slider has 2 important elements:</p>
+
+<ul>
+<li>The handle is the indicator sliding within the range
+<p>You can draw the handle using the <span style="font-family: Courier New,Courier,monospace;">HANDLE_VISUAL</span> property.</p></li>
+<li>The track is the bar along which the handle moves.
+<p>The slider draws the track using 2 distinct images. The region between the start of the track and the handle is the progress region, and you can draw it using the <span style="font-family: Courier New,Courier,monospace;">PROGRESS_VISUAL</span> property. The region between the handle and the end of the track is drawn using the <span style="font-family: Courier New,Courier,monospace;">TRACK_VISUAL</span> property.</p></li>
+</ul>
+
+<p>The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span> class.</p>
+
+<table>
+ <caption>
+ Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span> input signals</caption>
+ <tbody>
+ <tr>
+ <th>Input signal</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ValueChangedSignal()</span></td>
+ <td>Emitted when the slider value changes.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SlidingFinishedSignal()</span></td>
+ <td>Emitted when the sliding is finished.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MarkReachedSignal()</span></td>
+ <td>Emitted when the slider handle reaches a mark.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="create">Creating a Slider</h2>
+
+<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Slider</span> object:</p>
+
+<pre class="prettyprint">
+Slider slider = Slider::New();
+slider.SetSize( mStageWidth, mStageHeight * 0.2 );
+slider.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+slider.SetPosition( 0.0f, mStageHeight * 0.1 );
+Stage::GetCurrent().Add( slider );
+</pre>
+
+<h2 id="property">Modifying Slider Properties</h2>
+
+<p>You can modify the slider appearance and behavior through its properties.</p>
+
+<p>To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function:</p>
+
+<pre class="prettyprint">
+// To set the basic values, use SetProperty()
+slider.SetProperty( Slider::Property::LOWER_BOUND, 0.0f );
+slider.SetProperty( Slider::Property::UPPER_BOUND, 3.0f );
+slider.SetProperty( Slider::Property::VALUE, 0.5f );
+slider.SetProperty( Slider::Property::SHOW_POPUP, true );
+</pre>
+
+<p>The following table lists the available slider properties.</p>
+
+<table>
+ <caption>
+ Table: Slider properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">LOWER_BOUND</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Minimum value of the track</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">UPPER_BOUND</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Maximum value of the track</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">VALUE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Initial value of the slider</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TRACK_VISUAL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Appearance of the track between the handle and the end of the track</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">HANDLE_VISUAL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Appearance of the handle</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PROGRESS_VISUAL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Appearance of the progress region of the track</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">POPUP_VISUAL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Appearance of the slider pop-up</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">POPUP_ARROW_VISUAL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Appearance of the pop-up arrow</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">DISABLED_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td>Color when the slider is disabled</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">VALUE_PRECISION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td>Precision of the floating point of the value</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SHOW_POPUP</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td>Whether the slider shows pop-up</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SHOW_VALUE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td>Whether the slider shows the value</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MARKS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Array</span></td>
+ <td>Array of the marks</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SNAP_TO_MARKS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td>Whether the handle snaps to the marks</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MARK_TOLERANCE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Percentage of the slider width for which snapping to the marks occur</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="customize">Customizing the Slider Appearance</h2>
+
+<p>The slider provides a set of default images, which are used automatically if you do not specify anything else.</p>
+<p>If you want to customize the slider appearance, you can assign your own images using the <span style="font-family: Courier New,Courier,monospace;">Property::Map</span> class. You can set the size and image of the track, handle, progress region, popup, and popup arrow.</p>
+
+<p>The following example shows how to customize the handle:</p>
+
+<pre class="prettyprint">
+// Customize the slider handle
+Property::Map handleVisual;
+handleVisual["size"] = Vector2( 120.0f, 120.0f ); // Set the handle size
+handleVisual["url"] = mImageDirectory + "handle_img.png"; // Set the handle image
+slider.SetProperty( Slider::Property::HANDLE_VISUAL, handleVisual );
+</pre>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Styling UI Components</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#stylesheet">Stylesheet Loading</a></li>
+ <li><a href="#format">Stylesheet Format</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1StyleManager.html">Dali::Toolkit::StyleManager API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1StyleManager.html">Dali::Toolkit::StyleManager API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Styling UI Components</h1>
+
+<p>You can style DALi UI components with a theme bundle or a folder containing a JSON style file and resources. Styling allows you to modify the look of your application. You can alter the images, colors, and other properties specifying the look of each control type. You can also change the visuals of a control, for example, instead of a background image, you can use a fill color or gradient instead.</p>
+
+<p>You can specify how each application component looks by using a stylesheet with the JSON file format:</p>
+
+<ul>
+<li>Application-specific resources must be installed into a particular directory, and you can access them in the stylesheet indirectly through the <span style="font-family: Courier New,Courier,monospace;">APPLICATION_RESOURCE_PATH</span> constant, which has the value returned by the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function. For more information on the resource directory, see the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function in the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications).
+</li>
+<li>You can style particular controls or sub-groups of controls by specifying their style name programmatically.</li>
+<li>Styles can be inherited and tweaked, so you can create minor updates to existing styles with very little code.</li>
+<li>The platform can change the default system font family and logical size. This is handled by the default stylesheets, but it is possible to override this behavior in your own stylesheets. You can also listen to the style manager's <span style="font-family: Courier New,Courier,monospace;">StyleChangedSignal()</span> in order to determine when the platform style has changed.</li>
+</ul>
+
+<h2 id="stylesheet">Stylesheet Loading</h2>
+
+<p>The stylesheet is usually supplied at the application start-up or through the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::StyleManager</span> API:</p>
+
+<ul>
+<li>At the start-up, use the <span style="font-family: Courier New,Courier,monospace;">Dali::Application::New()</span> function:
+<pre class="prettyprint">
+int main( int argc, char** argv )
+{
+ Application application = Application::New( &argc, &argv, "stylesheet.json" );
+ {
+ Demo::StylingApplication stylingApplication( application );
+ application.MainLoop();
+ }
+
+ return 0;
+}
+</pre>
+</li>
+<li>During runtime, use the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::StyleManager::ApplyTheme()</span> function:
+<pre class="prettyprint">
+StyleManager::Get().ApplyTheme( "stylesheet.json" );
+</pre>
+</li></ul>
+
+<p>When the stylesheet is loaded, it is automatically merged with the default DALi toolkit stylesheet, and applied to each <span style="font-family: Courier New,Courier,monospace;">Control</span> instance.</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>
+
+<table>
+ <caption>Table: Stylesheet sections</caption>
+ <tbody>
+ <tr>
+ <th>Section</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">constants</span></td>
+ <td>An object containing a map of tokens that are replaced in JSON value strings.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">includes</span></td>
+ <td>An array of filenames to include and merge.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">mappings</span></td>
+ <td>An object containing a map of keys to property maps. These maps replace the key as a value when converting to DALi properties.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">styles</span></td>
+ <td>An object containing a map of style names to property maps. These property maps contain key-value pairs with the key matching a DALi property name for the object being styled, and the value is an appropriate type for that property.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3>Constants Section</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">constants</span> section contains string constants that can be used by any string value in the current stylesheet or included stylesheets. The following table lists the predefined constants.</p>
+
+<table>
+ <caption>Table: Predefined constants</caption>
+ <tbody>
+ <tr>
+ <th>Constant</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">APPLICATION_RESOURCE_PATH</span></td>
+ <td>This points to the application-specific resource path returned by the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PACKAGE_PATH</span></td>
+ <td>This points to the DALi toolkit resource path.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Constants can also be set programmatically by using the <span style="font-family: Courier New,Courier,monospace;">StyleManager::SetStyleConstant()</span> function. However, the function only works after the <span style="font-family: Courier New,Courier,monospace;">Application::New()</span> function has been called, so it does not affect stylesheets loaded in the <span style="font-family: Courier New,Courier,monospace;">Application::New()</span> function.</p>
+
+<p>The constants can be used in any string value in the JSON files, delimited by '{' and '}' characters. In the following example, the <span style="font-family: Courier New,Courier,monospace;">IMAGE_DIR</span> constant is defined within the stylesheet, and is used to access the <span style="font-family: Courier New,Courier,monospace;">unselectedStateImage</span> image path in the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::PushButton</span> control:</p>
+
+<pre class="prettyprint">
+{
+ "constants": {
+ IMAGE_DIR="{APPLICATION_RESOURCE_PATH}/images"
+ },
+
+ "styles": {
+ "PushButton": {
+ "unselectedStateImage": "{IMAGE_DIR}/button-up.9.png"
+ }
+ }
+}
+</pre>
+
+<h3>Includes Section</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">includes</span> section allows inclusion of other JSON files into the stylesheet. Note that since this section is a JSON array, it is delimited by square brackets ('[' and ']').</p>
+
+<p>The content of the included files are merged with the other content of the current stylesheet. If more than one included file supplies values for a particular key-value pair, then the last file has the highest priority.</p>
+
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">include/first-include.json</span> and <span style="font-family: Courier New,Courier,monospace;">include/second-include.json</span> files are loaded. These include files can also include other files, and use constants defined in this top-level stylesheet.</p>
+
+<pre class="prettyprint">
+{
+ "constants": {
+ "INCLUDE_DIR": "include"
+ },
+ "includes":
+ [
+ "{INCLUDE_DIR}/first-include.json",
+ "{INCLUDE_DIR}/second-include.json"
+ ]
+}
+</pre>
+
+<h3>Mappings Section</h3>
+
+<p>To reduce the number of repeated key-values, you can use the <span style="font-family: Courier New,Courier,monospace;">mappings</span> section. It contains an object of key-value pairs, where the value is any valid JSON type (so can also form a tree).</p>
+
+<p>If a value in any section is a JSON string delimited by '<' and '>', it is checked against the keys in the mapping section, and the value is replaced by the mapping.</p>
+
+<p>In the following example, the confirmation popup's <span style="font-family: Courier New,Courier,monospace;">backingColor</span> property value becomes the JSON array representing RGBA values, which is converted internally into a <span style="font-family: Courier New,Courier,monospace;">Dali::Vector4</span> when it is applied to an object:</p>
+
+<pre class="prettyprint">
+{
+ "mappings": {
+ "backgroundColor": [0.12, 0.0, 0.25, 1.0]
+ },
+ "styles": {
+ "ConfirmationPopup": {
+ "backingColor": "<backgroundColor>"
+ }
+ }
+}
+</pre>
+
+<h3>Styles Section</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">styles</span> section is the main section of the stylesheet. Each key in this JSON object is a style name, which is used to match against control instances in your application:</p>
+
+<ul>
+<li>By default, a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> class's name is also its style name. For finer control, you can programmatically set a style name for a given control using the <span style="font-family: Courier New,Courier,monospace;">Control::SetStyleName()</span> function. In the following example, the slider control handle text label has been given the style name <span style="font-family: Courier New,Courier,monospace;">SliderHandleTextLabel</span>. This means that for any instance of the slider, the handle label style can be specified independently of any other label.</li>
+<li>For each entry in the <span style="font-family: Courier New,Courier,monospace;">styles</span> section, the children of the entry are the property names of the matching control. In the following example, <span style="font-family: Courier New,Courier,monospace;">showPopup</span> is the name of a property in the slider. For more information on the properties of a specific control, see its API Reference.</li>
+<li>Each control has a <span style="font-family: Courier New,Courier,monospace;">background</span> property, which can specify a visual. In addition, properties named <span style="font-family: Courier New,Courier,monospace;">visual</span>, such as those in the following example, specify a visual.</li>
+</ul>
+
+<p>The following example switches on the value label of the handle and the popup tooltip, and changes the visuals of the slider control to use the specified 9-patch images with the given sizes. It changes the property of the slider handle text label to alter the color of the text, and changes the background of the slider to show a gradient fill.</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "Slider": {
+ "showValue": true,
+ "showPopup": true,
+ "trackVisual": {
+ "url": "{IMAGE_DIR}/slider-skin.9.png",
+ "size": [27, 27]
+ },
+ "progressVisual": {
+ "url": "{IMAGE_DIR}/slider-skin-progress.9.png",
+ "size": [27, 27]
+ },
+ "handleVisual": {
+ "url": "{IMAGE_DIR}/slider-skin-handle.png",
+ "size": [72,72]
+ },
+ "background": {
+ "visualType": "GRADIENT",
+ "startPosition": [0.0, -0.5],
+ "endPosition": [0.0, 0.5],
+ "stopOffset": [0.0, 0.5, 0.75,1.0],
+ "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0], [1.0,1.0,1.0,0.0]]
+ }
+ },
+ "SliderHandleTextLabel": {
+ "textColor":[0.8, 0.8, 1.0, 1.0]
+ }
+ }
+}
+</pre>
+
+<table style="border:none;">
+<tbody>
+ <tr>
+ <td style="border:none;">Before styling:</td>
+ <td style="border:none;">After styling:</td>
+ </tr>
+ <tr>
+ <td style="border:none;"><img alt="Slider before styling" src="../../../images/dali_styling1.png"/></td>
+ <td style="border:none;"><img alt="Slider after styling" src="../../../images/dali_styling2.png"/></td>
+ </tr>
+ </tbody></table>
+
+<p>When styling UI components, consider the following issues:</p>
+
+<ul>
+<li>Setting the font size
+
+<p>Setting an explicit font size for text controls is generally considered to be a bad idea: the Tizen platform offers 5 levels of logical font size that can be set by the user, and the stylesheet can be used on multiple devices with different screen sizes and resolutions.</p>
+
+<p>To handle the logical to point size conversion after a settings change, the style manager appends <span style="font-family: Courier New,Courier,monospace;">FontSize</span> and the logical value ("0"-"4") to each style name during the update, and uses that style in preference to the control class name or style name if it can find it in the style sheet.</p>
+
+<p>This means that you can specify alternative mappings for particular text labels. The following example shows how to map the alternative logical sizes, if you have a text label that has a style name of <span style="font-family: Courier New,Courier,monospace;">FolderLabel</span>:</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "FolderLabelFontSize0": {
+ "pointSize": 8
+ },
+ "FolderLabelFontSize1": {
+ "pointSize": 10
+ },
+ "FolderLabelFontSize2": {
+ "pointSize": 12
+ },
+ "FolderLabelFontSize3": {
+ "pointSize": 16
+ },
+ "FolderLabelFontSize4": {
+ "pointSize": 20
+ }
+ }
+}
+</pre>
+</li>
+<li>Using style inheritance
+
+<p>It is possible to "inherit" properties from one style into another by specifying the style names in a <span style="font-family: Courier New,Courier,monospace;">styles</span> array. More than 1 style can be merged in this way. The inherited styles are first merged in order, and then any properties that follow are merged on top.</p>
+
+<p>In the following example, the ColorSlider inherits all of the properties from the slider entry, and changes the background to a gradient:</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "ColorSlider": {
+ "styles": ["Slider"], // Inherit from Slider style
+ "background": {
+ "visualType": "GRADIENT",
+ "startPosition": [0.0, -0.5],
+ "endPosition": [0.0, 0.5],
+ "stopOffset": [0.0, 0.5, 0.75,1.0],
+ "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0], [1,1,1,0.09]]
+ }
+ }
+ }
+}
+</pre>
+</li>
+<li>Applying a style to your own control instances
+
+<p>If you require finer-grained control of styling, for example, for particular labels in your application, you can use an alternative style. Set the style name of these instances after they are created:</p>
+
+<pre class="prettyprint">
+TextLabel label = TextLabel::New( myLabelText );
+label.SetStyleName( "AppLabel" );
+</pre>
+
+<p>You can add the alternative style to the application stylesheet as usual:</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "AppLabel": {
+ "textColor": [0.8, 0.8, 1.0, 1.0]
+ }
+ }
+}
+</pre>
+</li>
+<li>Using alternative color representations
+
+<p>For style properties that explicitly map to a known DALi property with the <span style="font-family: Courier New,Courier,monospace;">Vector4</span> type, the style system can deduce that the map can also represent a color. In this case, the style system also accepts alternative color representations.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This type deduction does not work in the visual property maps where there is no explicit mapping.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The usual representation is a <span style="font-family: Courier New,Courier,monospace;">Vector4</span> with its components mapped to the R, G, B and A components in the range of 0-1:</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "AppLabel": {
+ "textColor": [0.49, 0.235, 0.596, 1.0]
+ }
+ }
+}
+</pre>
+
+<p>For example, in the following text label example, the <span style="font-family: Courier New,Courier,monospace;">textColor</span> is a known property of <span style="font-family: Courier New,Courier,monospace;">TextLabel</span>, so it can use an alternative color format, in this case, the HTML #code:</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "AppLabel": {
+ "textColor": "#7D3C98"
+ }
+ }
+}
+</pre>
+
+<p>As well as HTML codes, you can use device-specific strings, or you can also use the object format with separately specified RGB components (and optional alpha component):</p>
+
+<pre class="prettyprint">
+{
+ "styles": {
+ "AppLabel": {
+ "textColor": {"r":125, "g":60, "b":152}
+ }
+ }
+}
+</pre>
+</li></ul>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>SVG Rendering</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ImageView.html">Dali::Toolkit::ImageView API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ImageView.html">Dali::Toolkit::ImageView API for Wearable Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>SVG Rendering</h1>
+
+<p>SVG (Scalable Vector Graphics) defines vector-based graphics in the XML format. The SVG graphics do not lose any quality when they are zoomed or resized.</p>
+
+<p>Dali SVG rendering covers the following core features:</p>
+
+<ul>
+<li>Basic shapes and paths</li>
+<li>Solid and gradient color fill</li>
+<li>Solid color stroke, and stroke line cap and line join</li>
+</ul>
+
+<p>Other SVG features, such as gradient color stroke, text, clip path, and animation, are not supported.</p>
+
+<p>To more information on the SVG features, see <a href="https://www.w3.org/TR/SVGTiny12" target="_blank">SVG Tiny 1.2 Specification</a>.</p>
+
+<h2 id="svg">SVG Rendering Methods</h2>
+
+<p>You can render an SVG image on screen with DALi with both C++ and JSON. You can render an image in 2 ways:</p>
+<ul>
+<li>Use the SVG URL to create an <span style="font-family: Courier New,Courier,monospace">ImageView</span> object (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1ImageView.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1ImageView.html">wearable</a> applications).
+
+
+<p>You can show the SVG image in a C++ file or, without using C++, write the JSON representations in a style sheet.</p>
+
+<pre class="prettyprint">
+// C++ example, use ImageView to render the SVG image
+ImageView myImageView = ImageView::New( "source-image-url.svg" );
+Stage::GetCurrent().Add( myImageView );
+
+// JSPN example, use ImageView to render SVG
+{"stage":[
+ {
+ "type": "ImageView",
+ "image": { "url", "ome-image-url.svg" }
+ }
+] }
+</pre>
+</li>
+<li>Create a control, generate a property map with the SVG URL as the <span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span> key value, and set it to <span style="font-family: Courier New,Courier,monospace;">Control::Property::BACKGROUND</span>.
+
+<p>You can show the SVG image in a C++ file or, without using C++, write the JSON representations in a style sheet.</p>
+
+<pre class="prettyprint">
+// C++ example, set SVG image as control background
+Control myControl = Control::New();
+Property::Map backgroundMap;
+backgroundMap[ImageVisual::Property::URL] = "source-image-url.svg";
+myControl.SetProperty( Control::Property::BACKGROUND, backgroundMap );
+Stage::GetCurrent().Add( myControl );
+
+// JSON example, set SVG image as control background
+{"stage":[
+ {
+ "type": "Control",
+ "background": { "url", "some-image-url.svg" }
+ }
+] }
+</pre>
+</li>
+</ul>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TableView.html">Dali::Toolkit::TableView API for Wearable Native</a></li>
</ul>
</div></div>
</div>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>TextEditor</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating a TextEditor</a></li>
+ <li><a href="#property">Modifying TextEditor Properties</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextEditor.html">Dali::Toolkit::TextEditor API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextEditor.html">Dali::Toolkit::TextEditor API for Wearable Native Application</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>TextEditor</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> class provides a control that allows multi-line text editing. It is similar to the <a href="textfield_n.htm">TextField</a> control, where a different formatting can be applied to different parts of the text. You can change, for example, the font color, font style, point size, and font family.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">TextEditor</span> also supports markup, and text can be scrolled vertically within it.</p>
+
+<p class="figure">Figure: TextEditor</p>
+ <p align="center"><img alt="TextEditor" src="../../../images/dali_texteditor.png"/></p>
+
+<p>The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> class.</p>
+
+<table>
+ <caption>Table: <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> input signals</caption>
+ <tbody>
+ <tr>
+ <th>Input signal</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TextChangedSignal()</span></td>
+ <td>Emitted when the text changes.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">InputStyleChangedSignal()</span></td>
+ <td>Emitted when the input style is updated as a consequence of a change in the cursor position.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2 id="create">Creating a TextEditor</h2>
+
+<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextEditor</span> object:</p>
+
+<pre class="prettyprint">
+TextEditor editor = TextEditor::New();
+editor.SetSize( mStageWidth, mStageHeight * 0.4f );
+editor.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+editor.SetParentOrigin( ParentOrigin::TOP_CENTER );
+editor.SetProperty( TextEditor::Property::DECORATION_BOUNDING_BOX, boundingBox );
+editor.SetProperty( TextEditor::Property::TEXT_COLOR, Color::BLACK );
+editor.SetProperty( TextEditor::Property::TEXT,
+ "This is a multiline text.\n"
+ "I can write several lines.\n"
+ "Line wrapping is also supported for very long sentences."
+ "The text should be scrollable as well.\n" );
+Stage::GetCurrent().Add( editor );
+</pre>
+
+<h2 id="property">Modifying TextEditor Properties</h2>
+
+<p>You can modify the <span style="font-family: Courier New,Courier,monospace;">TextEditor</span> appearance and behavior through its properties. To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function.</p>
+
+<p>The following table lists the available <span style="font-family: Courier New,Courier,monospace;">TextEditor</span> properties.</p>
+
+<table>
+ <caption>Table: TextEditor properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">RENDERING_BACKEND</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td>Type or rendering (suc as bitmap-based)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Text to display in the UTF-8 format</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td>Text color</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">FONT_FAMILY</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Requested font family</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">FONT_STYLE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Requested font style</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">POINT_SIZE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Size of font in points</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">HORIZONTAL_ALIGNMENT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Text horizontal alignment. The possible values are <span style="font-family: Courier New,Courier,monospace;">BEGIN</span>, <span style="font-family: Courier New,Courier,monospace;">CENTER</span>, <span style="font-family: Courier New,Courier,monospace;">END</span>.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_THRESHOLD</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Vertical scrolling occurs if the cursor is within the threshold area next to the control border.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SCROLL_SPEED</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Scroll speed in pixels per second</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PRIMARY_CURSOR_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td>Color to apply to the primary cursor</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SECONDARY_CURSOR_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td>Color to apply to the secondary cursor</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ENABLE_CURSOR_BLINK</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Boolean</span></td>
+ <td>Whether the cursor blinks</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_INTERVAL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Time interval in seconds between the cursor on and off states</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_BLINK_DURATION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Cursor stops blinking after this number of seconds (if non-zero)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">CURSOR_WIDTH</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Integer</span></td>
+ <td>Cursor width</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_IMAGE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Image to display for the grab handle</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GRAB_HANDLE_PRESSED_IMAGE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Image to display when the grab handle is pressed</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_LEFT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Image to display for the left selection handle</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_IMAGE_RIGHT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Image to display for the right selection handle</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_LEFT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Image to display when the left selection handle is pressed</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_PRESSED_IMAGE_RIGHT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Image to display when the right selection handle is pressed</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_MARKER_IMAGE_LEFT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Image to display for the left selection handle marker</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HANDLE_MARKER_IMAGE_RIGHT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Image to display for the right selection handle marker</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SELECTION_HIGHLIGHT_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td>Color of the selection highlight</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">DECORATION_BOUNDING_BOX</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Rectangle</span></td>
+ <td>Decorations (such as handles) are positioned within this area on the screen</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ENABLE_MARKUP</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Boolean</span></td>
+ <td>Whether the markup processing is enabled</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector4</span></td>
+ <td>Color of the new input text</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_FONT_FAMILY</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Font family of the new input text</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_FONT_STYLE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Font style of the new input text</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_POINT_SIZE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Font size of the new input text in points</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">LINE_SPACING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Default extra space between lines in points</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_LINE_SPACING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Float</span></td>
+ <td>Extra space between lines in points. It affects the whole paragraph where the new input text is inserted.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">UNDERLINE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Default underline parameters</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_UNDERLINE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Underline parameters of the new input text</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">SHADOW</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Default shadow parameters</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_SHADOW</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Shadow parameters of the new input text</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">EMBOSS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Default emboss parameters</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_EMBOSS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Emboss parameters of the new input text</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">OUTLINE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Default outline parameters</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">INPUT_OUTLINE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span></td>
+ <td>Outline parameters of the new input text</td>
+ </tr>
+ </tbody>
+</table>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextField.html">Dali::Toolkit::TextField API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_Text" target="_blank">(DALi) Text Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_TextField" target="_blank">(DALi) TextField Sample Description</a></li>
</ul>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1TextLabel.html">Dali::Toolkit::TextLabel API for Wearable Native</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_Text" target="_blank">(DALi) Text Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_TextLabel" target="_blank">(DALi) TextLabel Sample Description</a></li>
</ul>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Touch Data</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1TouchData.html">Dali::TouchData API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1TouchData.html">Dali::TouchData API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Touch Data</h1>
+
+<p>DALi informs you with a callback when the user touches the screen and when the touch ends. The information is encapsulated in the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class, which is a collection of points at a specific moment in time. When a multi-touch event occurs, each point represents the points that are currently being touched or the points where a touch has stopped.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class replaces the old deprecated <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> struct. It contains functions for retrieving the information that the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchEvent</span> struct provided, but also adds the radius, touch pressure, and angle information.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not use the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class in a container.
+ <p>As the <span style="font-family: Courier New,Courier,monospace;">Dali::TouchData</span> class is a handle to an internal object, it must not be copied (or used in a container) as all that happens is that the handle is copied to the same object, and the internal object can change unexpectedly. If the data must be stored in the application, save only the required data (retrieved using the class functions).</p></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>The first point that the user touches is the primary point and the one that is used for hit-testing. Hit-testing is the process of determining whether a user-controlled cursor (such as a mouse cursor or touch-point) intersects a given graphical object drawn on the screen. There are many different algorithms that can be used for hit-testing, with different performance or accuracy outcomes. For more information on DALi hit-testing, see the Detailed Description for the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html#details">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html#details">wearable</a> applications).</p>
+
+<h2 id="detecting">Detecting Touches on Actors</h2>
+
+<p>To establish a connection to a touch data signal:</p>
+
+<ol>
+<li>Connect to the actor's touch signal:
+ <ol type="a"><li>Create your touch handling function:
+
+<pre class="prettyprint">
+class MyApplication : public ConnectionTracker
+{
+ bool OnTouch( Actor actor, TouchData& touch );
+};
+</pre>
+</li>
+<li>Connect to the required actor's touch signal (this is normally done when the init signal is received).
+<p>Ensure that your <span style="font-family: Courier New,Courier,monospace;">MyApplication</span> class is set up to connect to signals, and that it inherits from the <span style="font-family: Courier New,Courier,monospace;">ConnectionTracker</span> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). The <span style="font-family: Courier New,Courier,monospace;">ConnectionTracker</span> provides a way of automatically disconnecting from the connected signals when the application dies. This is more useful for application objects that exist only temporarily.</p>
+
+<pre class="prettyprint">
+Actor actor = Actor::New();
+actor.TouchSignal().Connect( this, &MyApplication::OnTouch );
+</pre>
+
+<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace;">Connect()</span> function (<span style="font-family: Courier New,Courier,monospace;">this</span>) refers to an object of the <span style="font-family: Courier New,Courier,monospace;">MyApplication*</span> class. The <span style="font-family: Courier New,Courier,monospace;">Connect()</span> function connects between <span style="font-family: Courier New,Courier,monospace;">this</span> and the <span style="font-family: Courier New,Courier,monospace;">OnTouch()</span> member function.</p>
+</li></ol>
+</li>
+<li>Implement the touch handler.
+<p>When your touch handler is called, you can retrieve a lot of information about how the user has interacted with your actor:</p>
+
+<ul>
+<li>To retrieve the point count (the total number of points in the touch data), and the state of a specific point, use the <span style="font-family: Courier New,Courier,monospace;">GetPointCount()</span> and <span style="font-family: Courier New,Courier,monospace;">GetState()</span> functions:
+
+<pre class="prettyprint">
+bool MyApplication::OnTouch( Actor actor, TouchData& touch )
+{
+ const std::size_t pointCount = touch.GetPointCount();
+ if( pointCount == 1 )
+ {
+ // Single touch event
+
+ // Get touch state of the primary point
+ PointState::Type pointState = touch.GetState( 0 );
+ if( pointState == PointState::DOWN )
+ {
+ // User has just pressed on the device
+ }
+ else if( pointState == PointState::UP )
+ {
+ // User has just released their finger from the device
+ }
+ }
+ else
+ {
+ // Multi-touch event
+ }
+
+ return true; // Touch handled
+}
+</pre>
+</li>
+<li>To retrieve the time the touch occurred, use the <span style="font-family: Courier New,Courier,monospace;">GetTime()</span> function.
+<p>You can also get the ID of the device that a particular touch originated from. It is useful when multiple touch points are pressed or released.</p>
+
+<pre class="prettyprint">
+unsigned long touchTime = touchData.GetTime();
+int32_t touchDeviceId = touchData.GetDeviceId( 0 );
+</pre>
+</li>
+<li>To retrieve the hit actor (the actor that was underneath a specific point), use the <span style="font-family: Courier New,Courier,monospace;">GetHitActor()</span> function. The hit actor can be useful, as it can be a child of the actor that has been given as a parameter.
+
+<pre class="prettyprint">
+Actor hitActor = touchData.GetHitActor( 0 );
+</pre>
+</li>
+<li>To retrieve the local hit actor and screen positions, use the <span style="font-family: Courier New,Courier,monospace;">GetLocalPosition()</span> and <span style="font-family: Courier New,Courier,monospace;">GetScreenPosition()</span> 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 );
+const Vector2& local = touchData.GetLocalPosition( 0 );
+</pre>
+</li>
+<li>To retrieve the pressure with which the user touched the screen, use the <span style="font-family: Courier New,Courier,monospace;">GetPressure()</span> function.
+<p>The pressure range starts at 0.0f and normal pressure is defined as 1.0f. A value between 0.0f and 1.0f means light pressure has been applied, whereas a value greater than 1.0f means that more pressure than normal has been applied.</p>
+
+<pre class="prettyprint">
+float touchPressure = touchData.GetPressure( 0 );
+</pre>
+</li>
+<li>To retrieve the radius of the touch point, use the <span style="font-family: Courier New,Courier,monospace;">GetRadius()</span> or <span style="font-family: Courier New,Courier,monospace;">GetEllipseRadius()</span> function. The first returns a <span style="font-family: Courier New,Courier,monospace;">float</span> which is the average of both the horizontal and the vertical radii of the pressed point, while the second returns a <span style="font-family: Courier New,Courier,monospace;">Vector2</span> which stores both the horizontal and the vertical radii of the pressed point.
+
+<pre class="prettyprint">
+float averageRadius = touchData.GetRadius( 0 );
+const Vector2& ellipseRadii = touchData.GetEllipseRadius( 0 );
+</pre>
+</li>
+<li>To retrieve the angle of the user's finger when touching the screen, use the <span style="font-family: Courier New,Courier,monospace;">GetAngle()</span> function. The return value is the angle relative to the Y axis.
+
+<pre class="prettyprint">
+Degree angle = touchData.GetAngle( 0 );
+</pre>
+</li></ul>
+</li></ol>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Dependencies</p>
<ul class="toc">
<li>Tizen 2.4 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.native.mobile.apireference/group__dali__toolkit.html">Dali::Toolkit API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali__toolkit.html">Dali::Toolkit API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>UI Components</h1>
-<p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, and text controls.</p>
+<p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, text controls, image view, flex container, model3dview, slider, and video view.</p>
<p class="figure">Figure: DALi UI components</p>
<p align="center"><img alt="DALi UI components" src="../../../images/ui_controls.png"/></p>
</tr>
<tr>
<td><a href="textfield_n.htm">TextField</a></td>
- <td>A text field that provides a single-line editable text field.</td>
+ <td>A text field that provides a single-line editable text.</td>
<td><span style="font-family: Courier New,Courier,monospace;">TextField</span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">TextLabel</span></td>
</tr>
<tr>
+ <td><a href="texteditor_n.htm">TextEditor</a></td>
+ <td>A text field that provides a multi-line editable text.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TextEditor</span></td>
+ </tr>
+ <tr>
<td><a href="imageview_n.htm">ImageView</a></td>
<td>An image view that renders an image.</td>
<td><span style="font-family: Courier New,Courier,monospace;">ImageView</span></td>
</tr>
+ <tr>
+ <td><a href="flexcontainer_n.htm">FlexContainer</a></td>
+ <td>A layout model that allows responsive elements within a container, automatically arranged to different size screens or devices.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">FlexContainer</span></td>
+ </tr>
+ <tr>
+ <td><a href="model3dview_n.htm">Model3dView</a></td>
+ <td>A model view that displays static 3D content.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Model3dView</span></td>
+ </tr>
+ <tr>
+ <td><a href="slider_n.htm">Slider</a></td>
+ <td>A control that indicates a modifiable value within a specific range.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Slider</span></td>
+ </tr>
+ <tr>
+ <td><a href="videoview_n.htm">VideoView</a></td>
+ <td>A video view that controls and displays video playback.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">VideoView</span></td>
+ </tr>
</tbody>
</table>
-<p>The base class for the components is <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control</a>. This class can also be used to create your own custom UI components. For tips for the control class, see <a href="control_base_n.htm">Control</a>. In this UI Components guide, both the terms <strong>control</strong> and <strong>component</strong> are used to refer to a UI component.</p>
+<p>The base class for the components is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Control</span> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used to create your own custom UI components. For tips for the control class, see <a href="control_base_n.htm">Control</a>. In this UI Components guide, both the terms <strong>control</strong> and <strong>component</strong> are used to refer to a UI component.</p>
+
+<p>You can <a href="styling_n.htm">customize the look of the UI components with stylesheets</a>. For a reusable rendering logic that can be used by all UI components, take advantage of <a href="visuals_n.htm">DALi visuals</a>.</p>
<p>The following figure illustrates the hierarchy of the UI components.</p>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>VideoView</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating a VideoView</a></li>
+ <li><a href="#property">Modifying VideoView Properties</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1VideoView.html">Dali::Toolkit::VideoView API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1VideoView.html">Dali::Toolkit::VideoView API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>VideoView</h1>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::VideoView</span> is a control for video playback and display. It provides minimum functions for playback (play, pause, stop, forward, and backward). Some options, such as volume, can be controlled through the control properties. For the VideoView to work, a video plugin is needed. The Tizen 3.0 platform includes the required Dali video plugin.</p>
+
+<p class="figure">Figure: VideoView</p>
+ <p align="center"><img alt="VideoView" src="../../../images/dali_videoview.png"/></p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The VideoView control does not use any privileges APIs on its own. However, if you use video files in a specific device storage, the application can require privileges to access the storage. For more information, see the Player API Reference (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">VideoView</span> class provides the <span style="font-family: Courier New,Courier,monospace;">FinishedSignal()</span>, which is emitted when the video playback is finished. The related callback can support some basic actions.</p>
+
+<pre class="prettyprint">
+void Create( Application& application )
+{
+ mView.FinishedSignal().Connect( this, &VideoViewController::OnFinished );
+}
+
+void OnFinished( VideoView& view )
+{
+ mFinished = true;
+}
+</pre>
+
+<h2 id="create">Creating a VideoView</h2>
+
+<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::VideoView</span> object:</p>
+
+<pre class="prettyprint">
+class VideoViewController: public ConnectionTracker
+{
+ public:
+ VideoViewController( Application& application )
+ : mApplication( application )
+ {
+ mApplication.InitSignal().Connect( this, &VideoViewController::Create );
+ }
+
+ void Create( Application& application )
+ {
+ // Set the handle
+ mView = Toolkit::VideoView::New( "videofile.mp4" );
+ Stage::GetCurrent().Add( mView );
+ mView.SetParentOrigin( ParentOrigin::CENTER );
+ mView.SetAnchorPoint( AnchorPoint::CENTER );
+ mView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+ mView.SetSize( WIDTH, HEIGHT );
+ mView.Play();
+ }
+
+ private:
+ Application& mApplication;
+ VideoView mView;
+}
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">You can set the video file to be played in the <span style="font-family: Courier New,Courier,monospace;">VideoView::New()</span> function, or by modifying <span style="font-family: Courier New,Courier,monospace;">VIDEO</span> property with <span style="font-family: Courier New,Courier,monospace;">SetProperty( VideoView::Property::VIDEO, "videofile2.mp4" )</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="property">Modifying VideoView Properties</h2>
+
+<p>You can modify the <span style="font-family: Courier New,Courier,monospace;">VideoView</span> appearance and behavior through its properties.</p>
+
+<p>To change a property from its default value, use the <span style="font-family: Courier New,Courier,monospace;">SetProperty()</span> function:</p>
+
+<pre class="prettyprint">
+Property::Map oldMap;
+Property::Value value = mView.GetProperty( VideoView::Property::VOLUME );
+Value.Get( oldMap );
+
+Property::Map newMap;
+newMap.Insert( "volumeLeft", 1.0f );
+newMap.Insert( "volumeRight", 0.5f );
+mView.SetProperty( VideoView::Property::VOLUME, newMap );
+</pre>
+
+<p>The following table lists the available <span style="font-family: Courier New,Courier,monospace;">VideoView</span> properties.</p>
+
+<table>
+ <caption>Table: VideoView properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">VIDEO</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">String</span> or <span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Video file URL string. This property can also provide additional features, such as a custom shader, by <span style="font-family: Courier New,Courier,monospace;">Property::Map</span>.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">LOOPING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td>Whether the playback loops</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MUTED</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Bool</span></td>
+ <td>Whether the playback is muted</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">VOLUME</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Property::Map</span></td>
+ <td>Playback volume. The <span style="font-family: Courier New,Courier,monospace;">Property::Map</span> must get left and right volume scalar as a float type.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Visuals</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Dependencies</p>
+ <ul class="toc">
+ <li>Tizen 3.0 and Higher for Mobile</li>
+ <li>Tizen 3.0 and Higher for Wearable</li>
+ </ul>
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#color">Color Visual</a></li>
+ <li><a href="#gradient">Gradient Visual</a></li>
+ <li><a href="#image">Image Visual</a></li>
+ <li><a href="#border">Border Visual</a></li>
+ <li><a href="#mesh">Mesh Visual</a></li>
+ <li><a href="#primitive">Primitive Visual</a></li>
+ <li><a href="#wireframe">Wireframe Visual</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Mobile Native</a></li>
+ <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Visuals</h1>
+
+<p>You can create a reusable rendering logic, which can be used by all controls, by using DALi visuals. The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Visual</span> instance (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Visual.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Visual.html">wearable</a> applications) can control rendering the content as when using control properties. First, you set the type of Visual, and then you render the content with each visual property.</p>
+
+<p>DALi provides the following visuals:</p>
+
+<ul>
+ <li><a href="#color">Color</a></li>
+ <li><a href="#gradient">Gradient</a></li>
+ <li><a href="#image">Image</a></li>
+ <li><a href="#border">Border</a></li>
+ <li><a href="#mesh">Mesh</a></li>
+ <li><a href="#primitive">Primitive</a></li>
+ <li><a href="#wireframe">Wireframe</a></li>
+</ul>
+
+<p>The controls can provide properties that allow you to specify the visual type (<span style="font-family: Courier New,Courier,monospace;">visualType</span>). You set visual properties through a property map. The <span style="font-family: Courier New,Courier,monospace;">visualType</span> field in the property map specifies the visual to use or create. The visual type is required to avoid ambiguity as multiple visuals can be capable of rendering the same content.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">Control::Property::BACKGROUND</span> is an example of a property which takes in a property map to create a visual.</p>
+
+<h2 id="color">Color Visual</h2>
+
+<p>The color visual renders a solid color to the control's quad.</p>
+
+<p class="figure">Figure: Color visual</p>
+<p align="center"><img alt="Color visual" src="../../../images/dali_color_visual.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::COLOR</span> or <span style="font-family: Courier New,Courier,monospace;">"COLOR"</span>.</p>
+
+<table>
+ <caption>Table: Image visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ColorVisual::Property::MIX_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">mixColor</span></td>
+ <td>VECTOR4</td>
+ <td>Yes</td>
+ <td>The solid color is required.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::COLOR;
+map[ColorVisual::Property::MIX_COLOR] = Color::RED;
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+<h2 id="gradient">Gradient Visual</h2>
+
+<p>The gradient visual renders a smooth transition of colors to the control's quad. Both linear (left in the following figure) and radial (right in the following figure) gradients are supported.</p>
+
+<p class="figure">Figure: Gradient visual</p>
+<p align="center"><img alt="Gradient visual linear" src="../../../images/dali_gradient_visual_linear.png"/> <img alt="Gradient visual radial" src="../../../images/dali_gradient_visual_radial.png"/></p>
+
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::GRADIENT</span> or <span style="font-family: Courier New,Courier,monospace;">"GRADIENT"</span>.</p>
+
+<table>
+ <caption>Table: Gradient visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::START_POSITION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">startPosition</span></td>
+ <td>VECTOR2</td>
+ <td>For linear only</td>
+ <td>The start position of the linear gradient.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::END_POSITION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">endPosition</span></td>
+ <td>VECTOR2</td>
+ <td>For linear only</td>
+ <td>The end position of the linear gradient.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::CENTER</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">center</span></td>
+ <td>VECTOR2</td>
+ <td>For radial only</td>
+ <td>The center point of the radial gradient.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::RADIUS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">radius</span></td>
+ <td>FLOAT</td>
+ <td>For radial only</td>
+ <td>The size of the radius.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::STOP_OFFSET</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">stopOffset</span></td>
+ <td>ARRAY of FLOAT</td>
+ <td>No</td>
+ <td>All the stop offsets. If not supplied, the default is 0.0 and 1.0.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::STOP_COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">stopColor</span></td>
+ <td>ARRAY of FLOAT</td>
+ <td>Yes</td>
+ <td>The color at the stop offsets. At least 2 are required to show a gradient.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::UNITS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">units</span></td>
+ <td>INTEGER or STRING</td>
+ <td>No</td>
+ <td>The coordinate system.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Property::SPREAD_METHOD</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">spreadMethod</span></td>
+ <td>INTEGER or STRING</td>
+ <td>No</td>
+ <td>Indicates what happens if a gradient starts or ends inside bounds.</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul>
+<li>If the <span style="font-family: Courier New,Courier,monospace;">stopOffset</span> and <span style="font-family: Courier New,Courier,monospace;">stopColor</span> arrays do not have the same number of elements, the minimum of the 2 is used as the stop points.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">units</span> are used to define the coordinate system for the attributes:
+<ul>
+<li>Start (x1, y1) and end (x2 and y2) points of a line, if using a linear gradient.</li>
+<li>Center point (cx, cy) and radius (r) of a circle, if using a radial gradient.</li>
+</ul>
+<table>
+<caption>Table: Unit values</caption>
+ <tbody>
+ <tr>
+ <th>Enumeration</th>
+ <th>String</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Units::OBJECT_BOUNDING_BOX</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">OBJECT_BOUNDING_BOX</span></td>
+ <td>Default. Uses the normals for the start, end, and center points, so that the top-left is (-0.5, -0.5) and bottom-right is (0.5, 0.5).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::Units::USER_SPACE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">USER_SPACE</span></td>
+ <td>Uses the user coordinates for the start, end, and center points, so that in a 200 by 200 control, top-left is (0, 0) and bottom-right is (200, 200).</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">spreadMethod</span> indicates what happens if the gradient starts or ends inside the bounds of the target rectangle.
+
+<table>
+<caption>Table: Spread method values</caption>
+ <tbody>
+ <tr>
+ <th>Enumeration</th>
+ <th>String</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::SpreadMethod::PAD</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">PAD</span></td>
+ <td>Default. Uses the terminal colors of the gradient to fill the remainder of the quad.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::SpreadMethod::REFLECT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">REFLECT</span></td>
+ <td>Reflects the gradient pattern start-to-end, end-to-start, start-to-end, and so on, until the quad is filled.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">GradientVisual::SpreadMethod::REPEAT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">REPEAT</span></td>
+ <td>Repeats the gradient pattern start-to-end, start-to-end, start-to-end, and so on, until the quad is filled.</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li>The gradient type is determined by the properties specified in the property map; for example, if both <span style="font-family: Courier New,Courier,monospace;">START_POSITION</span> and <span style="font-family: Courier New,Courier,monospace;">END_POSITION</span> are given, a linear gradient is shown, and if both <span style="font-family: Courier New,Courier,monospace;">CENTER</span> and <span style="font-family: Courier New,Courier,monospace;">RADIUS</span> are given, a radial gradient is shown.
+</li></ul>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+// Linear
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::GRADIENT;
+map[GradientVisual::Property::START_POSITION] = Vector2( 0.5f, 0.5f );
+map[GradientVisual::Property::END_POSITION] = Vector2( -0.5f, -0.5f );
+Dali::Property::Array stopOffsets;
+stopOffsets.PushBack( 0.0f );
+stopOffsets.PushBack( 0.3f );
+stopOffsets.PushBack( 0.6f );
+stopOffsets.PushBack( 0.8f );
+stopOffsets.PushBack( 1.f );
+map[GradientVisual::Property::STOP_OFFSET] = stopOffsets;
+Dali::Property::Array stopColors;
+stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.f )/255.f );
+stopColors.PushBack( Vector4( 196.f, 198.f, 71.f, 122.f )/255.f );
+stopColors.PushBack( Vector4( 214.f, 37.f, 139.f, 191.f )/255.f );
+stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 150.f )/255.f );
+stopColors.PushBack( Color::YELLOW );
+map[GradientVisual::Property::STOP_COLOR] = stopColors;
+control.SetProperty( Control::Property::BACKGROUND, map );
+
+// Radial
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::GRADIENT;
+map[GradientVisual::Property::CENTER] = Vector2( 0.5f, 0.5f );
+map[GradientVisual::Property::RADIUS] = 1.414f;
+Dali::Property::Array stopOffsets;
+stopOffsets.PushBack( 0.0f );
+stopOffsets.PushBack( 0.3f );
+stopOffsets.PushBack( 0.6f );
+stopOffsets.PushBack( 0.8f );
+stopOffsets.PushBack( 1.f );
+map[GradientVisual::Property::STOP_OFFSET] = stopOffsets;
+Dali::Property::Array stopColors;
+stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.f )/255.f );
+stopColors.PushBack( Vector4( 196.f, 198.f, 71.f, 122.f )/255.f );
+stopColors.PushBack( Vector4( 214.f, 37.f, 139.f, 191.f )/255.f );
+stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 150.f )/255.f );
+stopColors.PushBack( Color::YELLOW );
+map[GradientVisual::Property::STOP_COLOR] = stopColors;
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+<h2 id="image">Image Visual</h2>
+
+<p>The image visual renders an image into the control's quad. Depending on the extension of the image, a different visual is provided to render the image onto the screen:</p>
+
+<ul>
+<li>Normal (Quad)</li>
+<li>N-Patch</li>
+<li>SVG</li>
+</ul>
+
+<h3>Normal Image</h3>
+
+<p>The normal image visual renders a raster image (such as JPG or PNG) into the control's quad.</p>
+
+<p class="figure">Figure: Normal image visual</p>
+<p align="center"><img alt="Normal image visual" src="../../../images/dali_image_visual_normal.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::IMAGE</span> or <span style="font-family: Courier New,Courier,monospace;">"IMAGE"</span>.</p>
+
+<table>
+<caption>Table: Normal image visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">url</span></td>
+ <td>STRING</td>
+ <td>Yes</td>
+ <td>The URL of the image.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::FITTING_MODE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">fittingMode</span></td>
+ <td>INTEGER or STRING</td>
+ <td>No</td>
+ <td>Fitting options, used when resizing images to fit the desired dimensions.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::SAMPLING_MODE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">samplingMode</span></td>
+ <td>INTEGER or STRING</td>
+ <td>No</td>
+ <td>Filtering options, used when resizing images to the sample original pixels.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::DESIRED_WIDTH</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">desiredWidth</span></td>
+ <td>INTEGER</td>
+ <td>No</td>
+ <td>The desired image width. Actual image width is used, if not specified.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::DESIRED_HEIGHT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">desiredHeight</span></td>
+ <td>INTEGER</td>
+ <td>No</td>
+ <td>The desired image height. Actual image height is used, if not specified.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
+map[ImageVisual::Property::URL] = "path-to-image.jpg";
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+<h3>N-Patch Image</h3>
+
+<p>The n-patch image visual renders an n-patch or a 9-patch image into the control's quad.</p>
+
+<p class="figure">Figure: N-patch image visual</p>
+<p align="center"><img alt="N-patch image visual" src="../../../images/dali_image_visual_nPatch.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::IMAGE</span> or <span style="font-family: Courier New,Courier,monospace;">"IMAGE"</span>.</p>
+
+<table>
+<caption>Table: N-patch image visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">url</span></td>
+ <td>STRING</td>
+ <td>Yes</td>
+ <td>The URL of the n-patch image.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::BORDER_ONLY</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">borderOnly</span></td>
+ <td>BOOLEAN</td>
+ <td>No</td>
+ <td>If <span style="font-family: Courier New,Courier,monospace;">true</span>, only draws the borders.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
+map[Dali::Toolkit::ImageVisual::Property::URL] = "path-to-image.9.png";
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+<h3>SVG Image</h3>
+
+<p>The SVG image visual renders an SVG image into the control's quad. It supports the following features from the <a href="https://www.w3.org/TR/SVGTiny12" target="_blank">SVG Tiny 1.2 Specification</a>:</p>
+
+<ul>
+<li>Basic shapes</li>
+<li>Paths</li>
+<li>Solid color fill</li>
+<li>Gradient color fill</li>
+<li>Solid color stroke</li>
+</ul>
+
+<p>The following features are not supported:</p>
+<ul>
+<li>Gradient color stroke</li>
+<li>Dash array stroke</li>
+<li>View box</li>
+<li>Text</li>
+<li>Clip path</li>
+</ul>
+
+<p class="figure">Figure: SVG image visual</p>
+<p align="center"><img alt="SVG image visual" src="../../../images/dali_image_visual_svg.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::IMAGE</span> or <span style="font-family: Courier New,Courier,monospace;">"IMAGE"</span>.</p>
+
+<table>
+<caption>Table: SVG image visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ImageVisual::Property::URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">url</span></td>
+ <td>STRING</td>
+ <td>Yes</td>
+ <td>The URL of the image.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
+map[Dali::Toolkit::ImageVisual::Property::URL] = "path-to-image.svg";
+control.SetSize( 200.f, 200.f );
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+
+<h2 id="border">Border Visual</h2>
+
+<p>The border visual renders a solid color as an internal border to the control's quad.</p>
+
+<p class="figure">Figure: Border visual</p>
+<p align="center"><img alt="Border visual" src="../../../images/dali_border_visual.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::BORDER</span> or <span style="font-family: Courier New,Courier,monospace;">"BORDER"</span>.</p>
+
+<table>
+<caption>Table: Border visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">BorderVisual::Property::COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">borderColor</span></td>
+ <td>VECTOR4</td>
+ <td>Yes</td>
+ <td>The color of the border.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">BorderVisual::Property::SIZE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">borderSize</span></td>
+ <td>FLOAT</td>
+ <td>Yes</td>
+ <td>The width of the border (in pixels).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">BorderVisual::Property::ANTI_ALIASING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">antiAliasing</span></td>
+ <td>BOOLEAN</td>
+ <td>No</td>
+ <td>Whether anti-aliasing of the border is required.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::BORDER;
+map[BorderVisual::Property::COLOR] = Color::BLUE;
+map[BorderVisual::Property::SIZE] = 5.0f;
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+
+<h2 id="mesh">Mesh Visual</h2>
+
+<p>The mesh visual renders a mesh using a <span style="font-family: Courier New,Courier,monospace;">.obj</span> file, optionally with textures provided by a <span style="font-family: Courier New,Courier,monospace;">.mtl</span> file. The mesh is scaled to fit the control.</p>
+
+<p class="figure">Figure: Mesh visual</p>
+<p align="center"><img alt="Mesh visual" src="../../../images/dali_mesh_visual.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::MESH</span> or <span style="font-family: Courier New,Courier,monospace;">"MESH"</span>.</p>
+
+<table>
+<caption>Table: Mesh visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Required</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::OBJECT_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">objectUrl</span></td>
+ <td>STRING</td>
+ <td>Yes</td>
+ <td>The location of the <span style="font-family: Courier New,Courier,monospace;">.obj</span> file.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::MATERIAL_URL</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">materialUrl</span></td>
+ <td>STRING</td>
+ <td>No</td>
+ <td>The location of the <span style="font-family: Courier New,Courier,monospace;">.mtl</span> file. Leave blank for a textureless object.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::TEXTURES_PATH</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">texturesPath</span></td>
+ <td>STRING</td>
+ <td>If using material</td>
+ <td>The path to the directory the textures (including gloss and normal) are stored in.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::SHADING_MODE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">shadingMode</span></td>
+ <td>INTEGER or STRING</td>
+ <td>No</td>
+ <td>The type of the shading mode that the mesh uses.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::USE_MIPMAPPING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">useMipmapping</span></td>
+ <td>BOOLEAN</td>
+ <td>No</td>
+ <td>Whether to use mipmaps for textures. By default, <span style="font-family: Courier New,Courier,monospace;">true</span>.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::USE_SOFT_NORMALS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">useSoftNormals</span></td>
+ <td>BOOLEAN</td>
+ <td>No</td>
+ <td>Whether to average normals at each point to smooth textures. By default, <span style="font-family: Courier New,Courier,monospace;">true</span>.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::Property::LIGHT_POSITION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">lightPosition</span></td>
+ <td>VECTOR3</td>
+ <td>No</td>
+ <td>The position, in stage space, of the point light that applies lighting to the model.</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul>
+<li>When specifying the <span style="font-family: Courier New,Courier,monospace;">shadingMode</span>, if anything the mode requires is missing, a simpler mode that can be handled with what has been supplied is used instead.
+
+<table>
+<caption>Table: Shading mode values</caption>
+ <tbody>
+ <tr>
+ <th>Enumeration</th>
+ <th>String</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::ShaderType::TEXTURELESS_WITH_DIFFUSE_LIGHTING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXTURELESS_WITH_DIFFUSE_LIGHTING</span></td>
+ <td>Simplest. One color that is lit by ambient and diffuse lighting.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::ShaderType::TEXTURED_WITH_SPECULAR_LIGHTING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXTURED_WITH_SPECULAR_LIGHTING</span></td>
+ <td>Uses only the visual image textures provided with specular lighting in addition to ambient and diffuse lighting.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">MeshVisual::ShaderType::TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING</span></td>
+ <td>Uses all textures provided including a gloss, normal, and texture map along with specular, ambient, and diffuse lighting.</td>
+ </tr>
+ </tbody>
+</table>
+</li></ul>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Stage stage = Dali::Stage::GetCurrent();
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::MESH;
+map[MeshVisual::Property::OBJECT_URL] = "home/models/Dino.obj";
+map[MeshVisual::Property::MATERIAL_URL] = "home/models/Dino.mtl";
+map[MeshVisual::Property::TEXTURES_PATH] = "home/images/";
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+
+<h2 id="primitive">Primitive Visual</h2>
+
+<p>The primitive visual renders a simple 3D shape, such as a cube or sphere. The shape is scaled to fit the control. The shapes are generated with clockwise winding and back-face culling on by default.</p>
+
+<p class="figure">Figure: Primitive visual</p>
+<p align="center"><img alt="Primitive visual" src="../../../images/dali_primitive_visual1.png"/></p>
+
+<p>The following table lists the supported properties. The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::PRIMITIVE</span> or <span style="font-family: Courier New,Courier,monospace;">"PRIMITIVE"</span>.</p>
+
+<table>
+<caption>Table: Primitive visual properties</caption>
+ <tbody>
+ <tr>
+ <th>Property</th>
+ <th>String</th>
+ <th>Type</th>
+ <th>Description</th>
+ <th>Default Value</th>
+ <th>Range</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SHAPE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">shape</span></td>
+ <td>INTEGER or STRING</td>
+ <td>The specific shape to render.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::SPHERE</span> or <span style="font-family: Courier New,Courier,monospace;">"SPHERE"</span></td>
+ <td>See the <a href="#shapes">Shape values</a> table.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::COLOR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">shapeColor</span></td>
+ <td>VECTOR4</td>
+ <td>The color of the shape.</td>
+ <td>(0.5, 0.5, 0.5, 1.0)</td>
+ <td>0.0 - 1.0 for each</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SLICES</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ <td>INTEGER</td>
+ <td>The number of slices as you go around the shape.</td>
+ <td>128</td>
+ <td>1 - 255</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::STACKS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">stacks</span></td>
+ <td>INTEGER</td>
+ <td>The number of stacks as you go down the shape.</td>
+ <td>128</td>
+ <td>1 - 255</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_TOP_RADIUS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">scaleTopRadius</span></td>
+ <td>FLOAT</td>
+ <td>The scale of the radius of the top circle of a conical frustrum.</td>
+ <td>1.0</td>
+ <td>>= 0.0</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">scaleBottomRadius</span></td>
+ <td>FLOAT</td>
+ <td>The scale of the radius of the bottom circle of a conical frustrum.</td>
+ <td>1.5</td>
+ <td>>= 0.0</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_HEIGHT</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">scaleHeight</span></td>
+ <td>FLOAT</td>
+ <td>The scale of the height of a conic.</td>
+ <td>3.0</td>
+ <td>> 0.0</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_RADIUS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">scaleRadius</span></td>
+ <td>FLOAT</td>
+ <td>The scale of the radius of a cylinder.</td>
+ <td>1.0</td>
+ <td>> 0.0</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::SCALE_DIMENSIONS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">scaleDimension</span></td>
+ <td>VECTOR3</td>
+ <td>The dimensions of a cuboid. Scales in the same fashion as a 9-patch image.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">Vector3::ONE</span></td>
+ <td>> 0.0 for each</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::BEVEL_PERCENTAGE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">bevelPercentage</span></td>
+ <td>FLOAT</td>
+ <td>Defines how beveled the cuboid must be, based on the smallest dimension.</td>
+ <td>0.0 (no bevel)</td>
+ <td>0.0 - 1.0</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::BEVEL_SMOOTHNESS</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">bevelSmoothness</span></td>
+ <td>FLOAT</td>
+ <td>Defines how smooth the beveled edges must be.</td>
+ <td>0.0 (sharp edges)</td>
+ <td>0.0 - 1.0</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Property::LIGHT_POSITION</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">lightPosition</span></td>
+ <td>VECTOR3</td>
+ <td>The position, in stage space, of the point light that applies lighting to the model.</td>
+ <td>(Offset outwards from the center of the screen.)</td>
+ <td>Unlimited</td>
+ </tr>
+ </tbody>
+</table>
+
+<ul><li>You can select from 6 <span style="font-family: Courier New,Courier,monospace;">shape</span> values, some of which are simplified specializations of another.
+
+<table id="shapes">
+ <caption>Table: Shape values</caption>
+ <tbody>
+ <tr>
+ <th>Enumeration</th>
+ <th>String</th>
+ <th>Description</th>
+ <th>Parameters</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::SPHERE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">SPHERE</span></td>
+ <td>Default</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span>, <span style="font-family: Courier New,Courier,monospace;">stacks</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CONICAL_FRUSTRUM</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">CONICAL_FRUSTRUM</span></td>
+ <td>The area bound between 2 circles (basically, a cone with the tip removed)</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleTopRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleBottomRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleHeight</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CONE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">CONE</span></td>
+ <td>Equivalent to a conical frustrum with the top radius of zero.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleBottomRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleHeight</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CYLINDER</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">CYLINDER</span></td>
+ <td>Equivalent to a conical frustrum with equal radii for the top and bottom circles.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleRadius</span>, <span style="font-family: Courier New,Courier,monospace;">scaleHeight</span>, <span style="font-family: Courier New,Courier,monospace;">slices</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::CUBE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">CUBE</span></td>
+ <td>Equivalent to a beveled cube with a bevel percentage of zero.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleDimensions</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::OCTAHEDRON</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">OCTAHEDRON</span></td>
+ <td>Equivalent to a beveled cube with a bevel percentage of 1.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleDimensions</span></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">PrimitiveVisual::Shape::BEVELLED_CUBE</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">BEVELLED_CUBE</span></td>
+ <td>A cube/cuboid with all edges flattened to some degree.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">color</span>, <span style="font-family: Courier New,Courier,monospace;">scaleDimensions</span>, <span style="font-family: Courier New,Courier,monospace;">bevelPercentage</span>, <span style="font-family: Courier New,Courier,monospace;">bevelSmoothness</span></td>
+ </tr>
+ </tbody>
+</table>
+</li></ul>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+// Sphere
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::PRIMITIVE;
+map[PrimitiveVisual::Property::SHAPE] = PrimitiveVisual::Shape::SPHERE;
+map[PrimitiveVisual::Property::COLOR] = Vector4( 1.0, 0.5, 0.0, 1.0 );
+control.SetProperty( Control::Property::BACKGROUND, map );
+
+// Conical frustrum
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::PRIMITIVE;
+map[PrimitiveVisual::Property::SHAPE] = PrimitiveVisual::Shape::CONICAL_FRUSTRUM;
+map[PrimitiveVisual::Property::COLOR] = Vector4( 1.0, 0.5, 0.0, 1.0 );
+map[PrimitiveVisual::Property::SCALE_TOP_RADIUS] = 1.0f;
+map[PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS] = 1.5f;
+map[PrimitiveVisual::Property::SCALE_HEIGHT] = 3.0f;
+control.SetProperty( Control::Property::BACKGROUND, map );
+
+// Beveled cube
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::PRIMITIVE;
+map[PrimitiveVisual::Property::SHAPE] = PrimitiveVisual::Shape::BEVELLED_CUBE;
+map[PrimitiveVisual::Property::COLOR] = Vector4( 1.0, 0.5, 0.0, 1.0 );
+map[PrimitiveVisual::Property::BEVEL_PERCENTAGE] = 0.4f;
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+<h3>Primitive Visual Examples</h3>
+
+<ul>
+<li><strong>Sphere:</strong>
+<p align="center"><img alt="Sphere" src="../../../images/dali_sphere.png"/></p>
+</li>
+<li><strong>Conics:</strong>
+<table>
+ <tbody>
+ <tr>
+ <th>Frustrum</th>
+ <th>Cone</th>
+ <th>Cylinder</th>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Frustrum" src="../../../images/dali_frustrum.png"/></p></td>
+ <td><p align="center"><img alt="Cone" src="../../../images/dali_cone.png"/></p></td>
+ <td><p align="center"><img alt="Cylinder" src="../../../images/dali_cylinder.png"/></p></td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li><strong>Bevel:</strong>
+
+<p>Bevel percentage ranges from 0.0 to 1.0. It affects the ratio of the outer face widths to the width of the overall cube.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>0.0 (cube)</th>
+ <th>0.3</th>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Bevel1" src="../../../images/dali_primitive_visual1.png"/></p></td>
+ <td><p align="center"><img alt="Bevel2" src="../../../images/dali_bevel2.png"/></p></td>
+ </tr>
+ <tr>
+ <th>0.7</th>
+ <th>1.0 (octahedron)</th>
+ </tr>
+ <tr>
+ <td><p align="center"><img alt="Bevel3" src="../../../images/dali_bevel3.png"/></p></td>
+ <td><p align="center"><img alt="Bevel4" src="../../../images/dali_bevel4.png"/></p></td>
+ </tr>
+ </tbody>
+</table>
+</li>
+<li><strong>Slices:</strong>
+
+<p>For spheres and conical frustrums, "slices" determine how many divisions there are as you go around the object.</p>
+
+<p align="center"><img alt="Slices" src="../../../images/dali_slices.png"/></p>
+</li>
+<li><strong>Stacks:</strong>
+
+<p>For spheres, "stacks" determines how many layers there are as you go down the object.</p>
+
+<p align="center"><img alt="Stacks" src="../../../images/dali_stacks.png"/></p>
+</li>
+</ul>
+
+<h2 id="wireframe">Wireframe Visual</h2>
+
+<p>The wireframe visual renders a wireframe around a control's quad. It is mainly used for debugging and is the visual that replaces all other visuals when <strong>Visual Debug Rendering</strong> is switched on. To switch <strong>Visual Debug Rendering</strong> on, set the <span style="font-family: Courier New,Courier,monospace;">DALI_DEBUG_RENDERING</span> environment variable to 1 before launching the DALi application.</p>
+
+<p class="figure">Figure: Wireframe visual</p>
+<p align="center"><img alt="Wireframe visual" src="../../../images/dali_wireframe_visual.png"/></p>
+
+<p>The visual type is <span style="font-family: Courier New,Courier,monospace;">Visual::WIREFRAME</span> or <span style="font-family: Courier New,Courier,monospace;">"WIREFRAME"</span>.</p>
+
+<p><strong>Usage:</strong></p>
+
+<pre class="prettyprint">
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+Dali::Property::Map map;
+map[Visual::Property::TYPE] = Dali::Toolkit::Visual::WIREFRAME;
+control.SetProperty( Control::Property::BACKGROUND, map );
+</pre>
+
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
<p>You can use the EFL UI toolkit if you are creating a 2D-based Tizen native application. However, EFL supports 2.5D and 3D effects and 3D objects as well. EFL provides streamlined graphic core libraries you need to create powerful applications. EFL needs lower memory but provides high performance, and supports a retained mode graphics system and user-centric features, such as themes, 2D/3D effects, and accessibility. In addition, EFL supports various resolutions with the same layout, fast and small file systems, a variety of programming language bindings, and a separate UI and logic.</p></li>
-<li><a href="dali/dali_n.htm">Dynamic Animation Library (DALi)</a> <strong>in mobile applications only</strong>
+<li><a href="dali/dali_n.htm">Dynamic Animation Library (DALi)</a>
<p>You can use the DALi 3D UI toolkit if you are creating a high-performance rich UI application. DALi is based on OpenGL ES 2.0 and 3.0; however it hides the complexity of the OpenGL ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p></li>
</ul>
}
});</pre>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
<p>When a Web application becomes invisible (moves to the background), it is suspended. Before Tizen 2.4, to continue to execute the application on the background, you had to set the <span style="font-family: Courier New,Courier,monospace">background-support</span> attribute of the <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span> element to <span style="font-family: Courier New,Courier,monospace">enable</span> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications).</p>
-<p>Since Tizen 2.4, the background process management policy has been changed. The system does not allow applications to run on the background except when they are explicitly declared to do so by having a specific background category. For more information on the available background categories, see the <a href="../../native/app_management/ui_app_n.htm#allow_bg_table">Allowed background application policy</a> table.</p>
+<p>Since Tizen 2.4, the background process management policy has been changed. The system does not allow applications to run on the background except when they are explicitly declared to do so by having a specific background category. For more information on the available background categories, see the <a href="../../native/app_management/efl_ui_app_n.htm#allow_bg_table">Allowed background application policy</a> table.</p>
<table class="note">
<tbody>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<topic href="html/native/guides_n.htm" label="Native Application">
<topic href="html/native/app_management/app_management_cover_n.htm" label="Application Management">
<topic href="html/native/app_management/applications_n.htm" label="Applications">
- <topic href="html/native/app_management/ui_app_n.htm" label="UI Application"></topic>
- <topic href="html/native/app_management/dali_app_n.htm" label="DALi Application"></topic>
- <topic href="html/native/app_management/service_app_n.htm" label="Service Application"></topic>
- <topic href="html/native/app_management/widget_app_n.htm" label="Widget Application"></topic>
- <topic href="html/native/app_management/watch_app_n.htm" label="Watch Application"></topic>
+ <topic href="html/native/app_management/ui_app_n.htm" label="UI Applications">
+ <topic href="html/native/app_management/dali_app_n.htm" label="DALi Applications">
+ <topic href="html/native/app_management/dali_basic_app_n.htm" label="Basic UI Application"></topic>
+ <topic href="html/native/app_management/dali_watch_app_n.htm" label="Watch Application"></topic>
+ </topic>
+ <topic href="html/native/app_management/efl_app_n.htm" label="EFL Applications">
+ <topic href="html/native/app_management/efl_ui_app_n.htm" label="Basic UI Application"></topic>
+ <topic href="html/native/app_management/watch_app_n.htm" label="Watch Application"></topic>
+ <topic href="html/native/app_management/widget_app_n.htm" label="Widget Application"></topic>
+ </topic>
+ </topic>
+ <topic href="html/native/app_management/service_app_n.htm" label="Service Applications"></topic>
</topic>
<topic href="html/native/app_management/app_resources_n.htm" label="Application Resources"></topic>
<topic href="html/native/app_management/app_preferences_n.htm" label="Application Preferences"></topic>
<topic href="html/native/ui/dali/actors_n.htm" label="Actors">
<topic href="html/native/ui/dali/layout_n.htm" label="Layout Management"></topic>
</topic>
- <topic href="html/native/ui/dali/event_handling_n.htm" label="Event Handling"></topic>
+ <topic href="html/native/ui/dali/event_handling_n.htm" label="Event Handling">
+ <topic href="html/native/ui/dali/touchdata_n.htm" label="Touch Data"></topic>
+ </topic>
<topic href="html/native/ui/dali/ui_components_n.htm" label="UI Components">
+ <topic href="html/native/ui/dali/styling_n.htm" label="Styling UI Components"></topic>
+ <topic href="html/native/ui/dali/visuals_n.htm" label="Visuals"></topic>
<topic href="html/native/ui/dali/buttons_n.htm" label="Buttons"></topic>
<topic href="html/native/ui/dali/itemview_n.htm" label="ItemView"></topic>
<topic href="html/native/ui/dali/scrollview_n.htm" label="ScrollView"></topic>
<topic href="html/native/ui/dali/tableview_n.htm" label="TableView"></topic>
<topic href="html/native/ui/dali/textfield_n.htm" label="TextField"></topic>
<topic href="html/native/ui/dali/textlabel_n.htm" label="TextLabel"></topic>
+ <topic href="html/native/ui/dali/texteditor_n.htm" label="TextEditor"></topic>
<topic href="html/native/ui/dali/imageview_n.htm" label="ImageView"></topic>
+ <topic href="html/native/ui/dali/flexcontainer_n.htm" label="FlexContainer"></topic>
+ <topic href="html/native/ui/dali/model3dview_n.htm" label="Model3dView"></topic>
+ <topic href="html/native/ui/dali/slider_n.htm" label="Slider"></topic>
+ <topic href="html/native/ui/dali/videoview_n.htm" label="VideoView"></topic>
<topic href="html/native/ui/dali/control_base_n.htm" label="Control"></topic>
</topic>
<topic href="html/native/ui/dali/animation_n.htm" label="Animation">
<topic href="html/native/ui/dali/constraints_n.htm" label="Constraints"></topic>
</topic>
<topic href="html/native/ui/dali/resources_n.htm" label="Resources"></topic>
- <topic href="html/native/ui/dali/rendering_effects_n.htm" label="Rendering and Effects"></topic>
+ <topic href="html/native/ui/dali/rendering_effects_n.htm" label="Rendering and Effects">
+ <topic href="html/native/ui/dali/rendering_tutorial_n.htm" label="Shape Drawing"></topic>
+ <topic href="html/native/ui/dali/svg_rendering_n.htm" label="SVG Rendering"></topic>
+ </topic>
<topic href="html/native/ui/dali/background_n.htm" label="Background Knowledge">
<topic href="html/native/ui/dali/handle_n.htm" label="Handle/Body Pattern"></topic>
<topic href="html/native/ui/dali/properties_n.htm" label="Properties"></topic>
</ul>
<p><strong>Attributes:</strong> </p>
<ul>
- <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>
+ <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg_table">background category</a></p></li>
</ul><p><strong>Example:</strong> </p>
<pre class="prettyprint"><tizen:background-category value="media" /></pre>
</td>
</ul>
<p><strong>Attributes:</strong> </p>
<ul>
- <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg_table">background category</a></p></li>
+ <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg_table">background category</a></p></li>
</ul><p><strong>Example:</strong> </p>
<pre class="prettyprint"><tizen:background-category value="media" /></pre>
</td>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<li><p>An alarm is triggered for another application, which becomes the top-most window and hides your application.</p> </li>
</ul>
-<p>Since Tizen 2.4, the application on 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 on the background. In this case, the application can <a href="../../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>
+<p>Since Tizen 2.4, the application on 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 on 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>
<p>When your application becomes visible again, the <code>app_resume_cb()</code> callback is invoked. The visibility returns, when:</p>
<p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
<p>Application state changes are managed by the underlying framework.
- For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
+ For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#state_trans">Application States and Transitions</a>.</p>
<h2 id="start" name="start">Starting the Tizen Native Application</h2>
</tbody>
</table>
-<p>Application state changes are managed by the underlying framework. For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
+<p>Application state changes are managed by the underlying framework. For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#state_trans">Application States and Transitions</a>.</p>
<h2 id="loc_lifecycle">Location Service Life-cycle</h2>
</table>
</li>
- <li>Add the background category type (since Tizen 2.4). <p>You can <a href="../../../../org.tizen.guides/html/native/app_management/ui_app_n.htm#bg-category">describe the background category</a> of your Tizen native application.</p> <p>To add background category types to allow running on the background, click <strong>+</strong> in the <strong>Background Category</strong> panel, select the category type, and click <strong>OK</strong>.</p> </li>
+ <li>Add the background category type (since Tizen 2.4). <p>You can <a href="../../../../org.tizen.guides/html/native/app_management/
efl_ui_app_n.htm#bg-category">describe the background category</a> of your Tizen native application.</p> <p>To add background category types to allow running on the background, click <strong>+</strong> in the <strong>Background Category</strong> panel, select the category type, and click <strong>OK</strong>.</p> </li>
<li>Add shortcuts. <p>To add a shortcut for the application, click <strong>+</strong> in the <strong>Shortcut List</strong> panel, define the shortcut details, and click <strong>OK</strong>.</p> </li>
</ul>
projects / sdk / online-doc.git / commitdiff
