From: Yoonsang Lee Date: Wed, 21 Oct 2015 09:40:53 +0000 (+0900) Subject: [DALi] Revise remaining contents X-Git-Tag: tizen_3.0/TD_SYNC/20161201~352^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=37d36533eefefe1b83c4f9f8d47f10859ba74f25;p=sdk%2Fonline-doc.git [DALi] Revise remaining contents - Layout Management, Buttons, ItemView, ScrollView, TableView, TextField, TextLabel, ImageView, Control, Animation, Animation Types, Rendering and Effects Signed-off-by: Yoonsang Lee Change-Id: I15c8548685ec263b063b5fcd40967e5b3f200dc2 --- diff --git a/org.tizen.ui.practices/html/images/image-view.png b/org.tizen.ui.practices/html/images/image-view.png new file mode 100644 index 0000000..d1debce Binary files /dev/null and b/org.tizen.ui.practices/html/images/image-view.png differ diff --git a/org.tizen.ui.practices/html/images/scrollview-ruler.png b/org.tizen.ui.practices/html/images/scrollview-ruler.png new file mode 100755 index 0000000..2dc6c39 Binary files /dev/null and b/org.tizen.ui.practices/html/images/scrollview-ruler.png differ diff --git a/org.tizen.ui.practices/html/native/dali/actors_n.htm b/org.tizen.ui.practices/html/native/dali/actors_n.htm index 576a23e..62244db 100644 --- a/org.tizen.ui.practices/html/native/dali/actors_n.htm +++ b/org.tizen.ui.practices/html/native/dali/actors_n.htm @@ -44,6 +44,12 @@

An actor is the basic component that composes the entire scene. It can have visible (for example, UI components) or invisible (for example, camera actor or layer) forms.

Actor is also the primary object with which DALi applications interact. Multiple types of event signals provided by actors can be handled in a application through user-defined callback functions.

+

You can find additional guides about Actors from:

+ + +

Actor Types

Figure: Actor types

@@ -157,22 +163,22 @@ Stage::GetCurrent().Add(actor);

For example, a touch event can be handled as follows:

-// This sample code is for the HelloWorldController class
+// This sample code is for the HelloWorldExample class
 // in the 'Basic DALi Application' code from the 'DALi Overview' section.
-void HelloWorldController::Create( Application& application )
+void HelloWorldExample::Create( Application& application )
 {
   // Control is one of the simplest types of Actor which is visible
   Control control = Control::New();
   control.SetParentOrigin( ParentOrigin::CENTER );
   control.SetSize( 100.0f, 100.0f );
-  control.SetBackgroundColor( Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
+  control.SetBackgroundColor( Color::WHITE );
   Stage::GetCurrent().Add( control );
 
   // Connect to a touch signal emitted by the control
-  control.TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
+  control.TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
 }
 
-bool HelloWorldController::OnTouch( Actor actor, const TouchEvent& event )
+bool HelloWorldExample::OnTouch( Actor actor, const TouchEvent& event )
 {
   bool handled = false;
   unsigned int pointCount = event.GetPointCount();
diff --git a/org.tizen.ui.practices/html/native/dali/animation_n.htm b/org.tizen.ui.practices/html/native/dali/animation_n.htm
index cb4c4b7..a76ad4a 100644
--- a/org.tizen.ui.practices/html/native/dali/animation_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/animation_n.htm
@@ -57,9 +57,14 @@
 
 
To implement a basic animation, create an animation object that takes place over 3 seconds:

 
-Dali::Animation animation = Animation::New(3.0f);
+Animation animation = Animation::New( 3.0f );
 

 
+
Please find more information about Animation from:

+
 
Animating Properties

 
 
To animate the properties within DALi, you can use 2 distinct functions:

@@ -98,33 +103,34 @@ animation.Stop();
 
 
  • To loop the animation to play multiple times:
 
    -animation.SetLooping(true);
+animation.SetLooping( true );
 
    • 
 
  • By default, when the animation ends, the properties that it was animating are baked (saved). To discard the property changes when the animation ends or is stopped:
 
    -animation.SetEndAction(Animation::Discard);
+animation.SetEndAction( Animation::Discard );
 
    • 
 
    Using Notifications
    
 
 
    Using DALi's signal framework, the application can be notified when the animation finishes. The Dali::Animation class supports "fire and forget" behavior, which means that the animation continues to play even if the handle is discarded. In the following example, the finished signal is emitted after 2 seconds:
    
 
    -// Assuming this code is in the HelloWorldController class
-void 
-Create(Application& application)
+// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+void HelloWorldExample::Create( Application& application )
 {
-   PushButton actor = PushButton::New();
-   Stage::GetCurrent().Add(actor);
-
-   Animation animation = Animation::New(2.0f); // Duration 2 seconds
-   animation.AnimateTo(Property(actor, Actor::Property::POSITION), Vector3(100.0f, 100.0f, 0.0f));
-   animation.FinishedSignal().Connect(this, &HelloWorldController::OnFinished);
-   animation.Play(); // Fire the animation and forget about it
-} // At this point the animation handle has gone out of scope
-
-void 
-OnFinished(Animation& animation)
+  // Create a button
+  PushButton button = PushButton::New();
+  Stage::GetCurrent().Add( button );
+
+  // Create an animation for the button
+  Animation animation = Animation::New( 2.0f ); // Duration 2 seconds
+  animation.AnimateTo( Property( button, Actor::Property::POSITION ), Vector3( 100.0f, 100.0f, 0.0f ) );
+  animation.FinishedSignal().Connect( this, &HelloWorldExample::OnFinished );
+  animation.Play();  // Fire the animation and forget about it
+}  // At this point the animation handle has gone out of scope
+
+void HelloWorldExample::OnFinished( Animation& animation )
 {
-   // Do something when the animation is finished
+  // Do something when the animation is finished
 }
 
    
 
@@ -132,14 +138,13 @@ OnFinished(Animation& animation)
 
 
    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 Dali::AlphaFunction::BuiltinFunction enumeration (in mobile and wearable applications).
    
 
    -animation.SetDefaultAlphaFunction(Dali::AlphaFunction::EASE_IN);
+animation.SetDefaultAlphaFunction( Dali::AlphaFunction::EASE_IN );
 
    
 
    You can also create your own alpha function:
    
 
    -float 
-MyAlphaFunction(float progress)
+float MyAlphaFunction(float progress)
 {
-   return progress;
+  return progress;
 }
 
 AlphaFunction alphaFunction(&MyAlphaFunction);
@@ -147,8 +152,8 @@ animation.SetDefaultAlphaFunction(alphaFunction);
 
    
 
    You can specify a different alpha function for each animate call within the Animation object:
    
 
    -animation.AnimateTo(Property(actor1, Dali::Actor::Property::POSITION), 
-                    Vector3(10.0f, 50.0f, 0.0f), Dali::AlphaFunction::EASE_IN);
+animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ), 
+                     Vector3( 10.0f, 50.0f, 0.0f ), Dali::AlphaFunction::EASE_IN );
 
    
 
 
diff --git a/org.tizen.ui.practices/html/native/dali/animation_types_n.htm b/org.tizen.ui.practices/html/native/dali/animation_types_n.htm
index 702c4f5..74f63d7 100644
--- a/org.tizen.ui.practices/html/native/dali/animation_types_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/animation_types_n.htm
@@ -49,15 +49,15 @@
 
 
    DALi provides support for animating between several different values, or key frames. A key frame takes a progress value between 0.0f and 1.0f (0 and 100% respectively) and portrays the value of the property when the animation has progressed that much. You can create several key frames:
    
 
    -Dali::KeyFrames keyFrames = Dali::KeyFrames::New();
