<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/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 Overview: Getting Started with DALi UI Programming</title>
+ <title>DALi Overview: Getting Started with DALi UI Programming</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li><a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API for Wearable Native</a></li>
</ul>
</div></div>
-</div>
+</div>
<div id="container"><div id="contents"><div class="content">
<h1>DALi Overview: Getting Started with DALi UI Programming</h1>
<h3>Signal and Slot</h3>
-<p><a href="http://doc.qt.io/qt-5/signalsandslots.html" target="_blank">Signals and slots</a> are used in the QT GUI library for communication between objects. Objects can send signals containing event information, which can be received by other objects using special functions known as slots. The DALi event system follows the signal and slot mechanism.</p>
+<p>In DALi applications, objects can send signals containing event information, which can be received by other objects using special functions known as slots. The DALi event system follows the <a href="https://en.wikipedia.org/wiki/Signals_and_slots" target="_blank">signal and slot</a> mechanism for communication between objects.</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>
<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: Layout diagram for DALi modules</p>
-<p align="center"><img alt="Layout diagram for DALi modules" src="../../images/dali_modules.png" /></p>
+<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>
<pre class="prettyprint">
Application application = Application::New( &argc, &argv );
</pre></li>
-<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="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>
<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>
</li>
-
+
+<p>Note the first parameter of <span style="font-family: Courier New,Courier,monospace;">HelloWorldExample::OnTouch</span> (actor) is passed by value, not by reference or by pointer.
+You can just pass instances of most DALi classes which inherit from <span style="font-family: Courier New,Courier,monospace;">Dali::BaseHandle</span> (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>) by value.
+This is due to <a href="handle_n.htm">Handle/Body Pattern</a> widely used in DALi.
+</p>
+
+<pre class="prettyprint">
+ bool OnTouch( Actor actor, const TouchEvent& event )
+</pre>
+
<li><strong>Start the application main loop:</strong>
<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>
<p>To run your application, select <strong>Run > Run</strong> or press <strong>Ctrl+F11</strong> in the IDE.</p>
<p>For more information, see <a href="../../../../org.tizen.gettingstarted/html/native/process/running_app_n.htm">Running Applications</a>.</p>
-</li></ol>
+</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>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<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/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>Event Handling: Managing the Event Flow</title>
+ <title>Event Handling: Managing the Event Flow</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<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>
+ <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>
+</div>
<div id="container"><div id="contents"><div class="content">
</ul>
<p>DALi emits various types of signals to an application to inform it of user actions and the application can handle them through slots.</p>
-<p>The concept of signal and slots were introduced by Qt for communication between objects. The event mechanism of DALi is inspired by Qt.</p>
+<p>The concept of signal and slots were introduced by Qt for communication between objects, which inspires DALi.</p>
<p class="figure">Figure: A schematic example of signal-slot connections</p>
-
- <p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p>
+
+ <p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p>
<p>In the figure, signal 1 is connected to slot 1, signal 2 is connected to slot 1 and slot 3, and signal 3 is connected to slot 2.</p>
-
+
<p>The signal and slot system has following advantages:</p>
<ul>
<li>Object-oriented: supports callbacks for C++ member functions</li>
</tr>
</tbody>
</table>
-
+
<p>The actor receiving events is passed to the callbacks.</p>
</li>
</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>
<table>
<caption>
</tr>
</tbody>
</table>
-
+
<p><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::KeyboardFocusManager</span> provides the functionality of handling keyboard navigation and maintaining the 2-dimensional keyboard focus chain. Dissimilar to the key input focus, the keyboard focus is about the focus moving between actors, and that is why this signal is provided by the specific focus managing class.</p>
</li>
</ul>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> </li>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::View</span> </li>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::GaussianBlurViewSignal</span> </li>
-<li><span style="font-family: Courier New,Courier,monospace;">Dali::ScrollBar</span> </li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dali::ScrollBar</span> </li>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Scrollable</span> </li>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> </li>
<li><span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::AccessibilityFocusManager</span> </li>
<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>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Instances of gesture detectors must not be local variables, because gestures cannot be detected after they are destroyed.</td>
- </tr>
- </tbody>
- </table>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Instances of gesture detectors must not be local variables, because gestures cannot be detected after they are destroyed.</td>
+ </tr>
+ </tbody>
+ </table>
<p>DALi currently supports following gesture detectors:</p>
-
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
projects / sdk / online-doc.git / commitdiff