<div id="toc_border"><div id="toc">\r
<p class="toc-title">Content</p>\r
<ul class="toc">\r
- <li><a href="#basics">Actor Basics</a></li>\r
- <li><a href="#layout">Layout Management</a></li>\r
- <li><a href="#image">Image Actor</a></li>\r
+ <li><a href="#actors">Actors and Stage</a></li>\r
+ <li><a href="#coordinate">Coordinate System</a></li>\r
+ <li><a href="#position">Positioning Actors</a></li>\r
+ <li><a href="#event">Event Handling for Actors</a></li>\r
</ul>\r
<p class="toc-title">Related Info</p>\r
<ul class="toc">\r
<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>\r
- <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Mobile Native</a></li>\r
<li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>\r
<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>\r
- <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Wearable Native</a></li>\r
<li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li> \r
</ul>\r
</div></div>\r
<div id="container"><div id="contents"><div class="content">\r
<h1>Actors: Working with Basic DALi Components</h1>\r
\r
-<p>Actor is the primary object in DALi application.</p>\r
-\r
-<h2 id="basics" name="basics">Actor Basics</h2>\r
-\r
\r
<p>Actor is the basic component that composes the entire scene. It can have visible (for example, UI components, image actor) or invisible (for example, camera actor or layer) forms.</p>\r
<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>\r
\r
-<h3 id="actors" name="actors">Actors and Stage</h3>\r
+<h2 id="actors" name="actors">Actors and Stage</h2>\r
\r
<p>Stage is a top-level object that represents the entire scene or screen. It is used for displaying a hierarchy of actors managed by the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a> structure. An actor inherits a position relative to its parent, and can be moved in relation to this point.</p>\r
\r
Stage::GetCurrent().Add(actor);\r
</pre>\r
\r
-<h3 id="coordinate" name="coordinate">Coordinate System</h3>\r
+<h2 id="coordinate" name="coordinate">Coordinate System</h2>\r
\r
<p>The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with default camera.</p>\r
\r
<p align="center"><img alt="DALi coordinate system" src="../../images/actor_coordinates.png"/></p> \r
\r
\r
-<h3 id="position" name="position">Positioning Actors</h3>\r
+<h2 id="position" name="position">Positioning Actors</h2>\r
<p>An actor inherits its parent's position. The relative position between the actor & parent is determined by the following properties:</p>\r
<ul>\r
<li>Parent origin\r
</li>\r
</ul> \r
\r
-<h3 id="event" name="event">Event Handling for Actors</h3>\r
+<h2 id="event" name="event">Event Handling for Actors</h2>\r
<p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides following event signals:</p> \r
\r
<table>\r
\r
<p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p> \r
\r
-<h2 id="layout" name="layout">Layout Management</h2>\r
-\r
-<p>DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.</p> \r
-\r
-<h3 id="dimension" name="dimension">Dimensions</h3>\r
-<p>The notion of width and height is generalized into the concept of a dimension. Several methods take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dimension</span> enum specifies the available dimensions as bit fields:</p>\r
-<ul>\r
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>\r
-</ul>\r
-<p>If a method can process width and height at the same time, the <span style="font-family: Courier New,Courier,monospace;">Dimension::ALL_DIMENSIONS</span> mask can be specified.</p> \r
-\r
-<h3 id="resize" name="resize">Resize Policies</h3>\r
-\r
-<p>The <span style="font-family: Courier New,Courier,monospace;">ResizePolicy</span> enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>\r
-\r
-<table>\r
- <caption>\r
- Table: Resizing rules\r
- </caption>\r
- <tbody>\r
- <tr>\r
- <th>Resize policy</th>\r
- <th>Description</th>\r
- <th>Illustration</th>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>\r
- <td>Use this option to maintain a specific size as set by the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. This is the default for all actors.</td>\r
- <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>\r
- <td>Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.</td>\r
- <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>\r
- <td>The size of the actor is similar to its parent's size with proportionate filling considered.</td>\r
- <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>\r
- <td>The size of the actor is similar to its parent's size with a relative scale. Use the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function to specify the ratio.</td>\r
- <td style="text-align:center;"></td>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>\r
- <td>The size of the actor is similar to its parent's size with a fixed offset using the SetSizeModeFactor function.</td>\r
- <td style="text-align:center;"></td>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>\r
- <td>The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.</td>\r
- <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>\r
- </tr>\r
- <tr>\r
- <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>\r
- <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>\r
- <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>\r
- </tr>\r
- </tbody>\r
- </table>\r
-\r
-\r
-<h3 id="example" name="example">Example with Actors</h3>\r
-\r
-<p>This section describes a layout example with a actor.</p> \r
-\r
-<h4>Enabling Size Negotiation</h4>\r
-\r
-<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> \r
-\r
-<h4>Specifying Size Policies</h4>\r
-\r
-<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> \r
-\r
-<p>You can specify how an actor is size-negotiated:</p> \r
-\r
-<pre class="prettyprint">void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode</pre>\r
-\r
-<p>It is possible to specify different policies for the different dimensions of width and height to archive different layouts. Different actors have different resize policies specified. For example, image actors are set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> by default.</p> \r
-\r
-<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 called on it. 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> \r
-\r
-<pre class="prettyprint">Actor rootActor = Actor::New();\r
-rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
-rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);\r
-ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));\r
-image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);\r
-rootActor.Add(image);</pre>\r
-\r
-<p>The following images show the before and after layouts for this code example.</p>\r
-\r
-<p class="figure">Figure: Before and after setting the resize policy</p> \r
- <p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/></p>\r
- <p align="center"><img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p> \r
-\r
-\r
-<p>This example shows a root actor set to expand to its parent's width and adjust around its child's height. The child image actor is set to its natural size.</p> \r
-\r
-<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> \r
-\r
-<pre class="prettyprint">TextLabel text = TextLabel::New("Example");\r
-text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
-text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>\r
-\r
-<h4>Specifying Sizes and Size Limits</h4>\r
-\r
-<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 SetSize 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>\r
-<p>To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:</p> \r
-\r
-<pre class="prettyprint">void SetMinimumSize(const Vector2& size)\r
-void SetMaximumSize(const Vector2& size)</pre>\r
-\r
-<h4>Adjusting the Negotiated Size</h4>\r
-\r
-<p>When an actor must to maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy()</span> function. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>\r
-<p>You can use the following resize policies:</p>\r
-<ul>\r
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>\r
-<p>This is the default policy.</p></li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>\r
-<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>\r
-<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>\r
-</ul>\r
-\r
-<pre class="prettyprint">void SetSizeScalePolicy(SizeScalePolicy::Type policy)</pre>\r
-\r
-<h4>Using Actors in Containers</h4>\r
-\r
-<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.</p> \r
-\r
-<pre class="prettyprint">void SetPadding(const Padding& padding)</pre>\r
-\r
- <table class="note">\r
- <tbody>\r
- <tr>\r
- <th class="note">Note</th>\r
- </tr>\r
- <tr>\r
- <td class="note"><p>Beware of infinite dependency loops!</p>\r
-<p>The simplest form of this is shown when the resize policy of a parent actor is set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span> with a child that has a resize policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>.</p> \r
-<p>A more complex loop occurs when a parent actor has a width policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with a height policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. The parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width. If the child's width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>\r
-<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates actors 0 sizes.</p> </td>\r
- </tr>\r
- </tbody>\r
- </table>\r
-\r
-<h2 id="image" name="image">Image Actor</h2>\r
-<p>An image can be displayed through an image actor. THe <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span> class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class and provides means to display resources, such as images on the stage.</p>\r
-\r
-<h3 id="construction" name="construction">Construction</h3>\r
-\r
-<p>The image actor 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 loading an image from a file.</p> \r
-\r
-<pre class="prettyprint">Dali::Image image = ResourceImage::New(myImageFilename);\r
-Dali::ImageActor myImageActor = ImageActor::New(image);</pre>\r
-\r
-<h3 id="style" name="style">Style</h3>\r
-\r
-<p>The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.</p>\r
-<ul> \r
-<li><span style="font-family: Courier New,Courier,monospace;">STYLE_QUAD</span>: A simple flat quad style for rendering images.</li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">STYLE_NINE_PATCH</span>: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.</li>\r
-</ul>\r
-\r
-<pre class="prettyprint">myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);</pre>\r
-\r
-<h3 id="border" name="border">Border</h3>\r
-\r
-<p>The border is used in the <span style="font-family: Courier New,Courier,monospace;">ImageActor::STYLE_NINE_PATCH</span>. It defines the border values of the image for stretching.</p> \r
-\r
-<pre class="prettyprint">Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);\r
-myImageActor.SetBorder(border);</pre>\r
-\r
-<h3 id="pixel" name="pixel">Pixel Area</h3>\r
-\r
-<p>The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.</p> \r
-\r
-<pre class="prettyprint">Rect<int> pixel1(myX, myY, myWidth, myHeight);\r
-if(!myImageActor.IsPixelAreaSet())\r
-{\r
- myImageActor.SetPixelArea(pixel1);\r
-}\r
-\r
-//Removes the pixel area setting\r
-myImageActor.ClearPixelArea();</pre>\r
-\r
-<h3 id="initial" name="initial">Changing an Image</h3>\r
-\r
-<p>The image actor 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 <span style="font-family: Courier New,Courier,monospace;">DaliActor:SetImage()</span> function.</p>\r
-\r
-<pre class="prettyprint">myImageActor.SetImage(newImage);</pre>\r
-\r
\r
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
\r
<p>The concept of signal and slots were introduced by Qt for communication between objects. The event mechanism of DALi is inspired by Qt.</p>\r
\r
-<p class="figure">Figure: A schematic example of signal-slot connections<br>\r
- : Signal 1 is connected to slot 1,<br>\r
- signal 2 is connected to slot 1 & slot 3, <br>\r
- and signal 3 is connected to slot 2.</p> \r
+<p class="figure">Figure: A schematic example of signal-slot connections: Signal 1 is connected to slot 1, signal 2 is connected to slot 1 and slot 3, and signal 3 is connected to slot 2.</p> \r
<p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p> \r
\r
<p>The signal and slot system has following advantages:</p>\r
<p>Enables you to get started with the DALi UI programming.</p></li>
<li><a href="actors_n.htm">Actors: Working with Basic DALi Components</a>
<p>Enables you to handle DALi actors.</p></li>
+ <ul>
+ <li><a href="layout_n.htm">Layout Management: Allocating the Sizes of the Actors</a></li>
+ <li><a href="imageactor_n.htm">Image Actor: Displaying Images</a></li>
+ </ul>
<li><a href="event_handling_n.htm">Event Handling: Managing the Event Flow</a>
<p>Enables you to handle DALi events.</p></li>
<li><a href="ui_components_n.htm">UI Components: Creating the Application Layout</a>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Actors: Working with Basic DALi Components</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#construction">Construction</a></li>
+ <li><a href="#style">Style</a></li>
+ <li><a href="#border">Border</a></li>
+ <li><a href="#initial">Changing an 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::ImageActor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Image Actor: Displaying Images</h1>
+
+<p>An image can be displayed through an image actor. THe <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span> class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class and provides means to display resources, such as images on the stage.</p>
+
+<h2 id="construction" name="construction">Construction</h2>
+
+<p>The image actor 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 loading an image from a file.</p>
+
+<pre class="prettyprint">Dali::Image image = ResourceImage::New(myImageFilename);
+Dali::ImageActor myImageActor = ImageActor::New(image);</pre>
+
+<h2 id="style" name="style">Style</h2>
+
+<p>The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">STYLE_QUAD</span>: A simple flat quad style for rendering images.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">STYLE_NINE_PATCH</span>: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.</li>
+</ul>
+
+<pre class="prettyprint">myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);</pre>
+
+<h2 id="border" name="border">Border</h2>
+
+<p>The border is used in the <span style="font-family: Courier New,Courier,monospace;">ImageActor::STYLE_NINE_PATCH</span>. It defines the border values of the image for stretching.</p>
+
+<pre class="prettyprint">Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);
+myImageActor.SetBorder(border);</pre>
+
+<h2 id="pixel" name="pixel">Pixel Area</h2>
+
+<p>The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.</p>
+
+<pre class="prettyprint">Rect<int> pixel1(myX, myY, myWidth, myHeight);
+if(!myImageActor.IsPixelAreaSet())
+{
+ myImageActor.SetPixelArea(pixel1);
+}
+
+//Removes the pixel area setting
+myImageActor.ClearPixelArea();</pre>
+
+<h2 id="initial" name="initial">Changing an Image</h2>
+
+<p>The image actor 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 <span style="font-family: Courier New,Courier,monospace;">DaliActor:SetImage()</span> function.</p>
+
+<pre class="prettyprint">myImageActor.SetImage(newImage);</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Actors: Working with Basic DALi Components</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#dimension">Dimensions</a></li>
+ <li><a href="#resize">Resize Policies</a></li>
+ <li><a href="#example">Example with Actors</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Layout Management: Allocating the Sizes of the Actors</h1>
+
+<p>DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.</p>
+
+<h2 id="dimension" name="dimension">Dimensions</h2>
+<p>The notion of width and height is generalized into the concept of a dimension. Several methods take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dimension</span> enum specifies the available dimensions as bit fields:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>
+</ul>
+<p>If a method can process width and height at the same time, the <span style="font-family: Courier New,Courier,monospace;">Dimension::ALL_DIMENSIONS</span> mask can be specified.</p>
+
+<h2 id="resize" name="resize">Resize Policies</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ResizePolicy</span> enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>
+
+<table>
+ <caption>
+ Table: Resizing rules
+ </caption>
+ <tbody>
+ <tr>
+ <th>Resize policy</th>
+ <th>Description</th>
+ <th>Illustration</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>
+ <td>Use this option to maintain a specific size as set by the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. This is the default for all actors.</td>
+ <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>
+ <td>Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.</td>
+ <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>
+ <td>The size of the actor is similar to its parent's size with proportionate filling considered.</td>
+ <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>
+ <td>The size of the actor is similar to its parent's size with a relative scale. Use the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function to specify the ratio.</td>
+ <td style="text-align:center;"></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>
+ <td>The size of the actor is similar to its parent's size with a fixed offset using the SetSizeModeFactor function.</td>
+ <td style="text-align:center;"></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>
+ <td>The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.</td>
+ <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>
+ <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>
+ <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2 id="example" name="example">Example with Actors</h2>
+
+<p>This section describes a layout example with a actor.</p>
+
+<h4>Enabling Size Negotiation</h4>
+
+<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>
+
+<h4>Specifying Size Policies</h4>
+
+<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>You can specify how an actor is size-negotiated:</p>
+
+<pre class="prettyprint">void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode</pre>
+
+<p>It is possible to specify different policies for the different dimensions of width and height to archive different layouts. Different actors have different resize policies specified. For example, image actors are set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> by default.</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 called on it. 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>
+
+<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>
+
+<p>The following images show 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"/></p>
+ <p align="center"><img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p>
+
+
+<p>This example shows a root actor set to expand to its parent's width and adjust around its child's height. The child image actor is set to its natural size.</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>
+
+<h4>Specifying Sizes and Size Limits</h4>
+
+<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 SetSize 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 following minimum and maximum sizes, respectively:</p>
+
+<pre class="prettyprint">void SetMinimumSize(const Vector2& size)
+void SetMaximumSize(const Vector2& size)</pre>
+
+<h4>Adjusting the Negotiated Size</h4>
+
+<p>When an actor must to maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy()</span> function. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>
+<p>You can use the following resize policies:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>
+<p>This is the default policy.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>
+<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>
+<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>
+</ul>
+
+<pre class="prettyprint">void SetSizeScalePolicy(SizeScalePolicy::Type policy)</pre>
+
+<h4>Using Actors in Containers</h4>
+
+<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.</p>
+
+<pre class="prettyprint">void SetPadding(const Padding& padding)</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note"><p>Beware of infinite dependency loops!</p>
+<p>The simplest form of this is shown when the resize policy of a parent actor is set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span> with a child that has a resize policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>.</p>
+<p>A more complex loop occurs when a parent actor has a width policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with a height policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. The parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width. If the child's width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>
+<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates actors 0 sizes.</p> </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></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
projects / sdk / online-doc.git / commitdiff