[DALi][DOC-213] Update Create a DALi application
authorYoonsang Lee <ysang114.lee@samsung.com>
Tue, 14 Jul 2015 08:17:04 +0000 (17:17 +0900)
committerYoonsang Lee <ysang114.lee@samsung.com>
Tue, 14 Jul 2015 08:18:01 +0000 (17:18 +0900)
Signed-off-by: Yoonsang Lee <ysang114.lee@samsung.com>
Change-Id: I812eaa5178188aa8aefc07828eeee977a4ff5bb6

org.tizen.ui.guides/html/images/hello_world_dali.png [new file with mode: 0644]
org.tizen.ui.guides/html/images/tizen_project_dali.png [new file with mode: 0644]
org.tizen.ui.guides/html/native/dali/dali_overview_n.htm

diff --git a/org.tizen.ui.guides/html/images/hello_world_dali.png b/org.tizen.ui.guides/html/images/hello_world_dali.png
new file mode 100644 (file)
index 0000000..268303e
Binary files /dev/null and b/org.tizen.ui.guides/html/images/hello_world_dali.png differ
diff --git a/org.tizen.ui.guides/html/images/tizen_project_dali.png b/org.tizen.ui.guides/html/images/tizen_project_dali.png
new file mode 100644 (file)
index 0000000..3be4125
Binary files /dev/null and b/org.tizen.ui.guides/html/images/tizen_project_dali.png differ
index cb67d3a..20a70b0 100755 (executable)
@@ -77,64 +77,95 @@ DALi.</p>
 \r
 <p>To create a &#39;Hello World&#39; application with Dali:</p>\r
 <ol>\r
+<li><a href="#create">Create a DALi project</a></li>\r
 <li><a href="#initial">Initialize the DALi application</a></li>\r
-<li><a href="#actor">Create an actor and add to a stage</a></li>\r
+<li><a href="#actor">Create an actor and add it to a stage</a></li>\r
+<li><a href="#build">Build your DALi application</a></li>\r
+<li><a href="#run">Run your DALi application</a></li>\r
 </ol>\r
 \r
-<pre class="prettyprint">#include &lt; dali-toolkit/dali-toolkit.h&gt;\r
+<h3 id="create" name="create">Create a DALi project</h3>\r
+\r
+<ol>\r
+<li>Launch the <strong>Tizen IDE</strong>.</li>\r
+<li>Choose File &gt; New &gt; Tizen Native Project.\r
+<p>Press Finish button, then your project is created at the default location. If you want to change the location, uncheck 'Use default location' and set the new location.\r
+Please see <a href="../../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#creating">Creating the Application Project</a> for more information.</p>\r
+</li>\r
+\r
+<p class="figure">Figure: Create a DALi project</p>\r
+<p align="center"><img alt="Create a DALi project" src="../../images/tizen_project_dali.png" width="600"/></p>\r
+\r
+<li>The new project is shown in the Project Explorer view of the IDE. If you open src/basicdaliapplication.cpp, you can see the source code of basic DALi application as follows:\r
+<pre class="prettyprint">\r
+#include &lt;dali-toolkit/dali-toolkit.h&gt;\r
 \r
 using namespace Dali;\r
 using Dali::Toolkit::TextLabel;\r
 \r
-// This example shows how to create and display Hello World! using a simple TextActor\r
-\r
+// This example shows how to create and display Hello World using a simple TextLabel\r
+//\r
 class HelloWorldController : public ConnectionTracker\r
 {\r
 public:\r
 \r
-&nbsp;&nbsp;&nbsp;HelloWorldController(Application&amp; application) : mApplication(application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Connect to the Application&#39;s Init signal\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;~HelloWorldController()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Remove Hello World actor from stage\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Remove(mTextLabel);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;// The Init signal is received once (only) during the Application lifetime\r
-&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get a handle to the stage\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mTextLabel = TextLabel::New(&quot;Hello World&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(mTextLabel);\r
-&nbsp;&nbsp;&nbsp;}\r
+  HelloWorldController( Application& application )\r
+  : mApplication( application )\r
+  {\r
+    // Connect to the Application's Init signal\r
+    mApplication.InitSignal().Connect( this, &HelloWorldController::Create );\r
+  }\r
+\r
+  ~HelloWorldController()\r
+  {\r
+    // Nothing to do here\r
+  }\r
+\r
+  // The Init signal is received once (only) during the Application lifetime\r
+  void Create( Application& application )\r
+  {\r
+    // Get a handle to the stage\r
+    Stage stage = Stage::GetCurrent();\r
+    stage.SetBackgroundColor( Color::WHITE );\r
+\r
+    TextLabel textLabel = TextLabel::New( "Hello World" );\r
+    textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );\r
+    textLabel.SetName( "hello-world-label" );\r
+    stage.Add( textLabel );\r
+\r
+    // Respond to a click anywhere on the stage\r
+    stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldController::OnTouch );\r
+  }\r
+\r
+  bool OnTouch( Actor actor, const TouchEvent& touch )\r
+  {\r
+    // quit the application\r
+    mApplication.Quit();\r
+    return true;\r
+  }\r
 \r
 private:\r