-keyFrames.Add(0.0f, Vector3(10.0f, 10.0f, 10.0f));
-keyFrames.Add(0.7f, Vector3(200.0f, 200.0f, 200.0f));
-keyFrames.Add(1.0f, Vector3(100.0f, 100.0f, 100.0f));
+KeyFrames keyFrames = KeyFrames::New();
+keyFrames.Add( 0.0f, Vector3( 10.0f, 10.0f, 10.0f ) );
+keyFrames.Add( 0.7f, Vector3( 200.0f, 200.0f, 200.0f ) );
+keyFrames.Add( 1.0f, Vector3( 100.0f, 100.0f, 100.0f ) );
 
    
 
 
    Next, you can add the key frames to your animation.
    
 
    -animation.AnimateBetween(Property(actor1, Dali::Actor::Property::POSITION), keyFrames);
+animation.AnimateBetween( Property( actor1, Dali::Actor::Property::POSITION ), keyFrames );
 
    
 
    When you play the animation, DALi animates the position of actor1 between the specified key frames. The actor1 animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).
    
 
    The advantage of specifying a key frame at 0% is that regardless of where the actor1 is, it starts from position (10.0f, 10.0f, 10.0f). If AnimateTo() is used, the start position is the actor1's current position.
    
@@ -73,42 +73,74 @@ animation.AnimateBetween(Property(actor1, Dali::Actor::Property::POSITION), keyF
 
    The following code presents the black points:
    
 
     Path path = Path::New();
-path.AddPoint(Vector3(50.0f, 10.0f, 0.0f));
-path.AddPoint(Vector3(90.0f, 50.0f, 0.0f));
-path.AddPoint(Vector3(10.0f, 90.0f, 0.0f));
+path.AddPoint( Vector3( 50.0f, 10.0f, 0.0f ) );
+path.AddPoint( Vector3( 90.0f, 50.0f, 0.0f ) );
+path.AddPoint( Vector3( 10.0f, 90.0f, 0.0f ) );
 
    
-
    The control points can be added manually using Dali::Path::AddControlPoint. The Dali::Path class  can also auto-generate the control points for you.
    
+
    The control points can be added manually using Path::AddControlPoint. The Dali::Path class  can also auto-generate the control points for you.
    
 
    -path.GenerateControlPoints(0.25f);
+path.GenerateControlPoints( 0.25f );
 
    
 
    Here 0.25f represents the curvature of the path you require. For more information, see the GenerateControlPoints() function in Dali::Path class (in mobile and wearable applications).
    
 
    To animate actor1 along this path, use the following function:
    
 
    -animation.Animate(actor1, path, Vector3::ZERO);
+animation.Animate( actor1, path, Vector3::ZERO );
 
    
 
    The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path's tangent direction.
    
 
 
 
    Shader Effect Animation
    
-
    Shader effects provide a visual effect for actors. In a shader, uniforms are set according to the purpose of applications. The uniforms of a shader can be animated using the Animate functions such as Animation::AnimateTo().
    
-
    For example, to animate the center point of the Bendy shader effect:
    
-
    -Dali::Animation animation = Dali::Animation::New(1.0f);
+
    Shader effects provide a visual effect for actors. In a shader, uniforms are set according to the purpose of applications. The uniforms of a shader can be animated using the Animate functions such as Animation::AnimateTo(). Please see also Shader Effects for more information.
    
 
-Vector2 newPosition(0.0f, 0.0f);
-animation.AnimateTo(Property(shaderEffect, shaderEffect.GetPositionPropertyName()), newPosition);
-
    
-
    To animate a uniform of a custom shader effect, you must use the name of the uniform:
    
+
    The following example shows a simple example of the shader effect animation:
    
 
    -Dali::Animation animation = Dali::Animation::New(1.0f);
-
-// Set the initial value for the uniform
-shaderEffect.SetUniform("myUniform", -0.5f);
-
-// Animate the uniform to a value
-animation.AnimateTo(Property(shaderEffect, "myUniform"), 0.5f);
+// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+
+// Simple vertex shader code
+const char* SIMPLE_ANIMATE_VERTEX_SHADER = DALI_COMPOSE_SHADER(
+  uniform   float uOffset;
+  void main()
+  {
+    vec4 pos = uProjection * uModelView * vec4(aPosition, 1.0);
+    gl_Position = vec4(pos.x + uOffset, pos.y, pos.zw);
+    vTexCoord = aTexCoord;
+  }
+);
+
+void HelloWorldExample::Create( Application& application )
+{
+  // Create an ImageActor
+  ImageActor imageActor = ImageActor::New( ResourceImage::New( MY_IMAGE_PATH ) );
+  Stage::GetCurrent().Add( imageActor );
+
+  // Create a ShaderEffect. Use the default pixel shader.
+  ShaderEffect shaderEffect =  ShaderEffect::New( SIMPLE_ANIMATE_VERTEX_SHADER, "" );
+  imageActor.SetShaderEffect( shaderEffect );
+
+  // Create an Animation for the shaderEffect
+  Animation animation = Animation::New(1.0f);
+
+  // Set the initial value for the uniform
+  shaderEffect.SetUniform("uOffset", 100.0f);
+
+  // Animate the uniform to a target value
+  animation.AnimateTo( Property( shaderEffect, "uOffset"), 1000.0f);
+  animation.Play();
+}
 
    
 
+
+       
+       
+               
+       
+       
+               
+       
+       
+
    Note
    This sample code uses Dali::ImageActor, which is discouraged due to its poor performance and design. Use of ImageActor should be avoided unless shader effects need to be applied. For general purpose, use Dali::Toolkit::ImageView which has much better performance. ImageView is supposed to support shader effects in the near future.
+               
    
 
 
 
diff --git a/org.tizen.ui.practices/html/native/dali/buttons_n.htm b/org.tizen.ui.practices/html/native/dali/buttons_n.htm
index 3ff9fde..cc03417 100644
--- a/org.tizen.ui.practices/html/native/dali/buttons_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/buttons_n.htm
@@ -23,9 +23,9 @@
 		
    
 		
    Content
    
 		
 		
    Related Info
    
 		
      
@@ -44,7 +44,7 @@
 
      
 
      Buttons: Push, Check, Select!
      
 
-
      A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as PushButton, CheckBoxButton, and RadioButton. The base class for the button controls is Toolkit::Button. The Toolkit::Button class provides the disabled property and the clicked signal. The following table lists the basic signals provided by the Toolkit::Button class.
      
+
      A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as PushButton, CheckBoxButton, and RadioButton. The base class for the button controls is Dali::Toolkit::Button. The Button class provides the disabled property and the clicked signal. The following table lists the basic signals provided by the Dali::Toolkit::Button class.
      
 
 
      
    
@@ -78,133 +78,126 @@
    
   
      
 
-
      Push Button
      
+
      PushButton
      
  
-
      The PushButton class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original appearance when is released.
      
+
      The Dali::Toolkit::PushButton class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original appearance when is released.
      
 
-
      Figure: Push button
        
-	
      Push button
       
+
      Figure: PushButton
        
+	
      PushButton
       
 
 
      A push button emits a Button::PressedSignal() signal when the button is pressed, a Button::ClickedSignal() signal when clicked, and a Button::ReleasedSignal() signal when released or the touch point leaves the boundary of the button. The following code shows an example of a basic push button:
      
 
 
      -class 
-ButtonsController: public ConnectionTracker
+// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+void HelloWorldExample::Create( Application& application )
 {
-   public:
-      ButtonController(Application& application): mApplication(application)
-      {
-         mApplication.InitSignal().Connect(this, &ButtonController::Create);
-      }
-      void Create(Application& application)
-      {
-         PushButton button = PushButton::New();
-         button.SetLabel("Select");
-         button.SetParentOrigin(ParentOrigin::CENTER);
-         button.ClickedSignal().Connect(this, &ButtonController::OnButtonClicked);
-         Stage::GetCurrent().Add(button);
-      }
-      bool OnButtonClicked(Toolkit::Button button)
-      {
-         cout << "OnButtonClicked" << endl;
-
-         return true;
-      }
-   private:
-      Application&  mApplication;
-};
-
-int 
-main(int argc, char **argv)
+  PushButton button = PushButton::New();
+  button.SetParentOrigin( ParentOrigin::CENTER );
+  button.SetLabelText( "Press" );
+  Stage::GetCurrent().Add( button );
+
+  // Connect to button signals emitted by the button
+  button.ClickedSignal().Connect( this, &HelloWorldExample::OnButtonClicked );
+  button.PressedSignal().Connect( this, &HelloWorldExample::OnButtonPressed );
+  button.ReleasedSignal().Connect( this, &HelloWorldExample::OnButtonReleased );
+}
+
+bool HelloWorldExample::OnButtonClicked( Button button )
 {
-   Application application = Application::New(&argc, &argv);
-   ButtonController test(application);
-   application.MainLoop();
+  // Do something when the button is clicked
+  return true;
+}
 
