[UI Sample] Alignment Sample Overview
The [UI Sample] Alignment sample application demonstrates how to align objects in a view using EDC contexts, such as point_base, line_base, and container_base.
The sample uses UI components, such as elm_conformant, for view management, containers, such as elm_layout, for UI component management inside the view, and objects, such as elm_rectangle, for the contents of the EDC view.
The following figure illustrates the main screen of the sample, its wireframe structure, and the UI component tree.
Figure: [UI Sample] Alignment main screen
![[UI Sample] Alignment main screen](../images/alignment_main.png)
![[UI Sample] Alignment UI component tree](../images/edc_main_tree.png)
Application Layout
The create_base_gui() function creates the window, conformant, and layout. The EDC file is then inserted into the layout.
static void
create_base_gui(appdata_s *ad)
{
char edj_path[PATH_MAX] = {0, };
// Create window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_conformant_set(ad->win, EINA_TRUE);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
// Create conformant
ad->conform = elm_conformant_add(ad->win);
elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->conform);
evas_object_show(ad->conform);
// Create base layout
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
ad->layout = elm_layout_add(ad->win);
elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
elm_object_content_set(ad->conform, ad->layout);
// Show the window after the base GUI is set up
evas_object_show(ad->win);
}
EDC View
The following figure illustrates the EDC view wireframe and tree structure.
Figure: EDC view
The alignment.edc file is used to set the layout content. The file uses the following EDC context methods to align objects: point_base, line_base, and container_base. The file consists of 8 rectangles.
The alignment policy of a rectangle is determined by its relative factor. If the relative value of rel1 and rel2 is the same, the alignment policy is determined according to point_base. If the relative property defines a line shape, such as {(0.0,0.0), (1.0,0.0)}, {(1.0,0.0), (1.0,1.0)}, {(0.0,1.0), (1.0,1.0)}, {(0.0,0.0), (0.0,1.0)}, the alignment policy is determined according to line_base. If the relative property defines a container shape, such as {(0.0,0.0), (1.0,1.0)}, {0.2,0.1), (0.5,0.7)}, the alignment policy is determined according to the container_base context.
The position of a rectangle depends on its alignment policy and align value. For example, for the point_base context, the align property defines the anchor of the rectangle. For line_base, the align property defines the base line of the rectangle. For container_base, the align property defines the region of the rectangle in the container.
In the alignment.edc file, the black rectangle is used for background (bg_rect with container_base). The yellow and magenta rectangles (left_top_point_base and right_bottom_point_base) are used with the point_base context. A red rectangle is used for the header and footer (top_line_base and bottom_line_base) with the line_base context. The center area contains 3 green rectangles with the container_base context.
The following code is the entire EDC script of the alignment.edc file:
collections
{
group
{
name: "main";
parts
{
part
{
name: "bg_rect";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
fixed: 1 1;
rel1 { relative: 0.0 0.0; }
rel2 { relative: 1.0 1.0; }
color: 0 0 0 255;
}
}
part
{
name: "middle_container_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
max: 50 50;
fixed: 1 1;
rel1.to: "bg_rect";
rel2.to: "bg_rect";
align: 0.5 0.5;
color: 0 255 0 128;
}
}
part
{
name: "left_container_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
max: 50 50;
fixed: 1 1;
rel1.to: "bg_rect";
rel2.to: "bg_rect";
align: 0.0 0.5;
color: 0 255 0 128;
}
}
part
{
name: "right_container_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
max: 50 50;
fixed: 1 1;
rel1.to: "bg_rect";
rel2.to: "bg_rect";
align: 1.0 0.5;
color: 0 255 0 128;
}
}
part
{
name: "top_line_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
min: 0 50;
fixed: 0 1;
rel1.relative: 0.0 0.0;
rel2.relative: 1.0 0.0;
align: 0.5 0.0;
color: 255 0 0 128;
}
}
part
{
name: "bottom_line_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
min: 0 50;
fixed: 0 1;
rel1.relative: 0.0 1.0;
rel2.relative: 1.0 1.0;
align: 0.5 1.0;
color: 255 0 0 128;
}
}
part
{
name: "left_top_point_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
min: 50 50;
fixed: 1 1;
rel1.relative: 0.5 0.5;
rel2.relative: 0.5 0.5;
align: 0.0 0.0;
color: 255 255 0 128;
}
}
part
{
name: "right_bottom_point_base";
type: RECT;
scale: 1;
description
{
state: "default" 0.0;
min: 50 50;
fixed: 1 1;
rel1.relative: 0.5 0.5;
rel2.relative: 0.5 0.5;
align: 1.0 1.0;
color: 255 0 255 128;
}
}
}
}
}