-&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
-&nbsp;&nbsp;&nbsp;TextLabel mTextLabel;\r
-};&nbsp;&nbsp;&nbsp;\r
+  Application&  mApplication;\r
+};\r
 \r
-// Entry point for Linux &amp; Tizen applications\r
-int main(int argc, char **argv)\r
+// Entry point for Tizen applications\r
+//\r
+int main( int argc, char **argv )\r
 {\r
-\r
-&nbsp;&nbsp;&nbsp;Application application = Application::New(&amp;argc, &amp;argv);&nbsp;&nbsp;&nbsp; \r
-&nbsp;&nbsp;&nbsp;HelloWorldController test(application); \r
-&nbsp;&nbsp;&nbsp;application.MainLoop();\r
-\r
-&nbsp;&nbsp;&nbsp;return 0;\r
+  Application application = Application::New( &argc, &argv );\r
+  HelloWorldController test( application );\r
+  application.MainLoop();\r
+  return 0;\r
 }\r
 </pre>\r
+</li>\r
+</ol>\r
 \r
-<h3 id="initial" name="initial">Initializing the DALi Application</h3>\r
+<h3 id="initial" name="initial">Initialize the DALi Application</h3>\r
 \r
 <p>To use DALi APIs, include the <span style="font-family: Courier New,Courier,monospace;">dali-toolkit.h</span> header file. It includes the <span style="font-family: Courier New,Courier,monospace;">dali-core</span> and <span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> modules.</p>\r
 \r
-<pre class="prettyprint">#include &lt; dali-toolkit/dali-toolkit.h&gt;</pre>\r
+<pre class="prettyprint">#include &lt;dali-toolkit/dali-toolkit.h&gt;</pre>\r
 \r
 <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>\r
 <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>\r
@@ -153,18 +184,36 @@ mApplication.InitSignal().Connect(this, &amp;HelloWorldController::Create);</pre
 <pre class="prettyprint">\r
 application.MainLoop();</pre>\r
   \r
-<h3 id="actor" name="actor">Creating an Actor and Adding It to a Stage</h3>\r
+<h3 id="actor" name="actor">Create an Actor and Add It to a Stage</h3>\r
 \r
 <p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> 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>\r
 \r
-<pre class="prettyprint">mTextLabel = TextLabel::New(&quot;Hello World&quot;);\r
-\r
+<pre class="prettyprint">\r
 Stage stage = Stage::GetCurrent();\r
-stage.Add(mTextLabel);</pre>\r
+stage.SetBackgroundColor( Color::WHITE );\r
+\r
+TextLabel textLabel = TextLabel::New( "Hello World" );\r
+textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );\r
+textLabel.SetName( "hello-world-label" );\r
+stage.Add( textLabel );\r
+</pre>\r
+\r
+<p>This 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 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>\r
+\r
+\r
+<h3 id="build" name="build">Build your DALi application</h3>\r
+\r
+<p>To build your application, choose Project &gt; Build Project or press F10.</p>\r
+<p>The Tizen IDE automatically packages the project after building. Please note that you need to register your certificate at the first time to build. Please see <a href="../../../../org.tizen.devtools/html/common_tools/certificate_registration.htm">Certificate Registration</a> and <a href="../../../../org.tizen.gettingstarted/html/native/process/building_app_n.htm">Building Applications</a> for more information.</p>\r
+\r
 \r
-<p>The application stores actor and resource handles. DALi objects are reference-counted, which makes sure they exist only as long as they are needed. Therefore, store the actor handle. 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>\r
+<h3 id="run" name="run">Run your DALi application</h3>\r
 \r
+<p>To run your application, choose Run &gt; Run or press Ctrl+F11.</p>\r
+<p>Please see <a href="../../../../org.tizen.gettingstarted/html/native/process/running_app_n.htm">Running Applications</a> for more information.</p>\r
 \r
+<p class="figure">Figure: The first DALi application running on Tizen emulator</p>\r
+<p align="center"><img alt="The first DALi application" src="../../images/hello_world_dali.png" /></p>\r
     \r
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
 <script type="text/javascript" src="../../scripts/showhide.js"></script>\r