-   return 0;
+bool HelloWorldExample::OnButtonPressed( Button button )
+{
+  // Do something when the button is pressed
+  return true;
+}
+
+bool HelloWorldExample::OnButtonReleased( Button button )
+{
+  // Do something when the button is released
+  return true;
 }
 
      
 
 
-
      CheckBox Button
      
+
      CheckBoxButton
      
  
-
      The CheckBoxButton class provides a check box button, which can be checked or unchecked.
      
+
      The Dali::Toolkit::CheckBoxButton class provides a check box button, which can be checked or unchecked.
      
 
-
      Figure: Checkbox button
        
-	
      Checkbox button
       
+
      Figure: CheckBoxButton
        
+	
      CheckBoxButton
       
 
 
      A checkbox button emits all 4 button input signals, but usually you can just use the Button::StateChangedSignal() signal to be notified when the button changes its state to selected or unselected. The following code shows an example of a basic checkbox button:
      
 
 
      -// Same as the push button example
-
-void 
-Create(Application& application)
+// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+void HelloWorldExample::Create( Application& application )
 {
-   CheckBoxButton button = CheckBoxButton::New();
-   button.SetLabel("Select");
-   button.SetSize(100, 40);
-   button.SetBackgroundColor(Vector4(1, 0, 0, 1));
-   button.SetParentOrigin(ParentOrigin::CENTER);
-   button.StateChangedSignal().Connect(this, &ButtonController::OnButtonStateChanged);
-   Stage::GetCurrent().Add(button);
+  CheckBoxButton button = CheckBoxButton::New();
+  button.SetParentOrigin( ParentOrigin::CENTER );
+  button.SetLabelText( "Check" );
+  button.SetSize( 200,40 );
+  button.SetBackgroundColor( Color::WHITE );
+  Stage::GetCurrent().Add( button );
+
+  // Connect to a button signal emitted by the button
+  button.StateChangedSignal().Connect( this, &HelloWorldExample::OnButtonStateChanged );
 }
 
-bool 
-OnButtonStateChanged(Toolkit::Button button)
+bool HelloWorldExample::OnButtonStateChanged( Button button )
 {
-   cout << "OnButtonStateChanged " << button.IsSelected() << endl;
-
-   return true;
+  // Do something when the button state is changed.
+  // You can get the state using button.IsSelected() call.
+  return true;
 }
-
-// Same as the push button example
 
      
 
-
      Radio Button
      
+
      RadioButton
      
  
-
      The RadioButton class provides a radio button with 2 states: selected and unselected.
      
+
      The Dali::Toolkit::RadioButton class provides a radio button with 2 states: selected and unselected.
      
 
-
      Figure: Radio button
        
-	
      Radio button
       
+
      Figure: RadioButton
        
+	
      RadioButton
       
 
 
      Usually, radio buttons are grouped. Two or more radio buttons are in the same group when they have the same parent. In each group, only 1 radio button can be selected at a given time. You can use the Button::StateChangedSignal() signal to check which radio button is selected. The following code shows an example of a basic radio button:
      
 
 
      -// Same as the push button example
-
-void 
-Create(Application& application)
+// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+void HelloWorldExample::Create( Application& application )
 {
-   Actor radioGroup = Actor::New();
-   radioGroup.SetParentOrigin(ParentOrigin::CENTER);
-   Stage::GetCurrent().Add(radioGroup);
-
-   RadioButton button1 = RadioButton::New();
-   button1.SetLabel("button1");
-   button1.SetBackgroundColor(Vector4(1, 0, 0, 1));
-   button1.SetPosition(0, -40);
-   radioGroup.Add(button1);
-
-   RadioButton button2 = RadioButton::New();
-   button2.SetLabel("button2");
-   button2.SetBackgroundColor(Vector4(0, 0, 1, 1));
-   button2.SetPosition(0, 40);
-   radioGroup.Add(button2);
-
-   button1.StateChangedSignal().Connect(this, &ButtonController::OnButtonStateChanged);
-   button2.StateChangedSignal().Connect(this, &ButtonController::OnButtonStateChanged);
+  Actor radioGroup = Actor::New();
+  radioGroup.SetParentOrigin( ParentOrigin::CENTER );
+  Stage::GetCurrent().Add(radioGroup);
+
+  RadioButton button1 = RadioButton::New();
+  button1.SetLabelText( "button1" );
+  button1.SetBackgroundColor( Color::WHITE );
+  button1.SetPosition( 0, -40 );
+  radioGroup.Add( button1 );
+
+  RadioButton button2 = RadioButton::New();
+  button2.SetLabelText( "button2" );
+  button2.SetBackgroundColor( Color::WHITE );
+  button2.SetPosition( 0, 40 );
+  radioGroup.Add( button2 );
+
+  // Connect a single callback to button signals emitted by both button1 & button2
+  button1.StateChangedSignal().Connect( this, &HelloWorldExample::OnButtonStateChanged );
+  button2.StateChangedSignal().Connect( this, &HelloWorldExample::OnButtonStateChanged );
 }
 
