From: Yoonsang Lee Date: Tue, 14 Jul 2015 08:17:04 +0000 (+0900) Subject: [DALi][DOC-213] Update Create a DALi application X-Git-Tag: tizen_3.0/TD_SYNC/20161201~710^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=b89580dfbdc5ca729a81997d785eee89488dc4cf;p=sdk%2Fonline-doc.git [DALi][DOC-213] Update Create a DALi application Signed-off-by: Yoonsang Lee Change-Id: I812eaa5178188aa8aefc07828eeee977a4ff5bb6 --- 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 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 index 0000000..3be4125 Binary files /dev/null and b/org.tizen.ui.guides/html/images/tizen_project_dali.png differ diff --git a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm index cb67d3a..20a70b0 100755 --- a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm +++ b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm @@ -77,64 +77,95 @@ DALi.

To create a 'Hello World' application with Dali:

    +
  1. Create a DALi project
  2. Initialize the DALi application
    3. -
  3. Create an actor and add to a stage
    4. +
  4. Create an actor and add it to a stage
    5. +
  5. Build your DALi application
    6. +
  6. Run your DALi application
-
#include < dali-toolkit/dali-toolkit.h>
+
Create a DALi project

+
+
    
+
  1. Launch the Tizen IDE.
    2. 
+
  2. Choose File > New > Tizen Native Project.
+
    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.
+Please see Creating the Application Project for more information.
    
+
    3. 
+
+
    Figure: Create a DALi project
    
+
    Create a DALi project
    
+
+
  3. 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:
+
    +#include <dali-toolkit/dali-toolkit.h>
 
 using namespace Dali;
 using Dali::Toolkit::TextLabel;
 
-// This example shows how to create and display Hello World! using a simple TextActor
-
+// This example shows how to create and display Hello World using a simple TextLabel
+//
 class HelloWorldController : public ConnectionTracker
 {
 public:
 
-   HelloWorldController(Application& application) : mApplication(application)
-   {
-      // Connect to the Application's Init signal
-      mApplication.InitSignal().Connect(this, &HelloWorldController::Create);
-   }
-
-   ~HelloWorldController()
-   {
-      // Remove Hello World actor from stage
-      Stage::GetCurrent().Remove(mTextLabel);
-   }
-
-   // The Init signal is received once (only) during the Application lifetime
-   void Create(Application& application)
-   {
-      // Get a handle to the stage
-      Stage stage = Stage::GetCurrent();
-      mTextLabel = TextLabel::New("Hello World");
-      stage.Add(mTextLabel);
-   }
+  HelloWorldController( Application& application )
+  : mApplication( application )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &HelloWorldController::Create );
+  }
+
+  ~HelloWorldController()
+  {
+    // Nothing to do here
+  }
+
+  // The 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.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    textLabel.SetName( "hello-world-label" );
+    stage.Add( textLabel );
+
+    // Respond to a click anywhere on the stage
+    stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
+  }
+
+  bool OnTouch( Actor actor, const TouchEvent& touch )
+  {
+    // quit the application
+    mApplication.Quit();
+    return true;
+  }
 
 private:
-   Application& mApplication;
-   TextLabel mTextLabel;
-};   
+  Application&  mApplication;
+};
 
-// Entry point for Linux & Tizen applications
-int main(int argc, char **argv)
+// Entry point for Tizen applications
+//
+int main( int argc, char **argv )
 {
-
-   Application application = Application::New(&argc, &argv);    
-   HelloWorldController test(application); 
-   application.MainLoop();
-
-   return 0;
+  Application application = Application::New( &argc, &argv );
+  HelloWorldController test( application );
+  application.MainLoop();
+  return 0;
 }
 
    
+
    4. 
+

 
-
Initializing the DALi Application

+
Initialize the DALi Application

 
 
To use DALi APIs, include the dali-toolkit.h header file. It includes the dali-core and dali-adaptor modules.

 
-
#include < dali-toolkit/dali-toolkit.h>

+
#include <dali-toolkit/dali-toolkit.h>

 
 
The Dali::Application class (in mobile and wearable applications) initializes and sets up DALi.

 
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.

@@ -153,18 +184,36 @@ mApplication.InitSignal().Connect(this, &HelloWorldController::Create);
application.MainLoop(); -

Creating an Actor and Adding It to a Stage

+

Create an Actor and Add It to a Stage

The TextLabel UI component renders a short text string. To display the TextLabel component, 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:

-
mTextLabel = TextLabel::New("Hello World");
-
+
 Stage stage = Stage::GetCurrent();
-stage.Add(mTextLabel);

+stage.SetBackgroundColor( Color::WHITE );
+
+TextLabel textLabel = TextLabel::New( "Hello World" );
+textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+textLabel.SetName( "hello-world-label" );
+stage.Add( textLabel );
+
+ +

This code additionally sets the background color of the stage and the anchor point, a point defining a position of a child actor from its parent, of the textLabel. 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 TextLabel component is removed from the stage, it remains alive through the reference.

+ + +

Build your DALi application

+ +

To build your application, choose Project > Build Project or press F10.

+

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 Certificate Registration and Building Applications for more information.

+ -

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 TextLabel component is removed from the stage, it remains alive through the reference.

+

Run your DALi application

+

To run your application, choose Run > Run or press Ctrl+F11.

+

Please see Running Applications for more information.

+

Figure: The first DALi application running on Tizen emulator

+

The first DALi application