summaryrefslogtreecommitdiff
path: root/pages/develop/legacy/tutorial
diff options
context:
space:
mode:
authorAndy Williams <andy@andywilliams.me>2017-10-31 12:41:57 +0000
committerAndy Williams <andy@andywilliams.me>2017-10-31 12:41:57 +0000
commit738ea33110a04bbb3b141b9acb53d8e0da63e248 (patch)
tree17cee1a6ba714b6c8b764a454390be0ff350f6ce /pages/develop/legacy/tutorial
parent3d60e607c72e15ed8f233f2c24c212d8aea6e585 (diff)
Move tutorial to develop/legacy
Diffstat (limited to 'pages/develop/legacy/tutorial')
-rw-r--r--pages/develop/legacy/tutorial/basic/button.txt194
-rw-r--r--pages/develop/legacy/tutorial/basic/label.txt75
-rw-r--r--pages/develop/legacy/tutorial/basic/list.txt124
-rw-r--r--pages/develop/legacy/tutorial/basic_tutorial.txt71
-rw-r--r--pages/develop/legacy/tutorial/effects/ecore_animator/3d_rotation.txt75
-rw-r--r--pages/develop/legacy/tutorial/effects/ecore_animator/drop_bounce.txt62
-rw-r--r--pages/develop/legacy/tutorial/effects/ecore_animator/rotation.txt125
-rw-r--r--pages/develop/legacy/tutorial/effects/ecore_animator/setting_up.txt81
-rw-r--r--pages/develop/legacy/tutorial/effects/ecore_animator/zoom.txt72
-rw-r--r--pages/develop/legacy/tutorial/effects/edje_animation/on_click.txt312
-rw-r--r--pages/develop/legacy/tutorial/effects/edje_animation/start_up.txt187
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/blend.txt53
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/fade.txt53
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/flip.txt61
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/flipy.txt52
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/rotation.txt62
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/setting_up.txt255
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/transit.txt362
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/wipe.txt61
-rw-r--r--pages/develop/legacy/tutorial/effects/elementary_animations/zoom.txt54
-rw-r--r--pages/develop/legacy/tutorial/effects_tutorial.txt68
-rw-r--r--pages/develop/legacy/tutorial/form_tutorial.txt361
-rw-r--r--pages/develop/legacy/tutorial/genlist/modifications.txt252
-rw-r--r--pages/develop/legacy/tutorial/genlist/set-up.txt232
-rw-r--r--pages/develop/legacy/tutorial/genlist_tutorial.txt43
-rw-r--r--pages/develop/legacy/tutorial/gl2d/animating_cube.txt132
-rw-r--r--pages/develop/legacy/tutorial/gl2d/basic_application.txt87
-rw-r--r--pages/develop/legacy/tutorial/gl2d/creating_cube.txt128
-rw-r--r--pages/develop/legacy/tutorial/gl2d/drawing_cube.txt415
-rw-r--r--pages/develop/legacy/tutorial/gl2d/effects.txt53
-rw-r--r--pages/develop/legacy/tutorial/gl2d/rendering_cube.txt55
-rw-r--r--pages/develop/legacy/tutorial/gl2d/widget_interaction.txt74
-rw-r--r--pages/develop/legacy/tutorial/gl_2d_tutorial.txt19
-rw-r--r--pages/develop/legacy/tutorial/javascript_tutorial.txt379
-rw-r--r--pages/develop/legacy/tutorial/menu/basic_ui.txt296
-rw-r--r--pages/develop/legacy/tutorial/menu/hidden_menu.txt94
-rw-r--r--pages/develop/legacy/tutorial/menu/structure.txt74
-rw-r--r--pages/develop/legacy/tutorial/menu/theme.txt171
-rw-r--r--pages/develop/legacy/tutorial/menu_tutorial.txt20
-rw-r--r--pages/develop/legacy/tutorial/multimedia_tutorial.txt254
-rw-r--r--pages/develop/legacy/tutorial/naviframe_tutorial.txt247
-rw-r--r--pages/develop/legacy/tutorial/panes_tutorial.txt248
-rw-r--r--pages/develop/legacy/tutorial/popup_tutorial.txt92
-rw-r--r--pages/develop/legacy/tutorial/preference/code.txt121
-rw-r--r--pages/develop/legacy/tutorial/preference/description.txt195
-rw-r--r--pages/develop/legacy/tutorial/preference_tutorial.txt18
46 files changed, 6519 insertions, 0 deletions
diff --git a/pages/develop/legacy/tutorial/basic/button.txt b/pages/develop/legacy/tutorial/basic/button.txt
new file mode 100644
index 000000000..3129296c2
--- /dev/null
+++ b/pages/develop/legacy/tutorial/basic/button.txt
@@ -0,0 +1,194 @@
1==== Button ====
2
3=== Button styles ===
4
5//**__Basic text button__**//
6
7As seen in [[develop/efl/start|Get started with EFL]] tutorial, a text-only
8button is created as follows:
9
10<code c>
11 //basic text button
12 Evas_Object *button_text;
13 button_text = elm_button_add(win);
14
15 elm_object_text_set(button_text,"Clik me");
16
17 //how a container object should resize a given child within its area
18 evas_object_size_hint_weight_set(button_text, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
19 //how to align an object
20 evas_object_size_hint_align_set(button_text, EVAS_HINT_FILL, 0.5);
21
22 //100x30 px button
23 evas_object_resize(button_text, 100, 30);
24 evas_object_show(button_text);
25</code>
26
27//**__Basic icon button__**//
28
29Instead of a button having only some text, you can also opt to having an
30icon-only button.
31
32<code c>
33 //Basic icon button
34 Evas_Object *button_icon, *icon;
35 button_icon = elm_button_add(win);
36 icon = elm_icon_add(win);
37
38 //set the image file and the button as an icon
39 elm_image_file_set(icon, "icon.png", NULL);
40 elm_object_part_content_set(button_icon, "icon", icon);
41
42 evas_object_size_hint_weight_set(button_icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
43 evas_object_size_hint_align_set(button_icon, EVAS_HINT_FILL, 0.5);
44
45 //100x30 px button
46 evas_object_resize(button_icon, 100, 30);
47 evas_object_move(button_icon, 110, 0);
48 evas_object_show(button_icon);
49</code>
50
51The function ''elm_object_part_content_set(button_icon, "icon",icon)'' sets
52the content on part on a given container widget. All widgets
53deriving from the Elementary Container Class may match. This sets new content
54to a given part. If any object was already set as a content object, it will be
55deleted.
56
57//**__Icon and text button__**//
58
59You can also have buttons holding both an icon and a label.
60
61<code c>
62 //Icon and text button
63 Evas_Object *button_icon_text, *icon2;
64 button_icon_text = elm_button_add(win);
65 icon2 = elm_icon_add(win);
66
67 elm_image_file_set(icon2, "icon.png", NULL);
68 elm_object_part_content_set(button_icon_text, "icon", icon2);
69 elm_object_text_set(button_icon_text, "Press me");
70 evas_object_size_hint_weight_set(button_icon_text, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
71 evas_object_size_hint_align_set(button_icon_text, EVAS_HINT_FILL, 0.5);
72
73 evas_object_resize(button_icon_text, 100, 30);
74 evas_object_move(button_icon_text, 220, 0);
75 evas_object_show(button_icon_text);
76</code>
77
78//**__Disabled button__**//
79
80If you want to disable your button but still visible:
81
82<code c>
83elm_object_disabled_set(button, EINA_TRUE);
84</code>
85
86== Callbacks ==
87
88Elementary buttons respond to user interactions thanks to several events.
89
90//**__Click event__**//
91
92The “click” event is the most basic and well-known one. The following code
93snippet will change the text of a button upon a click event: a press followed
94by an unpress.
95
96<code c>
97//Click Callback: print Clicked
98static void
99_button_click_cb(void *data, Evas_Object *button, void *event_info){
100 elm_object_text_set(button, "Clicked!");
101}
102
103evas_object_smart_callback_add(button_text, "clicked", button_click_cb, NULL);
104</code>
105
106//**__Press/unpress events __**//
107
108The button can also respond to the press and unpress events instead of the
109whole click.
110
111<code c>
112//Press callback: print Pressed
113static void
114_button_press_cb(void * data, Evas_Object *button, void *event_info){
115 elm_object_text_set(button, "Pressed!");
116}
117
118//Unpress callback: print Unpressed
119static void
120_button_unpress_cb(void *data, Evas_Object *button, void *event_info){
121 elm_object_text_set(button, "Unpressed!");
122}
123
124evas_object_smart_callback_add(button_icon, "pressed", _button_press_cb, NULL);
125evas_object_smart_callback_add(button_icon, "unpressed", _button_unpress_cb, NULL);
126</code>
127
128//**__Repeated events__**//
129
130The button can also receive several events in case it is being held by the
131user. Timings such as the initial timeout and the repeat interval can be set.
132In this example, the initial timeout is set to one second, and the repeat
133interval to half a second.
134
135<code c>
136static void
137_button_repeat_cb(void *data, Evas_Object *button, void *event_info){
138 static int count = 0;
139 char buffer[16];
140
141 snprintf(buffer, sizeof(buffer), "Repeat %d", count++);
142
143 //print the number of time callback was called
144 elm_object_text_set(button, buffer);
145}
146
147 //Get whether the autorepeat feature is enabled.
148 elm_button_autorepeat_set(button_icon_text, EINA_TRUE);
149 //Set the initial timeout before the autorepeat event is generated.
150 elm_button_autorepeat_initial_timeout_set(button_icon_text, 1.0);
151 //gap between two callbacks
152 elm_button_autorepeat_gap_timeout_set(button_icon_text, 0.5);
153 //"repeated": the user pressed the button without releasing it.
154 evas_object_smart_callback_add(button_icon_text, "repeated", _button_repeat_cb, NULL);
155</code>
156
157//**__Focused/unfocused events__**//
158
159The event Focused is equivalent to click indeed callback is called when you
160are "focused" on the button. So, you are unfocused when you are not focused on
161the first button. For having two buttons, a box container will be needed.
162
163The button can also receive event from another button in case it is being
164focused when you click on it and unfocused when you press and unpress another
165one.
166
167<code c>
168static void
169_button_focused_cb(void * data, Evas_Object *button, void *event_info){
170 elm_object_text_set(button, "Focused");
171}
172
173static void
174_button_unfocused_cb(void * data, Evas_Object *button, void *event_info){
175 elm_object_text_set(button, "Unfocused");
176}
177 //Focused/unfocused event
178 Evas_Object *button;
179
180 button = elm_button_add(win);
181 elm_object_text_set(button, "button");
182 evas_object_resize(button, 100, 30);
183 evas_object_move(button, 0, 40);
184 evas_object_show(button);
185
186 evas_object_smart_callback_add(button, "focused", _button_focused_cb, NULL);
187 evas_object_smart_callback_add(button, "unfocused", _button_unfocused_cb, NULL);
188</code>
189\\
190**//The whole code://** {{code_c/tutorial/basic/button.c}}
191
192==== Next Part ====
193
194//**__[[/tutorial/basic/label]]__**//
diff --git a/pages/develop/legacy/tutorial/basic/label.txt b/pages/develop/legacy/tutorial/basic/label.txt
new file mode 100644
index 000000000..b8f06a313
--- /dev/null
+++ b/pages/develop/legacy/tutorial/basic/label.txt
@@ -0,0 +1,75 @@
1==== Simple Text ====
2
3//**__Basic text__**//
4
5Creating a label object, a widget to display text, with simple html-like
6markup:
7
8<code c>
9 //text_label
10 Evas_Object *label;
11 label_text = elm_label_add(win);
12
13 elm_object_text_set(label_text,"My label");
14
15 evas_object_resize(label_text, 90, 0);
16 evas_object_show(label_text);
17</code>
18
19//**__Sliding text__**//
20
21If your text is too long, you can have it set to slide. The duration of the
22slide is to be set: it is set to five seconds in the following example. You
23can also have several styles:
24
25 - default - No animation
26 - marker - Centers the text in the label and makes it bold by default
27 - slide_long - The entire text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).
28 - slide_short - The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.
29 - slide_bounce - The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the animation reverses, moving the text to the left.
30
31<code c>
32 //sliding text
33 Evas_Object *label_slide;
34 label_slide = elm_label_add(win);
35
36 elm_object_text_set(label_slide, "Some long text for our label_slide, that is long but"
37 "not too long.");
38
39 elm_object_style_set(label_slide,"slide_bounce");
40 elm_label_slide_duration_set(label_slide, 3);
41 elm_label_slide_mode_set(label_slide, ELM_LABEL_SLIDE_MODE_ALWAYS);
42
43 elm_label_slide_go(label_slide);
44
45 evas_object_resize(label_slide, 200, 15);
46 evas_object_move(label_slide,0,40);
47 evas_object_show(label_slide);
48</code>
49
50If needed, you can respond to end of a slide thanks to the slide,end event.
51
52//**__Marker text__**//
53
54A marker is a text that is centered and bold by default. As the default color
55is white, we will also set a color, blue in this example.
56
57<code c>
58elm_object_style_set(label, "marker");
59evas_object_color_set(label, 0, 0, 255, 255);
60</code>
61
62//**__Styling the text__**//
63
64You can apply basic styles to the text. If, for instance, you would like to
65have a bold text, you can do as follows.
66
67<code c>
68elm_object_text_set(label, "<b>This text is bold.</b>");
69</code>
70
71**//The whole code://** {{/tutorial/basic/label.c}}
72
73==== Next Part ====
74
75//**__[[/tutorial/basic/list| Simple List Tutorial]]__**//
diff --git a/pages/develop/legacy/tutorial/basic/list.txt b/pages/develop/legacy/tutorial/basic/list.txt
new file mode 100644
index 000000000..e884003d5
--- /dev/null
+++ b/pages/develop/legacy/tutorial/basic/list.txt
@@ -0,0 +1,124 @@
1=== Simple List ===
2
3//**__Basic list__**//
4
5A list is a scrollable container whose children can be selected.
6
7<code c>
8Evas_Object *list, *icon, *button;
9list = elm_list_add(win);
10//size giving scrollbar
11evas_object_resize(list, 320, 70);
12
13//first item: text
14Elm_Object_Item *item_text = elm_list_item_append(list, "Text item", NULL, NULL, NULL, NULL);
15
16//second item: icon
17icon = elm_icon_add(list);
18elm_icon_standard_set(icon, "chat");
19Elm_Object_Item *item_icon = elm_list_item_append(list, "Icon item", icon, NULL, NULL, NULL);
20
21//third item: button
22button = elm_button_add(list);
23elm_object_text_set(button, "Button");
24Elm_Object_Item *item_button = elm_list_item_append(list, "Button item", NULL, button, NULL, NULL);
25
26elm_list_go(list);
27evas_object_show(list);
28</code>
29
30Any Evas Object can be added as an icon, either at the beginning (third
31parameter) or the end (fourth parameter).
32
33//**__List mode__**//
34
35There are several modes for the list item dimensions:
36
37 * //**ELM_LIST_COMPRESS**// The list won't set any of its size hints to inform how a possible container should resize it. Then, if it's not created as a "resize object", it might end with zeroed dimensions. The list will respect the container's geometry and, if any of its items won't fit into its transverse axis, one won't be able to scroll it in that direction.
38 * //**ELM_LIST_SCROLL**// Default value. This is the same as ELM_LIST_COMPRESS, with the exception that if any of its items won't fit into its transverse axis, one will be able to scroll it in that direction.
39 * //**ELM_LIST_LIMIT**// Sets a minimum size hint on the list object, so that containers may respect it (and resize itself to fit the child properly). More specifically, a minimum size hint will be set for its transverse axis, so that the largest item in that direction fits well. This is naturally bound by the list object's maximum size hints, set externally.
40 * //**ELM_LIST_EXPAND**// Besides setting a minimum size on the transverse axis, just like on ELM_LIST_LIMIT, the list will set a minimum size on the longitudinal axis, trying to reserve space to all its children to be visible at a time. This is naturally bound by the list object's maximum size hints, set externally.
41 * //**ELM_LIST_LAST**// Indicates error if returned by elm_list_mode_get()
42
43<code c>
44elm_list_mode_set(list, ELM_LIST_COMPRESS);
45</code>
46
47//**__Scroller policy__**//
48
49Several effects can be shown on a list.
50
51For instance, the scroller can set to bounce at the end on either direction.
52
53<code c>
54elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
55</code>
56
57The second argument is for the horizontal axis, the third one for the vertical
58axis.
59
60You can also control whether to display scrollbars.
61
62<code c>
63elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_AUTO,ELM_SCOLLER_POLICY_ON);
64</code>
65
66As for the bounce preference, the second argument is for the horizontal axis,
67the third one for the vertical axis:
68
69 * //**ELM_SCROLLER_POLICY_OFF**// will always hide the scrollbar
70 * //**ELM_SCROLLER_POLICY_ON**// will always show the scrollbar
71 * //**ELM_SCROLLER_POLICY_AUTO**// means that the scrollbar will be only shown when needed, and hidden otherwise.
72
73//**__Events__**//
74
75A list can respond to several events:
76
77 * //**activated**// - The user has double-clicked or pressed (enter|return|spacebar) on an item. The event_info parameter is the item that was activated.
78 * //**clicked,double**// - The user has double-clicked an item. The event_info parameter is the item that was double-clicked.
79 * //**clicked,right**// - The user has right-clicked an item. The event_info parameter is the item that was right-clicked. (since 1.13)
80 * //**selected**// - when the user selected an item
81 * //**unselected**// - when the user unselected an item
82 * //**longpressed**// - an item in the list is long-pressed
83 * //**edge,top**// - the list is scrolled until the top edge
84 * //**edge,bottom**// - the list is scrolled until the bottom edge
85 * //**edge,left**// - the list is scrolled until the left edge
86 * //**edge,right**// - the list is scrolled until the right edge
87 * //**highlighted**// - an item in the list is highlighted. This is called when the user presses an item or keyboard selection is done so the item is physically highlighted. The event_info parameter is the item that was highlighted.
88 * //**unhighlighted**// - an item in the list is unhighlighted. This is called when the user releases an item or keyboard selection is moved so the item is physically unhighlighted. The event_info parameter is the item that was unhighlighted.
89 * //**language,changed**// - the program's language changed
90 * //**focused**// - When the list has received focus. (since 1.8)
91 * //**unfocused**// - When the list has lost focus. (since 1.8)
92 * //**item,focused**// - When the list item has received focus. (since 1.10)
93 * //**item,unfocused**// - When the list item has lost focus. (since 1.10)
94
95//**__Selected event__**//
96
97The selected event is received when the user selected an item, below the
98callback add an new item only if it is the button item which is selected.
99
100<code c>
101 static void
102_prepend_itembutton_cb(void *data, Evas_Object *obj, void *event_info)
103{
104 Elm_Object_Item *list_it;
105 Evas_Object *li = obj;
106
107 Elm_Object_Item *selected=elm_list_selected_item_get(li);
108 if(selected == (Elm_Object_Item*)data)
109 {
110 static int counter=0;
111 char label[32];
112 snprintf(label, sizeof(label), "Item %i", counter++);
113
114 list_it = elm_list_item_prepend(li, label, NULL, NULL, NULL, NULL);
115 elm_list_go(li);
116 if (!list_it)
117 printf("Error adding item\n");
118 }
119}
120
121evas_object_smart_callback_add(list, "selected", _prepend_itembutton_cb, item_button);
122</code>
123
124**//The whole code://** {{code_c/tutorial/basic/list.c}}
diff --git a/pages/develop/legacy/tutorial/basic_tutorial.txt b/pages/develop/legacy/tutorial/basic_tutorial.txt
new file mode 100644
index 000000000..97d4309a3
--- /dev/null
+++ b/pages/develop/legacy/tutorial/basic_tutorial.txt
@@ -0,0 +1,71 @@
1~~Title: Basic Tutorial~~
2==== Basic Tutorial ====
3
4These basic tutorials describe the basics of widget interactions.
5
6== Prerequisite ==
7
8 * Do a helloworld program: [[develop/efl/start|Get started with EFL]].
9 * Work with this example.
10
11<code c>
12#include <Elementary.h>
13
14EAPI_MAIN int
15elm_main(int argc, char **argv)
16{
17 Evas_Object *win;
18
19 elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
20
21 win = elm_win_util_standard_add("Main", "Hello, World!");
22 elm_win_autodel_set(win, EINA_TRUE);
23 //win 400x400
24 evas_object_resize(win, 400, 400);
25
26 /*basic tutorial code*/
27
28 evas_object_show(win);
29
30 elm_run();
31 return 0;
32}
33ELM_MAIN()
34</code>
35
36==== Basic Button ====
37**__[[/tutorial/basic/button|Basic Button Tutorial]]:__**
38//{{code_c/tutorial/basic/button.c}}//[[/tutorial/basic/button|{{ :basic_button.png?direct|button}}]]
39\\
40\\
41\\
42\\
43\\
44\\
45\\
46\\
47\\
48\\
49\\
50\\
51\\
52\\
53\\
54\\
55------
56==== Basic Label ====
57**__[[/tutorial/basic/label|Simple Text Tutorial]]:__**//
58 {{code_c/tutorial/basic/label.c}}//[[/tutorial/basic/label|{{ :basic_label.png?direct|label}}]]
59\\
60\\
61\\
62\\
63\\
64\\
65\\
66\\
67------
68==== Basic List ====
69**__[[tutorial/basic/list|Simple List Tutorial]]:__**//
70 {{code_c/tutorial/basic/list.c}}//[[/tutorial/basic/list|{{ :basic_list.png?direct|list}}]]
71
diff --git a/pages/develop/legacy/tutorial/effects/ecore_animator/3d_rotation.txt b/pages/develop/legacy/tutorial/effects/ecore_animator/3d_rotation.txt
new file mode 100644
index 000000000..212b4c42f
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/ecore_animator/3d_rotation.txt
@@ -0,0 +1,75 @@
1~~Title: 3D Rotation Effect - Ecore Animator~~
2//**__previous page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
3==== Creating a 3D Rotation Effect ====
4
5The last animation is a 3D rotation. For this one, we are going to rotate the
6Evas object on all three axes (X, Y, Z).
7
8{{ :ecore_animator_3D.gif }}
9
10First, create the button and its callback function:
11
12<code c>
13// Button 3 : 3D Rotation Effect
14bt3 = elm_button_add(win);
15elm_object_text_set(bt3, "3D");
16evas_object_size_hint_weight_set(bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
17evas_object_move(bt3, 170, 0);
18evas_object_resize(bt3, 90, 70);
19evas_object_smart_callback_add(bt3, "clicked", _btn_3d_cb, target);
20evas_object_show(bt3);
21
22
23static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
24{
25 Evas_Object *target = data;
26 ecore_animator_timeline_add(1, _do_3d, target);
27}
28</code>
29
30Next, we create the ''_do_3d()'' animation callback function, which is very
31similar to the rotate and zoom callback functions. To create the animation, we
32use the ''evas_map_util_3d_rotate()'' function, which allows you to rotate any
33Evas object on all three axes.
34
35<code c>
36static Eina_Bool
37_do_3d(void *data, double pos)
38{
39 Evas_Object *obj = data;
40 Evas_Map *m;
41 int x, y, w, h;
42
43 evas_object_geometry_get(obj, &x, &y, &w, &h);
44 m = evas_map_new(4);
45 evas_map_util_points_populate_from_object(m, obj);
46 evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
47 evas_object_map_set(obj, m);
48 evas_object_map_enable_set(obj, EINA_TRUE);
49 evas_map_free(m);
50
51 return EINA_TRUE;
52}
53</code>
54
55The ''evas_map_util_3d_rotate()'' function takes the following arguments:
56
57 * The map to change
58 * The angle (0-360°) to rotate around the X axis
59 * The angle (0-360°) to rotate around the Y axis
60 * The angle (0-360°) to rotate around the Z axis
61 * The X coordinate of the rotation center
62 * The Y coordinate of the rotation center
63 * The Z coordinate of the rotation center
64
65Here, we rotate 360 degrees around each axis. The horizontal (X) rotation
66center is the X position of the target plus its width divided by 2. The
67vertical (Y) rotation center is the Y position of the target plus 60. The Z
68rotation center is 0.
69
70As with the rotation and zoom animations, we multiply the angles by the
71timeline position to gently rotate the target on each call to the ''_do_3d()''
72callback function along the timeline.
73
74\\
75//**__next page__: **//[[/tutorial/effects/ecore_animator/drop_bounce|Creating drop and bounce effects]]
diff --git a/pages/develop/legacy/tutorial/effects/ecore_animator/drop_bounce.txt b/pages/develop/legacy/tutorial/effects/ecore_animator/drop_bounce.txt
new file mode 100644
index 000000000..fe0c33f74
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/ecore_animator/drop_bounce.txt
@@ -0,0 +1,62 @@
1~~Title: Drop and Bounce Effects - Ecore Animator~~
2//**__previous page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
3==== Creating Drop and Bounce Effects ====
4
5To finish, we add drop and bounce effects to our buttons at application start.
6
7{{ :ecore_animator_start.gif }}
8
9To do this, we create one timeline per button after creating the buttons in
10''elm_main()'':
11
12<code c>
13//drop and bounce effects
14ecore_animator_timeline_add(2, _do_drop, bt1);
15ecore_animator_timeline_add(2.3, _do_drop, bt2);
16ecore_animator_timeline_add(2.5, _do_drop, bt3);
17</code>
18
19We call the same ''_do_drop()'' animation callback function for each timeline.
20In this callback, instead of using an Evas Map, we simply change the position
21of the target using the ''evas_object_move()'' function:
22
23<code c>
24static Eina_Bool
25_do_drop(void *data, double pos)
26{
27 Evas_Object *obj = data;
28 int x, y, w, h;
29 double frame = pos;
30 frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
31
32 evas_object_geometry_get(obj, &x, &y, &w, &h);
33 evas_object_move(obj, x, 600 * frame);
34
35 return EINA_TRUE;
36}
37</code>
38
39To get the bounce effect, we use the ''ecore_animator_pos_map()'' function,
40which maps an input position from 0.0 to 1.0 along the timeline to a position
41on a different curve. The curve can be of different types, such as ''LINEAR'',
42''SINUSOIDAL'', and ''BOUNCE''. This function takes the following arguments:
43
44 * The input position to map
45 * The mapping to use (''LINEAR'', ''SINUSOIDAL'', and so on)
46 * v1, which is the first parameter used by the mapping
47 * v2, which is the second parameter used by the mapping
48
49The ''ECORE_POS_MAP_BOUNCE'' map we use starts at 0.0, then drops like a ball
50bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1.
51Here, we bounce 4 times with a decay factor of 2:
52
53<code c>
54frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
55</code>
56This frame is used in the move function to create the animation. The value
57increases on each ''_do_drop()'' call along the timeline, which produces a
58nice drop of the buttons from their initial position to 600 pixels on the
59vertical axis.
60
61\\
62//**__The whole code__: **//{{code_c/tutorial/effects/ecore_animator.c}}
diff --git a/pages/develop/legacy/tutorial/effects/ecore_animator/rotation.txt b/pages/develop/legacy/tutorial/effects/ecore_animator/rotation.txt
new file mode 100644
index 000000000..8fdbf3369
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/ecore_animator/rotation.txt
@@ -0,0 +1,125 @@
1~~Title: Rotation Effect - Ecore Animator~~
2//**__previous page__: **//[[/tutorial/effects/ecore_animator/setting_up|Setting up the application]]
3==== Creating a Rotation Effect ====
4
5{{ :ecore_animator_rotate.gif }}
6
7After the animation target is created, the first button and associated
8rotation can be created:
9
10<code c>
11// Button 1 : Rotation effect
12bt1 = elm_button_add(win);
13elm_object_text_set(bt1, "Rotate");
14evas_object_size_hint_weight_set(bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
15evas_object_move(bt1, 25, 0);
16evas_object_resize(bt1, 90, 70);
17evas_object_smart_callback_add(bt1, "clicked", _btn_rotate_cb, target);
18evas_object_show(bt1);
19</code>
20
21The button is used for triggering the rotation effect. The button is placed
22and resized, and associated with the ''_btn_rotate_cb()'' callback function.
23This callback function calls the animation on the animation target.
24
25<code c>
26static void
27_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
28{
29 Evas_Object *target = data;
30 ecore_animator_timeline_add(1, _do_rotate, target);
31}
32</code>
33
34In this callback function, an Ecore animator timeline is created using the
35''ecore_animator_timeline_add()'' function. This function adds an animator that
36runs for a limited time the ''_do_rotate()'' animation callback function
37for 1 second on the ''target'' Evas object.
38
39Next, we write the animation callback function that actually runs the
40animation. This callback is an ''Ecore_Timeline_Cb'' function, meaning it returns
41an ''Eina_Bool'' value and takes as arguments some ''data'' and the current position
42along the animation timeline (''pos'').
43
44To create the rotation animation, an Evas Map is used. The map handles the
45necessary map points and allows you to manipulate the target Evas object on
46the X, Y, and Z axes.
47
48<code c>
49static Eina_Bool
50_do_rotate(void *data, double pos)
51{
52 // Get the animation target
53 Evas_Object *obj = data;
54 // Declaration of an `Evas_Map`
55 Evas_Map *m;
56 // Variables to store the target size and position
57 int x, y, w, h;
58
59 // Getting the size and position of the target
60 evas_object_geometry_get(obj, &x, &y, &w, &h);
61 // Creation of an `Evas_Map` of 4 points
62 m = evas_map_new(4);
63 // Populate source and destination map points to match exactly object.
64 evas_map_util_points_populate_from_object(m, obj);
65 // Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y" center.
66 evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
67 // Setting the object to "animate" in the `Evas_Map`
68 evas_object_map_set(obj, m);
69 // Starting the Animation
70 evas_object_map_enable_set(obj, EINA_TRUE);
71 // Free used memory
72 evas_map_free(m);
73
74 return EINA_TRUE;
75}
76</code>
77
78In the animation callback function, we first declare the ''Evas Map''. To
79implement the rotation, an X and Y center needs to be set, so we create 4
80integer variables to store the size and position of the target. This
81information is provided by the ''evas_object_geometry_get()'' function, which
82returns the X and Y coordinates and the weight and height of the target Evas
83object. Now we have all the required data to build the animation.
84
85An Evas Map is consisted of four points, and these points are populated with
86the animation target:
87
88<code c>
89// Creation of an `Evas_Map` of 4 points
90m = evas_map_new(4);
91// Populate source and destination map points to match exactly object.
92evas_map_util_points_populate_from_object(m, obj);
93</code>
94
95Now the ''evas_map_util_rotate()'' function defines the rotation:
96
97<code c>
98// Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y" center.
99evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
100</code>
101
102The animation callback function will be called at several points along the
103timeline, which is why the rotation angle (360°) is multiplied by the timeline
104position (pos) to get the actual animation angle. If we do not do this, we
105will never see the animation take place. Then the target objet is joined to
106the map and we start the animation.
107
108<code c>
109// Setting the object to "animate" in the `Evas_Map`
110evas_object_map_set(obj, m);
111// Starting the Animation
112evas_object_map_enable_set(obj, EINA_TRUE);
113</code>
114
115Each call to the animation callback function will rotate the object (360 *
116timeline position) degrees.
117
118Finally, the memory allocated to the Evas Map is freed up:
119<code c>
120// Free used memory
121evas_map_free(m);
122</code>
123
124\\
125//**__next page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
diff --git a/pages/develop/legacy/tutorial/effects/ecore_animator/setting_up.txt b/pages/develop/legacy/tutorial/effects/ecore_animator/setting_up.txt
new file mode 100644
index 000000000..20179ef84
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/ecore_animator/setting_up.txt
@@ -0,0 +1,81 @@
1~~Title: Setting Up - Ecore Animator~~
2==== Setting up the application ====
3
4In this part of the tutorial, we create a simple application that manipulates
5and animates an Evas object. We use a "Basic UI Application" as the basis for
6the application.
7
8First, we set up the widgets we are going to use in the application:
9
10<code c>
11EAPI_MAIN int
12elm_main(int argc, char **argv)
13{
14 //Main window
15 Evas_Object *win;
16 //Application Title
17 Evas_Object *label;
18
19 //buttons
20 Evas_Object *bt1, *bt2, *bt3;
21 //Animation target
22 Evas_Object *target;
23
24 elm_run();
25 elm_shutdown();
26 return EXIT_SUCCESS;
27}
28ELM_MAIN()
29</code>
30
31Then the actual widgets are created, starting with the main window and
32application title:
33
34<code c>
35//Main window
36win = elm_win_util_standard_add("Ecore Animator", "Ecore Animator Tutorial");
37elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
38elm_win_autodel_set(win, EINA_TRUE);
39
40if (elm_win_wm_rotation_supported_get(win))
41 {
42 int rots[4] = { 0, 90, 180, 270 };
43 elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
44 }
45
46// Application title
47label = elm_label_add(win);
48elm_object_text_set(label, "Ecore Animator Tutorial");
49evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
50elm_win_resize_object_add(win, label);
51evas_object_show(label);
52</code>
53
54Next, we create the animation target, which is an Evas object of type
55Elm_Image.
56
57<code c>
58// Animation target
59// Setting the image path
60char buf[PATH_MAX];
61snprintf(buf, sizeof(buf), "icon.png");
62// Adding the image
63target = elm_image_add(win);
64// Setting the image path
65if (!elm_image_file_set(target, buf, NULL))
66 printf("error: could not load image \"%s\"\n", buf);
67evas_object_size_hint_weight_set(target, EVAS_HINT_FILL, EVAS_HINT_FILL);
68//Moving the image
69evas_object_move(target, 130, 100);
70//Resizing the image
71evas_object_resize(target, 200, 100);
72//Showing the image
73evas_object_show(target);
74</code>
75
76The image path is set by calling the ''elm_image_file_set()'' function. This
77function takes as arguments the ''target'' Evas object and the path of the
78image file, built with the ''snprintf()'' function and stored in a buffer.
79
80\\
81//**__next page__: **//[[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
diff --git a/pages/develop/legacy/tutorial/effects/ecore_animator/zoom.txt b/pages/develop/legacy/tutorial/effects/ecore_animator/zoom.txt
new file mode 100644
index 000000000..704ab4727
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/ecore_animator/zoom.txt
@@ -0,0 +1,72 @@
1~~Title: Zoom Effect - Ecore Animator~~
2//**__previous page__: **//[[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
3==== Creating a Zoom Effect ====
4
5The next animation is a zoom, for which an Evas Map is also used.
6
7{{ :ecore_animator_zoom.gif }}
8
9First, the button is created in ''elm_main()'':
10
11<code c>
12// Button 2 : Zoom Effect
13bt2 = elm_button_add(win);
14elm_object_text_set(bt2, "Zoom");
15evas_object_size_hint_weight_set(bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
16evas_object_move(bt2, 315, 0);
17evas_object_resize(bt2, 90, 70);
18evas_object_smart_callback_add(bt2, "clicked", _btn_zoom_cb, target);
19evas_object_show(bt2);
20</code>
21
22Then, the button callback function is created with a new timeline:
23
24<code c>
25static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
26{
27 Evas_Object *target = data;
28 ecore_animator_timeline_add(1, _do_zoom, target);
29}
30</code>
31
32Next, we write the ''_do_zoom()'' animation callback function, which is almost
33identical to the ''_do_rotate()'' callback function, except that we use the
34''evas_map_util_zoom()'' function to create the animation:
35
36<code c>
37static Eina_Bool
38_do_zoom(void *data, double pos)
39{
40 Evas_Object *obj = data;
41 Evas_Map *m;
42 int x, y, w, h;
43
44 evas_object_geometry_get(obj, &x, &y, &w, &h);
45 m = evas_map_new(4);
46 evas_map_util_points_populate_from_object(m, obj);
47 evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
48 evas_object_map_set(obj, m);
49 evas_object_map_enable_set(obj, EINA_TRUE);
50 evas_map_free(m);
51
52 return EINA_TRUE;
53}
54</code>
55The ''evas_map_util_zoom()'' function takes the following arguments:
56
57 * The map to change
58 * The horizontal zoom factor
59 * The vertical zoom factor
60 * The horizontal position (X coordinate) of the zooming center
61 * The vertical position (Y coordinate) of the zooming center
62
63Here, a horizontal and vertical zoom factor of 2 is used, and the X and Y
64coordinates of the target as the horizontal and vertical center coordinates.
65
66The ''_do_zoom()'' callback function is called at several points along the
67animation timeline, which is why we multiply the horizontal and vertical zoom
68factor values by the timeline position. Each call will zoom more than the
69previous one, thereby creating the animation effect.
70
71\\
72//**__next page__: **//[[/tutorial/effects/ecore_animator/3d_rotation|Creating a 3D rotation effect]]
diff --git a/pages/develop/legacy/tutorial/effects/edje_animation/on_click.txt b/pages/develop/legacy/tutorial/effects/edje_animation/on_click.txt
new file mode 100644
index 000000000..269a0c9f6
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/edje_animation/on_click.txt
@@ -0,0 +1,312 @@
1~~Title: On Click - Edje Animation~~
2//**__previous page__: **//[[/tutorial/effects/edje_animation/start_up|Animating on Application Start-up]]
3==== Animating Object on Click ====
4
5All the previous animations are automatic and do not have any relation with
6the user's actions.
7
8=== Title go back ===
9
10Next animate a part by clicking on another one. Make the
11title restore its default aspect when clicking on the small image.
12
13{{ :edje_animation_reset.gif }}
14
15The parts and the states are already defined. The animation goes back to the
16default state, there is no need to add any parts or states: only add a program
17which makes the transition when clicking on logo part.
18
19<code c>
20// Make the title go back to normal
21program
22{
23 name: "animation,normaltitle";
24 source: "image";
25 signal: "mouse,clicked,*";
26 action: STATE_SET "default" 1.0;
27 target: "txt_title";
28 transition: LINEAR 0.5;
29}
30</code>
31
32This program starts when the application receives the signal
33''mouse,clicked,*'' (any button of the mouse is clicked) from the part called
34image, (''source''). It performs the ''STATE_SET'' action and sets the default
35state on the target ''txt_file'' part with a ''LINEAR'' transition.
36
37When clicking any mouse button on the small logo, the title goes back to its
38original state.
39
40=== Rotating Parts ===
41
42Next add two more buttons to the application and create programs to animate a
43target.
44
45It is possible to create a button with Edje from scratch, but to save time,
46the ''SWALLOW'' part is used in this example to store Elementary widgets.
47
48First create the ''SWALLOW'' parts, and then the ''Elementary'' widgets in the
49''.c'' file.
50
51<code c>
52// Container for the rotate button
53part
54{
55 type: SWALLOW;
56 name: "btn/rotate";
57 description
58 {
59 state: "default" 0.0;
60 rel1.relative: 0.30 0.9;
61 rel2.relative: 0.50 0.99;
62 }
63}
64</code>
65
66This part is called ''btn/rotate'', it only has a ''SWALLOW'' type and a
67default state with its position being on the bottom left of the screen.
68
69<code c>
70// Container for the grow button
71part
72{
73 type: SWALLOW;
74 name: "btn/grow";
75 description
76 {
77 state: "default" 0.0;
78 rel1.relative: 1.02 0;
79 rel1.to: "btn/rotate";
80 rel2.relative: 2.02 1;
81 rel2.to: "btn/rotate";
82 }
83}
84</code>
85
86This second ''SWALLOW'' part is very similar to the first one. It is placed
87relatively to ''btn/rotate'', in order to remain next to it.
88
89Next create the actual widgets. This is done in the ''.c'' file and is very
90similar to what is done for the buttons in the first chapter.
91
92This code is added in ''elm_main()''.
93
94<code c>
95// Creation button in the app window
96button = elm_button_add(win);
97elm_object_text_set(button, "Rotate");
98// Add the button to the edje layout container called "btn/rotate"
99elm_object_part_content_set(layout, "btn/rotate", button);
100evas_object_show(button);
101
102// Creation a up button in the app window
103btn_up = elm_button_add(win);
104// Add the button to the edje layout container called "btn/grow"
105elm_object_text_set(btn_up, "Grow");
106elm_object_part_content_set(layout, "btn/grow", btn_up);
107evas_object_show(btn_up);
108</code>
109
110In the default Basic EDC UI Application, the Edje layout is loaded by default.
111Create two Elementary buttons and add them to the ''SWALLOW'' containers,
112without having to setup sizes or positions as this is done in the ''SWALLOW''
113container.
114
115Note that the part name is very important because it is used to be merged the
116Elementary widget and the ''SWALLOW'' part.
117
118When the buttons placed and set, create the animation target. It is done in
119the EDC file.
120
121Add the animation target part.
122
123The part initialization and the default ''state'':
124
125<code c>
126// The animation target
127part
128{
129 name: "atarget";
130 type: IMAGE;
131
132 // Default state
133 description
134 {
135 state: "default" 0.0;
136 image { normal: "image2.png"; }
137 color: 255 0 0 255; /* red */
138 rel1 { relative: 0.3 0.3; }
139 rel2 { relative: 0.7 0.7; }
140 }
141}
142</code>
143
144This ''part'' is an image displaying a big logo, centered on the top of the
145screen.
146
147Create a state to change the color and add the ''map'' statement.
148
149<code c>
150// The rotate state
151description
152{
153 state: "rotate" 0.0;
154 inherit: "default" 0.0;
155
156 map
157 {
158 //Enable Map on the part
159 on: 1;
160 //Enable smooth rendering
161 smooth: 1;
162 //Enable perspective
163 perspective_on: 1;
164
165 //Apply rotations on the part
166 rotation.x: 0;
167 rotation.y: 0;
168 rotation.z: 0;
169 }
170 color: 0 255 0 255; /* green */
171}
172</code>
173
174This part changes the color to green and defines the ''map''. This statement
175makes rotations possible on an Edje ''part''. Rotations are done around the x,
176y or z axes. In this example, the map is enabled and a 0° rotation is applied
177around each axis.
178
179Add a state with a rotation around the z axis of 360°.
180
181<code c>
182description
183{
184 state: "rotate" 1.0;
185 inherit: "rotate" 0.0;
186 map.rotation.z: 360;
187}
188</code>
189
190This ''state'' inherits from the default state parameters and add a rotation
191around the z axis.
192
193Finally add a state to the other button animation grow. Change the size of the
194animation target and add an offset.
195
196
197<code c>
198// The grow state
199description {
200 state: "grow" 0.0;
201 inherit: "default" 0.0;
202 color: 0 0 255 255; /* blue */
203 rel1
204 {
205 relative: 0.2 0.2;
206 offset: 0.3 0.3;
207 }
208 rel2
209 {
210 relative: 0.7 0.4;
211 offset: 0.3 0.3;
212 }
213}
214</code>
215
216The last step is to create the programs to make all these states animate.
217
218{{ :edje_animation_rotate.gif }}
219
220To make the rotation animation smoother, create and chain several ''programs''
221with different durations.
222
223First create the main one: it goes from the default state to the rotate 0.0
224state in 0.2 seconds.
225
226Note that the states are all named the same way (rotate) but not with the same
227version. This version allows you to have more than one state with the same
228name, in fact the actual name of the state is the name plus the version.
229
230<code c>
231// Change the color of target to green
232program
233{
234 name: "rotate,target";
235 source: "btn/rotate";
236 signal: "mouse,clicked,*";
237 action: STATE_SET "rotate" 0.0;
238 target: "atarget";
239 transition: SIN 0.2;
240 after: "rotate,target,2";
241}
242</code>
243
244The program starts when the ''btn/rotate'' part is clicked with any mouse
245button. When the animation ends, it calls the next one called
246''rotate,target,2''.
247
248<code c>
249// Rotate 360°
250program
251{
252 name: "rotate,target,2";
253 action: STATE_SET "rotate" 1.0;
254 target: "atarget";
255 transition: SIN 0.7;
256 after: "rotate,end";
257}
258</code>
259
260This program sets the part state to ''rotate 1.0'' in 0.7 seconds, and when done
261calls the next one ''rotate,end''.
262
263<code c>
264// Go back to the normal.
265program
266{
267 name: "rotate,end";
268 action: STATE_SET "rotate" 0.0;
269 target: "atarget";
270 transition: LINEAR 0.2;
271}
272</code>
273
274''rotate,end'' is the last program of the rotation effect: it sets the state
275to ''rotate 0.0'' very fast.
276
277The last program of this example is the grow effect, it switches from one
278state to another.
279
280{{ :edje_animation_grow.gif }}
281
282<code c>
283// Grow the target and go back to normal state
284program
285{
286 name: "grow,target";
287 source: "btn/grow";
288 signal: "mouse,clicked,*";
289 action: STATE_SET "grow" 1.0;
290 after: "go,default";
291 target: "atarget";
292 transition: SINUSOIDAL 1.0;
293}
294</code>
295
296It starts when the ''btn/grow'' part is clicked, it goes from the current
297state to ''grow 1.0'' in one second. It then calls the go,default program. In
298this program, both size and color change during the transition.
299
300The ''go,default'' program sets the status back default for the animation
301target.
302
303<code c>
304// Go back to normal (default) state
305program
306{
307 name: "go,default";
308 action: STATE_SET "default" 1.0;
309 target: "atarget";
310 transition: SIN 1.0;
311}
312</code>
diff --git a/pages/develop/legacy/tutorial/effects/edje_animation/start_up.txt b/pages/develop/legacy/tutorial/effects/edje_animation/start_up.txt
new file mode 100644
index 000000000..f6c996258
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/edje_animation/start_up.txt
@@ -0,0 +1,187 @@
1~~Title: Start Up - Edje Animation~~
2==== Animating on Application Start-up ====
3
4The goal of this tutorial is to create an animation target and buttons to
5start animations, all of this is in an EDC (Edje Data Collection) file.
6
7{{ :edje_animation_start.gif }}
8
9First create an application using Basic EDC UI Application:
10
11<code c>
12#include <Elementary.h>
13
14EAPI_MAIN int
15elm_main(int argc, char **argv)
16{
17 Evas_Object *win, *layout;
18 win = elm_win_util_standard_add("Edje Animation", "Edje Animation Tutorial");
19 elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
20 elm_win_autodel_set(win, EINA_TRUE);
21
22 layout = elm_layout_add(win);
23
24 elm_layout_file_set(layout, "edje_animation.edj", "my_layout");
25
26 evas_object_resize(layout, 300, 300);
27 evas_object_show(layout);
28 evas_object_resize(win, 400, 400);
29 evas_object_show(win);
30 elm_run();
31 elm_shutdown();
32 return 0;
33}
34ELM_MAIN()
35</code>
36
37Animations can be run at application startup. By default the Basic EDC UI
38Application model produces an empty window with a title.
39
40In this example an image is added to the window and the behavior of the window title is
41changed.
42
43Add the image to the Edje images collection.
44<code c>
45images
46{
47 image: "image1.png" COMP;
48 image: "image2.png" COMP;
49}
50</code>
51
52Then add an Edje part using the small image: this part has two states. This is
53the first important notion for animations. The ''STATE'' describes the
54appearance of a part: size, position, color, etc.
55
56In this example, the part has two states, default and down-state:
57
58<code c>
59part
60{
61 name: "image1";
62 type: IMAGE;
63 description
64 {
65 state: "default" 0.0;
66 max: 63 63;
67 min: 63 63;
68 image { normal: "image1.png"; }
69 rel1.relative: 0.2 0.0;
70 rel2.relative: 0.0 0.0;
71 }
72
73 description
74 {
75 state: "down-state" 1.0;
76 inherit: "default" 0.0;
77 rel1.relative: 0.2 0.92;
78 rel2.relative: 0.05 1.0;
79 }
80}
81</code>
82
83The logo part has the IMAGE type. The default state contains in the first
84description of the part sets:
85
86 * the maximum and minimum size using the min and max statements
87 * the image to use in this part
88 * the default position.
89
90The second state, ''"down-state"'', inherits all of the default's attributes, and
91only changes the position to put the image at the bottom of the application
92window.
93
94These two states are the start and end states of the animation. To actually
95create the animation, add a program to the Edge ''programs'' collection.
96
97<code c>
98// Icon drop animation
99program
100{
101 name: "animation,state1";
102 source: "";
103 signal: "load";
104 action: STATE_SET "down-state" 1.0;
105 target: "logo";
106 transition: BOUNCE 2.5 0.0 5.0;
107}
108</code>
109
110This program is named ''animation,state1'' and is started when the application
111receives the ''load'' signal immediately on startup. It runs the ''STATE_SET''
112action so it changes the object state from ''"default"'' to ''"down-state"''. The target
113of the program is the image ''part''.
114
115In order to switch from one state to another, it uses a ''transition'' of the
116''BOUNCE'' type with three parameters, the first one is saying how much time
117the transition will last, the second one is the factor of curviness and the
118last one is saying how many times and object will bounce.
119
120This produces an falling and bouncing effect.
121
122Also add an animation for the window title to make it move from the right to
123the left with a bounce effect while growing the font size.
124
125Create a new state on the part called "txt_title" inside which both the font
126size and position are changed.
127
128<code c>
129part
130{
131 name: "txt_title";
132 type: TEXT;
133 mouse_events: 0;
134
135 // The default State
136 description
137 {
138 state: "default" 0.0;
139 align: 0.0 0.0;
140 rel1 { relative: 0.5 0.0; }
141 rel2 { relative: 1.0 0.5; }
142 text
143 {
144 font: "Sans";
145 size: 22;
146 text: "edje animation";
147 }
148 color: 0 0 0 255;
149 }
150
151 // The "Bigger" state
152 description
153 {
154 state: "Bigger" 0.0;
155 align: 0.0 0.0;
156 rel1 { relative: 0.0 0.0; }
157 rel2 { relative: 1.0 0.2; }
158 text
159 {
160 size: 26;
161 text: "animation terminated";
162 }
163 color: 0 0 0 255;
164 }
165}
166</code>
167
168Create a program to animate this part on startup, just like the small image.
169
170<code c>
171// Make the title bigger
172program
173{
174 name: "animation,bigtitle";
175 source: "";
176 signal: "load";
177 action: STATE_SET "Bigger" 1.0;
178 target: "txt_title";
179 transition: LINEAR 5.0;
180}
181</code>
182This program goes from the default state to the bigger state in five seconds
183with a ''LINEAR'' effect, automatically running on the application startup.
184
185\\
186//**__next page__: **//[[/tutorial/effects/edje_animation/on_click|Animating Object on Click]]
187
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/blend.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/blend.txt
new file mode 100644
index 000000000..672164fee
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/blend.txt
@@ -0,0 +1,53 @@
1~~Title: Elementary Animations - Creating a Blend Transition~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
3=== Elementary Animations ===
4==== Creating a Blend Transition ====
5
6The blend effect also works the same way as the flip, but without the axes or
7direction information.
8
9{{ :elementary_animations_blend.gif }}
10
11Use the back button here as well. To create the blend
12effect button:
13
14<code c>
15// The blend button
16Evas_Object *btn_blend = elm_button_add(win);
17elm_object_text_set(btn_blend, "Blend");
18evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
19evas_object_show(btn_blend);
20evas_object_smart_callback_add(btn_blend, "clicked", _btn_blend_cb, &anim);
21elm_box_pack_end(center_vbox, btn_blend);
22</code>
23
24The blend transition callback is:
25<code c>
26static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
27{
28 Animations *anim = (Animations *)data;
29
30 // Setting the button text
31 elm_object_text_set(anim->button, "Blend");
32 _blend_effect(anim->button, anim->buttonbck);
33}
34</code>
35
36Create and start the blend animation. This animation is created by adding it
37to and ''Elm_Transit'' with ''elm_transit_effect_blend_add''. Add two objects,
38as for the flip.
39<code c>
40static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
41{
42 Elm_Transit *trans;
43
44 trans = elm_transit_add();
45 elm_transit_object_add(trans, obj);
46 elm_transit_object_add(trans, obj2);
47 elm_transit_effect_blend_add(trans);
48 elm_transit_duration_set(trans, 3.0);
49 elm_transit_go(trans);
50}
51</code>
52\\
53//**__next page__: **// [[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/fade.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/fade.txt
new file mode 100644
index 000000000..a8592acdf
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/fade.txt
@@ -0,0 +1,53 @@
1~~Title: Elementary Animations - Creating a Fade Effect~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/blend|Creating a Blend Transition]]
3=== Elementary Animations ===
4==== Creating a Fade Effect ====
5
6The fade effect works exactly the same way as the blend effect.
7
8{{ :elementary_animations_fade.gif }}
9
10First create the button:
11
12<code c>
13 // The fade button
14 Evas_Object *btn_fade = elm_button_add(win);
15 elm_object_text_set(btn_fade, "Fade");
16 evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
17 evas_object_show(btn_fade);
18 evas_object_smart_callback_add(btn_fade, "clicked", _btn_fade_cb, &anim);
19 elm_box_pack_end(right_vbox, btn_fade);
20</code>
21
22Then add the button's callback:
23
24<code c>
25static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
26{
27 Animations *anim = (Animations *)data;
28
29
30 // Setting the button text
31 elm_object_text_set(anim->button, "Fade");
32 _fade_effect(anim->button, anim->buttonbck);
33}
34</code>
35
36The animation function calls ''elm_transit_effect_fade_add'' instead of
37''elm_transit_effect_blend_add''.
38
39<code c>
40static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
41{
42 Elm_Transit *trans;
43
44 trans = elm_transit_add();
45 elm_transit_object_add(trans, obj);
46 elm_transit_object_add(trans, obj2);
47 elm_transit_effect_fade_add(trans);
48 elm_transit_duration_set(trans, 3.0);
49 elm_transit_go(trans);
50}
51</code>
52\\
53//**__next page__: **//[[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/flip.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/flip.txt
new file mode 100644
index 000000000..1536b191e
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/flip.txt
@@ -0,0 +1,61 @@
1~~Title: Elementary Animations - Creating a Zoom Effect~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
3=== Elementary Animations ===
4==== Creating a Flip Effect ====
5
6This effect is applied to a pair of objects, in the order they are added, to
7the ''Elm_Transit'' transition. In this example, add the animation target
8button and the button called ''buttonbck'' which represents the back of the target
9button.
10
11{{ :elementary_animations_flip.gif }}
12
13Create the action button for the flip effect:
14
15<code c>
16// The flip button
17Evas_Object *btn_flip = elm_button_add(win);
18elm_object_text_set(btn_flip, "Flip x");
19evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
20evas_object_show(btn_flip);
21evas_object_smart_callback_add(btn_flip, "clicked", _btn_flip_cb, &anim);
22elm_box_pack_end(left_vbox, btn_flip);
23</code>
24
25The corresponding callback to create and start the animation with the two
26objects (target button and back button) to animate is like follows.
27
28<code c>
29static void
30_btn_flip_cb(void *data, Evas_Object *btn, void *ev)
31{
32 Animations *anim = (Animations *)data;
33
34 // Setting the button text
35 elm_object_text_set(anim->button, "Flip");
36 _flip_effect(anim->button, anim->buttonbck);
37}
38</code>
39
40Create the function which runs the animation. This flip animation is created
41using ''elm_transit_effect_flip_add''. The second parameter is the axis of the
42flip: in this example it is the X axis, so the button flips down to top to
43show the back button. The last parameter is the flip direction: ''EINA_TRUE''
44means clockwise.
45
46<code c>
47_flip_effect(Evas_Object *obj, Evas_Object *obj2)
48{
49 Elm_Transit *trans;
50
51 trans = elm_transit_add();
52 elm_transit_object_add(trans, obj);
53 elm_transit_object_add(trans, obj2);
54 elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
55
56 elm_transit_duration_set(trans, 3.0);
57 elm_transit_go(trans);
58}
59</code>
60\\
61//**__next page__: **//[[/tutorial/effects/elementary_animations/blend|Creating a Blend Transition]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/flipy.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/flipy.txt
new file mode 100644
index 000000000..5cfed99a8
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/flipy.txt
@@ -0,0 +1,52 @@
1~~Title: Elementary Animations - Creating a Flip on y Axis~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
3=== Elementary Animations ===
4==== Creating a Flip on y Axis ====
5
6This is same as the flip transition, but on y axis.
7
8{{ :elementary_animations_flipy.gif }}
9
10To create a flip on y axis:
11
12<code c>
13// The flip y button
14Evas_Object *btn_flip_y = elm_button_add(win);
15elm_object_text_set(btn_flip_y, "Flip y");
16evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
17evas_object_show(btn_flip_y);
18evas_object_smart_callback_add(btn_flip_y, "clicked", _btn_flip_y_cb, &anim);
19elm_box_pack_end(left_vbox, btn_flip_y);
20</code>
21
22The flip on y button callback looks like:
23<code c>
24static void
25_btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
26{
27 Animations *anim = (Animations *)data;
28
29
30 // Setting the button text
31 elm_object_text_set(anim->button, "Flip 2");
32 _flip_y_effect(anim->button, anim->buttonbck);
33}
34</code>
35
36The animation function:
37<code c>
38static void
39_flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
40{
41 Elm_Transit *trans;
42
43 trans = elm_transit_add();
44 elm_transit_object_add(trans, obj);
45 elm_transit_object_add(trans, obj2);
46 elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
47 elm_transit_duration_set(trans, 3.0);
48 elm_transit_go(trans);
49}
50</code>
51\\
52//**__next page__: **//[[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/rotation.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/rotation.txt
new file mode 100644
index 000000000..63df325de
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/rotation.txt
@@ -0,0 +1,62 @@
1~~Title: Elementary Animations - Creating a Rotation Effect~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/setting_up|Setting Up the Application]]
3=== Elementary Animations ===
4==== Creating a Rotation Effect ====
5
6This effect rotates the animation target button with an angle of 360°. A
7pointer to this angle is stored in the application data as ''anim->rt_angle''.
8
9{{ :elementary_animations_rotate.gif }}
10
11Create the button and add it to the center column.
12
13<code c>
14// The rotation button
15Evas_Object *btn_rotate = elm_button_add(win);
16elm_object_text_set(btn_rotate, "Rotate");
17evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
18evas_object_show(btn_rotate);
19evas_object_smart_callback_add(btn_rotate, "clicked", _btn_rotate_cb, &anim);
20elm_box_pack_end(center_vbox, btn_rotate);
21</code>
22
23In the rotate button callback, call the effect function with the target button
24as first parameter and the rotation angle as the second one.
25
26<code c>
27static void
28_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
29{
30 Animations *anim = (Animations *)data;
31
32 // Setting the button text
33 elm_object_text_set(anim->button, "Rotate");
34 _rotation_effect(anim->button, *(anim->rt_angle));
35}
36</code>
37
38The animation function rotates the animation target by adding a rotation
39effect with ''elm_transit_effect_rotation_add''. This function takes three
40parameters:
41
42 * ''Elm_Transit''
43 * the rotation position at which the effect begins
44 * the rotation position at which the effect ends
45
46Rotation starts at 0° to finish at 360°. The animation lasts two seconds.
47
48<code c>
49static void
50_rotation_effect(Evas_Object *obj, float angle)
51{
52 Elm_Transit *trans = elm_transit_add();
53 elm_transit_object_add(trans, obj);
54
55 // rotates the object from its original angle to given degrees to the right
56 elm_transit_effect_rotation_add(trans, 0.0, angle);
57 elm_transit_duration_set(trans, 2.0);
58 elm_transit_go(trans);
59}
60</code>
61\\
62//**__next page__: **//[[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/setting_up.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/setting_up.txt
new file mode 100644
index 000000000..218adc308
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/setting_up.txt
@@ -0,0 +1,255 @@
1~~Title: Elementary Animations - Setting Up the Application~~
2=== Elementary Animations ===
3==== Setting Up the Application ====
4
5 In this example, one single object is animated with different type of
6animations.
7
8Create the structure of our animation represented by a struct named
9''Animations''.
10
11<code c>
12typedef struct _Animations{
13 Evas_Object *button;
14 Evas_Object *buttonbck;
15 float *rt_angle;
16 float *zto;
17 float *zfrom;
18} Animations;
19</code>
20
21Then create a basic application with the widgets we need:
22<code c>
23EAPI_MAIN int
24elm_main(int argc, char **argv)
25{
26 Evas_Object *win, *label, *hbox, *left_vbox, *center_vbox, *right_vbox;
27 Evas_Object *button, *buttonbck;
28 float rt_angle, zto, zfrom;
29
30 win = elm_win_util_standard_add("Elementary Animations", "Elementary Animations Tutorial");
31 elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
32 elm_win_autodel_set(win, EINA_TRUE);
33 if (elm_win_wm_rotation_supported_get(win))
34 {
35 int rots[4] = { 0, 90, 180, 270 };
36 elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
37 }
38
39 //here will come the animation code
40
41 evas_object_resize(win, 400, 400);
42 evas_object_show(win);
43 elm_run();
44 elm_shutdown();
45 return 0;
46}
47ELM_MAIN()
48
49</code>
50
51Here the main widgets of the application:
52
53 * ''win'': the main window
54 * ''label'': the title label
55 * ''button'': a button object, the target of the animations
56 * ''buttonbck'': a button representing the back of the target button
57 * ''left_vbox'': a vertical box to place the first buttons column
58 * ''center_vbox'': a vertical box to store the second buttons column
59 * ''right_vbox'': a vertical box to store the last buttons column
60 * ''hbox'': a horizontal box to store the vertical boxes
61 * ''rt_angle'', ''zto'', ''zfrom'': these variables are used to store values for animations
62
63Place the widgets on the application's canvas, first create widgets on the
64main window:
65
66Set up the needed values like the rotation angle, the original zoom value
67(''zfrom''), and the destination zoom value (''zto'').
68
69<code c>
70//set the values for animations
71rt_angle = 360.0;
72zfrom = 1.0;
73zto = 2.0;
74</code>
75
76Add a label title to the main window, then create the animation target button
77and the back button.
78
79<code c>
80/* Label*/
81label = elm_label_add(win);
82elm_object_text_set(label, "Effects Tutorial");
83evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
84evas_object_move(label, 100, 0);
85evas_object_resize(label, 200, 50);
86evas_object_show(label);
87
88/* Creation a button in the app window*/
89button = elm_button_add(win);
90evas_object_move(button, 100, 100); // Moving the button to x=50 y=100
91evas_object_resize(button, 200, 50); // Resizing the button 100x50
92evas_object_show(button); // Showing the button
93/* Creation a back button in the app window*/
94buttonbck = elm_button_add(win);
95elm_object_text_set(buttonbck, "Button back");
96evas_object_move(buttonbck, 100, 100);
97evas_object_resize(buttonbck, 200, 50);
98
99/*set the structure of pointeurs*/
100Animations anim = { button, buttonbck, &rt_angle, &zto, &zfrom };
101</code>
102
103Now you can create boxes to add a set of buttons to them that starts
104animations on the target.
105
106Create the structure of the box of buttons with three columns (vertical boxes)
107and one horizontal for the main container.
108
109<code c>
110// Creation of the main container box
111hbox = elm_box_add(win);
112elm_box_horizontal_set(hbox, EINA_TRUE);
113elm_box_homogeneous_set(hbox, EINA_TRUE);
114evas_object_move(hbox, 130, 200);
115evas_object_show(hbox);
116
117// Creation of the first column
118left_vbox = elm_box_add(hbox);
119elm_box_horizontal_set(left_vbox, EINA_FALSE);
120elm_box_homogeneous_set(left_vbox, EINA_TRUE);
121evas_object_show(left_vbox);
122elm_box_pack_start(hbox, left_vbox);
123
124// Creation of the second column
125center_vbox = elm_box_add(hbox);
126elm_box_horizontal_set(center_vbox, EINA_FALSE);
127elm_box_homogeneous_set(center_vbox, EINA_TRUE);
128evas_object_show(center_vbox);
129elm_box_pack_end(hbox, center_vbox);
130
131// Creation of the last column
132right_vbox = elm_box_add(hbox);
133elm_box_horizontal_set(right_vbox, EINA_FALSE);
134elm_box_homogeneous_set(right_vbox, EINA_TRUE);
135evas_object_show(right_vbox);
136elm_box_pack_end(hbox, right_vbox);
137</code>
138
139Then create the first action button for the resize effect.
140
141<code c>
142// The resize button
143Evas_Object *btn_resize = elm_button_add(win);
144elm_object_text_set(btn_resize, "Resize"); // Setting the button text
145evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL); // Setting the hint weight policy
146evas_object_show(btn_resize); // Showing the button
147evas_object_smart_callback_add(btn_resize, "clicked", _btn_resize_cb, &anim); // Setting the "clicked" callback
148elm_box_pack_end(left_vbox, btn_resize); // Adding the button to the first column
149</code>
150
151''evas_object_smart_callback_add'' defines the callback function that is to be
152called when the button is clicked. In this example, set a ''_btn_resize_cb''
153function and pass the application data ''anim'' to this callback function.
154
155The callback by itself only sets a new text for the animation target button,
156and calls a function which will actually animate the button.
157
158<code c>
159static void
160_btn_resize_cb(void *data, Evas_Object *btn, void *ev)
161{
162 Animations *anim = (Animations *)data;
163
164 // Starting the rotation effect 360 degrees
165 //evas_object_resize(button, 100, 50);
166 elm_object_text_set(anim->button, "Resize");
167 _resize_effect(anim->button);
168}
169</code>
170
171This function is an ''evas_object_smart_callback'' and thus needs to have its
172specific prototype: it does not return anything and receives three parameters:
173
174 * ''data'': data to be passed
175 * ''btn'': the object the callback is being called about
176 * ''ev'': the actual event, seldom used
177
178In this case, use ''data'' to pass the application data to the callback. However,
179the parameter's type is ''void *'' and not ''Animation *''. Initialize a variable of
180the correct type with the pointer.
181
182<code c>
183Animation * anim = (Animation *)data;
184</code>
185
186Then use the application data in the callback function. At this point create
187the animation directly in the callback function, but it is more
188straightforward to encapsulate the animation process into a dedicated
189function. ''_resize_effect'' implements the animation code:
190
191<code c>
192static void
193_resize_effect(Evas_Object *obj)
194{
195 // Elementary Transition declaration and creation
196 Elm_Transit *trans = elm_transit_add();
197
198 // Adding the transition target object
199 elm_transit_object_add(trans, obj);
200
201 // Setting the resize effect
202 elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
203
204 // Setting the transition duration
205 elm_transit_duration_set(trans, 3.0);
206
207 // Starting the transition
208 elm_transit_go(trans);
209}
210</code>
211
212Create an ''Elm_Transit *'' object representing the transition.
213
214<code c>
215Elm_Transit *trans = elm_transit_add();
216</code>
217
218Then add the target object to the transition
219
220<code c>
221elm_transit_object_add(trans, obj);
222</code>
223
224Add a resizing transition to the object with the origin and destination width
225and height in pixels.
226
227<code c>
228elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
229</code>
230
231100 and 50 are respectively the object's width and height when the effect
232begins, whereas 300 and 150 are respectively the object's width and height
233when the effect ends: the object grows from 100×50 to 300×150.
234
235After that set the transition duration with ''elm_transit_duration_set''.
236
237<code c>
238elm_transit_duration_set(trans, 3.0);
239</code>
240
241The animation lasts three seconds. The duration parameter is a double.
242
243Now start the animation by calling ''elm_transit_go'' with the ''Elm_Transit'' object.
244
245<code c>
246elm_transit_go(trans);
247</code>
248
249When the resize button is clicked, the animation target button grows.
250
251All the action buttons are created exactly the same way as the resize button,
252with a callback and an animation function.
253
254\\
255//**__next page__: **//[[/tutorial/effects/elementary_animations/rotation|Creating a Rotation Effect]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/transit.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/transit.txt
new file mode 100644
index 000000000..6a0a16035
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/transit.txt
@@ -0,0 +1,362 @@
1~~Title: Elementary Animations - Transit~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
3=== Elementary Animations ===
4==== Transit: Implementing Elementary Transit Effects ====
5
6This tutorial demonstrates how you can implement a variety of EFL animation effects using
7the Transit API available in the Elementary library.
8
9=== Initializing the Application Layout ===
10
11The application uses widgets, such as elm_naviframe for
12view management, layout classes, such as elm_list for the composition of the
13screen.
14
15The transit is designed to apply various animated transition effects to the
16Evas_Object. The following transition effects are supported in EFL and
17Elementary applications.
18
19 * Blend
20 * Color
21 * Fade
22 * Flip
23 * Rotation
24 * Transition
25 * Wipe
26 * Zoom
27
28The application layout is created by adding two naviframes in order to switch
29from one to another in transitions. Two lists are respectively added to the
30two naviframes.
31
32<code c>
33EAPI_MAIN int
34elm_main(int argc, char **argv)
35{
36 Evas_Object *navi, *navi2, *list, *list2;
37
38 win = elm_win_util_standard_add("Elementary Animations", "Elementary Animations Tutorial");
39 elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
40 elm_win_autodel_set(win, EINA_TRUE);
41 if (elm_win_wm_rotation_supported_get(win))
42 {
43 int rots[4] = { 0, 90, 180, 270 };
44 elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
45 }
46
47 Elm_Object_Item *nf_it, *nf_it2;
48
49 /* add two naviframes and two lists to switch
50 * from one to another in some transitions */
51 navi2 = elm_naviframe_add(win);
52 navi = elm_naviframe_add(win);
53 list = elm_list_add(navi);
54 list2 = elm_list_add(navi2);
55 elm_list_mode_set(list, ELM_LIST_COMPRESS);
56 elm_list_mode_set(list2, ELM_LIST_COMPRESS);
57
58 /* store naviframe pointeurs to pass them
59 * in data pointeur parameter */
60 Navi navis = {navi, navi2};
61 Navi navis2 = {navi2, navi};
62
63 /* first list items */
64 elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, &navis);
65 elm_list_item_append(list, "Color", NULL, NULL, color_cb, &navis);
66 elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, &navis);
67 elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, &navis);
68 elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, &navis);
69 elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, &navis);
70 elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, &navis);
71 elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, &navis);
72 elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, &navis);
73 elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, &navis);
74 elm_list_go(list);
75
76 /* second list items*/
77 elm_list_item_append(list2, "Blend2", NULL, NULL, blend_cb, &navis2);
78 elm_list_item_append(list2, "Color2", NULL, NULL, color_cb, &navis2);
79 elm_list_item_append(list2, "Fade2", NULL, NULL, fade_cb, &navis2);
80 elm_list_item_append(list2, "Flip2", NULL, NULL, flip_cb, &navis2);
81 elm_list_item_append(list2, "Rotation2", NULL, NULL, rotation_cb, &navis2);
82 elm_list_item_append(list2, "ResizableFlip2", NULL, NULL, resizable_flip_cb, &navis2);
83 elm_list_item_append(list2, "Translation2", NULL, NULL, translation_cb, &navis2);
84 elm_list_item_append(list2, "Wipe2", NULL, NULL, wipe_cb, &navis2);
85 elm_list_item_append(list2, "Zoom2", NULL, NULL, zoom_cb, &navis2);
86 elm_list_item_append(list2, "Custom2", NULL, NULL, custom_cb, &navis2);
87 elm_list_go(list2);
88
89 nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
90 nf_it2 = elm_naviframe_item_push(navi2, "Transit2", NULL, NULL, list2, NULL);
91
92 evas_object_show(navi);
93 evas_object_show(navi2);
94 evas_object_show(list);
95 evas_object_show(list2);
96 evas_object_resize(navi2, 400, 400);
97 evas_object_resize(navi, 400, 400);
98 evas_object_resize(win, 400, 400);
99 evas_object_show(win);
100 elm_run();
101 elm_shutdown();
102 return 0;
103}
104ELM_MAIN()
105</code>
106
107The Navi structure is used to store the naviframe pointeurs in order to pass
108them in data pointeur as a parameter in callback functions.
109
110<code c>
111/* store naviframe pointeurs */
112typedef struct _Navi
113{
114 Evas_Object *navi;
115 Evas_Object *navi2;
116} Navi;
117</code>
118
119Next the transition effects will be described, there are two kind of transit
120effects, one when the effect applies on one object, the other one when the
121effect is a transition between two objects.
122
123=== Implementing the Rotation Effect ===
124
125{{ :transit_rotate.gif }}
126
127To implement the rotation effect:
128 - Use the ''elm_transit'' object with the ''elm_transit_add()'' function to add the transit effect.
129 - Set the target object with ''elm_transit_object_add()'' function.
130 - Set the effect rotation indication the rotation amount with ''elm_transit_effect_rotation_add()'' function.
131 - Set the transit duration with ''elm_transit_duration_set()''
132 - To start the transit animation, use the ''elm_transit_go()'' function.
133
134<code c>
135static void
136rotation_cb(void *data, Evas_Object *obj, void *event_info)
137{
138 Navi *navis = data;
139 Evas_Object *navi=navis->navi;
140 Elm_Transit *transit = elm_transit_add();
141
142 // 360 degree rotation effect in the clock-wise direction
143 elm_transit_object_add(transit, navi);
144 elm_transit_effect_rotation_add(transit, 0, 360);
145 elm_transit_duration_set(transit, 1);
146 elm_transit_go(transit);
147}
148</code>
149
150For the transition with one effect, it will be very similar to this one so it
151will be not detailed excepted particular callbacks as the next one for the
152zoom effect.
153
154=== Implementing the Zoom Effect ===
155
156{{ :transit_zoom.gif }}
157
158For the zoom effect, two transitions are set, one for zooming in the other one
159for zooming out.
160
161The ''elm_transit_chain_transit_add()'' function allows to chain the
162transitions:
163
164<code c>
165static void
166zoom_cb(void *data, Evas_Object *obj, void *event_info)
167{
168 Navi *navis = data;
169 Evas_Object *navi=navis->navi;
170 // Zoom out to scale 0.6
171 Elm_Transit *transit = elm_transit_add();
172 elm_transit_smooth_set(transit, EINA_FALSE);
173 elm_transit_object_add(transit, navi);
174 elm_transit_effect_zoom_add(transit, 1.0, 0.4);
175 elm_transit_duration_set(transit, 0.5);
176
177 // Zoom in to the original size
178 Elm_Transit *transit2 = elm_transit_add();
179 elm_transit_smooth_set(transit2, EINA_FALSE);
180 elm_transit_object_add(transit2, navi);
181 elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
182 elm_transit_duration_set(transit2, 0.5);
183
184 elm_transit_chain_transit_add(transit, transit2);
185 elm_transit_go(transit);
186}
187</code>
188
189=== Implementing the Wipe Effect ===
190
191{{ :transit_wipe.gif }}
192
193Similarly to the rotation effect but with the ''elm_transit_effect_wipe_add()''
194function by indicating the wipe type and the wiping direction.
195
196<code c>
197static void
198wipe_cb(void *data, Evas_Object *obj, void *event_info)
199{
200 Navi *navis = data;
201 Evas_Object *navi=navis->navi;
202 Elm_Transit *transit = elm_transit_add();
203
204 elm_transit_object_add(transit, navi);
205 elm_transit_effect_wipe_add(transit, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
206 elm_transit_duration_set(transit, 3.0);
207 elm_transit_go(transit);
208}
209</code>
210
211=== Implementing the Translation Effect ===
212
213{{ :transit_translation.gif }}
214
215Similarly to the rotation effect but with the ''elm_transit_effect_translation_add()''
216function by indicating the position when effect begins and end.
217
218<code c>
219static void
220translation_cb(void *data, Evas_Object *obj, void *event_info)
221{
222 Navi *navis = data;
223 Evas_Object *navi=navis->navi;
224 Elm_Transit *transit = elm_transit_add();
225
226 elm_transit_object_add(transit, navi);
227 elm_transit_effect_translation_add(transit, 0, 0, 50, 100);
228 elm_transit_duration_set(transit, 3.0);
229 elm_transit_go(transit);
230}
231</code>
232
233=== Implementing the Color Effect ===
234
235{{ :transit_color.gif }}
236
237Similarly to the rotation effect but with the ''elm_transit_effect_color_add()''
238function by indicating the RGBA color when effect begins and end.
239
240<code c>
241static void
242color_cb(void *data, Evas_Object *obj, void *event_info)
243{
244 Navi *navis = data;
245 Evas_Object *navi=navis->navi;
246 Elm_Transit *transit = elm_transit_add();
247
248 elm_transit_object_add(transit, navi);
249 elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
250 elm_transit_duration_set(transit, 3.0);
251 elm_transit_go(transit);
252}
253</code>
254
255=== Implementing the Blend Effect ===
256
257{{ :blend.gif }}
258
259This time, the blend effect is a transition between the two naviframes. So,
260the two naviframes are added to the ''Elm_transit''. Moreover, the
261''elm_transit_objects_final_state_keep_set()'' function allows to set the
262state of the final state of the transition (it could be used for the precedent
263effects too):
264
265<code c>
266static void
267blend_cb(void *data, Evas_Object *obj, void *event_info)
268{
269 Navi *navis = data;
270 Evas_Object *navi=navis->navi;
271 Evas_Object *navi2=navis->navi2;
272 Elm_Transit *transit = elm_transit_add();
273
274 elm_transit_object_add(transit, navi);
275 elm_transit_object_add(transit, navi2);
276 elm_transit_effect_blend_add(transit);
277 elm_transit_duration_set(transit, 3.0);
278 elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
279 elm_transit_go(transit);
280
281}
282</code>
283
284
285=== Implementing the Fade Effect ===
286
287{{ :transit_fade.gif }}
288
289Similarly to the blend effect but with the ''elm_transit_effect_fade_add()'':
290
291<code c>
292static void
293fade_cb(void *data, Evas_Object *obj, void *event_info)
294{
295 Navi *navis = data;
296 Evas_Object *navi=navis->navi;
297 Evas_Object *navi2=navis->navi2;
298 Elm_Transit *transit = elm_transit_add();
299
300 elm_transit_object_add(transit, navi);
301 elm_transit_object_add(transit, navi2);
302 elm_transit_effect_fade_add(transit);
303 elm_transit_duration_set(transit, 3.0);
304 elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
305 elm_transit_go(transit);
306
307}
308</code>
309
310=== Implementing the Flip Effect ===
311
312{{ :transit_flip.gif }}
313
314Similarly to the blend effect but with the ''elm_transit_effect_flip_add()''
315by indicating the flipping axis and the flipping direction (''EINA_TRUE'' is
316clock-wise):
317
318<code c>
319static void
320flip_cb(void *data, Evas_Object *obj, void *event_info)
321{
322 Navi *navis = data;
323 Evas_Object *navi=navis->navi;
324 Evas_Object *navi2=navis->navi2;
325 Elm_Transit *transit = elm_transit_add();
326
327 elm_transit_object_add(transit, navi);
328 elm_transit_object_add(transit, navi2);
329 elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
330 elm_transit_duration_set(transit, 3.0);
331 elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
332 elm_transit_go(transit);
333}
334</code>
335
336=== Implementing the Resizable Flip Effect ===
337
338{{ :transit_resizeflip.gif }}
339
340Similarly to the blend effect but with the ''elm_transit_effect_flip_add()''
341by indicating the flipping axis and the flipping direction (''EINA_TRUE'' is
342clock-wise):
343
344<code c>
345static void
346resizable_flip_cb(void *data, Evas_Object *obj, void *event_info)
347{
348 Navi *navis = data;
349 Evas_Object *navi=navis->navi;
350 Evas_Object *navi2=navis->navi2;
351 Elm_Transit *transit = elm_transit_add();
352
353 elm_transit_object_add(transit, navi);
354 elm_transit_object_add(transit, navi2);
355 elm_transit_effect_resizable_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
356 elm_transit_duration_set(transit, 3.0);
357 elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
358 elm_transit_go(transit);
359}
360</code>
361\\
362//**__The whole code__: **//{{code_c/tutorial/effects/transit.c}}
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/wipe.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/wipe.txt
new file mode 100644
index 000000000..c02617d84
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/wipe.txt
@@ -0,0 +1,61 @@
1~~Title: Elementary Animations - Creating a Wipe Effect~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
3=== Elementary Animations ===
4==== Creating a Wipe Effect ====
5
6The wipe transition is applied on an Evas object considering the wipe type and
7the direction. Use ''ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE'' to hide the button,
8and ''ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT'' to do it from left to right.
9
10{{ :elementary_animations_wipe.gif }}
11
12The wipe animation button is as follows:
13
14<code c>
15// The wipe button
16Evas_Object *btn_wipe = elm_button_add(win);
17elm_object_text_set(btn_wipe, "Wipe");
18evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
19evas_object_show(btn_wipe);
20evas_object_smart_callback_add(btn_wipe, "clicked", _btn_wipe_cb, &anim);
21elm_box_pack_end(right_vbox, btn_wipe);
22</code>
23
24The wipe button callback looks like:
25
26<code c>
27static void
28_btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
29{
30 Animations *anim = (Animations *)data;
31
32 // Starting the rotation effect 360 degrees
33 //evas_object_resize(anim->button, 100, 50);
34 // Setting the button text
35 elm_object_text_set(anim->button, "Wipe");
36 _wipe_effect(anim->button);
37}
38</code>
39
40The animation function calls ''elm_transit_effect_wipe_add'' with
41''ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE'' as the second parameter to hide the button
42and ''ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT'' as last parameter to set the direction
43(left to right).
44
45<code c>
46static void
47_wipe_effect(Evas_Object *obj)
48{
49 Elm_Transit *trans;
50
51 trans = elm_transit_add();
52 elm_transit_object_add(trans, obj);
53 elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
54 elm_transit_duration_set(trans, 3.0);
55 elm_transit_go(trans);
56}
57</code>
58\\
59//**__The whole code__: **//{{code_c/tutorial/effects/elementary_animations.c}}
60\\
61//**__next page__: **//[[/tutorial/effects/elementary_animations/transit|Implementing Elementary Transit Effects]]
diff --git a/pages/develop/legacy/tutorial/effects/elementary_animations/zoom.txt b/pages/develop/legacy/tutorial/effects/elementary_animations/zoom.txt
new file mode 100644
index 000000000..df308b5bb
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects/elementary_animations/zoom.txt
@@ -0,0 +1,54 @@
1~~Title: Elementary Animations - Creating a Zoom Effect~~
2//**__previous page__: **//[[/tutorial/effects/elementary_animations/rotation|Creating a Rotation Effect]]
3=== Elementary Animations ===
4==== Creating a Zoom Effect ====
5
6The zoom effect zooms on the animation target to make it twice bigger. Store
7the source rate and the destination rate in the application data using
8''anim->zfrom'' and ''anim->zto''.
9
10{{ :elementary_animations_zoom.gif }}
11
12Create the button and add it to the center column.
13
14<code c>
15// The zoom button
16Evas_Object *btn_zoom = elm_button_add(win);
17elm_object_text_set(btn_zoom, "Zoom");
18evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
19evas_object_show(btn_zoom);
20evas_object_smart_callback_add(btn_zoom, "clicked", _btn_zoom_cb, &anim);
21elm_box_pack_end(right_vbox, btn_zoom);
22</code>
23
24Then add a callback function in order to perform the animation.
25<code c>
26static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
27{
28 Animations *anim = (Animations *)data;
29
30 // Starting the rotation effect 360 degrees
31 //evas_object_resize(anim->button, 100, 50);
32 elm_object_text_set(anim->button, "Zoom");
33 _zoom_effect(anim->button, *(anim->zfrom), *(anim->zto));
34}
35</code>
36
37To create the zoom effect, use ''elm_transit_effect_zoom_add'' with the start
38rate and the destination rate stored in application data (''anim->zfrom'' and
39''anim->zto'')
40
41<code c>
42static void
43_zoom_effect(Evas_Object *obj, float from, float to)
44{
45 Elm_Transit *trans = elm_transit_add();
46 elm_transit_object_add(trans, obj);
47
48 elm_transit_effect_zoom_add(trans, from, to);
49 elm_transit_duration_set(trans, 2.0);
50 elm_transit_go(trans);
51}
52</code>
53\\
54//**__next page__: **//[[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
diff --git a/pages/develop/legacy/tutorial/effects_tutorial.txt b/pages/develop/legacy/tutorial/effects_tutorial.txt
new file mode 100644
index 000000000..42dacda68
--- /dev/null
+++ b/pages/develop/legacy/tutorial/effects_tutorial.txt
@@ -0,0 +1,68 @@
1~~Title: Animation and Effect Types~~
2==== Animation and Effect Types: Using Various Effect and Effect Types ====
3
4The animation and effect tutorials demonstrate how to create and implement a
5variety of animation effects with EFL and Elementary.
6
7----
8==== Ecore Animator: Creating Ecore Animations ====
9
10This tutorial demonstrates how you can use Ecore animators to simplify the
11creation of animations. Using Ecore animators, you can manually create your
12own animations by changing and manipulating Evas object attributes. Ecore
13animators work like timers, running callback functions over a given duration
14(an animation timeline).
15
16=== Table of Contents ===
17
18 * [[/tutorial/effects/ecore_animator/setting_up|Setting up the application]]
19 * [[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
20 * [[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
21 * [[/tutorial/effects/ecore_animator/3d_rotation|Creating a 3D rotation effect]]
22 * [[/tutorial/effects/ecore_animator/drop_bounce|Creating drop and bounce effects]]
23
24Ecore Animator Example : {{ :ecore_animator.gif }}
25\\
26//**__The Whole Code__: **//{{code_c/tutorial/effects/ecore_animator.c}}
27
28----
29==== Edje Animation: Using the Edje Library to Create Animations ====
30
31One of the greatest strengths of EFL and Edje is the ability to create
32animations. This tutorial demonstrates how to use the Edje library to create
33your own animations.
34
35=== Table of Contents ===
36
37 * [[/tutorial/effects/edje_animation/start_up|Animating on Application Start-up]]
38 * [[/tutorial/effects/edje_animation/on_click|Animating Object on Click]]
39
40{{ :edje_animation_rotate.gif }}
41\\
42//**__The Whole Code__:
43**//{{code_c/tutorial/effects/edje_animation.c}} {{code_c/tutorial/effects/edje_animation.edc}}
44
45
46----
47==== Elementary Animations: Applying Transition Effects to an Evas Object ====
48
49This tutorial demonstrates how you can use Elm Transit to create animated
50transitions effects, such as rotation, wiping, zooming, resizing, and fading,
51to an ''Evas_Object''.
52
53=== Table of Contents ===
54
55 * [[/tutorial/effects/elementary_animations/setting_up|Setting Up the Application]]
56 * [[/tutorial/effects/elementary_animations/rotation|Creating a Rotation Effect]]
57 * [[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
58 * [[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
59 * [[/tutorial/effects/elementary_animations/blend|Creating a Blend Transition]]
60 * [[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
61 * [[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
62 * [[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
63 * [[/tutorial/effects/elementary_animations/transit|Implementing Elementary Transit Effects]]
64
65
66Elementary Animations example: {{ :transit_rotate.gif }}
67\\
68//**__The Whole Codes__: **//{{code_c/tutorial/effects/elementary_animations.c}} {{code_c/tutorial/effects/transit.c}}
diff --git a/pages/develop/legacy/tutorial/form_tutorial.txt b/pages/develop/legacy/tutorial/form_tutorial.txt
new file mode 100644
index 000000000..38e7adf61
--- /dev/null
+++ b/pages/develop/legacy/tutorial/form_tutorial.txt
@@ -0,0 +1,361 @@
1~~Title: Form Tutorial~~
2==== Form Tutorial ====
3
4This tutorial explains how to create a basic application for displaying a list
5of contacts, and a form for displaying and editing contact information when an
6item is selected on the contact list.
7
8=== Table of Contents ===
9
10 * [[#Creating_the_Basic_Application|Creating the Basic Application]]
11 * [[#Creating_the_Naviframe|Creating the Naviframe]]
12
13Form example :
14
15{{ :form.png?direct |list}}
16
17//**__The whole Code__ : **//{{/code_c/tutorial/form/form.c}}
18
19=== Creating the Basic Application ===
20
21To create an Elementary application with a single window, use the following
22code.
23
24<code c>
25#include <Elementary.h>
26
27EAPI_MAIN int
28elm_main(int argc, char **argv)
29{
30 Evas_Object *win;
31
32 win = elm_win_util_standard_add("Form", "Form Tutorial");
33 elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
34 elm_win_autodel_set(win, EINA_TRUE);
35 //win 400x400 px
36 evas_object_resize(win, 400, 400);
37
38 //Form code here
39
40 evas_object_show(win);
41 elm_run();
42 return 0;
43}
44ELM_MAIN()
45</code>
46
47=== Creating the Naviframe ===
48
49Use a naviframe in this application to switch between different views. The
50first view that is displayed is the list of contacts. When an user selects an
51item on this list, contact information is displayed in a form. Both the
52view list and the form are opened in a naviframe, which handles the animations
53between the views for you. It also manages creating a back button in the top
54bar and launching the back animation when you select it, deletes the form
55view, and shows the list of contacts again.
56
57//**__Naviframe__**//
58
59The naviframe is the main layout of the window, so it takes all the space
60available. To configure this, use the ''elm_win_resize_object_add'' function. The
61first parameter is the main window, the second is the naviframe object. The
62naviframe is to be resized along with the window. The object (the naviframe)
63fills its parent (the main window) by calling the
64''evas_object_resize_hint_weight_set'' function on the naviframe object. The
65naviframe object expands in both x and y directions. In the end, evas shows
66the naviframe object on the screen.
67
68<code c>
69//Create the naviframe
70nav = elm_naviframe_add(win);
71evas_object_size_hint_weight_set(nav, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
72elm_win_resize_object_add(win, nav);
73evas_object_show(nav);
74</code>
75
76//**__Contact List__**//
77
78Handle the contact list with the ''_create_contact_list'' function. This function
79takes the parent object as the parameter (in this case the naviframe) and
80returns the genlist. To create the genlist, use the following code.
81
82<code c>
83static Evas_Object *
84_create_contact_list(Evas_Object *parent)
85{
86 Evas_Object *list;
87 int i;
88 //Create a new genlist
89 list = elm_genlist_add(parent);
90 evas_object_show(list);
91 // Create a new item class for the genlist
92 itc = elm_genlist_item_class_new();
93 itc->item_style = "default";
94 // Set the callback which will be used when the genlist text will be created
95 itc->func.text_get = _genlist_text_get;
96 // Set the callback wich will be used when the content of the item will be created
97 itc->func.content_get = _genlist_content_get;
98 itc->func.state_get = NULL;
99 itc->func.del = NULL;
100 //here will go the genlist item for each item in the contacts array
101
102 return list;
103}
104</code>
105
106itc is a static variable containing the item class. The item class contains
107all functions that are called back when an item is created. In this case,
108create the callbacks _genlist_text_get (for labels) and _genlist_content_get
109(for icons). These functions are called when labels and icons of the genlist
110item are created. For more information go to the
111[[/tutorial/genlist_tutorial|genlist tutorial]] or the
112[[/program_guide/containers/genlist|genlist guide]].
113
114The list of contacts and their descriptions are contained in an array of
115Contacts and an array of form items.
116
117<code c>
118typedef struct _Contact Contact;
119struct _Contact
120{
121 const char *name;
122 const char *mobile;
123 const char *address;
124 const char *email;
125 const char *icon;
126};
127
128static Contact contacts[] =
129{
130 {"Alexander Holmes", "+1234567896", "", "alexander_holmes@tizen.org", "c1.svg"},
131 {"Lara Alvaréz", "+9876543216", "", "lara_alvares@tizen.org", "c2.svg" },
132 {"Aksel Møller", "+1679432846", "", "aksel_moller@tizen.org", "c3.svg" },
133 {"Anir Amghar", "+1679432846", "", "anir_amghar@tizen.org", "c4.svg" },
134 {"Noémie Cordier", "+1679432846", "", "noemie_cordier@tizen.org", "c5.svg" },
135 {"Henry Thompson", "+1679432846", "", "henry_thompson@tizen.org", "c6.svg" },
136 {"Mai Phan", "+1679432846", "", "mai_phan@tizen.org", "c7.svg" },
137};
138
139static const char *form_items[] =
140{
141 "name :", "mobile :", "address :", "email :"
142};
143</code>
144
145So create a genlist item for each item of the array with the following code.
146
147<code c>
148// Create a genlist item for each item in the contacts array
149for (i = 0; i < EINA_C_ARRAY_LENGTH(contacts); i++)
150 {
151 // Append the item, add a callback when the item is selected, and use the
152 // current contact item as data pointer for the callbacks.
153 elm_genlist_item_append(list, itc,
154 &contacts[i], // Item data
155 NULL, // Parent item for trees, NULL if none
156 ELM_GENLIST_ITEM_NONE, // Item type; this is the common one
157 _contact_selected_cb, // Callback on selection of the item
158 &contacts[i]); // Data for that callback function
159 }
160</code>
161Attach the ''_contact_selected_cb'' callback function to the genlist item.
162When an item is selected in the list, the ''_contact_selected_cb'' is called
163with the data pointer passed as an argument. Here, it is a pointer on the
164contact. Pass the contacts in the array to all the Item Class callbacks.
165
166Push the list at the top of the naviframe with the following code.
167
168<code c>
169// Create the list of contacts
170Evas_Object *list = _create_contact_list(win);
171
172// Push the list on top of the naviframe
173elm_naviframe_item_push(nav, NULL, NULL, NULL, list, NULL);
174</code>
175
176The Item class functions are called, the ''_genlist_text_get'' first.
177This function show the index of the contact in the array and return a
178freshly allocated string with the name of the contact.
179
180<code c>
181static char *
182_genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
183{
184 Contact *contact = data;
185
186 //Return a new allocated string for the contact name
187 return strdup(contact->name);
188}
189</code>
190
191When the user selects an item in the list, a callback registers on the select
192signal and calls the corresponding function, in this case,
193''_contact_selected_cb()''. The user retrieves the index pointer of the array passed in
194the data and creates the form on contact information based on this index
195pointer.
196
197The ''_genlist_content_get'' function is called several times depending on the
198style of the created item. In this case, with the default style for the
199genlist item, there are two different swallow parts. A swallow part is a
200container in the [[/program_guide/edje_pg|edje file]] of the genlist item, which may
201contain an evas object. The following figure shows the layout of different
202parts in the theme.
203
204{{ :form_genlist_item.png?direct |list}}
205
206There are two ''elm.swallow'' parts. When the callback function which creates
207icons is called, the part name is passed via the ''part'' variable. Compare
208this variable to ''elm.swallow.icon'' for the first object and to
209''elm.swallow.end'' for the icon at the end.
210
211//**__Icon__**//
212
213Create the icon when the callback is recognized. In this example, we use an
214''elm_icon'' object.
215
216<code c>
217static Evas_Object *
218_genlist_content_get(void *data, Evas_Object *obj, const char *part)
219{
220 Contact *contact = data;
221
222 //Test which part is being created
223 if (!strcmp(part, "elm.swallow.icon"))
224 {
225 char filename[PATH_MAX];
226
227 // Create a new icon
228 Evas_Object *ic = elm_icon_add(obj);
229 // Set the filename of the file which is to be loaded
230 snprintf(filename, sizeof(filename), "%s%s", ICON_PATH, contact->icon);
231 elm_image_file_set(ic, filename, NULL);
232 // Keep the ratio squared
233 evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
234
235 // Return the icon
236 return ic;
237 }
238 return NULL;
239}
240</code>
241
242Note that in case of ''elm.swallow.end'': the return is NULL and no icon is added.
243
244The user may question the complexity of creating a genlist, and the benefits
245of callbacks for the creation of items. In a genlist with thousands of
246elements, graphical items are not created. Only the ones currently displayed
247on the screen are created with the callbacks in the Genlist Item Class.
248Otherwise, objects are created by calling the respective callback function
249when the user scrolls the list.
250
251<note>
252When the genlist is first created, the Elementary needs to know the height of the list. All elements in the list are not necessarily the same size due to different kind of styles. Thus, the Elementary creates all elements once to know the size, and displays the scroll bars correctly. If all your items have the same height, use the ''elm_genlist_homogeneous_set'' to impose the same height to all items. The Elementary does not create the complete list as the global size is a multiple of the height of the first item. It saves you cpu time.
253</note>
254
255//**__Contact Form__**//
256
257The contact list is created inside the ''_create_contact_form'' function. This
258function takes a'' Evas_Object'' parent and a contact item as parameters to
259return an ''Evas_Object''. The parent is the naviframe object, and the contact
260item contains the information on the contact.
261
262To display the various information about the contact, boxes are used in this
263example.
264
265{{ :form_contact_layout.png?direct |list}}
266
267The first box is an vertical box.
268
269<code c>
270Evas_Object *vbox;
271vbox = elm_box_add(parent);
272elm_box_align_set(vbox, 0, 0);
273evas_object_show(vbox);
274</code>
275
276''elm_box_align_set'' keeps the box element aligned to the top left corner.
277
278To add an icon, use the ''_genlist_content_get'' function to create the icon
279in the genlist item. For a bigger icon, set the minimum size of the icon
280object to 96x96 px.
281
282The most important function in this case is ''elm_box_pack_end''. It adds the
283icon object at the end of the vbox. As the icon is the first object added, it
284is displayed on top of the box.
285
286<code c>
287Evas_Object *ic;
288ic = elm_icon_add(vbox);
289char filename[PATH_MAX];
290snprintf(filename, sizeof(filename), "%s%s", ICON_PATH, contact->icon);
291elm_image_file_set(ic, filename, NULL);
292evas_object_size_hint_min_set(ic, 96, 96);
293evas_object_show(ic);
294elm_box_pack_end(vbox, ic);
295</code>
296
297In the following example, add the information on the contact: the name, the
298mobile phone number, the postal address and the e-mail address. For each
299information item, create a label and an edit line. The label contains the kind
300of the information, and the edit box, the information itself. To set the
301widgets in a horizontal layout, use a horizontal box.
302
303<code c>
304Evas_Object *hbox;
305hbox = elm_box_add(vbox);
306elm_box_horizontal_set(hbox, EINA_TRUE);
307elm_box_padding_set(hbox, 32, 32);
308evas_object_size_hint_weight_set(hbox, EVAS_HINT_EXPAND, 0);
309evas_object_size_hint_align_set(hbox, EVAS_HINT_FILL, 0);
310evas_object_show(hbox);
311</code>
312
313Change the orientation of the box with ''elm_box_horizontal_set''. To get space
314between the elements of the vbox, set the padding to 32px. To set the item of
315the box not to expand vertically, use ''evas_object_size_hint_weight_set''.
316
317Create the label object, which is an ''elm_label''. Set its text, and do not align
318or expand it.
319
320
321<code c>
322Evas_Object *label;
323label = elm_label_add(hbox);
324elm_object_text_set(label, form_items[i]);
325evas_object_size_hint_weight_set(label, 0, 0);
326evas_object_size_hint_align_set(label, 0, 0);
327evas_object_show(label);
328</code>
329
330Create the edit line, which is an ''elm_entry''. Set its text.
331
332<code c>
333Evas_Object *edit;
334const char *str;
335
336edit = elm_entry_add(hbox);
337
338//select the good entry
339if(!strcmp(form_items[i], "name :")) str = contact->name;
340else if(!strcmp(form_items[i], "mobile :")) str = contact->mobile;
341else if(!strcmp(form_items[i], "address :")) str = contact->address;
342else if(!strcmp(form_items[i], "email :")) str = contact->email;
343else str = NULL;
344
345elm_object_text_set(edit, str);
346evas_object_size_hint_weight_set(edit, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
347evas_object_size_hint_align_set(edit, EVAS_HINT_FILL, EVAS_HINT_FILL);
348evas_object_show(edit);
349</code>
350
351Add the label and the edit inside the horizontal box and add the horizontal
352box to the vertical box.
353
354<code c>
355elm_box_pack_end(hbox, label);
356elm_box_pack_end(hbox, edit);
357
358elm_box_pack_end(vbox, hbox);
359</code>
360\\
361//**__The whole Code__ : **//{{/code_c/tutorial/form/form.c}}
diff --git a/pages/develop/legacy/tutorial/genlist/modifications.txt b/pages/develop/legacy/tutorial/genlist/modifications.txt
new file mode 100644
index 000000000..c3c6a527b
--- /dev/null
+++ b/pages/develop/legacy/tutorial/genlist/modifications.txt
@@ -0,0 +1,252 @@
1~~Title: Genlist Modifications~~
2==== Genlist Modifications ====
3
4=== Choosing Another Item Style to Add or Remove Parts ===
5
6As mentioned above, the number of parts to fill depends on the item style that
7is chosen when adding a new item. This is simply a matter of setting the right
8value when filling the ''Elm_Genlist_Item_Class'' struct:
9
10<code c>
11itc->item_style = "default";
12</code>
13
14The Genlist Widget lists all available item styles:
15 * default
16 * default_style - The text part is a textblock
17 * double_label
18 * icon_top_text_bottom
19 * group_index
20 * one_icon - Only 1 icon at left
21 * end_icon - Only 1 icon at end/right
22 * no_icon - No icon at end/right
23 * full - Only 1 icon, elm.swallow.content, which consumes whole area of genlist item
24
25
26Further customization is achieved by modifying the theme as explained in the
27[[/program_guide/edje_pg|Edje guide]].
28
29In case the customization is only visual, it is good practice to keep the same
30item style names for new themes. This makes it possible to change theme and
31keep the code the same while also retaining the same overall item placement.
32
33==== Using Item Modes ====
34
35So far the genlist examples have all featured bare lists while the genlist
36widget is able to display trees or even a "group" mode where scrolling keeps
37the item at the top of the widget until another group comes and replaces it.
38
39//**__Group Mode__**//
40
41The group mode makes it possible to keep an element visible as long as one of
42its children is visible. This is most useful for "title" items.
43
44Mark some elements as ''ELM_GENLIST_ITEM_GROUP'' and use the returned
45''Elm_Object_Item'' to establish the parent-children relationship when adding the
46children items.
47
48Since there are two kind of items, create two item classes. Give them
49different styles and callback functions. The callback functions are visible in
50the example, they have no functionalities:
51
52<code c>
53Elm_Genlist_Item_Class *_itc_child = elm_genlist_item_class_new();
54_itc->item_style = "default_style";
55_itc->func.text_get = _genlist_text_get_size;
56_itc->func.content_get = _genlist_content_get_bg;
57_itc->func.state_get = NULL;
58_itc->func.del = NULL;
59
60Elm_Genlist_Item_Class *_itc_parent = elm_genlist_item_class_new();
61_itc2->item_style = "default_style";
62_itc2->func.text_get = _genlist_text_get_nosize;
63_itc2->func.content_get = _genlist_content_get_icon;
64_itc2->func.state_get = NULL;
65_itc2->func.del = NULL;
66</code>
67
68Then add a group header and follow it with 10 children. This is repeated 10
69times.
70
71The parent has type ''ELM_GENLIST_ITEM_GROUP'' while the children have type
72''ELM_GENLIST_ITEM_NONE''.
73
74The other important point is that the value returned by
75''elm_genlist_item_append()'' is stored in it and then sent to the
76''elm_genlist_item_append()'' call that adds the children. This creates the
77parent-children relationship.
78
79<code c>
80for (i = 0; i < 1000; i++)
81 {
82 it = elm_genlist_item_append(list, _itc_parent,
83 (void *)(uintptr_t) (10 * i),
84 NULL,
85 ELM_GENLIST_ITEM_GROUP,
86 NULL,
87 NULL
88 );
89 for (j = 0; j < 10; j++)
90 {
91 elm_genlist_item_append(list, _itc_child,
92 (void *)(uintptr_t) (10 * i + j),
93 it, //parent item
94 ELM_GENLIST_ITEM_NONE,
95 NULL,
96 NULL
97 );
98 }
99 }
100</code>
101
102//**__Tree Mode__**//
103
104Like group mode, tree mode uses the parenting relationship with other items.
105Unlike group mode, the child elements are created on-demand when their parent
106is expanded and deleted when it is contracted. This is done by using smart
107callbacks: ''expand,request'', ''expanded'', ''contract,request'', and
108''contracted''. Like any smart callback, they are registered through
109''evas_object_smat_callback_add'' on the genlist object:
110
111
112<code c>
113 evas_object_smart_callback_add(list, "expand,request",
114 _tree_item_expand_request, _itc_parent);
115 evas_object_smart_callback_add(list, "expanded", _tree_item_expanded,
116 _itc_child);
117
118 evas_object_smart_callback_add(list, "contract,request",
119 _tree_item_contract_request, _itc_child);
120 evas_object_smart_callback_add(list, "contracted", _tree_item_contracted,
121 NULL);
122</code>
123
124The callbacks ''expand,request'' and ''contract,request'' do only one thing:
125decide whether the element is expanded or contracted. This is done by using
126''elm_genlist_item_expanded_set()'' function; if it changes the expansion
127status of the item, the next callback is called (either ''expanded'' or
128''contracted'' , depending on whether it was an ''expand,request'' or
129''contract,request'' event). A minimal implementation of these callbacks is
130therefore:
131
132<code c>
133static void
134_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
135{
136 Elm_Object_Item *it = (Elm_Object_Item*) event_info;
137
138 elm_genlist_item_item_class_update(it, data);
139
140 elm_genlist_item_expanded_set(it, EINA_TRUE);
141}
142</code>
143
144<note>
145The example above has an extra line: the call to ''elm_genlist_item_item_class_update()''. It changes the item style and is explained in the [[/tutorial/genlist/modifications#Using_Other_APIs|Changing the item class of an item after its creation section]].^
146</note>
147
148<code c>
149static void
150_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
151{
152 Elm_Object_Item *it = (Elm_Object_Item*) event_info;
153
154 elm_genlist_item_item_class_update(it, data);
155
156 elm_genlist_item_expanded_set(it, EINA_FALSE);
157}
158</code>
159
160As said above, once the genlist item status is set to ''expanded'', the
161expanded event is triggered and it is the duty of a callback for that event to
162populate the list with the item's children. This relies on the ''parent''
163parameter of functions like ''elm_genlist_item_append()'', like for the group
164mode.
165
166The function below is a callback implementation for the ''expanded'' event. It
167adds items that are built similarly to previous items, the only change is the
168parent parameter which is not NULL. Conveniently, the
169parent''Elm_Object_Item'' and ''Elm_Genlist_Item_Class'' pointers that are passed to the
170''elm_genlist_item_append()'' function are given in the ''event_info'' and
171''data'' callback and need to be cast.
172
173<code c>
174static void
175_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
176{
177 Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
178 int i_parent = (int)(uintptr_t)elm_object_item_data_get(it_parent);
179 Elm_Object_Item *list = o;
180 Elm_Genlist_Item_Class *itc = data;
181
182 int i;
183 for (i = 0; i < 10; i++)
184 {
185 elm_genlist_item_append(list, itc,
186 (void *)(uintptr_t) (i + i_parent),
187 it_parent,
188 ELM_GENLIST_ITEM_NONE,
189 NULL,
190 NULL
191 );
192 }
193}
194</code>
195
196The following code has the callback function for the ''contracted'' event. It
197imply calls ''elm_genlist_item_subitems_clear()'' to clear all children (including
198their own children if they have any) of the given item. Again, the item that
199is being contracted is available through the ''event_info'' parameter to the
200callback.
201
202<code c>
203static void
204_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
205{
206 Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
207
208 elm_genlist_item_subitems_clear(it_parent);
209}
210</code>
211
212//**__Mixing Group and Tree Modes__**//
213
214A common UI design is to mix group and tree modes. It allows for a tree
215behavior while also keeping the group header item. The EFLs do not do any
216magic here and the way to get such a behavior is to create an item of type
217group, an item of type tree which parent is the group item. Then add the
218callbacks to populate the children of the tree item in the regular way.
219
220=== Using Other APIs ===
221
222//**__Homogeneous Item Size__**//
223
224Because of the scroller, the actual height and/or width of the genlist must be
225computed. This means summing the sizes of all the items, the sizes must be
226computed. This obviously has a cost and slows down adding items to the
227genlist.
228
229The ''elm_genlist_homogeneous_set()'' function alleviates this issue by
230assuming all the items are the same size as the first one of the list. It
231speeds up large insertions. However, it may lead to serious graphical issues
232if the items are not actually the same size. Use with care.
233
234//**__Changing the Item Class of an Item After Its Creation__**//
235
236Changing the item class of a widget is an easy way to change the appearance
237upon selection or others actions of the user. This is done by calling
238''elm_genlist_item_class_update()'' :
239
240<code c>
241static void
242_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
243{
244 Elm_Object_Item *it = (Elm_Object_Item*) event_info;
245
246 elm_genlist_item_item_class_update(it, data);
247
248 elm_genlist_item_expanded_set(it, EINA_TRUE);
249}
250</code>
251\\
252//**__The whole code__**// : {{/code_c/tutorial/genlist/modifications_genlist.c}}
diff --git a/pages/develop/legacy/tutorial/genlist/set-up.txt b/pages/develop/legacy/tutorial/genlist/set-up.txt
new file mode 100644
index 000000000..20da9ba0c
--- /dev/null
+++ b/pages/develop/legacy/tutorial/genlist/set-up.txt
@@ -0,0 +1,232 @@
1~~Title: Genlist Set-up~~
2==== Genlist Set-up ====
3
4=== Creating a Genlist ===
5
6Call ''elm_genlist_add()'' to create a genlist. Then, new entries can be added.
7In this example, the basic windows is created first, then a genlist is added
8to it, and then 100 elements with text and a colored block on each side of
9it.
10
11<code c>
12Evas_Object *list = elm_genlist_add(win);
13</code>
14
15=== Adding New Entries ===
16
17Before adding new entries, it is necessary to build a basic item class.
18
19//**__Building a Basic Item Class__**//
20
21When adding an item, genlist_item_{append, prepend, insert} function needs
22item class of the item. Given callback parameters are used at retrieving
23{text, content} of added item. Set as NULL if it's not used. If there's no
24available memory, return can be NULL.
25
26The code for the minimal genlist item class is below:
27
28<code c>
29Elm_Genlist_Item_Class *_itc = elm_genlist_item_class_new();
30_itc->item_style = "default";
31_itc->func.text_get = NULL;
32_itc->func.content_get = NULL;
33_itc->func.state_get = NULL;
34_itc->func.del = NULL;
35</code>
36
37It creates a simple item class, sets the ''item_style'' to "default" and
38every other field to NULL. However, this leaves out the ''text_get'' and
39''content_get'' fields which are used to add text and an icon to the list
40entry. This is explained in another section.
41
42//**__Adding the Element__**//
43
44Once the genlist item class object is created, a new element is added to the
45list by calling ''elm_genlist_item_append()''.
46
47<code c>
48elm_genlist_item_append(list,
49 _itc,
50 NULL, // Item data
51 NULL, // Parent item for trees, NULL if none
52 ELM_GENLIST_ITEM_NONE, // Item type; this is the common one
53 NULL, // Callback on selection of the item
54 NULL // Data for that callback function
55);
56</code>
57
58With most parameters as NULL and ''_itc'' having most of its members NULL,
59too, the elements of that list are blank and will not trigger anything when
60selected.
61
62//**__Text in the List Elements__**//
63
64Use ''text_get'' field to add text in the items in the
65''Elm_Genlist_Item_Class'' structure.
66
67<code c>
68_itc->func.text_get = text_get;
69</code>
70
71These callbacks must have a prototype matching to the following:
72
73<code c>
74char * text_get(void *data, Evas_Object *obj, const char *part);
75</code>
76
77This callback returns a C string that is displayed in the part named after the
78''part'' parameter. This callback is called for each user-settable text part
79according to the current theme.
80
81If you are not familiar with the concept of parts in the EFLs, read
82[[/program_guide/edje/basic_concepts##Writing_Simple_EDC_File|the Write a Simple EDC File]] section.
83
84<note>
85The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.
86</note>
87
88For the default theme there is one part named ''elm.text''. A possible
89implementation of the ''text_get'' callback is therefore:
90
91<code c>
92static char *
93_genlist_text_get(void *data, Evas_Object *obj, const char *part)
94{
95 // Check this is text for the part we're expecting
96 if (strcmp(part, "elm.text") == 0)
97 {
98 return strdup("Some text");
99 }
100 else return NULL;
101}
102</code>
103
104<note>
105The names and positions of parts depends on the item_style chosen when adding
106new items to the genlist. Setting a custom theme makes it possible to
107completely change genlists by adding and moving parts. The
108[[/program_guide/edje_pg|Edje]] guide explains how to do that.
109</note>
110
111It is possible to behave differently according to data
112that is given to the EFLs during the call to ''elm_genlist_item_append()'' in the
113''data'' parameter. For example, given an integer in that field through casting
114with ''(void *)(uintptr_t) i'', its value is got back using
115''(int)(uintptr_t)data'':
116
117<code c>
118static char *
119_genlist_text_get(void *data, Evas_Object *obj __UNUSED__, const char *part)
120{
121 if (strcmp(part, "elm.text") == 0)
122 {
123 char *buf = malloc(16);
124 snprintf(buf, 16, "Entry %d.", (int)(uintptr_t)data);
125
126 return buf;
127 }
128 else return NULL;
129}
130</code>
131
132//**__Evas_Object in the List Elements__**//
133
134Icons are added in a similar fashion: there is a callback named
135''content_get'' which returns a pointer to an ''Evas_Object'' and is called
136for each part which contents can be set.
137
138<code c>
139_itc->func.content_get = content_get;
140</code>
141
142The prototype of the callback must match this one:
143
144<code c>
145Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
146</code>
147
148The only difference with the ''text_get'' callback is that it returns an
149''Evas_Object*'' rather than a ''char *''.
150
151This leads to a fairly simple dummy implementation with colored rectangles in
152the parts that are to be set:
153
154<code c>
155static Evas_Object *
156_genlist_content_get(void *data, Evas_Object *obj, const char *part)
157{
158 int i = (int) (uintptr_t) data;
159
160 //the left part
161 if (strcmp(part, "elm.swallow.icon") == 0)
162 {
163 Evas_Object *bg = elm_bg_add(obj);
164 elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
165
166 return bg;
167 }
168 //the right part
169 else if (strcmp(part, "elm.swallow.end") == 0)
170 {
171 Evas_Object *bg = elm_bg_add(obj);
172 elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
173
174 return bg;
175 }
176 else return NULL;
177}
178</code>
179
180For the default theme, this displays a red rectangle on the left of each list
181item and a green one on their right.
182
183//**__Event on Gentlist Items__**//
184
185Genlist items triggers a callback when clicked. This callback is chosen when
186adding the new item (for example, when calling ''elm_genlist_item_append()''):
187
188<code c>
189Elm_Genlist_Item_Class *_itc2 = elm_genlist_item_class_new();
190_itc2->item_style = "group_index";
191_itc2->func.text_get = _genlist_text_get;
192_itc2->func.content_get = _genlist_content_get;
193_itc2->func.state_get = NULL;
194_itc2->func.del = NULL;
195
196elm_genlist_item_append(list,
197 itc,
198 NULL, // item data
199 NULL, // parent item for trees, NULL if none
200 ELM_GENLIST_ITEM_NONE, // item type, other values are used for trees
201 _genlist_selected_cb, // callback on selection of the item
202 _itc2 // data for that callback function
203);
204</code>
205
206This callback adheres to the following prototype:
207
208<code c>
209void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
210</code>
211
212The implementation below changes the item style of items when they are
213selected:
214
215<code c>
216static void
217_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
218{
219 Elm_Object_Item *it = (Elm_Object_Item*) event_info;
220 Elm_Genlist_Item_Class *itc2 = (Elm_Genlist_Item_Class *)data;
221te
222
223 //change to group index style
224 elm_genlist_item_item_class_update(it, itc2);
225}
226</code>
227\\
228//**__The whole code__**// : {{/code_c/tutorial/genlist/set-up_genlist.c}}
229
230==== Next Part ====
231
232[[/tutorial/genlist/modifications|Modifications]]
diff --git a/pages/develop/legacy/tutorial/genlist_tutorial.txt b/pages/develop/legacy/tutorial/genlist_tutorial.txt
new file mode 100644
index 000000000..d6a3e7088
--- /dev/null
+++ b/pages/develop/legacy/tutorial/genlist_tutorial.txt
@@ -0,0 +1,43 @@
1~~Title: Genlist Tutorial~~
2==== Genlist Tutorial ====
3
4This tutorial deals with Elementary genlist, a list widget for large sets of
5elements. Its API to populate entries reflects that as it uses callbacks.
6
7Also keep in mind that the same widget handles both flat lists and trees and
8this is obviously seen in the API.
9
10=== Initialize the Application ===
11
12The code below shows a typical Elementary application that creates a window
13entitled "Genlist Basic Tutorial". The genlist goes inside.
14
15<code c>
16#include <Elementary.h>
17
18EAPI_MAIN int
19elm_main(int argc, char **argv)
20{
21 Evas_Object *win;
22
23 win = elm_win_util_standard_add("Genlist", "Genlist Basic Tutorial");
24 elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
25 elm_win_autodel_set(win, EINA_TRUE);
26 //win 400x400 px
27 evas_object_resize(win, 400, 400);
28
29 //GENLIST here
30
31 evas_object_show(win);
32 elm_run();
33 return 0;
34}
35ELM_MAIN()
36</code>
37
38Genlist example :{{ :genlist.png?direct |list}}
39
40=== Table of contents ===
41
42 * [[/tutorial/genlist/set-up|Set-up]] : {{/code_c/tutorial/genlist/set-up_genlist.c}}
43 * [[/tutorial/genlist/modifications|Modifications]] : {{/code_c/tutorial/genlist/modifications_genlist.c}}
diff --git a/pages/develop/legacy/tutorial/gl2d/animating_cube.txt b/pages/develop/legacy/tutorial/gl2d/animating_cube.txt
new file mode 100644
index 000000000..d89588472
--- /dev/null
+++ b/pages/develop/legacy/tutorial/gl2d/animating_cube.txt
@@ -0,0 +1,132 @@
1~~Title: Creating the Cube - GL 2D Tutorial~~
2//**__previous page__: **//[[/tutorial/gl2d/rendering_cube|Rendering the Cube]].
3==== Animating the Cube ====
4
5''Ecore_Animator'' is used to create an animation.
6
7<code c>
8// just need to notify that glview has changed so it can render
9static Eina_Bool
10_anim(void *data)
11{
12 elm_glview_changed_set(data);
13 return EINA_TRUE;
14}
15</code>
16
17Next define the global variables which are used as parameters of the rendering
18process. Add parameters to the application data object that are used to
19control the scaling and the rotation of the cube. To make the cube rotate on
20one axis, take z, and allow the user to interact with the mouse to make the
21cube rotate on the two other axes x and y. In order to figure out whether the
22user is holding the mouse down, add a Boolean variable to have this
23information. Operations such as shader initialization or program compilation
24are not required at each tick of the animation loop. For better performance,
25isolate such task from the repetitive rendering loop. For such purpose, add a
26Boolean variable which tells whether the initialization is already done.
27
28<code c>
29struct _GLData
30{
31 GLfloat xangle;
32 GLfloat yangle;
33 GLfloat zangle;
34 Eina_Bool mouse_down : 1;
35 Eina_Bool initialized : 1;
36} GLData;
37</code>
38
39Here are the modifications that must be done to the rendering loop for
40animation.
41
42First, lighten the recurrent rendering process by adding an initialization
43step:
44
45<code c>
46if (!gld->initialized)
47 {
48 if (!init_shaders(gld))
49 {
50 printf("Error Initializing Shaders\n");
51 return;
52 }
53
54 //generate the buffers for the vertex positions and colors
55 gl->glGenBuffers(1, &gld->vertexID);
56 gl->glBindBuffer(GL_ARRAY_BUFFER, gld->vertexID);
57 gl->glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
58
59 gl->glGenBuffers(1, &gld->colorID);
60 gl->glBindBuffer(GL_ARRAY_BUFFER, gld->colorID);
61 gl->glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
62
63 gld->initialized = EINA_TRUE;
64 }
65</code>
66
67Before drawing the vertices, the rotation angle for the model-view matrix must
68be incremented for every tick.
69
70<code c>
71cus