-bool 
-OnButtonStateChanged(Toolkit::Button button)
+bool HelloWorldExample::OnButtonStateChanged( Toolkit::Button button )
 {
-   cout << "OnButtonStateChanged " << button.GetLabel() << " " << button.IsSelected() << endl;
-
-   return true;
+  // Do something when the two button's states are changed.
+  // The parameter button can be both button1 and button2.
+  // You can use button.GetLabelText() and button.IsSelected() to know which button is selected.
+  return true;
 }
-
-// Same as the push button example
 
      
 
 
diff --git a/org.tizen.ui.practices/html/native/dali/control_base_n.htm b/org.tizen.ui.practices/html/native/dali/control_base_n.htm
index ab3443f..60dea39 100644
--- a/org.tizen.ui.practices/html/native/dali/control_base_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/control_base_n.htm
@@ -45,9 +45,9 @@
 
      You can set a background color for a UI component. To set a red background for a component:
      
 
 
      -Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
-control.SetSize(200.0f, 200.0f);
-control.SetBackgroundColor(Dali::Color::RED);
+Control control = Control::New();
+control.SetSize( 200.0f, 200.0f );
+control.SetBackgroundColor( Color::RED );
 
      
 
 
      Figure: Control object with a red background
        
@@ -56,8 +56,8 @@ control.SetBackgroundColor(Dali::Color::RED);
 
      You can handle all existing controls similarly. For example, to set the background color for a TextLabel:
      
 
 
      -Dali::Toolkit::TextLabel label = Dali::Toolkit::TextLabel::New("Hello World");
-label.SetBackgroundColor(Dali::Color::RED);
+TextLabel label = TextLabel::New( "Hello World" );
+label.SetBackgroundColor( Dali::Color::RED );
 
      
 
 
      Figure: TextLabel object with a red background
        
@@ -69,9 +69,9 @@ label.SetBackgroundColor(Dali::Color::RED);
 
      You can set a background image of a control:
      
 
 
      -Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
-Dali::Image image = Dali::Image::New("image.png");
-control.SetBackgroundImage(image);
+Control control = Control::New();
+Image image = Image::New( "image.png" );
+control.SetBackgroundImage( image );
 
      
 
 
      Figure: Control object with a background image
        
diff --git a/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm b/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm
index 5d55bf5..8b0153e 100644
--- a/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/dali_overview_n.htm
@@ -111,19 +111,18 @@ using namespace Dali;
 using namespace Dali::Toolkit;
 
 // This example shows how to create and display Hello World using a simple TextLabel
-//
-class HelloWorldController : public ConnectionTracker
+class HelloWorldExample : public ConnectionTracker
 {
 public:
 
-  HelloWorldController( Application& application )
+  HelloWorldExample( Application& application )
   : mApplication( application )
   {
     // Connect to the Application's init signal
-    mApplication.InitSignal().Connect( this, &HelloWorldController::Create );
+    mApplication.InitSignal().Connect( this, &HelloWorldExample::Create );
   }
 
-  ~HelloWorldController()
+  ~HelloWorldExample()
   {
     // Nothing to do here
   }
@@ -141,8 +140,8 @@ public:
     stage.Add( textLabel );
 
     // Connect to touch & key event signals
-    stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
-    stage.KeyEventSignal().Connect( this, &HelloWorldController::OnKeyEvent );
+    stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
+    stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
   }
 
   bool OnTouch( Actor actor, const TouchEvent& event )
@@ -167,12 +166,11 @@ private:
   Application&  mApplication;
 };
 
-// Entry point for Tizen applications
-//
+// Entry point for DALi applications
 int main( int argc, char **argv )
 {
   Application application = Application::New( &argc, &argv );
-  HelloWorldController test( application );
+  HelloWorldExample test( application );
   application.MainLoop();
   return 0;
 }
@@ -206,12 +204,12 @@ Other code samples in the DALi guide assume they already have those directives.
 Application application = Application::New(&argc, &argv);

    -

    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. To manage signal connection safely, DALi provides the Dali::ConnectionTracker class. A typical way for starting a DALi application is to create a class derived from the Dali::ConnectionTracker class and use its member functions as callback functions for DALi signals (for more information, see Automatic Connection Management). The HelloWorldController class is used in other code samples in the DALi guide.

    +

    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. To manage signal connection safely, DALi provides the Dali::ConnectionTracker class. A typical way for starting a DALi application is to create a class derived from the Dali::ConnectionTracker class and use its member functions as callback functions for DALi signals (for more information, see Automatic Connection Management). The HelloWorldExample class is used in other code samples in the DALi guide.

    -

    After getting the initialized signal from the Dali::Application instance, you can use the DALi APIs for building the scene graph. Connect the HelloWorldController::Create callback to the DALi::Application InitSignal() function:

    +

    After getting the initialized signal from the Dali::Application instance, you can use the DALi APIs for building the scene graph. Connect the HelloWorldExample::Create callback to the DALi::Application InitSignal() function:

    -mApplication.InitSignal().Connect(this, &HelloWorldController::Create);
    +mApplication.InitSignal().Connect(this, &HelloWorldExample::Create); @@ -239,10 +237,10 @@ stage.Add(textLabel);

    The application can handle touch and key event signals as follows:

    -stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
-stage.KeyEventSignal().Connect( this, &HelloWorldController::OnKeyEvent );
+stage.GetRootLayer().TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
+stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
    -

    Any key inputs and touches on the stage are handled by two callback functions, HelloWorldController::OnKeyEvent and HelloWorldController::OnTouch.

    +

    Any key inputs and touches on the stage are handled by two callback functions, HelloWorldExample::OnKeyEvent and HelloWorldExample::OnTouch.

  • Start the application main loop: diff --git a/org.tizen.ui.practices/html/native/dali/event_handling_n.htm b/org.tizen.ui.practices/html/native/dali/event_handling_n.htm index 6ebba92..f79b602 100644 --- a/org.tizen.ui.practices/html/native/dali/event_handling_n.htm +++ b/org.tizen.ui.practices/html/native/dali/event_handling_n.htm @@ -104,22 +104,22 @@ TouchSignalType& TouchedSignal();

    The following example shows how a connection to a touch event signal can be established:

    -// This sample code is for the HelloWorldController class
