<p>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.</p>
<p>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.</p>
+<p>You can find additional guides about Actors from:</p>
+<ul>
+ <li><a href="layout_n.htm">Layout Management</a>
+</ul>
+
+
<h2 id="types" name="types">Actor Types</h2>
<p class="figure">Figure: Actor types</p>
<p>For example, a touch event can be handled as follows:</p>
<pre class="prettyprint">
-// 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();
<p>To implement a basic animation, create an animation object that takes place over 3 seconds:</p>
<pre class="prettyprint">
-Dali::Animation animation = Animation::New(3.0f);
+Animation animation = Animation::New( 3.0f );
</pre>
+<p>Please find more information about Animation from:</p>
+<ul>
+ <li><a href="animation_types_n.htm">Animation Types: Types of Animations Supported by DALi</a>
+ <li><a href="constraints_n.htm">Constraints: Imposing Your Own Constraints on Actors</a>
+</ul>
<h2 id="properties" name="properties">Animating Properties</h2>
<p>To animate the properties within DALi, you can use 2 distinct functions:</p>
<li>To loop the animation to play multiple times:
<pre class="prettyprint">
-animation.SetLooping(true);
+animation.SetLooping( true );
</pre></li>
<li>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:
<pre class="prettyprint">
-animation.SetEndAction(Animation::Discard);
+animation.SetEndAction( Animation::Discard );
</pre></li></ul>
<h2 id="notifications" name="notifications">Using Notifications</h2>
<p>Using DALi's signal framework, the application can be notified when the animation finishes. The <span style="font-family: Courier New,Courier,monospace;">Dali::Animation</span> 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:</p>
<pre class="prettyprint">
-// 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
}
</pre>
<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);
+animation.SetDefaultAlphaFunction( Dali::AlphaFunction::EASE_IN );
</pre>
<p>You can also create your own alpha function:</p>
<pre class="prettyprint">
-float
-MyAlphaFunction(float progress)
+float MyAlphaFunction(float progress)
{
- return progress;
+ return progress;
}
AlphaFunction alphaFunction(&MyAlphaFunction);
</pre>
<p>You can specify a different alpha function for each animate call within the <span style="font-family: Courier New,Courier,monospace;">Animation</span> object:</p>
<pre class="prettyprint">
-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 );
</pre>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>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:</p>
<pre class="prettyprint">
-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 ) );
</pre>
<p>Next, you can add the key frames to your animation.</p>
<pre class="prettyprint">
-animation.AnimateBetween(Property(actor1, Dali::Actor::Property::POSITION), keyFrames);
+animation.AnimateBetween( Property( actor1, Dali::Actor::Property::POSITION ), keyFrames );
</pre>
<p>When you play the animation, DALi animates the position of <span style="font-family: Courier New,Courier,monospace;">actor1</span> between the specified key frames. The <span style="font-family: Courier New,Courier,monospace;">actor1</span> 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).</p>
<p>The advantage of specifying a key frame at 0% is that regardless of where the <span style="font-family: Courier New,Courier,monospace;">actor1</span> is, it starts from position (10.0f, 10.0f, 10.0f). If <span style="font-family: Courier New,Courier,monospace;">AnimateTo()</span> is used, the start position is the <span style="font-family: Courier New,Courier,monospace;">actor1</span>'s current position.</p>
<p>The following code presents the black points:</p>
<pre class="prettyprint">
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 ) );
</pre>
-<p>The control points can be added manually using <span style="font-family: Courier New,Courier,monospace;">Dali::Path::AddControlPoint</span>. The <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class can also auto-generate the control points for you.</p>
+<p>The control points can be added manually using <span style="font-family: Courier New,Courier,monospace;">Path::AddControlPoint</span>. The <span style="font-family: Courier New,Courier,monospace;">Dali::Path</span> class can also auto-generate the control points for you.</p>
<pre class="prettyprint">
-path.GenerateControlPoints(0.25f);
+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 <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);
+animation.Animate( actor1, path, Vector3::ZERO );
</pre>
<p>The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path's tangent direction.</p>
<h2 id="shader" name="shader">Shader Effect Animation</h2>
-<p>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 <span style="font-family: Courier New,Courier,monospace;">Animation::AnimateTo()</span>.</p>
-<p>For example, to animate the center point of the Bendy shader effect:</p>
-<pre class="prettyprint">
-Dali::Animation animation = Dali::Animation::New(1.0f);
+<p>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 <span style="font-family: Courier New,Courier,monospace;">Animation::AnimateTo()</span>. Please see also <a href="rendering_effects_n.htm#shader">Shader Effects</a> for more information.</p>
-Vector2 newPosition(0.0f, 0.0f);
-animation.AnimateTo(Property(shaderEffect, shaderEffect.GetPositionPropertyName()), newPosition);
-</pre>
-<p>To animate a uniform of a custom shader effect, you must use the name of the uniform:</p>
+<p>The following example shows a simple example of the shader effect animation:</p>
<pre class="prettyprint">
-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();
+}
</pre>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This sample code uses <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span>, which is discouraged due to its poor performance and design. Use of <span style="font-family: Courier New,Courier,monospace;">ImageActor</span> should be avoided unless shader effects need to be applied. For general purpose, use <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ImageView</span> which has much better performance. <span style="font-family: Courier New,Courier,monospace;">ImageView</span> is supposed to support shader effects in the near future.
+ </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 id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#PushButton">Push Button</a></li>
- <li><a href="#CheckBoxButton">CheckBox Button</a></li>
- <li><a href="#RadioButton">Radio Button</a></li>
+ <li><a href="#PushButton">PushButton</a></li>
+ <li><a href="#CheckBoxButton">CheckBoxButton</a></li>
+ <li><a href="#RadioButton">RadioButton</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Buttons: Push, Check, Select!</h1>
-<p>A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as <span style="font-family: Courier New,Courier,monospace;">PushButton</span>, <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span>, and <span style="font-family: Courier New,Courier,monospace;">RadioButton</span>. The base class for the button controls is <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span>. The <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class provides the <span style="font-family: Courier New,Courier,monospace;">disabled</span> property and the <span style="font-family: Courier New,Courier,monospace;">clicked</span> signal. The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Toolkit::Button</span> class.</p>
+<p>A button is a small object on the UI that you press in order to operate it. DALi provides button controls, such as <span style="font-family: Courier New,Courier,monospace;">PushButton</span>, <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span>, and <span style="font-family: Courier New,Courier,monospace;">RadioButton</span>. The base class for the button controls is <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span>. The <span style="font-family: Courier New,Courier,monospace;">Button</span> class provides the <span style="font-family: Courier New,Courier,monospace;">disabled</span> property and the <span style="font-family: Courier New,Courier,monospace;">clicked</span> signal. The following table lists the basic signals provided by the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Button</span> class.</p>
<table>
<caption>
</tbody>
</table>
-<h2 id="PushButton" name="PushButton">Push Button</h2>
+<h2 id="PushButton" name="PushButton">PushButton</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">PushButton</span> 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.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::PushButton</span> 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.</p>
-<p class="figure">Figure: Push button</p>
- <p align="center"><img alt="Push button" src="../../images/push_button.png"/></p>
+<p class="figure">Figure: PushButton</p>
+ <p align="center"><img alt="PushButton" src="../../images/push_button.png"/></p>
<p>A push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> signal when released or the touch point leaves the boundary of the button. The following code shows an example of a basic push button:</p>
<pre class="prettyprint">
-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;
}
</pre>
-<h2 id="CheckBoxButton" name="CheckBoxButton">CheckBox Button</h2>
+<h2 id="CheckBoxButton" name="CheckBoxButton">CheckBoxButton</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">CheckBoxButton</span> class provides a check box button, which can be checked or unchecked.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::CheckBoxButton</span> class provides a check box button, which can be checked or unchecked.</p>
-<p class="figure">Figure: Checkbox button</p>
- <p align="center"><img alt="Checkbox button" src="../../images/checkbox_button.png"/></p>
+<p class="figure">Figure: CheckBoxButton</p>
+ <p align="center"><img alt="CheckBoxButton" src="../../images/checkbox_button.png"/></p>
<p>A checkbox button emits all 4 button input signals, but usually you can just use the <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> 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:</p>
<pre class="prettyprint">
-// 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
</pre>
-<h2 id="RadioButton" name="RadioButton">Radio Button</h2>
+<h2 id="RadioButton" name="RadioButton">RadioButton</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">RadioButton</span> class provides a radio button with 2 states: selected and unselected.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::RadioButton</span> class provides a radio button with 2 states: selected and unselected.</p>
-<p class="figure">Figure: Radio button</p>
- <p align="center"><img alt="Radio button" src="../../images/radio_button.png"/></p>
+<p class="figure">Figure: RadioButton</p>
+ <p align="center"><img alt="RadioButton" src="../../images/radio_button.png"/></p>
<p>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 <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check which radio button is selected. The following code shows an example of a basic radio button:</p>
<pre class="prettyprint">
-// 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
</pre>
<p>You can set a background color for a UI component. To set a red background for a component:</p>
<pre class="prettyprint">
-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 );
</pre>
<p class="figure">Figure: Control object with a red background</p>
<p>You can handle all existing controls similarly. For example, to set the background color for a TextLabel:</p>
<pre class="prettyprint">
-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 );
</pre>
<p class="figure">Figure: TextLabel object with a red background</p>
<p>You can set a background image of a control:</p>
<pre class="prettyprint">
-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 );
</pre>
<p class="figure">Figure: Control object with a background image</p>
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
}
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 )
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;
}
Application application = Application::New(&argc, &argv);</pre>
<br>
-<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. To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> 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;">HelloWorldController</span> class is used in other code samples in the DALi guide.</p>
+<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. To manage signal connection safely, DALi provides the <span style="font-family: Courier New,Courier,monospace;">Dali::ConnectionTracker</span> 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 DALi guide.</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;">HelloWorldController::Create</span> callback to the <span style="font-family: Courier New,Courier,monospace;">DALi::Application InitSignal()</span> function:</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, &HelloWorldController::Create);</pre>
+mApplication.InitSignal().Connect(this, &HelloWorldExample::Create);</pre>
</li>
<br>
<p>The application can handle touch and key event signals as follows:</p>
<pre class="prettyprint">
-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 );
</pre>
-<p>Any key inputs and touches on the stage are handled by two callback functions, <span style="font-family: Courier New,Courier,monospace;">HelloWorldController::OnKeyEvent</span> and <span style="font-family: Courier New,Courier,monospace;">HelloWorldController::OnTouch</span>.</p>
+<p>Any key inputs and touches on the stage are handled by two 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>
<li><strong>Start the application main loop:</strong>
<p>The following example shows how a connection to a touch event signal can be established:</p>
<pre class="prettyprint">
-// 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();
<p>The following example shows how to handle key events on the stage:</p>
<pre class="prettyprint">
-// 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 )
{
<p>The example below shows how an application can be notified of a pan gesture:</p>
<pre class="prettyprint">
-// 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 );
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 ) );
<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">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating an ImageView</a></li>
+ <li><a href="#change">Changing the Image</a></li>
+ </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::Image API for Mobile Native</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>ImageView: Displaying Images</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ImageView</span> component displays an image.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ImageView</span> component displays an image.</p>
+<p class="figure">Figure: ImageView</p>
+ <p align="center"><img alt="ImageView" src="../../images/image-view.png"/></p>
-<p>The image view is constructed by passing a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object. The <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> is an abstract base class with multiple derived classes, and the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> class is used for <a href="resources_n.htm">loading an image from a file or URL</a>. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ImageView</span> object:</p>
+<h2 id="create" name="create">Creating an ImageView</h2>
+<p>The image view is constructed by passing an URL string or a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object. The <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> is an abstract base class with multiple derived classes, and the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> class is used for <a href="resources_n.htm">loading an image from a file or URL</a>. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ImageView</span> object:</p>
<pre class="prettyprint">
-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 );
</pre>
+<h2 id="change" name="change">Changing the Image</h2>
-<p>The image view needs a reference to a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object on creation. However, the image object can be later changed by calling the <span style="font-family: Courier New,Courier,monospace;">ImageView::SetImage()</span> function:</p>
+<p>The image object can be later changed by calling the <span style="font-family: Courier New,Courier,monospace;">ImageView::SetImage()</span> function:</p>
<pre class="prettyprint">
-imageView.SetImage(newImage);
+imageView.SetImage( newImage );
</pre>
<div id="container"><div id="contents"><div class="content">
<h1>ItemView: Item Container with Layouts</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ItemView</span> class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemView</span> class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.</p>
<p class="figure">Figure: ItemView layouts</p>
<h2 id="factory" name="factory">Implementing ItemFactory</h2>
-<p>To create an <span style="font-family: Courier New,Courier,monospace;">ItemView</span> instance, you must create your own <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class by deriving from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemFactory</span> class and providing its instance to the <span style="font-family: Courier New,Courier,monospace;">ItemView::New()</span> function. <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> 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 <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class:</p>
+<p>To create an <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemView</span> instance, you must create your own <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class by deriving from the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemFactory</span> class and providing its instance to the <span style="font-family: Courier New,Courier,monospace;">ItemView::New()</span> function. <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> 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 <span style="font-family: Courier New,Courier,monospace;">ItemFactory</span> class:</p>
<pre class="prettyprint">
-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);
- }
-};</pre>
+ 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] );
+ }
+};
+</pre>
<p>The overridden functions in the derived class are called by the <span style="font-family: Courier New,Courier,monospace;">ItemView</span> object.</p>
<h2 id="create" name="create">Creating an ItemView</h2>
-<p>The following basic example shows how to create an <span style="font-family: Courier New,Courier,monospace;">ItemView</span>:</p>
+<p>The following basic example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ItemView</span> object:</p>
-<pre class="prettyprint">// Store this as a member variable
-MyFactory factory;
-
-// Pass in the factory
-Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New(factory);
+<pre class="prettyprint">
+// 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);</pre>
+ // Add the itemView to the stage
+ Stage::GetCurrent().Add(itemView);
+}
+</pre>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p>This section describes layout examples with a actor.</p>
-<h3>Enabling Size Negotiation</h3>
-
-<p>Text and image actors have relayout enabled by default, while plain actors are disabled unless the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function is called.</p>
-
<h3>Specifying Size Policies</h3>
-<p>Actors have different size policies by default. For example, the image actor is set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span>. This ensures that an image actor uses its natural size by default when it is placed on the stage. However, if the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function is used with sizes other than 0 on the image actor, the current resize policy is overridden by the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> policy and the actor takes the specified size.</p>
+<p>Actors have different size policies by default. For example, the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ImageView</span> is set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span>. This ensures that an image view uses its natural size by default when it is placed on the stage. However, if the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function is used with sizes other than 0 on the image view, the current resize policy is overridden by the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> policy and the actor takes the specified size.</p>
<p>You can specify how an actor is size-negotiated using the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function. You can specify different policies for the different dimensions of width and height to archive different layouts.</p>
-<p>The following example shows the <span style="font-family: Courier New,Courier,monospace;">rootActor</span> with its width set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span> and its height set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. It has an image actor added to it with an explicit call to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> 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.</p>
+<p>The following example shows the <span style="font-family: Courier New,Courier,monospace;">control</span> with its width set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span> and its height set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. It has the <span style="font-family: Courier New,Courier,monospace;">imageView</span> added to it with an explicit call to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> in both dimensions. This creates the <span style="font-family: Courier New,Courier,monospace;">control</span> that fills the space of its parent in the width dimension and fits its child in the height dimension. As the <span style="font-family: Courier New,Courier,monospace;">imageView</span> child is using its natural size, the height of the <span style="font-family: Courier New,Courier,monospace;">control</span> fits the height of the child image.</p>
-<pre class="prettyprint">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);</pre>
+<pre class="prettyprint">
+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 );
+</pre>
<p>The following figure shows the before and after layouts for this code example.</p>
<p class="figure">Figure: Before and after setting the resize policy</p>
<p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/> <img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p>
-<p>To specify that a dimension has a dependency on another dimension, use the <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> policy. For example, if the dimension is <span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span> and the dependency is <span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span>, 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:</p>
-
-<pre class="prettyprint">TextLabel text = TextLabel::New("Example");
-text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>
-
-<h3>Specifying Sizes and Size Limits</h3>
-
-<p>To specify a fixed size for an actor, use the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> resize policy and set the desired size using the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. If only 1 dimension is <span style="font-family: Courier New,Courier,monospace;">FIXED</span>, the other value in the size parameter is ignored, so it is safe to set it to 0.</p>
-<p>To constrain the final negotiated size of an actor, set the minimum and maximum sizes:</p>
-
-<pre class="prettyprint">void SetMinimumSize(const Vector2& size)
-void SetMaximumSize(const Vector2& size)</pre>
<h3>Adjusting the Negotiated Size</h3>
</ul>
<h3 id="custom" name="custom">Custom Shader Effects</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ShaderEffect</span> 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.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::ShaderEffect</span> 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 <a href="animation_types_n.htm#shader">Shader Effect Animation</a> for animating a shader effect.</p>
-<p>Create a custom shader effect:</p>
+<p>The following example shows a simple example of the custom shader effect:</p>
<pre class="prettyprint">
-// This variable contains the code for a vertex shader
-std::string myVertexShader;
-// Use the default pixel shader
-Dali::ShaderEffect myEffect = Dali::ShaderEffect::New(myVertexShader, "");</pre>
+// 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);
+}
+</pre>
-<p>Set the value of a uniform:</p>
-
-<pre class="prettyprint">// If the uniform was declared like this in the shader: uniform float myUniform;
-myEffect.SetUniform("myUniform", 0.5f);</pre>
-
-<p>You can apply the custom shader effect to an actor like any other shader:</p>
-
-<pre class="prettyprint">actor.SetShaderEffect(myEffect);</pre>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This sample code uses <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span>, which is discouraged due to its poor performance and design. Use of <span style="font-family: Courier New,Courier,monospace;">ImageActor</span> should be avoided unless shader effects need to be applied. For general purpose, use <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ImageView</span> which has much better performance. <span style="font-family: Courier New,Courier,monospace;">ImageView</span> is supposed to support shader effects in the near future.
+ </td>
+ </tr>
+ </tbody>
+</table>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>ScrollView: Scrollable Container for Items</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> class provides a scrollable view, which contains actors and can be scrolled automatically or manually by panning.</p>
<p>The following figure shows example layouts using the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>.</p>
<p align="center"><img alt="ScrollView" src="../../images/scrollview.png"/></p>
-<p>A scroll view emits a <span style="font-family: Courier New,Courier,monospace;">SnapStartedSignal()</span> signal when the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>
+<p>A scroll view emits a <span style="font-family: Courier New,Courier,monospace;">ScrollView::SnapStartedSignal()</span> signal when the scroll view has started to snap or flick. The signal informs the target of the scroll position, scale, and rotation.</p>
<h2 id="create" name="create">Creating a ScrollView</h2>
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">ScrollView</span>:</p>
-
-<pre class="prettyprint">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);</pre>
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> object:</p>
+
+<pre class="prettyprint">
+// 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 );
+}
+</pre>
<h2 id="ruler" name="ruler">Using Ruler, RulerDomain, and Wrap</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Ruler</span> abstract class defines the scroll axes. The <span style="font-family: Courier New,Courier,monospace;">RulerDomain</span> class specifies the minimum and maximum values of a ruler. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> class provides a wrap mode for <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents. When enabled, the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents are wrapped over the x/y domain. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::Ruler</span> abstract class defines the scroll axes. The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::RulerDomain</span> class specifies the minimum and maximum values of a ruler. The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::ScrollView</span> class provides a wrap mode for <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents. When enabled, the <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> contents are wrapped over the x/y domain. The <span style="font-family: Courier New,Courier,monospace;">ScrollView</span> behavior depends on a combination of the Ruler, RulerDomain, and Wrap modes. The following table shows ScrollView behavior according to the combination.</p>
+
+<p class="figure">Figure: Ruler, RulerDomain, and Wrap modes</p>
+ <p align="center"><img alt="Ruler, RulerDomain, and Wrap modes" src="../../images/scrollview-ruler.png"/></p>
<table>
<caption>
<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">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating a TableView</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_1TableView.html">Dali::Toolkit::TableView API for Mobile Native</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>TableView: Container with Grid-like Layout</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">TableView</span> class is a layout container for aligning child actors in a grid like layout. <span style="font-family: Courier New,Courier,monospace;">TableView</span> constraints the x and y position and width and height of the child actors.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TableView</span> class is a layout container for aligning child actors in a grid like layout. <span style="font-family: Courier New,Courier,monospace;">TableView</span> constraints the x and y position and width and height of the child actors.</p>
<p class="figure">Figure: TableView</p>
<p align="center"><img alt="TableView" src="../../images/tableview.png"/></p>
<h2 id="create" name="create">Creating a TableView</h2>
-<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TableView</span>:</p>
+<p>The following example shows how to create a <span style="font-family: Courier New,Courier,monospace;">TableView</span> object:</p>
-<pre class="prettyprint">class ButtonsController: public ConnectionTracker
+<pre class="prettyprint">
+// 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;
-}</pre>
+ 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);
+}
+</pre>
<div id="container"><div id="contents"><div class="content">
<h1>TextField: Type Your Text!</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> class is a control providing a single-line editable text field.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> class is a control providing a single-line editable text field.</p>
<p class="figure">Figure: TextField</p>
<p align="center"><img alt="TextField" src="../../images/textfield.png"/></p>
<h2 id="create" name="create">Creating a TextField</h2>
-<p>Before text has been entered, the <span style="font-family: Courier New,Courier,monospace;">TextField</span> can display a placeholder text. An alternative placeholder can be displayed when the <span style="font-family: Courier New,Courier,monospace;">TextField</span> has keyboard focus. For example, a <span style="font-family: Courier New,Courier,monospace;">TextField</span> used to enter a username can initially show the text <span style="font-family: Courier New,Courier,monospace;">Unknown Name</span>, and the text <span style="font-family: Courier New,Courier,monospace;">Enter Name.</span> when the cursor is visible.</p>
+<p>Before text has been entered, the <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> can display a placeholder text. An alternative placeholder can be displayed when the <span style="font-family: Courier New,Courier,monospace;">TextField</span> has keyboard focus. For example, a <span style="font-family: Courier New,Courier,monospace;">TextField</span> used to enter a username can initially show the text <span style="font-family: Courier New,Courier,monospace;">Unknown Name</span>, and the text <span style="font-family: Courier New,Courier,monospace;">Enter Name.</span> when the cursor is visible.</p>
<pre class="prettyprint">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 );
</pre>
<p>When the <span style="font-family: Courier New,Courier,monospace;">TextField</span> 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 <span style="font-family: Courier New,Courier,monospace;">TEXT</span> property.</p>
-<pre class="prettyprint">Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);
-std::cout << "Received text: " << fieldText.Get< std::string >() << std::endl;</pre>
+<pre class="prettyprint">
+Property::Value fieldText = field.GetProperty(TextField::Property::TEXT);
+std::string fieldTextString = fieldText.Get< std::string >();
+</pre>
<h2 id="align" name="align">Aligning Text</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextField</span> 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:</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextField</span> 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:</p>
-<pre class="prettyprint">field.SetProperty(TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN"); // "CENTER" or "END"</pre>
+<pre class="prettyprint">field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"</pre>
<h2 id="decorations" name="decorations">Using Decorations</h2>
<p>To change the color of the text, use the <span style="font-family: Courier New,Courier,monospace;">TEXT_COLOR</span> property. An alternative color can be used for placeholder text by setting the <span style="font-family: Courier New,Courier,monospace;">PLACEHOLDER_TEXT_COLOR</span> property. Unlike the <span style="font-family: Courier New,Courier,monospace;">Actor::COLOR</span> property, these properties do not affect child actors added to the <span style="font-family: Courier New,Courier,monospace;">TextField</span>.</p>
-<pre class="prettyprint">field.SetProperty(TextField::Property::TEXT_COLOR, Color::CYAN);
-field.SetProperty(TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK);</pre>
+<pre class="prettyprint">field.SetProperty( TextField::Property::TEXT_COLOR, Color::CYAN );
+field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK );</pre>
<div id="container"><div id="contents"><div class="content">
<h1>TextLabel: Displaying Text Labels</h1>
-<p>The <span style="font-family: Courier New,Courier,monospace;">TextLabel</span> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Toolkit::TextLabel</span> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
<p class="figure">Figure: TextLabel</p>
<p align="center"><img alt="TextLabel" src="../../images/textlabel.png"/></p>
projects / sdk / online-doc.git / commitdiff
