Imported Upstream version 1.7.1
[platform/upstream/edje.git] / doc / examples.dox
1 /**
2  * @page Examples Examples
3  *
4  * Here is a page with examples.
5  *
6  * @li @ref Example_Edje_Basics
7  * @li @ref tutorial_edje_swallow
8  * @li @ref tutorial_edje_swallow2
9  * @li @ref tutorial_edje_text
10  * @li @ref tutorial_edje_table
11  * @li @ref tutorial_edje_color_class
12  * @li @ref Example_Edje_Signals_Messages
13  * @li @ref tutorial_edje_box
14  * @li @ref tutorial_edje_box2
15  * @li @ref tutorial_edje_drag
16  * @li @ref tutorial_edje_perspective
17  * @li @ref tutorial_edje_animations
18  * @li @ref tutorial_edje_multisense
19  * @li @ref tutorial_edje_basic2
20  * @li @ref tutorial_edje_signals_2
21  * @li @ref tutorial_edje_animations_2
22  */
23
24 /**
25  * @page Example_Edje_Basics Edje basics example
26  *
27  * In this example, we illustrate how to start using the Edje library,
28  * with the very basic one needs to instantiate an Edje object.
29  *
30  * We place, in the canvas, an Edje object along with a @b red border
31  * image to delimit its geometry. After we instantiate the Edje
32  * object, we @b have to set a file and a group, within that file, to
33  * bind to it. For this example, we're using an EDC file which
34  * declares two parts (blue and green rectangles) and an item data:
35  * @include basic.edc
36  *
37  * We start by trying to access an @b unexistant group in the file, so
38  * that you can see the usefulness of edje_object_load_error_get() and
39  * edje_load_error_str(). Check that the error message will tell you
40  * just that -- a group which didn't exist in the file was called for:
41  * @dontinclude edje-basic.c
42  * @skip file_path
43  * @until file_path
44  * @dontinclude edje-basic.c
45  * @skip edje_object_add
46  * @until }
47  *
48  * Than, we finally bind our Edje object to @c "example_group",
49  * printing a message afterwards:
50  * @dontinclude edje-basic.c
51  * @skip file_path, "example_group"
52  * @until object_show
53  *
54  * What follows is a series of Edje API calls which are of general
55  * use. The first of them is edje_object_data_get(), which we use to
56  * get the value we have put in the @c "example_data" data field, in
57  * our EDC object declaration:
58  * @dontinclude edje-basic.c
59  * @skip data field in group
60  * @until ;
61  *
62  * Than, we exemplify edje_object_part_exists():
63  * @dontinclude edje-basic.c
64  * @skip Testing if
65  * @until ;
66  *
67  * The next call is to query @c "part_one"'s geometry, relative to the
68  * whole Edje object's area. The part will be situated in the middle
69  * of the Edje object's, because it has a restricted forced size (we
70  * set its minimum size equal to its maximum, for that) and, by
71  * default, parts are aligned to the center of their containers:
72  * @dontinclude edje-basic.c
73  * @skip part_geometry_get
74  * @until x, y, w, h
75  *
76  * We can grab a direct pointer on the rectangle implementing @c
77  * "part_one", by using edje_object_part_object_get(). Since we are
78  * not allowed to set properties on it, we just check its color, to
79  * assure its really blue, as declared in the EDC:
80  * @dontinclude edje-basic.c
81  * @skip color_get
82  * @until x, y, w, h
83  *
84  * The @c "min" and @c "max" EDC properties can be queried with the
85  * following calls:
86  * @dontinclude edje-basic.c
87  * @skip max_get
88  * @until min. size is
89  *
90  * The next two calls are to make <b>size calculations</b> on our
91  * object. Because of the minimum size declared for @c "part_one" part's
92  * default state description, that will be our exact minimum
93  * size calculated for the group (remember the @c "min" declaration at
94  * group level is just a @b hint, not an enforcement). We then
95  * exercise the edje_object_size_min_restricted_calc() function,
96  * passing a minimum size of 500, in each axis. Since we have @b no
97  * object bigger than that, it will be the minimum size calculated, in
98  * the end:
99  * @dontinclude edje-basic.c
100  * @skip min_calc
101  * @until size calculation is
102  *
103  * @c "part_two" part is there with a purpose: since it extrapolates
104  * the Edje object's boundaries, the edje_object_parts_extends_calc()
105  * function will report origin coordinates for the rectangle grouping
106  * both parts with @b negative values, indicating it extrapolates to
107  * the upper left of our group, just as we see it.
108  *
109  * To interact with the last features exemplified in the program,
110  * there's a command line interface.  A help string can be asked for
111  * with the 'h' key:
112  * @dontinclude edje-basic.c
113  * @skip commands
114  * @until ;
115  *
116  * Those commands will change the scaling factors of our Edje objects.
117  * The first of them, @c 's', will change Edje's @b global scaling
118  * factor between @c 1.0 (no scaling) and @c 2.0 (double
119  * scale). Scaling will be applied to @c "part_one", only, because
120  * that's the part flagged to be scaled at EDC level:
121  * @dontinclude edje-basic.c
122  * @skip strcmp(ev->keyname, "s") == 0
123  * @until }
124  *
125  * Note, finally, that the @c 's' command will depend on the 'r' one
126  * to have its effects applied. The latter will change @c "part_one"'s
127  * @b individual scaling factor, which @b overrides Edje's global
128  * scaling factor. Only when the individual one is set to zero, will
129  * the global one take effect:
130  * @dontinclude edje-basic.c
131  * @skip strcmp(ev->keyname, "r") == 0
132  * @until }
133  *
134  *
135  *
136  * The example's window should look like this picture:
137  *
138  * @image html edje-basics-example.png
139  * @image rtf edje-basics-example.png
140  * @image latex edje-basics-example.eps width=\textwidth
141  *
142  * The full example follows.
143  * @include edje-basic.c
144  *
145  * To compile use this command:
146  * @verbatim
147  * gcc -o edje-basic edje-basic.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
148  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
149  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
150  *
151  * edje_cc basic.edc
152  * @endverbatim
153  * @example edje-basic.c
154  */
155
156 /**
157  * @page tutorial_edje_swallow Swallow example
158  * @dontinclude edje-swallow.c
159  *
160  * This is a simple example in which we create a rect and swallow it.
161  *
162  * Focusing on the relevant parts of the code we go right to the creation of our
163  * rectangle. It should be noted that we don't resize or show our rect, that is
164  * because when an object is swallowed it's geometry and visibility is
165  * controlled by the theme:
166  * @skip 20
167  * @skipline evas_object_rectangle_add
168  * @until swallow
169  *
170  * The other bit of code that is relevant to us now is our check that the
171  * swallow worked:
172  * @until printf
173  *
174  * The full source code follows:
175  * @include edje-swallow.c
176  *
177  * To compile use this command:
178  * @verbatim
179  * gcc -o edje-swallow edje-swallow.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
180  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
181  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
182  *
183  * edje_cc swallow.edc
184  * @endverbatim
185  * @example edje-swallow.c
186  */
187
188 /**
189  * @page tutorial_edje_text Edje Text example
190  *
191  *
192  * This example shows how to manipulate TEXT and TEXTBLOCK parts from code.
193  *
194  * The very first we are going to do is register a callback to react to changes
195  * in the text of our parts:
196  * @dontinclude edje-text.c
197  * @skipline edje_object_text_change_cb_set
198  *
199  *
200  * @dontinclude edje-text.c
201  * @skipline text_change
202  * @note Since edje_obj represent a group we'll be notified whenever any part's
203  * text in that group changes.
204  *
205  * We now set the text for two our two parts:
206  * @dontinclude edje-text.c
207  * @skip text_set
208  * @until edje_object_part_text_set(edje_obj, "part_two"
209  * @note Since the "part_two" part is a TEXTBLOCK we can use formatting such as
210  * @<b@>
211  *
212  * And we now move on to selection issues, first thing we do is make sure the
213  * user can select text:
214  * @dontinclude edje-text.c
215  * @skip edje_object_part_text_select_allow_set
216  * @until edje_object_part_text_select_all
217  *
218  * We then select the entire text, and print the selected text:
219  * @dontinclude edje-text.c
220  * @skipline printf("selection: %s\n",
221  *
222  * We now unselect the entire text(set selection to none), and print the
223  * selected text:
224  * @dontinclude edje-text.c
225  * @skip edje_object_part_text_select_none
226  * @until printf
227  *
228  * Our example will look like this:
229  *
230  * @image html edje-text.png
231  * @image rtf edje-text.png
232  * @image latex edje-text.eps width=\textwidth
233  *
234  * The full source code follows:
235  * @include edje-text.c
236  *
237  *
238  * The theme used in this example is:
239  * @include text.edc
240  *
241  * To compile use this command:
242  * @verbatim
243  * gcc -o edje-text edje-text.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
244  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
245  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
246  *
247  * edje_cc text.edc
248  * @endverbatim
249  * @example edje-text.c
250  */
251
252 /**
253  * @page tutorial_edje_table Table example
254  *
255  * In this example, we illustrate how to organize your objects on a table, using
256  * the edje_object_part_table functions. To be easier to understand the objects
257  * in this example will be four simple rects, when the user click over one
258  * item with the left button its is removed from the table, if any other button
259  * was used all items are removed. For each action is printed a message with
260  * the current number of rows and columns.
261  *
262  * We started creating an EDC file with one part of the type TABLE called
263  * @b "table_part", that is the part which we will refer to access the table:
264  * @include table.edc
265  *
266  * On the other hand, in the C file we first create the rectangles and added a
267  * callback for mouse down, as you can see bellow:
268  * @dontinclude edje-table.c
269  * @skip _rects_create
270  * @until }
271  * @skip }
272  * @until }
273  *
274  * With the objects created we have to pack them into the table, to do this, we
275  * just have to use the function edje_object_part_table_pack().
276  * @dontinclude edje-table.c
277  * @skip (!edje_object_part_table_pack
278  * @until 4
279  *
280  * The other bit of code that is relevant to us now is our event handler for
281  * when the user click over the rectangle. Here we use the function
282  * edje_object_part_table_unpack() to remove the item from the table or
283  * edje_object_part_table_clear() to remove all items, it depends on which mouse
284  * button the user uses.
285  * @dontinclude edje-table.c
286  * @skip _on_mouse_down
287  * @until }
288  *
289  * Finally, the last important thing in this example is about how to know how many
290  * columns and rows are there in the table, It should be noted that this function
291  * don't tell you how many items are there in the table, just the number of the
292  * columns and rows of the table.
293  * @dontinclude edje-table.c
294  * @skip _columns_rows_
295  * @until }
296  *
297  * The example's window should look like this picture:
298  *
299  * @image html edje-table-example.png
300  * @image rtf edje-table-example.png
301  * @image latex edje-table-example.eps width=\textwidth
302  *
303  * The full source code follows:
304  * @include edje-table.c
305  *
306  * To compile use this command:
307  * @verbatim
308  * gcc -o edje-table edje-table.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
309  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
310  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
311  *
312  * edje_cc table.edc
313  * @endverbatim
314  * @example edje-table.c
315  */
316
317 /**
318  * @page tutorial_edje_box Box example - basic usage
319  *
320  * This example shows how to append, insert and remove elements from an Edje box
321  * part. It will make use of the edje_object_part_box functions.
322  *
323  * To play with this example, use mouse left click to delete an existing
324  * rectangle from the box and right mouse click to add a new rectangle just
325  * before the clicked one. Use the keyboard keys "a" to append a rectangle, "i"
326  * to prepend, and "c" to remove all rectangles from the box.
327  *
328  * We will store our example global information in the data structure defined
329  * below, and also set some callbacks for resizing the canvas and exiting the
330  * window:
331  *
332  * @dontinclude edje-box.c
333  * @skip static const char
334  * @until ecore_evas_geometry_get
335  * @until }
336  *
337  * In the @c main function, we create our @c Ecore_Evas, add a background to it,
338  * and finally load our @c Edje file that contains a @c Box part. This part is
339  * named @c "example/box" in this case, and we use this name to append elements
340  * to it.
341  *
342  * The code until now is the one that follows:
343  *
344  * @dontinclude edje-box.c
345  * @skip main(int argc __UNUSED__, char *argv[])
346  * @until ecore_evas_data_set(ee, "background", bg)
347  *
348  * Also notice that we set the callback @c _bg_key_down for @c "key down" events
349  * on the background object, and that object is the one with focus.
350  *
351  * Now we add some small rectangles to the box part, using the
352  * edje_object_part_box_append() API, and set some callbacks for @c "mouse down"
353  * events on every object. These callbacks will be used to add or delete objects
354  * from the box part.
355  *
356  * @dontinclude edje-box.c
357  * @skip bg = evas_object_rectangle_add(evas)
358  * @until evas_object_event
359  * @until }
360  *
361  * Now let's take a look at the callbacks for key down and mouse down events:
362  *
363  * @dontinclude edje-box.c
364  * @skip ecore_evas_geometry_get
365  * @skip static
366  * @until evas_object_event
367  * @until }
368  * @until }
369  *
370  * This callback for mouse down events will get left clicks and remove the
371  * object that received that left click from the box part, and then delete it.
372  * This is done with the edje_object_part_box_remove() function.
373  *
374  * However, on right clicks it will create a new rectangle object, and add it
375  * just before the right clicked object, using
376  * edje_object_part_box_insert_before().
377  *
378  * And this is the key down callback:
379  *
380  * @until remove_all
381  * @until }
382  *
383  * It will insert elements at the beginning of the box if "i" was pressed, using
384  * edje_object_part_box_insert_at(). It will also append objects to the box if
385  * "a" was pressed, just exactly like we did in the @c main function. And will
386  * remove all objects (deleting them) if "c" was pressed.
387  *
388  * As you can see, this example uses the @c "horizontal_flow" layout for the
389  * box, where each item is put linearly in rows, in as many rows as necessary to
390  * store all of them.
391  *
392  * The example's window should look like this picture:
393  *
394  * @image html edje-box-example.png
395  * @image rtf edje-box-example.png
396  * @image latex edje-box-example.eps width=\textwidth
397  *
398  * The full source code follows:
399  * @include edje-box.c
400  *
401  * To compile use this command:
402  * @verbatim
403  * gcc -o edje-box edje-box.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
404  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
405  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
406  *
407  * edje_cc box.edc
408  * @endverbatim
409  * @example edje-box.c
410  */
411
412 /**
413  * @page tutorial_edje_box2 Box example - custom layout
414  *
415  * This example shows how to register a custom layout to be used by the Edje box
416  * part. It will use edje_box_layout_register() for that.
417  *
418  * To play with this example, use the keyboard modifier keys and number keys
419  * together. The Ctrl key is used for adding elements, and Shift is used for
420  * removing them. For instance, Ctrl + 3 will insert a new rectangle object in
421  * the 3rd position of the box, while Shift + 6 will try to remove the 6th
422  * element of the box.
423  *
424  * This example is very similar to the other box example, has a structure with
425  * global data, a callback for key down events where we create or delete
426  * rectangle objects and add or remove them to/from the box part.
427  *
428  * But the important part is the next one:
429  *
430  * @dontinclude edje-box2.c
431  * @skip static void
432  * @until }
433  *
434  * This code implements our custom layout, which will position every object
435  * added to the box in a diagonal through the size of the box part. Notice that
436  * it just calculates the position and offset based on the size of the box and
437  * number of children, and then moves each child to the respective position.
438  *
439  * Later on the @c main function, everything we need to do is to register this
440  * custom layout function with edje:
441  *
442  * @dontinclude edje-box2.c
443  * @skipline edje_box_layout_register
444  *
445  * And use it inside the box.edc file:
446  *
447  * @dontinclude box.edc
448  * @skip example/group2
449  * @skip example/title
450  * @skip part
451  * @until BOX
452  * @until example/box
453  *
454  * The example's window should look like this picture:
455  *
456  * @image html edje-box2-example.png
457  * @image rtf edje-box2-example.png
458  * @image latex edje-box2-example.eps width=\textwidth
459  *
460  * The full source code follows:
461  * @include edje-box2.c
462  *
463  * To compile use this command:
464  * @verbatim
465  * gcc -o edje-box2 edje-box2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
466  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
467  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
468  *
469  * edje_cc box.edc
470  * @endverbatim
471  * @example edje-box2.c
472  */
473
474 /**
475  * @page tutorial_edje_drag Dragable parts example
476  *
477  * This example shows how to manipulate a dragable part through the
478  * edje_object_part_drag API.
479  *
480  * First, in the edc code, we are declaring a part which will be our movable
481  * part, called "knob". It is a normal rectangle, which contains a block called
482  * "dragable", that will define the area where this rectangle can be moved, and
483  * in which axis it can be moved.
484  *
485  * This is our part:
486  *
487  * @dontinclude drag.edc
488  * @skip // drag_area
489  * @skip part
490  * @until example/knob
491  * @until example/knob
492  *
493  * Notice that it defines, through its @c "x:" and @c "y:' properties, that the
494  * part will be only moved on the y axis (vertical). Check the edc reference
495  * docs for more info about this.
496  *
497  * Now, in our example C code, we just do the same as on the other examples,
498  * setting some global data on a structure, load the edje file and so:
499  *
500  * @dontinclude edje-drag.c
501  * @skip static const char *PARTNAME
502  * @until ;
503  *
504  * @skip main(int argc __UNUSED__, char *argv[])
505  * @until evas_object_show
506  *
507  * We want to use the drag_page and drag_step functions, and in order to do so we
508  * need to define the step size and page size of our dragable part. They are
509  * defined as float values which represent a portion of the entire size of the
510  * dragable area:
511  *
512  * @until drag page step
513  *
514  * We are going to use the keyboard to move the @c knob part, through the key
515  * down callback @c _bg_key_down, but we also want to know when the user has
516  * moved the knob by using the mouse (which is possible, since we defined that
517  * this part will receive mouse events). Thus, we set a callback for the signal
518  * "drag", which comes from the dragable part:
519  *
520  * @dontinclude edje-drag.c
521  * @skipline evas_object_event_callback_add
522  *
523  * @skipline edje_object_signal_callback_add
524  *
525  * Now, let's take a look at our key down callback:
526  *
527  * @dontinclude edje-drag.c
528  * @skip _on_bg_key_down
529  * @until }
530  * @skip else
531  * @until }
532  * @skip else
533  * @until }
534  * @skip else
535  * @until }
536  * @skip else
537  * @until }
538  * @skip else
539  * @until }
540  * @skip else
541  * @until }
542  * @skip else
543  * @until }
544  *
545  * On this callback we define that the user will use the "up" and "down" arrows
546  * to move the dragable part, respectively, -1.0 and 1.0 times the step size.
547  * And that the "Page Up" (Prior) and "Page Down" (Next) keys will move -1.0 and
548  * 1.0 times the page size. Both of these will occur on the vertical axis, since
549  * we pass 0.0 as value to the respective horizontal axis parameters. And our
550  * dragable part also only supports being moved in the vertical axis (defined in
551  * the edc).
552  *
553  * We also define that the "m" key will be used to explicitly position the knob
554  * part in the middle of the dragable area.
555  *
556  * And here is the callback for the @c "drag" signal that is received from the
557  * theme:
558  *
559  * @dontinclude edje-drag.c
560  * @skip _on_knob_moved
561  * @until }
562  *
563  * The example's window should look like this picture:
564  *
565  * @image html edje-drag-example.png
566  * @image rtf edje-drag-example.png
567  * @image latex edje-drag-example.eps width=\textwidth
568  *
569  * The full source code follows:
570  * @include edje-drag.c
571  *
572  * To compile use this command:
573  * @verbatim
574  * gcc -o edje-drag edje-drag.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
575  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
576  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
577  *
578  * edje_cc drag.edc
579  * @endverbatim
580  * @example edje-drag.c
581  */
582
583 /**
584  * @page tutorial_edje_perspective Perspective example
585  *
586  * This example demonstrates how someone can set a perspective to be used by an
587  * Edje object, but setting a global perspective. The API for setting a
588  * perspective for just one Edje object is almost the same and it's trivial, so
589  * we are not doing that on this example.
590  *
591  * Let's go first to the main function, where we start creating our objects and
592  * loading the theme. We also set some variables that will be used globally in
593  * our program:
594  *
595  * @dontinclude edje-perspective.c
596  * @skip main(
597  * @until focal =
598  *
599  * A boolean is used to indicate that we are animating.
600  *
601  * We also set the @c app.x and @c app.y to (0, 0) because the original position
602  * of our text + rectangle part will be on top left. This is a convention that
603  * we are using in this example, and setting x, y to 1, 1 would mean bottom
604  * right.  We do this to later define the name of the signals that we are
605  * sending to the theme.
606  *
607  * After this, some boilerplate code to load the theme:
608  *
609  * @until evas_object_show(app.bg)
610  *
611  * Now we are going to setup a callback to tell us that the animation has ended.
612  * We do this just to avoid sending signals to the theme while it's animating.
613  *
614  * @until edje_object_signal
615  *
616  * Finally, let's create our perspective object, define its position, focal
617  * distance and z plane position, and set it as global:
618  *
619  * @until global_set
620  *
621  * Notice that if we wanted to set it just to our edje object, instead of
622  * setting the perspective as global to the entire canvas, we could just use
623  * edje_object_perspective_set() instead of edje_perspective_global_set(). The
624  * rest of the code would be exactly the same.
625  *
626  * Now, let's take a look at what we do in our callbacks.
627  *
628  * The callback for key_down is converting the arrow keys to a signal that
629  * represents where we want our text and rectangle moved to. It does that by
630  * using the following function:
631  *
632  * @dontinclude edje-perspective.c
633  * @skip part_move(
634  * @until }
635  *
636  * Notice that, after sending the signal to the Edje object, we set our boolean
637  * to store that we are animating now. It will only be unset when we receive a
638  * signal from the theme that the animation has ended.
639  *
640  * Now, on the key_down code, we just call this function when the arrows or
641  * "PgUp" or "PgDown" keys are pressed:
642  *
643  * @until unhandled
644  * @until }
645  *
646  * Notice that we also do something else when the numeric keyboard "+" and "-"
647  * keys are pressed. We change the focal distance of our global perspective, and
648  * that will affect the part that has a map rotation applied to it, with
649  * perspective enabled. We also need to call edje_object_calc_force(), otherwise
650  * the Edje object has no way to know that we changed the global perspective.
651  *
652  * Try playing with these keys and see what happens to the animation when the
653  * value of the focal distance changes.
654  *
655  * Finally we add a callback for the animation ended signal:
656  *
657  * @skip  _animation_end_cb
658  * @until }
659  *
660  *
661  * The example's window should look like this picture:
662  *
663  * @image html edje-perspective-example.png
664  * @image rtf edje-perspective-example.png
665  * @image latex edje-perspective-example.eps width=\textwidth
666  *
667  * The full source code follows:
668  * @include edje-perspective.c
669  *
670  * The full .edc file
671  * @include perspective.edc
672  *
673  * To compile use this command:
674  * @verbatim
675  * gcc -o edje-perspective edje-perspective.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
676  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
677  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
678  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
679  *
680  * edje_cc perspective.edc
681  * @endverbatim
682  * @example edje-perspective.c
683  */
684
685 /**
686  * @page Example_Edje_Signals_Messages Edje signals and messages
687  *
688  * In this example, we illustrate how Edje signals and Edje messages
689  * work.
690  *
691  * We place, in the canvas, an Edje object along with a @b red border
692  * image to delimit its geometry. The object's group definition is so
693  * that we have four parts:
694  * - a blue rectangle, aligned to the right
695  * - a white rectangle, aligned to the left
696  * - a text part, aligned to the center
697  * - a clipper rectangle on the blue rectangle
698  *
699  * The left rectangle is bound to a <b>color class</b>, so that we can
700  * multiply its colors by chosen values on the go:
701  * @dontinclude signals-messages.edc
702  * @until visible
703  * @until }
704  * @until }
705  * @until }
706  *
707  * The @c \#define's on the beginning will serve as message
708  * identifiers, for our accorded message interface between the code
709  * and the this theme file.
710  *
711  * Let's move to the code, then. After instantiating the Edje object,
712  * we register two <b>signal callbacks</b> on it. The first one uses
713  * @b globbing, making all of the wheel mouse actions over the left
714  * rectangle to trigger @c _mouse_wheel. Note that those kind of
715  * signals are generated @b internally (and automatically) in Edje. The
716  * second is a direct signal match, to a (custom) signal we defined in
717  * the EDC, ourselves:
718  * @dontinclude edje-signals-messages.c
719  * @skip edje_object_add
720  * @until _mouse_over
721  * @dontinclude edje-signals-messages.c
722  * @skip print signals coming from theme
723  * @until }
724  * @until }
725  *
726  * That second callback is on a signal we emit on the theme, where we
727  * just translate Edje @c "mouse,move" internal events to the custom @c
728  * "mouse,over" one. When that signals reaches the code, we are,
729  * besides printing the signals' strings, sending a @b message back to
730  * the theme. We generate random values of color components and send
731  * them as an #EDJE_MESSAGE_INT_SET message type:
732  * @dontinclude signals-messages.edc
733  * @skip custom signal
734  * @until }
735  * @dontinclude edje-signals-messages.c
736  * @skip mouse over signals
737  * @until }
738  *
739  * In our theme we'll be changing the @c "cc" color class' values with
740  * those integer values of the message, so that moving the mouse over
741  * the right rectangle will change the left one's colors:
742  * @dontinclude signals-messages.edc
743  * @skip public message
744  * @until }
745  * @until }
746  *
747  * Now we're also sending messages <b>from the Edje object</b>,
748  * besides signals.  We do so when one clicks with the left button
749  * over the left rectangle.  With that, we change the text part's
750  * text, cycling between 3 pre-set strings declared in the EDC. With
751  * each new text string attribution, we send a string message to our
752  * code, with the current string as argument:
753  * @dontinclude signals-messages.edc
754  * @skip program
755  * @until }
756  * @until }
757  * @skip change text
758  * @until }
759  * @until }
760  * @dontinclude signals-messages.edc
761  * @skip set_text_string
762  * @until }
763  *
764  * To get the message in code, we have to register a message handler, as
765  * follows:
766  * @dontinclude edje-signals-messages.c
767  * @skip message_handler_set
768  * @until message_handler_set
769  * @dontinclude edje-signals-messages.c
770  * @skip print out
771  * @until }
772  *
773  * To interact with the last missing feature -- emitting signals
774  * <b>from code</b> -- there's a command line interface to exercise
775  * it.  A help string can be asked for with the 'h' key:
776  * @dontinclude edje-signals-messages.c
777  * @skip commands
778  * @until ;
779  *
780  * The @c 't' command will send either @c "part_right,show" or @c
781  * "part_right,hide" signals to the Edje object (those being the
782  * emission part of the signal), which was set to react on them as the
783  * names indicate. We'll set the right rectangle's visibility on/off,
784  * respectively, for those two signals:
785  * @dontinclude signals-messages.edc
786  * @skip hide right rectangle
787  * @until }
788  * @until }
789  * @dontinclude edje-signals-messages.c
790  * @skip keyname, "t"
791  * @until }
792  *
793  * The example's window should look like this picture:
794  *
795  * @image html edje-signals-messages-example.png
796  * @image rtf edje-signals-messages-example.png
797  * @image latex edje-signals-messages-example.eps width=\textwidth
798  *
799  * The full example follows, along with its EDC file.
800  *
801  * @include signals-messages.edc
802  * @include edje-signals-messages.c
803  *
804  * To compile use this command:
805  * @verbatim
806  * gcc -o edje-signals-messages edje-signals-messages.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
807  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
808  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
809  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
810  *
811  * edje_cc signals-messages.edc
812  * @endverbatim
813  * @example edje-signals-messages.c
814  */
815
816 /**
817  * @page tutorial_edje_color_class Edje Color Class example
818  * @dontinclude edje-color-class.c
819  *
820  * This example shows how to manipulate and change Color classes. In this example
821  * we will create two surfaces to show what happens when you change the color
822  * class at the process and object level.
823  *
824  * It's a very simple example, there are two surfaces created from the same EDC,
825  * but just in one of them we will set a specific color class, although both will be
826  * affected by color class set at the process level as you will see.
827  *
828  * It's important you know that all colors has the format R G B A. Just to be easier
829  * to understand this example, we will create a small set of colors that will be used
830  * along of the example. This piece of code is shown below:
831  * @skip static color colors_init_data
832  * @until return EINA_FALSE
833  * @until }
834  *
835  * Focusing on the relevant parts of the code we go right to the part where we set
836  * the new color class. For that we will use the functions edje_color_class_set (
837  * which will affect all edjes) and edje_object_color_class_set (which affects just
838  * the specific object).
839  * @skip edje_color_class_set
840  * @until Text shadow
841  * @until Text shadow
842  * @note
843  *       - argv[1] is the name of a color class used in the EDC.
844  *       - The second and third colors only apply to text part.
845  *       - The color class set for the object overrides the color previously set.
846  *
847  * After we have set the color class we will check the color classes, for that
848  * we created a function which prints all color classes and tries to get theirs
849  * values and print too.
850  * @dontinclude edje-color-class.c
851  * @skip _color_classes_print(void)
852  * @until free
853  * @until }
854  * @until }
855  *
856  * There are two other things that are worth mentioning, we added two callbacks for the
857  * objects, one for mouse down (that we use to delete the color class) and another
858  * for the signal emmited when a color class is deleted.
859  * @skip  evas_object_event
860  * @until NULL
861  * @skip  edje_object_si
862  * @until process
863  *
864  * And then we delete the color class:
865  * @dontinclude edje-color-class.c
866  * @skip _on_mouse_down
867  * @until }
868  *
869  * Our example will look like this, if you run with the parameters "green_class gray pink yellow":
870  *
871  * @image html edje-color-class-example.png
872  * @image rtf edje-color-class-example.png
873  * @image latex edje-color-class-example.eps width=\textwidth
874  * @n
875  * @image html edje-color-class-example2.png
876  * @image rtf edje-color-class-example2.png
877  * @image latex edje-color-class-example2.eps width=\textwidth
878  *
879  * The full source code follows:
880  * @include edje-color-class.c
881  *
882  *
883  * The theme used in this example is:
884  * @include color-class.edc
885  *
886  *
887  * To compile use this command:
888  * @verbatim
889  * gcc -o edje-color-class edje-color-class.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
890  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
891  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
892  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
893  *
894  * edje_cc color-class.edc
895  * @endverbatim
896  * @example edje-color-class.c
897  */
898
899 /**
900  * @page tutorial_edje_animations Edje Animations example
901  *
902  * In this example we will figure out how to manipulate the animations on
903  * an Edje object. After reading this document you will be able to manipulate
904  * the frametime, freeze, pause and stop, all animations on an Edje object.
905  *
906  * To play with this example you will use the keyboard. Below are listed the
907  * keys and what each does.
908  *
909  * - '+' Increase the frametime;
910  * - '-' Decrease the frametime;
911  * - '=' Prints the actual frametime and says if the animations is playing;
912  * - 'f' Freezes the animations in the Edje object;
913  * - 'F' Freezes the animations in all objects in the running program;
914  * - 't' Thaws the animations in the Edje object;
915  * - 'T' Thaws the animations in all objects in the running program;
916  * - 's' Pauses the animations;
917  * - 'p' Plays the animations previously stopped;
918  * - 'a' Starts the animation in the Edje object;
919  * - 'A' Stops the animations in the Edje object;
920  *
921  * Now that we've explained how to use our example, we will see how it is made.
922  * Let's start by looking at the piece of code responsible to the actions commented
923  * above.
924  * @dontinclude edje-animations.c
925  * @skip _on_key_down
926  * @until Stopping
927  * @until }
928  * @until }
929  * @note The actions for the keys 'f' and 'F' will have the same effect in
930  *       our example, just because there is only one object in the running
931  *       program, The same happens with the keys 't' and 'T'.
932  *
933  * As you may have seen these set of functions are pretty easy to handle. The other
934  * important part of this example is the EDC file. The animations used in the
935  * code were created there
936  * @dontinclude animations.edc
937  * @skip program
938  * @until after: "animation,state1"
939  * @until }
940  * @skip program
941  * @until }
942  * @skip program
943  * @until }
944  * @until }
945  *
946  * The example's window should look like this picture:
947  *
948  * @image html edje-animations.png
949  * @image rtf edje-animations.png
950  * @image latex edje-animations.eps width=\textwidth
951  * @n
952  * @image html edje-animations2.png
953  * @image rtf edje-animations2.png
954  * @image latex edje-animations2.eps width=\textwidth
955  *
956  * The full example follows.
957  *
958  * @include edje-animations.c
959  * @include animations.edc
960  *
961  * To compile use this command:
962  * @verbatim
963  * gcc -o edje-animations edje-animations.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
964  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
965  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
966  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
967  *
968  * edje_cc animations.edc
969  * @endverbatim
970  */
971
972  /**
973  * @page tutorial_edje_multisense Multisense example
974  * @dontinclude edje-multisense.c
975  *
976  * This is a simple example in which a rect is created and sound and tone
977  * are played on mouse down event.
978  *
979  * Focusing on the creation of sample and tone. It should be noted that
980  * creation of sample sound is from any supported (sndfile lib) audio file,
981  * tone from of specific audible frequency range are controlled by the theme:
982  *
983  * The full source code follows:
984  * @include edje-multisense.c
985  * @include multisense.edc
986  */
987
988 /**
989  * @page tutorial_edje_basic2 Edje basics example 2
990  *
991  * In this example we will show how to load an image and move it across the window.
992  *
993  * To load the image to our program, it needs to be declared in the .edc using the images block:
994  * @dontinclude basic2.edc
995  * @skip images
996  * @until }
997  *
998  * @note COMP means that we are using a lossless compression
999  *
1000  * Then to be able to use it in our window we must declare a part for this image:
1001  *
1002  * @skip part{
1003  * @until }
1004  * @until }
1005  * @until }
1006  *
1007  * Now we move to our .c file, you will notice this define:
1008  * @dontinclude edje-basic2.c
1009  * @skipline #define WALK
1010  *
1011  * This means how fast we want to move the image across the screen
1012  *
1013  * To load our edje file we will use this command, we do just like the last example (Basic example):
1014  *
1015  * @skip if(!edje_object
1016  * @until evas_object_show
1017  *
1018  * If we want to move our image, we need to add a callback to be able to do this, so we define:
1019  *
1020  * @skipline evas_object_event_callback
1021  *
1022  * To get the position of the image we use this:
1023  * @dontinclude edje-basic2.c
1024  * @skipline evas_object_geometry
1025  *
1026  * Now we use the if's to check in what direction the user wants to move the image then we move it:
1027  *
1028  * @skip if(strcmp
1029  * @until evas_object_move
1030  *
1031  * The example's window should look like this picture:
1032  *
1033  * @image html basic2final.png
1034  * @image rtf basic2final.png
1035  * @image latex basic2final.eps width=\textwidth
1036  *
1037  * The complete .edc file:
1038  * @include basic2.edc
1039  *
1040  * And the source code:
1041  * @include edje-basic2.c
1042  *
1043  * To compile use this command:
1044  * @verbatim
1045  * gcc -o edje-basic2 edje-basic2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1046  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1047  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1048  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
1049  *
1050  * edje_cc -id /path/to/the/image basic2.edc
1051  * @endverbatim
1052  *
1053  */
1054
1055 /**
1056  * @page tutorial_edje_swallow2 Swallow example 2
1057  *
1058  * This example will show you how to load an image using evas and fill a swallow with it.
1059  * It's basically almost like the last example, but with a minor change.
1060  *
1061  * This variables are used to store the name of the image that is going to be used,
1062  * the path to it and a variable that will store the error cause if something goes wrong.
1063  *
1064  * Here it is:
1065  * @dontinclude edje-swallow2.c
1066  * @skipline char         edje_file
1067  * @skipline const char  *img
1068  * @skipline Evas_Load
1069  *
1070  *
1071  * Then we load the image with this command:
1072  *
1073  * @skip img =
1074  * @until evas_object_image_file_set(img,
1075  *
1076  * To check if we had some problem we use:
1077  *
1078  * @skip err = evas
1079  * @until }
1080  *
1081  * Now we are going to swallow it and check if worked. If you notice we are
1082  * using "part_one" as argument. We do this because we must explicit what part of our
1083  * .edc file we want to swallow:
1084  *
1085  * @skip edje_object_part
1086  * @until printf
1087  *
1088  * The example's window should look like this picture:
1089  *
1090  * @image html swallow2final.png
1091  * @image rtf swallow2final.png
1092  * @image latex swallow2final.eps width=\textwidth
1093  *
1094  * The complete .edc file:
1095  * @include swallow.edc
1096  *
1097  * And the source code:
1098  * @include edje-swallow2.c
1099  *
1100  * To compile use this command:
1101  * @verbatim
1102  * gcc -o edje-swallow2 edje-swallow2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1103  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1104  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1105  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
1106  *
1107  * edje_cc swallow.edc
1108  * @endverbatim
1109  */
1110
1111 /**
1112  * @page tutorial_edje_signals_2 Edje Signals example 2
1113  *
1114  * In this example we will make use of signals to help to move an image away from the mouse pointer.
1115  *
1116  * Signals are software interruption, this means that when it happens and if the program is sensitive to it
1117  * the program will stop whatever it is doing and handle the signal.
1118  *
1119  * In this example we are only sensitive to the "mouse,move" signal so we need to register a callback to it.
1120  * To do this we will add a signal callback to our edje object that will detect "mouse,move" signal
1121  * coming from the part "part_image" and when this happens we will call the function _on_mouse_over passing
1122  * the evas pointer as a parameter. The evas pointer is passed as a parameter because we need to know
1123  * where is the mouse pointer in the screen.
1124  *
1125  * We can see bellow how we can listen to the signal:
1126  *
1127  * @dontinclude signals2.c
1128  * @skip edje_object_signal
1129  * @until );
1130  *
1131  *
1132  * Now, let's pass to the callback function. If we want to keep the ball away from the mouse pointer
1133  * we need to now where is the ball and where is the mouse and we can easily discovery these things using
1134  * this:
1135  *
1136  * For the object position in the canvas:
1137  * @dontinclude signals2.c
1138  * @skipline evas_object_geometry
1139  *
1140  * For the mouse position relative to the screen:
1141  * @skipline evas_pointer_output
1142  *
1143  * Now that we have the position of the mouse and the object we just need
1144  * to set the new location and move the object. To set the new location we do this:
1145  * @skip if
1146  * @until y -= (
1147  *
1148  * You can change the formula above if you like. Because we are changing the object's position
1149  * we need to do something if the new position is beyond the canvas size. So here it is:
1150  *
1151  * @skip if
1152  * @until y = 0
1153  *
1154  * Then now what we need to do is move the object:
1155  * @skipline  evas_object
1156  *
1157  * Here is the complete callback function:
1158  *
1159  * @dontinclude signals2.c
1160  * @skip _on_mouse_over
1161  * @until }
1162  *
1163  *
1164  * When you compile and run it you should see this:
1165  * @image html signal2final.png
1166  * @image rtf signal2final.png
1167  * @image latex signal2final.eps width=\textwidth
1168  *
1169  * The .edc file:
1170  * @include signalsBubble.edc
1171  *
1172  * The source code:
1173  * @include signals2.c
1174  *
1175  * To compile use this command:
1176  * @verbatim
1177  * gcc -o signals2 signals2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1178  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1179  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1180  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
1181  *
1182  * edje_cc -id /path/to/the/image signalsBubble.edc
1183  * @endverbatim
1184  */
1185
1186 /**
1187  * @page tutorial_edje_animations_2 Edje animations example 2
1188  *
1189  * In this example we will make an animation of a bouncing ball.
1190  *
1191  * Our focus now will be in the .edc file, because in the C source code we just load the edje object and do
1192  * nothing else.
1193  *
1194  * We want to give the freedom to the object to use the whole canvas of our program, so lets define
1195  * the min, max of our group:
1196  *
1197  * @dontinclude animations2.edc
1198  * @skipline max
1199  * @skipline min
1200  *
1201  * You will notice that in our .c file the canvas will have this size
1202  *
1203  * Now we will define our part that's going to be our image, the ball:
1204  * @skip part{
1205  * @until type:
1206  *
1207  *
1208  * At the description block bellow we are saying that this part has an image, defining
1209  * the max and min size and it's position on the edje_object. The default state is the first
1210  * state of the part, this means that when the edje object is loaded this one is going to be showed to you.
1211  *
1212  * Here it is:
1213  * @dontinclude animations2.edc
1214  * @skip description
1215  * @until }
1216  * @until }
1217  *
1218  * Now in the next description block we are saying where the ball is going to stop.
1219  * Note that we have the "inherit" property. This means we are inheriting everything from default,
1220  * except rel1 and rel2, because we are redefining it.
1221  *
1222  * Check the code:
1223  *
1224  * @skip description
1225  * @until }
1226  *
1227  * We defined how our object will look like and it's position during the animation,
1228  * now we need to define how it's going to act during the time. To do this we will
1229  * use the programs block
1230  *
1231  * The first program block will start the animation, it will wait for the 'load' signal. This signal
1232  * is generated when the edje object is loaded. The 'after' property is saying to this program block exactly this:
1233  * "When you finish, call the program 'animation,state1' ". The 'in' property is saying, wait 0.5 seconds until you execute this program block.
1234  *
1235  * Here is the code:
1236  *
1237  * @skip program {
1238  * @until }
1239  *
1240  * Now lets make the ball move and bounce it. In the second program block we are defining what we need to do
1241  * with the action property. So we are saying change to the state "down-state" using the transition BOUNCE
1242  * and apply this to the part "part_bubble". You can notice that BOUNCE has three parameters, the first one
1243  * is saying how much time the transition will last, the second one is the factor of curviness
1244  * and the last one is saying how many times and object will bounce.
1245  *
1246  * The code is very easy:
1247  *
1248  * @skip program {
1249  * @until }
1250  *
1251  * Now all you have to do is compile the code and run it!
1252  *
1253  * When you compile and run it you should see this:
1254  * @image html signal2final.png
1255  * @image rtf signal2final.png
1256  * @image latex signal2final.eps width=\textwidth
1257  *
1258  * The .edc file:
1259  * @include animations2.edc
1260  *
1261  * The source code:
1262  * @include animations2.c
1263  *
1264  * To compile use this command:
1265  * @verbatim
1266  * gcc -o animations2 animations2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1267  * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1268  * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1269  * `pkg-config --cflags --libs evas ecore ecore-evas edje`
1270  *
1271  * edje_cc  animations2.edc
1272  * @endverbatim
1273  */