+// This sample code is for the HelloWorldExample class
 // in the 'Basic DALi Application' code from the 'DALi Overview' section.
-void HelloWorldController::Create( Application& application )
+void HelloWorldExample::Create( Application& application )
 {
   // Control is one of the simplest types of Actor which is visible
   Control control = Control::New();
   control.SetParentOrigin( ParentOrigin::CENTER );
   control.SetSize( 100.0f, 100.0f );
-  control.SetBackgroundColor( Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
+  control.SetBackgroundColor( Color::WHITE );
   Stage::GetCurrent().Add( control );
 
   // Connect to a touch signal emitted by the control
-  control.TouchedSignal().Connect( this, &HelloWorldController::OnTouch );
+  control.TouchedSignal().Connect( this, &HelloWorldExample::OnTouch );
 }
 
-bool HelloWorldController::OnTouch( Actor actor, const TouchEvent& event )
+bool HelloWorldExample::OnTouch( Actor actor, const TouchEvent& event )
 {
   bool handled = false;
   unsigned int pointCount = event.GetPointCount();
@@ -155,19 +155,19 @@ bool HelloWorldController::OnTouch( Actor actor, const TouchEvent& event )
 
    The following example shows how to handle key events on the stage:
    
 
 
    -// This sample code is for the HelloWorldController class
+// This sample code is for the HelloWorldExample class
 // in the 'Basic DALi Application' code from the 'DALi Overview' section.
-void HelloWorldController::Create( Application& application )
+void HelloWorldExample::Create( Application& application )
 {
   // A simple control to render the screen
   PushButton button = PushButton::New();
   Stage::GetCurrent().Add( button );
 
   // Connect to a key event signal emitted by the stage
-  Stage::GetCurrent().KeyEventSignal().Connect( this, &HelloWorldController::OnKeyEvent );
+  Stage::GetCurrent().KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
 }
 
-void HelloWorldController::OnKeyEvent( const KeyEvent& event )
+void HelloWorldExample::OnKeyEvent( const KeyEvent& event )
 {
   if( event.state == KeyEvent::Down )
   {
@@ -526,16 +526,16 @@ void HelloWorldController::OnKeyEvent( const KeyEvent& event )
 
    The example below shows how an application can be notified of a pan gesture:
    
 
 
    -// This sample code is for the HelloWorldController class
+// This sample code is for the HelloWorldExample class
 // in the 'Basic DALi Application' code from the 'DALi Overview' section.
-class HelloWorldController : public ConnectionTracker
+class HelloWorldExample : public ConnectionTracker
 {
   // ...
   // A gesture detector should be a member variable to exist outside the local scope.
   PanGestureDetector mDetector;
 };
 
-void HelloWorldController::Create( Application& application )
+void HelloWorldExample::Create( Application& application )
 {
   PushButton button = PushButton::New();
   button.SetParentOrigin( ParentOrigin::CENTER );
@@ -546,10 +546,10 @@ void HelloWorldController::Create( Application& application )
   mDetector = PanGestureDetector::New();
   mDetector.Attach( button );
   // Attach the button to the detector
-  mDetector.DetectedSignal().Connect( this, &HelloWorldController::OnPan );
+  mDetector.DetectedSignal().Connect( this, &HelloWorldExample::OnPan );
 }
 
-void HelloWorldController::OnPan( Actor actor, const PanGesture& gesture )
+void HelloWorldExample::OnPan( Actor actor, const PanGesture& gesture )
 {
   // Move the button using detected gesture
   actor.TranslateBy( Vector3( gesture.displacement ) );
diff --git a/org.tizen.ui.practices/html/native/dali/imageview_n.htm b/org.tizen.ui.practices/html/native/dali/imageview_n.htm
index d470a68..f6edcc3 100644
--- a/org.tizen.ui.practices/html/native/dali/imageview_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/imageview_n.htm
@@ -21,6 +21,11 @@
 		
    Mobile native Wearable native
    
 	
 		
    
+		
    Content
    
+		
 		
    Related Info
    
 		
      
 			
    • Dali::Image API for Mobile Native
      • 
@@ -34,21 +39,27 @@
 
      
 
      ImageView: Displaying Images
      
 
-
      The ImageView component displays an image.
      
+
      The Dali::Toolkit::ImageView component displays an image.
      
 
+
      Figure: ImageView
        
+	
      ImageView
      
 
-
      The image view is constructed by passing a Dali::Image object. The Dali::Image is an abstract base class with multiple derived classes, and the Dali::ResourceImage class is used for loading an image from a file or URL. The following example shows how to create an ImageView object:
      
+
      Creating an ImageView
      
+
      The image view is constructed by passing an URL string or a Dali::Image object. The Dali::Image is an abstract base class with multiple derived classes, and the Dali::ResourceImage class is used for loading an image from a file or URL. The following example shows how to create an ImageView object:
      
 
 
      -Image image = ResourceImage::New(myImageFilename);
-ImageView imageView = ImageView::New(image);
+ImageView imageView = ImageView::New( myImageURL );
+// or
+Image image = ResourceImage::New( myImageURL );
+ImageView imageView = ImageView::New( image );
 
      
 
+
      Changing the Image
      
 
-
      The image view needs a reference to a Dali::Image object on creation. However, the image object can be later changed by calling the ImageView::SetImage() function:
      
+
      The image object can be later changed by calling the ImageView::SetImage() function:
      
 
 
      -imageView.SetImage(newImage);
+imageView.SetImage( newImage );
 
      
 
     
diff --git a/org.tizen.ui.practices/html/native/dali/itemview_n.htm b/org.tizen.ui.practices/html/native/dali/itemview_n.htm
index 0173731..bb23dfc 100644
--- a/org.tizen.ui.practices/html/native/dali/itemview_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/itemview_n.htm
@@ -45,7 +45,7 @@
 
      
 
      ItemView: Item Container with Layouts
      
 
-
      The ItemView class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.
      
+
      The Dali::Toolkit::ItemView class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.
      
 
 
 
      Figure: ItemView layouts
        
@@ -68,59 +68,62 @@
 
 
      Implementing ItemFactory
      
 
-
      To create an ItemView instance, you must create your own ItemFactory class by deriving from the Dali::Toolkit::ItemFactory class and providing its instance to the ItemView::New() function. ItemFactory is an abstract class having 2 pure virtual member functions to create items and get the number of created items. The following basic example shows how to implement an ItemFactory class:
      
+
      To create an Dali::Toolkit::ItemView instance, you must create your own ItemFactory class by deriving from the Dali::Toolkit::ItemFactory class and providing its instance to the ItemView::New() function. ItemFactory is an abstract class having 2 pure virtual member functions to create items and get the number of created items. The following basic example shows how to implement an ItemFactory class:
      
 
 
      -class MyFactory : public Dali::Toolkit::ItemFactory
+class MyFactory : public ItemFactory
 {
 public:  
-   virtual unsigned int GetNumberOfItems()
-   {
-      // Return the number of items
-
-      return MY_ITEM_COUNT;
-   } 
- 
-   virtual Actor NewItem(unsigned int itemId) 
-   { 
-      // Create the actor representing the item based on the itemId
-      std::ostringstream imageName; 
-      imageName << "my-image-folder/" << itemId << ".png";
-
-      // If item is 10, this results in my-image-folder/10.png
-      Dali::ResourceImage image = Dali::ResourceImage::New(imageName.str());
-
-      // Create an ImageActor from the image
-      return Dali::ImageActor::New(image);
-   }
-};
      
+  virtual unsigned int GetNumberOfItems()
+  {
+    // Return the number of items
+    return MY_ITEM_COUNT;
+  } 
+
+  virtual Actor NewItem(unsigned int itemId) 
+  { 
+    // Create the actor representing the item based on the itemId
+    return ImageView::New( MY_IMAGE_PATHS[itemId] );
+  }
+};
+
    
 
 
    The overridden functions in the derived class are called by the ItemView object.
    
 
 
    Creating an ItemView
    
 
-
    The following basic example shows how to create an ItemView:
    
+
    The following basic example shows how to create a Dali::Toolkit::ItemView object:
    
 
-
    // Store this as a member variable
-MyFactory factory; 
-
-// Pass in the factory
-Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New(factory); 
+
    +// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+class HelloWorldExample : public ConnectionTracker
+{
+  // ...
+  // Store a factory as a member variable
+  MyFactory mFactory; 
+};
 
-itemView.SetParentOrigin(ParentOrigin::CENTER);
-itemView.SetAnchorPoint(AnchorPoint::CENTER);
+void HelloWorldExample::Create( Application& application )
+{
+  // Create an ItemView with the factory
+  ItemView itemView = ItemView::New( mFactory ); 
+  itemView.SetParentOrigin( ParentOrigin::CENTER );
 
-// Create a layout
-Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New(Dali::Toolkit::DefaultItemLayout::SPIRAL);
+  // Create a layout
+  ItemLayoutPtr spiralLayout = DefaultItemLayout::New( DefaultItemLayout::SPIRAL );
 
-// Add the layout to the ItemView
-itemView.AddLayout(spiralLayout);
+  // Add the layout to the itemView
+  itemView.AddLayout( *spiralLayout );
+  // More layouts can be created and added to the itemView
 
-// More layouts can be created and added to the ItemView
-// Activate the layout
-itemView.ActivateLayout(0, Dali::Stage::GetCurrent().GetSize(), 0);
+  // Activate the layout
+  itemView.ActivateLayout( 0, Vector3( Stage::GetCurrent().GetSize() ), 0 );
 
-Dali::Stage::GetCurrent().Add(itemView);
    
+  // Add the itemView to the stage
+  Stage::GetCurrent().Add(itemView);
+}
+
    
 
 
 
diff --git a/org.tizen.ui.practices/html/native/dali/layout_n.htm b/org.tizen.ui.practices/html/native/dali/layout_n.htm
index b2ee1d6..b5bb65c 100644
--- a/org.tizen.ui.practices/html/native/dali/layout_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/layout_n.htm
@@ -105,43 +105,33 @@
 
 
    This section describes layout examples with a actor.
     
 
-
    Enabling Size Negotiation
    
-
-
    Text and image actors have relayout enabled by default, while plain actors are disabled unless the SetResizePolicy() function is called.
     
-
 
    Specifying Size Policies
    
 
-
    Actors have different size policies by default. For example, the image actor is set to USE_NATURAL_SIZE. This ensures that an image actor uses its natural size by default when it is placed on the stage. However, if the SetSize() function is used with sizes other than 0 on the image actor, the current resize policy is overridden by the FIXED policy and the actor takes the specified size.
     
+
    Actors have different size policies by default. For example, the Dali::Toolkit::ImageView is set to USE_NATURAL_SIZE. This ensures that an image view uses its natural size by default when it is placed on the stage. However, if the SetSize() function is used with sizes other than 0 on the image view, the current resize policy is overridden by the FIXED policy and the actor takes the specified size.
     
 
 
    You can specify how an actor is size-negotiated using the SetResizePolicy() function. You can specify different policies for the different dimensions of width and height to archive different layouts.
     
 
-
    The following example shows the rootActor with its width set to ResizePolicy::FILL_TO_PARENT and its height set to ResizePolicy::FIT_TO_CHILDREN. It has an image actor added to it with an explicit call to USE_NATURAL_SIZE in both dimensions. This creates an actor that fills the space of its parent in the width dimension and fits its child in the height dimension. As the image actor child is using its natural size, the height of the root actor fits the height of the child image.
     
+
    The following example shows the control with its width set to ResizePolicy::FILL_TO_PARENT and its height set to ResizePolicy::FIT_TO_CHILDREN. It has the imageView added to it with an explicit call to USE_NATURAL_SIZE in both dimensions. This creates the control that fills the space of its parent in the width dimension and fits its child in the height dimension. As the imageView child is using its natural size, the height of the control fits the height of the child image.
     
 
-
    Actor rootActor = Actor::New();
-rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);
-ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));
-image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
-rootActor.Add(image);
    
+
    +Control control = Control::New();
+control.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+control.SetBackgroundColor( Color::BLUE );
+control.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+control.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
+Stage::GetCurrent().Add( control );
+
+ImageView imageView = ImageView::New( MY_IMAGE_PATH );
+imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+imageView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+control.Add( imageView );
+
    
 
 
    The following figure shows the before and after layouts for this code example.
    
 
 
    Figure: Before and after setting the resize policy
      
 	
    Before and after setting the resize policy Before and after setting the resize policy
     
 
-
    To specify that a dimension has a dependency on another dimension, use the ResizePolicy::DIMENSION_DEPENDENCY policy. For example, if the dimension is Dimension::HEIGHT and the dependency is Dimension::WIDTH, there is a height-for-width dependency in effect. You can use the policy in a text view that wraps its text. The following example shows a text view that expands its width according to the size of its parent, wraps its contents and then determines its height based on the width:
     
-
-
    TextLabel text = TextLabel::New("Example");
-text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);
    
