cedric pushed a commit to branch master.
http://git.enlightenment.org/website/www-content.git/commit/?id=8437a73275dd5145d856789c16b996fd55471eac
commit 8437a73275dd5145d856789c16b996fd55471eac
Author: Clément Bénier <clement.ben...@openwide.fr>
Date: Mon Sep 7 16:01:10 2015 +0200
Wiki pages scalability_pg created: 1 main + 4 PG + images + index
Signed-off-by: Clément Bénier <clement.ben...@openwide.fr>
---
media/scalability_effect_1.png | Bin 0 -> 33520 bytes
media/scalability_effect_10.png | Bin 0 -> 53698 bytes
media/scalability_effect_2.png | Bin 0 -> 38507 bytes
media/scalability_effect_3.png | Bin 0 -> 29345 bytes
media/scalability_effect_4.png | Bin 0 -> 52697 bytes
media/scalability_effect_5.png | Bin 0 -> 29595 bytes
media/scalability_effect_6.png | Bin 0 -> 38387 bytes
media/scalability_effect_7.png | Bin 0 -> 33470 bytes
media/scalability_effect_8.png | Bin 0 -> 52808 bytes
media/scalability_effect_9.png | Bin 0 -> 33381 bytes
media/scalability_scale_align_hint.png | Bin 0 -> 23930 bytes
media/scalability_scale_box.png | Bin 0 -> 14906 bytes
media/scalability_scale_example_image.png | Bin 0 -> 3785 bytes
media/scalability_scale_example_image_set.png | Bin 0 -> 24171 bytes
media/scalability_scale_example_part.png | Bin 0 -> 24810 bytes
media/scalability_scale_example_part_aspect.png | Bin 0 -> 59854 bytes
media/scalability_scale_example_text.png | Bin 0 -> 4093 bytes
media/scalability_scale_example_text_fit.png | Bin 0 -> 5575 bytes
media/scalability_scale_fixed.png | Bin 0 -> 5861 bytes
media/scalability_scale_fixed_flexible.png | Bin 0 -> 24620 bytes
media/scalability_scale_fixed_height.png | Bin 0 -> 6035 bytes
media/scalability_scale_flexible_height.png | Bin 0 -> 5389 bytes
media/scalability_scale_grid.png | Bin 0 -> 50154 bytes
media/scalability_scale_original_image.png | Bin 0 -> 157662 bytes
media/scalability_scale_relative.png | Bin 0 -> 6313 bytes
media/scalability_scale_relative_scaled.png | Bin 0 -> 7872 bytes
media/scalability_scale_weight_hint.png | Bin 0 -> 38318 bytes
media/scalability_scale_weight_hint_multiple.png | Bin 0 -> 40448 bytes
pages/docs.txt | 1 +
pages/program_guide/index.txt | 1 +
pages/program_guide/scalability/aspect_ratio.txt | 46 +++
pages/program_guide/scalability/index.txt | 4 +
pages/program_guide/scalability/key_concepts.txt | 77 ++++
.../scalability/scalability_using_edje.txt | 420 +++++++++++++++++++++
.../scalability_using_elementary_ui_components.txt | 100 +++++
pages/program_guide/scalability_pg.txt | 30 ++
36 files changed, 679 insertions(+)
diff --git a/media/scalability_effect_1.png b/media/scalability_effect_1.png
new file mode 100644
index 0000000..71d5088
Binary files /dev/null and b/media/scalability_effect_1.png differ
diff --git a/media/scalability_effect_10.png b/media/scalability_effect_10.png
new file mode 100644
index 0000000..4c43fa8
Binary files /dev/null and b/media/scalability_effect_10.png differ
diff --git a/media/scalability_effect_2.png b/media/scalability_effect_2.png
new file mode 100644
index 0000000..19a49ac
Binary files /dev/null and b/media/scalability_effect_2.png differ
diff --git a/media/scalability_effect_3.png b/media/scalability_effect_3.png
new file mode 100644
index 0000000..e0d3d52
Binary files /dev/null and b/media/scalability_effect_3.png differ
diff --git a/media/scalability_effect_4.png b/media/scalability_effect_4.png
new file mode 100644
index 0000000..9e6a4c7
Binary files /dev/null and b/media/scalability_effect_4.png differ
diff --git a/media/scalability_effect_5.png b/media/scalability_effect_5.png
new file mode 100644
index 0000000..6d1904e
Binary files /dev/null and b/media/scalability_effect_5.png differ
diff --git a/media/scalability_effect_6.png b/media/scalability_effect_6.png
new file mode 100644
index 0000000..7e94032
Binary files /dev/null and b/media/scalability_effect_6.png differ
diff --git a/media/scalability_effect_7.png b/media/scalability_effect_7.png
new file mode 100644
index 0000000..dd6af73
Binary files /dev/null and b/media/scalability_effect_7.png differ
diff --git a/media/scalability_effect_8.png b/media/scalability_effect_8.png
new file mode 100644
index 0000000..35b8048
Binary files /dev/null and b/media/scalability_effect_8.png differ
diff --git a/media/scalability_effect_9.png b/media/scalability_effect_9.png
new file mode 100644
index 0000000..1eea1aa
Binary files /dev/null and b/media/scalability_effect_9.png differ
diff --git a/media/scalability_scale_align_hint.png
b/media/scalability_scale_align_hint.png
new file mode 100644
index 0000000..54e22f9
Binary files /dev/null and b/media/scalability_scale_align_hint.png differ
diff --git a/media/scalability_scale_box.png b/media/scalability_scale_box.png
new file mode 100644
index 0000000..97ba4a2
Binary files /dev/null and b/media/scalability_scale_box.png differ
diff --git a/media/scalability_scale_example_image.png
b/media/scalability_scale_example_image.png
new file mode 100644
index 0000000..84786d9
Binary files /dev/null and b/media/scalability_scale_example_image.png differ
diff --git a/media/scalability_scale_example_image_set.png
b/media/scalability_scale_example_image_set.png
new file mode 100644
index 0000000..a606ce3
Binary files /dev/null and b/media/scalability_scale_example_image_set.png
differ
diff --git a/media/scalability_scale_example_part.png
b/media/scalability_scale_example_part.png
new file mode 100644
index 0000000..45eb275
Binary files /dev/null and b/media/scalability_scale_example_part.png differ
diff --git a/media/scalability_scale_example_part_aspect.png
b/media/scalability_scale_example_part_aspect.png
new file mode 100644
index 0000000..4bd6d91
Binary files /dev/null and b/media/scalability_scale_example_part_aspect.png
differ
diff --git a/media/scalability_scale_example_text.png
b/media/scalability_scale_example_text.png
new file mode 100644
index 0000000..7582a86
Binary files /dev/null and b/media/scalability_scale_example_text.png differ
diff --git a/media/scalability_scale_example_text_fit.png
b/media/scalability_scale_example_text_fit.png
new file mode 100644
index 0000000..02daf4a
Binary files /dev/null and b/media/scalability_scale_example_text_fit.png differ
diff --git a/media/scalability_scale_fixed.png
b/media/scalability_scale_fixed.png
new file mode 100644
index 0000000..6e59df1
Binary files /dev/null and b/media/scalability_scale_fixed.png differ
diff --git a/media/scalability_scale_fixed_flexible.png
b/media/scalability_scale_fixed_flexible.png
new file mode 100644
index 0000000..07bc203
Binary files /dev/null and b/media/scalability_scale_fixed_flexible.png differ
diff --git a/media/scalability_scale_fixed_height.png
b/media/scalability_scale_fixed_height.png
new file mode 100644
index 0000000..e6fd152
Binary files /dev/null and b/media/scalability_scale_fixed_height.png differ
diff --git a/media/scalability_scale_flexible_height.png
b/media/scalability_scale_flexible_height.png
new file mode 100644
index 0000000..ed7a890
Binary files /dev/null and b/media/scalability_scale_flexible_height.png differ
diff --git a/media/scalability_scale_grid.png b/media/scalability_scale_grid.png
new file mode 100644
index 0000000..7d629aa
Binary files /dev/null and b/media/scalability_scale_grid.png differ
diff --git a/media/scalability_scale_original_image.png
b/media/scalability_scale_original_image.png
new file mode 100644
index 0000000..9398ccb
Binary files /dev/null and b/media/scalability_scale_original_image.png differ
diff --git a/media/scalability_scale_relative.png
b/media/scalability_scale_relative.png
new file mode 100644
index 0000000..8a033c3
Binary files /dev/null and b/media/scalability_scale_relative.png differ
diff --git a/media/scalability_scale_relative_scaled.png
b/media/scalability_scale_relative_scaled.png
new file mode 100644
index 0000000..1eb7ff1
Binary files /dev/null and b/media/scalability_scale_relative_scaled.png differ
diff --git a/media/scalability_scale_weight_hint.png
b/media/scalability_scale_weight_hint.png
new file mode 100644
index 0000000..2678e8f
Binary files /dev/null and b/media/scalability_scale_weight_hint.png differ
diff --git a/media/scalability_scale_weight_hint_multiple.png
b/media/scalability_scale_weight_hint_multiple.png
new file mode 100644
index 0000000..0fd2c8b
Binary files /dev/null and b/media/scalability_scale_weight_hint_multiple.png
differ
diff --git a/pages/docs.txt b/pages/docs.txt
index c22c66d..b9230dc 100644
--- a/pages/docs.txt
+++ b/pages/docs.txt
@@ -69,6 +69,7 @@ Go check the current available version of EFL on each
distro/platform:
* [[program_guide/customizing_ui_pg|Customizing UI Components PG]]
* [[program_guide/main_loop_pg|Main Loop PG]]
* [[program_guide/threading_pg|Threading PG]]
+ * [[program_guide/scalability_pg|Scalability PG]]
=== Samples ===
diff --git a/pages/program_guide/index.txt b/pages/program_guide/index.txt
index 666c82b..2e7304f 100644
--- a/pages/program_guide/index.txt
+++ b/pages/program_guide/index.txt
@@ -12,4 +12,5 @@
* [[program_guide/focus_ui_pg|Managing UI Component Focus PG]]
* [[program_guide/main_loop_pg|Main Loop PG]]
* [[program_guide/threading_pg|Threading PG]]
+ * [[program_guide/scalability_pg|Scalability PG]]
++++
diff --git a/pages/program_guide/scalability/aspect_ratio.txt
b/pages/program_guide/scalability/aspect_ratio.txt
new file mode 100644
index 0000000..c68a117
--- /dev/null
+++ b/pages/program_guide/scalability/aspect_ratio.txt
@@ -0,0 +1,46 @@
+{{page>index}}
+--------
+===== Aspect Ratio =====
+
+Sometimes you want the application to be shown in a specific aspect ratio,
+regardless of the screen size.
+
+As images are scaled in different devices, they are resized based on the
+container size. The images have specific properties that define the area to be
+shown when resized.
+
+For example, the following table illustrates what happens to the parts marked
+with yellow rectangles in the following figures, when scaling properties are
+applied.
+
+{{ :scalability_scale_original_image.png }}
+
+<note>
+To set the required aspect ratio, use the
+''evas_object_size_hint_aspect_set()'' function or the ''aspect_preference''
+attribute in the EDC.
+</note>
+
+^ Image resizing effects with a specific aspect ratio ^^^
+| **Aspect** | **Container area** \\ **720x384 (15:8)** ---
**720x640 (9:8)** ||
+|''HORIZONTAL''\\ Resizing based on the container width while keeping the
image aspect ratio. \\ Extra height goes outside the image area and is clipped.
| {{ :scalability_effect_1.png }} | {{ :scalability_effect_2.png }} |
+|''VERTICAL''\\ Resizing based on the container area while keeping the image
aspect ratio. \\ No extra width or height goes outside the image area, so the
entire image is always shown.| {{ :scalability_effect_3.png }} | {{
:scalability_effect_4.png }} |
+|''BOTH''\\ Resizing based on the container area while keeping the image
aspect ratio. \\ No extra width or height goes outside the image area, so the
entire image is always shown.| {{ :scalability_effect_5.png }} | {{
:scalability_effect_6.png }} |
+|''NONE''\\ Resizing to fill the available area while keeping the image aspect
ratio. \\ Extra width or height goes outside the image area and is clipped.|
{{ :scalability_effect_7.png }} | {{ :scalability_effect_8.png }} |
+
+==== Setting the Image Aspect Ratio ====
+
+In case of an image object, you can set its aspect ratio with additional APIs:
+
+ * ''elm_image_fill_outside_set()'' \\ If the function is set to ''TRUE'',
the image resizes to fill the entire area while keeping its aspect ratio. It
lets the extra width or height go outside of the area (same result as with the
aspect NONE in the above table).
+
+ * ''elm_image_aspect_fixed_set()'' \\ If the function is set to FALSE, the
image resizes to fill the entire are without keeping its original aspect ratio.
The image can be distorted to fit the area.
+
+^ Image resizing without keeping the aspect ratio ^^
+| **Container area** ||
+| **720x384 (15:8)** | **720x640 (9:8)** |
+| {{ :scalability_effect_9.png }} | {{
:scalability_effect_10.png }} |
+
+
+------
+{{page>index}}
diff --git a/pages/program_guide/scalability/index.txt
b/pages/program_guide/scalability/index.txt
new file mode 100644
index 0000000..019f7b5
--- /dev/null
+++ b/pages/program_guide/scalability/index.txt
@@ -0,0 +1,4 @@
+++++ Scalability Menu|
+^ [[/program_guide/scalability_pg|Scalability Programming Guide]] ^^^^
+| [[/program_guide/scalability/key_concepts|Key Concepts]] |
[[/program_guide/scalability/scalability_using_elementary_ui_components|Scalability
Using Elementary UI Components]] |
[[/program_guide/scalability/scalability_using_edje|Scalability Using Edje]]
| [[/program_guide/scalability/aspect_ratio|Aspect Ratio]] |
+++++
diff --git a/pages/program_guide/scalability/key_concepts.txt
b/pages/program_guide/scalability/key_concepts.txt
new file mode 100644
index 0000000..23dce14
--- /dev/null
+++ b/pages/program_guide/scalability/key_concepts.txt
@@ -0,0 +1,77 @@
+{{page>index}}
+------------
+===== Key Concepts =====
+
+When designing the application layout to be scalable, you must pay attention
+to the following key concepts:
+
+=== Table of Contents ===
+
+ *
[[#Understand_the_character_of_the_relative_position_and_the_fixed_position|Understand
the character of the relative position and the fixed position]]
+ * [[#Use_the_relative_position|Use the relative position]]
+ * [[#Do_not_fill_the_width_or_height_out_with_a_fixed_size_only|Do not fill
the width or height out with a fixed size only]]
+
+=== Understand the character of the relative position and the fixed position
===
+
+In the relative position, the size is determined in proportion to the size
+of the referred object. For example, if an orange rectangle occupies 30% of
+the green rectangle, and the green rectangle is expanded, the orange rectangle
+is expanded accordingly. However, if the scaling value is changed and the
+green rectangle is not scaled, the orange rectangle remains unchanged too.
+
+{{ :scalability_scale_relative.png }}
+
+In the fixed position, the size is determined by a value set for the object.
+For example, the orange rectangle set to the size of 10. If the green
+rectangle is expanded, the orange rectangle does not change. However, if the
+scaling value is, for example, doubled, the size of the orange rectangle grows
+to 20.
+
+{{ :scalability_scale_fixed.png }}
+
+=== Use the relative position ===
+
+If you set the object size as a percentage, the ratio remains fixed regardless
+of the changes in the screen size or resolution. If you want the object size
+changed in proportion of the window size, use the relative position.
+
+{{ :scalability_scale_relative_scaled.png }}
+
+=== Multiply the scaling value, if you use the fixed size ===
+
+
+If you use the EDC file to set up the layout, you can set the scale in the
+''part'' element:
+
+<code c>
+parts
+{
+ part
+ {
+ name: "box";
+ type: RECT;
+ scale: 1;
+ }
+}
+</code>
+
+If you set the fixed size in C code, you can use the ''ELM_SCALE_SIZE'' macro:
+
+<code c>
+evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100),
ELM_SCALE_SIZE(100));
+</code>
+
+=== Do not fill the width or height out with a fixed size only ===
+
+If you fill the entire height out with a fixed size only and it is scaled, the
+end result can be larger than the screen size.
+
+{{ :scalability_scale_fixed_height.png }}
+
+If you set a partial width or height with a fixed size and leave the remaining
+area flexible, the layout does not expand outside the screen.
+
+{{ :scalability_scale_flexible_height.png }}
+
+------------
+{{page>index}}
diff --git a/pages/program_guide/scalability/scalability_using_edje.txt
b/pages/program_guide/scalability/scalability_using_edje.txt
new file mode 100644
index 0000000..ac40998
--- /dev/null
+++ b/pages/program_guide/scalability/scalability_using_edje.txt
@@ -0,0 +1,420 @@
+{{page>index}}
+---------
+===== Scalability Using Edje =====
+
+Edje provides an abstraction layer between the application code
+and the interface. You can use Edje in your EFL applications to create
+visual elements and control the layout, look, and feel.
+
+Internally, Edje holds a geometry state machine and a state graph that
+defines, for example, what is visible, where, at what size, and with what
+colors. These details are described to Edje using an Edje .edj file. The file
+can be produced by using Edje_cc to take a text file (a .edc file) and
+"compile" an output .edj file that contains the state graph information,
+images, and any other needed data.
+
+While creating Edje, you set specific element properties to control the
+scalable behavior of the UI. Before creating a scalable UI using Edje, you
+must be familiar with the following scalability properties and part types.
+
+=== Table of Contents ===
+
+ * [[#Part]]
+ * [[#Description]]
+ * [[#Text]]
+ * [[#Image]]
+ * [[#Image_Set|ImageSet]]
+ * [[#Part_Types|PartTypes]]
+
+==== Part ====
+
+Parts are used to represent the most basic layout elements, such as a line in
+a border or a text on an image.
+
+The parts can have the following property:
+
+ * scale: 0-1 \\ Specifies whether the part scales its size with the scaling
factor. This property is used to scale properties, such as font size or min/max
size of the part. \\ The default value is 0 (off) and the default scaling
factor is 1.0. To make a part scalable, set the property to 1 (on).
+
+==== Description ====
+
+Every part can have one or more description blocks to define the layout
+properties of the part.
+
+The descriptions can have the following properties:
+
+ * ''min''/''max'': width height \\ Specifies the minimum or maximum size of
the part in pixels. It has no effect on the container size. \\ When the
''scale'' property of the part is set to 1 (on), the size is multiplied by the
scaling factor.
+
+ * ''fixed'': 0-1 0-1 \\ When the ''min'' or ''max'' property is set, this
property sets a boolean value for each dimension (horizontal and vertical,
respectively) that tells the application whether it must be scaled when
resized. \\ The default value is ''0 0''. To fix a part size to its min or max,
set the value to 1.
+
+ * ''align'': X-axis Y-axis \\ When the displayed object size is smaller than
its container, this property moves it along both axes using the relative
position. \\ To move the property, use x = 0.0 to move to left, x = 1.0 to move
to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x
= 0.5, y = 0.5 value sets the object at the center of its container. \\ The
default value is ''0.5 0.5''.
+
+ * ''rel1''/''rel2'' \\ Specifies the position of the left-top and
bottom-right corners of the part's container.
+ * relative: X-axis Y-axis \\ Specifies the relative position of the part's
container. \\ The default value is 0.0 0.0 for rel1.relative and 1.0 1.0 for
rel2.relative.
+ * ''to''/''to_x''/''to_y'' \\ Specified that a corner must be positioned
relatively to another part's container. \\ By default, the corners of a part
are placed to the whole interface.
+
+^ Edje part property example ^^
+|<code c>
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ image: "panorama.png" COMP;
+ }
+
+ parts
+ {
+ part
+ {
+ name: "rect1";
+ type: RECT;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.3 0.4;}
+ rel2 {relative: 0.7 0.6;}
+ color: 0 127 255 255;
+ }
+ }
+ part
+ {
+ name: "rect2";
+ type: RECT;
+ // Affected by scaling factor
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ fixed: 0 1;
+ // Height: 100 pixels (when the scaling factor is 1.0)
+ min: 0 100;
+ rel1 {relative: 0.0 1.0;}
+ rel2 {relative: 1.0 1.0;}
+ // Bottom-aligned
+ align: 0.5 1.0;
+ color: 255 127 0 255;
+ }
+ }
+ part
+ {
+ name: "image";
+ // Affected by scaling factor
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ fixed: 1 1;
+ // Image size: 720 x 180 pixels (when the scaling factor is 1.0)
+ min: 720 180;
+ // Y-axis is positioned relative to "rect2" part
+ rel1 {relative: 0.5 0.0; to_y: "rect2";}
+ rel2 {relative: 0.5 0.0; to_y: "rect2";}
+ // Bottom-aligned
+ align: 0.5 1.0;
+ image.normal: "panorama.png";
+ }
+ }
+ }
+ }
+}
+</code>| {{ :scalability_scale_example_part.png }} |
+
+ * ''aspect'': min max \\ Specifies the width to height ratio to keep when
the part is resized. When both values are the same, the ratio is fixed. When
they differ, the part is forced to keep the ratio between the ''min'' and
''max'' properties when resized. \\ The default value is ''0.0 0.0''.
+
+ * ''aspect_preference'': dimension \\ Specifies the scope of the ''aspect''
property to a given dimension. \\ The possible values are ''BOTH'',
''VERTICAL'', ''HORIZONTAL'', and ''NONE''. The default is ''NONE''.
+
+^ Edje part property aspect example ^^
+|<code c>
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ image: "island.png" COMP;
+ }
+
+ parts
+ {
+ part
+ {
+ name: "image";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 1.0;}
+ image.normal: "island.png";
+ aspect: 8/5 8/5;
+ // Keep the aspect ratio based on the part width
+ aspect_preference: HORIZONTAL;
+ }
+ }
+ }
+ }
+}</code>| {{ :scalability_scale_example_part_aspect.png }} |
+
+==== Text ====
+
+The text elements are used to display text on the screen.
+
+The texts can have the following properties:
+
+ * ''size'': font-size \\ Specifies the font size for the text. When the
''scale'' property of the part is set to 1 (on), the size is multiplied by the
scaling factor.
+
+ * ''min'': horizontal vertical \\ Specifies a pair of boolean values that
define whether the container can be reduced further than the text size. The
property is used to prevent the container from chopping the text. \\ When
''min'' is set horizontally or vertically, the minimum height or width of the
part is decided by the text size. \\ The default value is ''0 0''.
+
+ * ''max'': horizontal vertical \\ Specifies a pair of boolean values that
define whether the container can be expanded further than the text size. \\
When ''max'' is set horizontally or vertically, the maximum height or width of
the part is decided by the text size. \\ The default value is ''0 0''.
+
+^ Edje text property example ^^
+|<code c>
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ parts
+ {
+ part
+ {
+ name: "text";
+ type: TEXT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 0.0;}
+ align: 0.5 0.0;
+ color: 108 108 108 255;
+ text
+ {
+ font: "Sans";
+ // Affected by scaling factor
+ size: 80;
+ // Minimum height of the part container is decided by the
+text size
+ min: 0 1;
+ text: "Test properties!!";
+ }
+ }
+ }
+ }
+ }
+}
+</code>| {{ :scalability_scale_example_text.png }} |
+
+ * ''fit'': horizontal vertical \\ Specifies a pair of values that define
whether the text is scaled to fill its container horizontally and/or
vertically. \\ The default value is ''0 0''.
+
+^ Edje text property fit example ^^
+|<code c>
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ parts
+ {
+ part
+ {
+ name: "text";
+ type: TEXT;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 0.1;}
+ color: 108 108 108 255;
+ text
+ {
+ font: "Sans";
+ // Resize text to fill the container height
+ fit: 0 1;
+ text: "Test properties!!";
+ }
+ }
+ }
+ }
+ }
+}
+</code>| {{ :scalability_scale_example_text_fit.png }} |
+
+==== Image ====
+
+The image elements are used to display images on the screen.
+
+The images can have the following properties:
+
+ * ''border'': left right top bottom \\ Specifies the border size of the
image in pixels. This property sets the area of each side of the image to be
displayed as a fixed size border, preventing the corners from being changed on
a resize.
+
+ * ''border_scale'' \\ Specifies whether the border scales its size according
to the scaling factor. \\ The default value is 0 (off). To make the border
scalable, the value must be set to 1 (on).
+
+^ Edje image property example ^^
+|<code c>
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ image: "00_button_01_normal.png" COMP;
+ }
+
+ parts
+ {
+ part
+ {
+ name: "image";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.6;}
+ rel2 {relative: 1.0 0.7;}
+ image.normal: "00_button_01_normal.png";
+ }
+ }
+ part
+ {
+ name: "ninepatch_image";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.8;}
+ rel2 {relative: 1.0 0.9;}
+ image
+ {
+ normal: "00_button_01_normal.png";
+ border: 4 4 0 0;
+ // Affected by scaling factor
+ border_scale: 1;
+ }
+ }
+ }
+ }
+ }
+}
+</code>| {{ :scalability_scale_example_image.png }} |
+
+==== Image Set ====
+
+The image set elements are used to display a specific image on the screen
+based on the container size.
+
+The image sets can have the following properties:
+
+ * ''name'': image-name \\ Specifies the name of the image file.
+
+ * ''size'': minw minh maxw maxh \\ Specifies the minimum and maximum size
that causes a specified image to be
+selected and shown. \\ The image set is used to control resource quality when
the image part is scaled to multiple devices. According to the size of the
part's container, an appropriate image is loaded.
+
+^ Edje image set property example ^^
+|<code c>
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ set
+ {
+ name: "alternative_animal";
+ image
+ {
+ image: "pig.png" COMP;
+ size: 640 800 1200 1500;
+ }
+ image
+ {
+ image: "monkey.png" COMP;
+ size: 400 500 639 799;
+ }
+ image
+ {
+ image: "cat.png" COMP;
+ size: 240 300 399 499;
+ }
+ image
+ {
+ image: "mouse.png" COMP;
+ size: 80 100 239 299;
+ }
+ image
+ {
+ image: "snail.png" COMP;
+ size: 0 0 79 99;
+ }
+ }
+ }
+
+ parts
+ {
+ part
+ {
+ name: "image1";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 0.45;}
+ image.normal: "alternative_animal";
+ aspect: 4/5 4/5;
+ aspect_preference: BOTH;
+ }
+ }
+ part
+ {
+ name: "image2";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.5;}
+ rel2 {relative: 1.0 0.75;}
+ image.normal: "alternative_animal";
+ aspect: 4/5 4/5;
+ aspect_preference: BOTH;
+ }
+ }
+ part
+ {
+ name: "image3";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.8;}
+ rel2 {relative: 1.0 1.0;}
+ image.normal: "alternative_animal";
+ aspect: 4/5 4/5;
+ aspect_preference: BOTH;
+ }
+ }
+ }
+ }
+}
+</code>| {{ :scalability_scale_example_image_set.png }} |
+
+==== Part Types ====
+
+You can use fixed and flexible parts:
+
+ * Fixed parts
+ * Fixed parts have a minimum size (at least width or height).
+ * When the part ''scale'' property is set to 1 (on), the scaling factor
has an effect on the minimum size.
+ * Fixed parts are used when the parts must keep a fixed size in any device
or any orientation.
+ * Flexible parts
+ * Flexible parts resize according to the container size and other fixed
parts' size.
+ * Flexible parts are used when the parts can be resized in any device or
any orientation.
+
+//__Fixed and flexible parts__//:{{ :scalability_scale_fixed_flexible.png }}
+---------
+{{page>index}}
diff --git
a/pages/program_guide/scalability/scalability_using_elementary_ui_components.txt
b/pages/program_guide/scalability/scalability_using_elementary_ui_components.txt
new file mode 100644
index 0000000..9b00d2e
--- /dev/null
+++
b/pages/program_guide/scalability/scalability_using_elementary_ui_components.txt
@@ -0,0 +1,100 @@
+{{page>index}}
+-------
+===== Scalability using Elementary UI components =====
+
+Elementary includes an extensive set of UI components. You can use
+elementary UI components to compose your application user interface (UI).
+While creating the UI, you can set specific properties for the UI components
+to control the scalable behavior of the UI. Before you try to create a
+scalable UI using elementary UI components, make sure you understand the
+following core concepts on how scalability works with elementary UI
+components.
+
+<note>
+The Elementary library provides 3 groups of APIs:
+
+ * Infrastructure: to control the behavior of elementary.
+ * Container: UI components that can contain other UI components.
+ * UI components: elementary UI components, such as buttons, lists, and check
and radio boxes.
+</note>
+
+=== Table of Contents ===
+
+ *
[[#Using_Containers_for_Effective_Layouts|UsingContainersforEffectiveLayouts]]
+ * [[#Box|Box]]
+ * [[#Grid|Grid]]
+ * [[#Using_Weight_and_Align_Properties|UsingWeightandAlignProperties]]
+ * [[#Weight|Weight]]
+ * [[#Align|Align]]
+
+==== Using Containers for Effective Layouts ====
+
+The Elementary library provides several containers to display UI components in
+an effective layout. The containers have no visual identity of their own.
+
+=== Box ===
+
+The box container makes a layout where child UI components are stacked in
+either horizontal or vertical direction. The box size is the sum of its child
+UI components' size:
+
+ * A vertical box calculates its height as the sum of its children's height
and its width as the width of the widest child.
+ * A horizontal box calculates its width as the sum of its children's width
and its height as the height of the tallest child.
+
+{{ :scalability_scale_box.png }}
+
+The box-based linear layout is the best solution to ensure a minimum size for
+the child UI components in any device or any orientation.
+
+=== Grid ===
+
+The grid container makes a layout where child UI components set their position
+and size relative to the container position and size. You can define the
+virtual width and height of the grid (by default: 100 x 100). You then packs
+the child UI components into the grid while setting their position and size
+based on the virtual size of the grid.
+
+{{ :scalability_scale_grid.png }}
+
+The grid-based relative layout can always fill the full screen in any device
+or any orientation. However, the size of the child UI components is changed
+based on the screen size.
+
+==== Using Weight and Align Properties ====
+
+To make a layout scalable with UI components, the UI components must be packed
+into a container using only the weight and align properties based on their
+minimum size. Do not resize the UI components directly using pixels.
+
+The weight and align properties are associated with every elementary UI
+component, and they serve as hints for the container they are in. They tell
+the container how the UI component wants to occupy the space and pack itself
+with other UI components in the container.
+
+=== Weight ===
+
+You can set the weight property with the
+''evas_object_size_hint_weight_set(x_weight, y_weight)'' function:
+
+ * Containers use the weights of the child UI components by normalizing them
across all child UI components along both X and Y directions.
+ * The parameter values can be 0 or positive values (default: 0.0). \\ \\
0.0 means that the container allocates a minimum size of the UI component area.
\\ \\ 1.0 (''EVAS_HINT_EXPAND'') means that the container allocates all of the
remaining
+area to the UI component.
+ * If the container has several UI components, it allocates the UI component
area relative to the weights of other UI components.
+
+//__Weight hint__//:{{ :scalability_scale_weight_hint.png }}
+//__Weight hint across multiple child UI components__//:{{
:scalability_scale_weight_hint_multiple.png }}
+
+
+=== Align ===
+
+You can set the align property with the
+''evas_object_size_hint_align_set(x_align, y_align)'' function:
+
+ * UI components use the alignment for their position or size along both X
and Y directions.
+ * The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).
+ * The values define positions as follows: left is (x=0.0), right is
(x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5).
\\ \\ -1.0 (''EVAS_HINT_FILL'') means that the UI component fills all of the
allocated area.
+
+{{ :scalability_scale_align_hint.png }}
+
+---------
+{{page>index}}
diff --git a/pages/program_guide/scalability_pg.txt
b/pages/program_guide/scalability_pg.txt
new file mode 100644
index 0000000..f113151
--- /dev/null
+++ b/pages/program_guide/scalability_pg.txt
@@ -0,0 +1,30 @@
+{{page>index}}
+===== Scalability Programming Guide =====
+
+To ensure that your application works well in diverse devices, you must
+consider scalability when designing the application layout:
+
+=== Table of Contents ===
+
+ * [[/program_guide/scalability/key_concepts|Key Concepts]]
+ *
[[/program_guide/scalability/key_concepts#Understand_the_character_of_the_relative_position_and_the_fixed_position|Understand
the character of the relative position and the fixed position]]
+ * [[/program_guide/scalability/key_concepts#Use_the_relative_position|Use
the relative position]]
+ *
[[/program_guide/scalability/key_concepts#Do_not_fill_the_width_or_height_out_with_a_fixed_size_only|Do
not fill the width or height out with a fixed size only]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components|Scalability
using Elementary UI components]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components#Using_Containers_for_Effective_Layouts|UsingContainersforEffectiveLayouts]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components#Box|Box]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components#Grid|Grid]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components#Using_Weight_and_Align_Properties|UsingWeightandAlignProperties]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components#Weight|Weight]]
+ *
[[/program_guide/scalability/scalability_using_elementary_ui_components#Align|Align]]
+ * [[/program_guide/scalability/scalability_using_edje|Scalability using
Edje]]
+ * [[/program_guide/scalability/scalability_using_edje#Part]]
+ * [[/program_guide/scalability/scalability_using_edje#Description]]
+ * [[/program_guide/scalability/scalability_using_edje#Text]]
+ * [[/program_guide/scalability/scalability_using_edje#Image]]
+ * [[/program_guide/scalability/scalability_using_edje#Image_Set|ImageSet]]
+ *
[[/program_guide/scalability/scalability_using_edje#Part_Types|PartTypes]]
+ * [[/program_guide/scalability/aspect_ratio|Aspect Ratio]]
+
+-------
+{{page>index}}
--