-
-
    Specifying Sizes and Size Limits
    
-
-
    To specify a fixed size for an actor, use the FIXED resize policy and set the desired size using the SetSize() function. If only 1 dimension is FIXED, the other value in the size parameter is ignored, so it is safe to set it to 0.
    
-
    To constrain the final negotiated size of an actor, set the minimum and maximum sizes:
     
-
-
    void SetMinimumSize(const Vector2& size)
-void SetMaximumSize(const Vector2& size)
    
 
 
    Adjusting the Negotiated Size
    
 
diff --git a/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm b/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm
index 01c7666..421a81c 100644
--- a/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/rendering_effects_n.htm
@@ -107,24 +107,51 @@
 
 
 
    Custom Shader Effects
    
-
    The ShaderEffect enables you to create custom shader effects by specifying the vertex and fragment shaders. For a custom shader, you can provide the vertex and fragment shader code as strings. These shader snippets get concatenated with the default attributes and uniforms.
    
+
    The Dali::ShaderEffect enables you to create custom shader effects by specifying the vertex and fragment shaders. For a custom shader, you can provide the vertex and fragment shader code as strings. These shader snippets get concatenated with the default attributes and uniforms. Please see also Shader Effect Animation for animating a shader effect.
    
 
-
    Create a custom shader effect:
    
+
    The following example shows a simple example of the custom shader effect:
    
 
 
    -// This variable contains the code for a vertex shader
-std::string myVertexShader; 
-// Use the default pixel shader
-Dali::ShaderEffect myEffect = Dali::ShaderEffect::New(myVertexShader, "");
    
+// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+
+// Simple vertex shader code
+const char* SIMPLE_ANIMATE_VERTEX_SHADER = DALI_COMPOSE_SHADER(
+  uniform   float uOffset;
+  void main()
+  {
+    vec4 pos = uProjection * uModelView * vec4(aPosition, 1.0);
+    gl_Position = vec4(pos.x + uOffset, pos.y, pos.zw);
+    vTexCoord = aTexCoord;
+  }
+);
+
+void HelloWorldExample::Create( Application& application )
+{
+  // Create an ImageActor
+  ImageActor imageActor = ImageActor::New( ResourceImage::New( MY_IMAGE_PATH ) );
+  Stage::GetCurrent().Add( imageActor );
+
+  // Create a ShaderEffect. Use the default pixel shader.
+  ShaderEffect shaderEffect =  ShaderEffect::New( SIMPLE_ANIMATE_VERTEX_SHADER, "" );
+  imageActor.SetShaderEffect( shaderEffect );
+
+  // Set the the uniform value
+  shaderEffect.SetUniform("uOffset", 100.0f);
+}
+
    
 
-
    Set the value of a uniform:
    
-
-
    // If the uniform was declared like this in the shader: uniform float myUniform;
-myEffect.SetUniform("myUniform", 0.5f);
    
-
-
    You can apply the custom shader effect to an actor like any other shader:
    
-
-
    actor.SetShaderEffect(myEffect);
    
+
+       
+       
+               
+       
+       
+               
+       
+       
+
    Note
    This sample code uses Dali::ImageActor, which is discouraged due to its poor performance and design. Use of ImageActor should be avoided unless shader effects need to be applied. For general purpose, use Dali::Toolkit::ImageView which has much better performance. ImageView is supposed to support shader effects in the near future.
+               
    
 
     
 
diff --git a/org.tizen.ui.practices/html/native/dali/scrollview_n.htm b/org.tizen.ui.practices/html/native/dali/scrollview_n.htm
index df39006..1905972 100644
--- a/org.tizen.ui.practices/html/native/dali/scrollview_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/scrollview_n.htm
@@ -51,7 +51,7 @@
 
    
 
    ScrollView: Scrollable Container for Items
    
 
-
    The ScrollView class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.
    
+
    The Dali::Toolkit::ScrollView class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.
    
 
 
 
    The following figure shows example layouts using the ScrollView.
    
@@ -60,51 +60,61 @@
 	
    ScrollView
    
 
 
-
    A scroll view emits a SnapStartedSignal() signal when the ScrollView has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.
    
+
    A scroll view emits a ScrollView::SnapStartedSignal() signal when the scroll view has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.
    
 
 
    Creating a ScrollView
    
 
-
    The following example shows how to create a ScrollView:
    
-
-
    Dali::Toolkit::ScrollView scrollView;
-
-// Create a ScrollView instance
-myScrollView = ScrollView::New();
-
-// Add it to the stage
-Stage::GetCurrent().Add(scrollView);
-
-// Set the size of stage; it covers the entire stage 
-Stage stage = Dali::Stage::GetCurrent();
-Size size = stage.GetSize();
-scrollView.SetSize(size);
-
-// Add actors to the ScrollView 
-Image image = Image::New(DALI_IMAGE_DIR "button-background.png");
-ImageActor imageActor = ImageActor::New(image);
-scrollView.Add(imageActor);
-// The ScrollView contents are now draggable
-
-// To enforce horizontal-only scrolling, the Y axis ruler can be disabled 
-RulerPtr rulerY = new DefaultRuler();
-rulerY->Disable();
-scrollView.SetRulerY(rulerY);
-
-// To enable snapping, a FixedRuler can be applied to the X axis, with snap points spaced to the width of the stage. 
-Size size = stage.GetSize();
-RulerPtr rulerX = new FixedRuler(size.width);
-scrollView.SetRulerX(rulerX);
-
-// A domain can be applied to rulers to prevent scrolling beyond this boundary
-// In this case, to 4 times the width of the stage, allowing for 4 pages to be scrolled
-Size size = stage.GetSize();
-RulerPtr rulerX = new FixedRuler(size.width);
-rulerX->SetDomain(RulerDomain(0.0f, size.width*4.0f));
-scrollView.SetRulerX(rulerX);
    
+
    The following example shows how to create a Dali::Toolkit::ScrollView object:
    
+
+
    +// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+void HelloWorldExample::Create( Application& application )
+{
+  // Create a ScrollView instance
+  ScrollView scrollView = ScrollView::New();
+  scrollView.SetParentOrigin( ParentOrigin::CENTER );
+  Stage::GetCurrent().Add(scrollView);
+
+  // Set the size of scrollView; it covers the entire stage 
+  Size size = Stage::GetCurrent().GetSize();
+  scrollView.SetSize(size);
+
+  // Add actors to the ScrollView 
+  for( int i; i < MY_ITEM_COUNT; ++i )
+  {
+    ImageView imageView = ImageView::New( MY_IMAGE_PATHS[i] );
+    imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    imageView.SetPosition( i * size.x, 0.0f );
+    scrollView.Add( imageView );
+  }
+
+  // The ScrollView contents are now draggable
+
+  // To enforce horizontal-only scrolling, the Y axis ruler can be disabled 
+  RulerPtr rulerY = new DefaultRuler();
+  rulerY->Disable();
+  scrollView.SetRulerY( rulerY );
+
+  // To enable snapping, a FixedRuler can be applied to the X axis,
+  // with snap points spaced to the width of the stage. 
+  RulerPtr rulerX1 = new FixedRuler( size.width );
+  scrollView.SetRulerX( rulerX1 );
+
+  // A domain can be applied to rulers to prevent scrolling beyond this boundary
+  // In this case, to 4 times the width of the stage, allowing for 4 pages to be scrolled
+  RulerPtr rulerX2 = new FixedRuler( size.width );
+  rulerX2->SetDomain( RulerDomain( 0.0f, size.width*4.0f ) );
+  scrollView.SetRulerX( rulerX2 );
+}
+
    
 
 
    Using Ruler, RulerDomain, and Wrap
    
 
-
    The Ruler abstract class defines the scroll axes. The RulerDomain class specifies the minimum and maximum values of a ruler. The ScrollView class provides a wrap mode for ScrollView contents. When enabled, the ScrollView contents are wrapped over the x/y domain. The ScrollView behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.
    
+
    The Dali::Toolkit::Ruler abstract class defines the scroll axes. The Dali::Toolkit::RulerDomain class specifies the minimum and maximum values of a ruler. The Dali::Toolkit::ScrollView class provides a wrap mode for ScrollView contents. When enabled, the ScrollView contents are wrapped over the x/y domain. The ScrollView behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.
    
+
+
    Figure: Ruler, RulerDomain, and Wrap modes
      
+	
    Ruler, RulerDomain, and Wrap modes
    
 
 
    
    
diff --git a/org.tizen.ui.practices/html/native/dali/tableview_n.htm b/org.tizen.ui.practices/html/native/dali/tableview_n.htm
index 2897aa0..2093e84 100644
--- a/org.tizen.ui.practices/html/native/dali/tableview_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/tableview_n.htm
@@ -21,6 +21,10 @@
 		
    Mobile native Wearable native
    
 	
 		
    
+		
    Content
    
+		
 		
    Related Info
    
 		
      
 			
    • Dali::Toolkit::TableView API for Mobile Native
      • 
@@ -32,50 +36,40 @@
 
      
 
      TableView: Container with Grid-like Layout
      
 
-
      The TableView class is a layout container for aligning child actors in a grid like layout. TableView constraints the x and y position and width and height of the child actors.
      
+
      The Dali::Toolkit::TableView class is a layout container for aligning child actors in a grid like layout. TableView constraints the x and y position and width and height of the child actors.
      
 
 
      Figure: TableView
        
 	
      TableView
      
 	
 
      Creating a TableView
      
 
-
      The following example shows how to create a TableView:
      
+
      The following example shows how to create a TableView object:
      
 
-
      class ButtonsController: public ConnectionTracker
+
      +// This sample code is for the HelloWorldExample class
+// in the 'Basic DALi Application' code from the 'DALi Overview' section.
+void HelloWorldExample::Create( Application& application )
 {
-   ButtonsController(Application& application)
-      : mApplication(application)
-   {
-      mApplication.InitSignal().Connect(this, &ButtonsController::Create);
-   }
-
-   void Create(Application& application)
-   {
-      Stage stage = Stage::GetCurrent();
-
-      TableView tableView = TableView::New(4,4);
-      tableView.SetKeyboardFocusable(true);
-      tableView.SetName("TableView");
-
-      for (int row = 0; row < 4; ++row)
-      {
-         for (int col = 0; col < 4; ++col)
-         {
-            Control control = Control::New();
-            std::ostringstream str;
-            str << row << "-" << col;
-            control.SetName(str.str());
-            control.SetKeyboardFocusable(true);
-            tableView.AddChild(control, TableView::CellPosition(row, col));
-         }
-      }
-      stage.Add(tableView);
-   }
-
-   // Signal
-
-   Application& mApplication;
-}
      
+  TableView tableView = TableView::New(4,4);
+  tableView.SetKeyboardFocusable(true);
+  tableView.SetParentOrigin( ParentOrigin::CENTER );
+  tableView.SetSize( 300, 300 );
+
+  for (int row = 0; row < 4; ++row)
+  {
+    for (int col = 0; col < 4; ++col)
+    {
+      std::ostringstream str;
+      str << row << "-" << col;
+      TextLabel textLabel = TextLabel::New( str.str() );
+      textLabel.SetKeyboardFocusable(true);
+      textLabel.SetBackgroundColor( Color::WHITE );
+      tableView.AddChild(textLabel, TableView::CellPosition(row, col));
+    }
+  }
+  Stage::GetCurrent().Add(tableView);
+}
+
      
 
 
 
diff --git a/org.tizen.ui.practices/html/native/dali/textfield_n.htm b/org.tizen.ui.practices/html/native/dali/textfield_n.htm
index 3352540..f4eaada 100644
--- a/org.tizen.ui.practices/html/native/dali/textfield_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/textfield_n.htm
@@ -38,32 +38,34 @@
 
      
 
      TextField: Type Your Text!
      
 
-
      The TextField class is a control providing a single-line editable text field.
      
+
      The Dali::Toolkit::TextField class is a control providing a single-line editable text field.
      
 
 
      Figure: TextField
        
 	
      TextField
      
 	
 
      Creating a TextField
      
 
-
      Before text has been entered, the TextField can display a placeholder text. An alternative placeholder can be displayed when the TextField has keyboard focus. For example, a TextField used to enter a username can initially show the text Unknown Name, and the text Enter Name. when the cursor is visible.
      
+
      Before text has been entered, the Dali::Toolkit::TextField can display a placeholder text. An alternative placeholder can be displayed when the TextField has keyboard focus. For example, a TextField used to enter a username can initially show the text Unknown Name, and the text Enter Name. when the cursor is visible.
      
 
 
      TextField field = TextField::New();
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT, "Unnamed Name");
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_FOCUSED, "Enter Name.");
-Stage::GetCurrent().Add(field);
+field.SetProperty( TextField::Property::PLACEHOLDER_TEXT, "Unnamed Name" );
+field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_FOCUSED, "Enter Name" );
+Stage::GetCurrent().Add( field );
 
      
 
 
      When the TextField is tapped, it automatically gets the keyboard focus. Key events enter the text, and the placeholder text is removed. After text has been entered, it can be retrieved from the TEXT property.
      
 
-
      Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);
-std::cout << "Received text: " << fieldText.Get< std::string >() << std::endl;
      
+
      +Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);
+std::string fieldTextString =  fieldText.Get< std::string >();
+
      
 
 
 
      Aligning Text
      
 
-
      The TextField displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:
      
+
      The Dali::Toolkit::TextField displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:
      
 
-
      field.SetProperty(TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN"); // "CENTER" or "END"
      
+
      field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
      
 
 
      Using Decorations
      
 
@@ -259,8 +261,8 @@ std::cout << "Received text: " << fieldText.Get< std::s
 
 
      To change the color of the text, use the TEXT_COLOR property. An alternative color can be used for placeholder text by setting the PLACEHOLDER_TEXT_COLOR property. Unlike the Actor::COLOR property, these properties do not affect child actors added to the TextField.
      
 
-
      field.SetProperty(TextField::Property::TEXT_COLOR, Color::CYAN);
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK);
      
+
      field.SetProperty( TextField::Property::TEXT_COLOR, Color::CYAN );
+field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK );
      
 
 
 
diff --git a/org.tizen.ui.practices/html/native/dali/textlabel_n.htm b/org.tizen.ui.practices/html/native/dali/textlabel_n.htm
index fb908a8..ea01437 100644
--- a/org.tizen.ui.practices/html/native/dali/textlabel_n.htm
+++ b/org.tizen.ui.practices/html/native/dali/textlabel_n.htm
@@ -40,7 +40,7 @@
 
      
 
      TextLabel: Displaying Text Labels
      
 
-
      The TextLabel class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.
      
+
      The Dali::Toolkit::TextLabel class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.
      
 
 
      Figure: TextLabel
        
  	
      TextLabel