summaryrefslogtreecommitdiff
path: root/doc/edje_examples.dox
blob: f44e0fa2f1a341ee57336771b44485abaa8511c3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
/**
 * @page edje_examples Edje Examples
 *
 * Examples:
 * @li @ref Example_Edje_Basics
 * @li @ref tutorial_edje_nested
 * @li @ref tutorial_edje_swallow
 * @li @ref tutorial_edje_swallow2
 * @li @ref tutorial_edje_text
 * @li @ref tutorial_edje_table
 * @li @ref tutorial_edje_color_class
 * @li @ref Example_Edje_Signals_Messages
 * @li @ref tutorial_edje_box
 * @li @ref tutorial_edje_box2
 * @li @ref tutorial_edje_drag
 * @li @ref tutorial_edje_perspective
 * @li @ref tutorial_edje_animations
 * @li @ref tutorial_edje_multisense
 * @li @ref tutorial_edje_basic2
 * @li @ref tutorial_edje_signals_2
 * @li @ref tutorial_edje_animations_2
 */

/**
 * @page Example_Edje_Basics Edje basics example
 *
 * In this example, we illustrate how to start using the Edje library,
 * with the very basic one needs to instantiate an Edje object.
 *
 * We place, in the canvas, an Edje object along with a @b red border
 * image to delimit its geometry. After we instantiate the Edje
 * object, we @b have to set a file and a group, within that file, to
 * bind to it. For this example, we're using an EDC file which
 * declares two parts (blue and green rectangles) and an item data:
 * @include basic.edc
 *
 * We start by trying to access an @b unexistant group in the file, so
 * that you can see the usefulness of edje_object_load_error_get() and
 * edje_load_error_str(). Check that the error message will tell you
 * just that -- a group which didn't exist in the file was called for:
 * @dontinclude edje-basic.c
 * @skip file_path
 * @until file_path
 * @dontinclude edje-basic.c
 * @skip edje_object_add
 * @until }
 *
 * Than, we finally bind our Edje object to @c "example_group",
 * printing a message afterwards:
 * @dontinclude edje-basic.c
 * @skip file_path, "example_group"
 * @until object_show
 *
 * What follows is a series of Edje API calls which are of general
 * use. The first of them is edje_object_data_get(), which we use to
 * get the value we have put in the @c "example_data" data field, in
 * our EDC object declaration:
 * @dontinclude edje-basic.c
 * @skip data field in group
 * @until ;
 *
 * Than, we exemplify edje_object_part_exists():
 * @dontinclude edje-basic.c
 * @skip Testing if
 * @until ;
 *
 * The next call is to query @c "part_one"'s geometry, relative to the
 * whole Edje object's area. The part will be situated in the middle
 * of the Edje object's, because it has a restricted forced size (we
 * set its minimum size equal to its maximum, for that) and, by
 * default, parts are aligned to the center of their containers:
 * @dontinclude edje-basic.c
 * @skip part_geometry_get
 * @until x, y, w, h
 *
 * We can grab a direct pointer on the rectangle implementing @c
 * "part_one", by using edje_object_part_object_get(). Since we are
 * not allowed to set properties on it, we just check its color, to
 * assure its really blue, as declared in the EDC:
 * @dontinclude edje-basic.c
 * @skip color_get
 * @until x, y, w, h
 *
 * The @c "min" and @c "max" EDC properties can be queried with the
 * following calls:
 * @dontinclude edje-basic.c
 * @skip max_get
 * @until min. size is
 *
 * The next two calls are to make <b>size calculations</b> on our
 * object. Because of the minimum size declared for @c "part_one" part's
 * default state description, that will be our exact minimum
 * size calculated for the group (remember the @c "min" declaration at
 * group level is just a @b hint, not an enforcement). We then
 * exercise the edje_object_size_min_restricted_calc() function,
 * passing a minimum size of 500, in each axis. Since we have @b no
 * object bigger than that, it will be the minimum size calculated, in
 * the end:
 * @dontinclude edje-basic.c
 * @skip min_calc
 * @until size calculation is
 *
 * @c "part_two" part is there with a purpose: since it extrapolates
 * the Edje object's boundaries, the edje_object_parts_extends_calc()
 * function will report origin coordinates for the rectangle grouping
 * both parts with @b negative values, indicating it extrapolates to
 * the upper left of our group, just as we see it.
 *
 * To interact with the last features exemplified in the program,
 * there's a command line interface.  A help string can be asked for
 * with the 'h' key:
 * @dontinclude edje-basic.c
 * @skip commands
 * @until ;
 *
 * Those commands will change the scaling factors of our Edje objects.
 * The first of them, @c 's', will change Edje's @b global scaling
 * factor between @c 1.0 (no scaling) and @c 2.0 (double
 * scale). Scaling will be applied to @c "part_one", only, because
 * that's the part flagged to be scaled at EDC level:
 * @dontinclude edje-basic.c
 * @skip strcmp(ev->keyname, "s") == 0
 * @until }
 *
 * Note, finally, that the @c 's' command will depend on the 'r' one
 * to have its effects applied. The latter will change @c "part_one"'s
 * @b individual scaling factor, which @b overrides Edje's global
 * scaling factor. Only when the individual one is set to zero, will
 * the global one take effect:
 * @dontinclude edje-basic.c
 * @skip strcmp(ev->keyname, "r") == 0
 * @until }
 *
 *
 *
 * The example's window should look like this picture:
 *
 * @image html edje-basics-example.png
 * @image rtf edje-basics-example.png
 * @image latex edje-basics-example.eps width=\textwidth
 *
 * The full example follows.
 * @include edje-basic.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-basic edje-basic.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc basic.edc
 * @endverbatim
 * @example edje-basic.c
 */

/**
 * @page tutorial_edje_nested Edje Nested Part (hierarchy) example
 *
 * Nested part feature represents the concept of hierarchy to edje.
 *
 * A nested part inherits it's location relatively to the parent part.
 * Thus, parent part modifications such move or map effects all nested parts.
 * To declare a nested part just start a new part declaration within
 * (before closing) the current part declaration.
 *
 * Note that nested part declaration is allowed only after
 * current part name is defined.
 *
 * Here's an example of a rect nested in other rect plus inner nested rect:
 * @include edje-nested.edc
 *
 * The example's window should look like this picture:
 *
 * @image html edje-nested.png
 * @image rtf edje-nested.png
 * @image latex edje-nested.eps width=\textwidth
 */

/**
 * @page tutorial_edje_swallow Swallow example
 * @dontinclude edje-swallow.c
 *
 * This is a simple example in which we create a rect and swallow it.
 *
 * Focusing on the relevant parts of the code we go right to the creation of our
 * rectangle. It should be noted that we don't resize or show our rect, that is
 * because when an object is swallowed it's geometry and visibility is
 * controlled by the theme:
 * @skip 20
 * @skipline evas_object_rectangle_add
 * @until swallow
 *
 * The other bit of code that is relevant to us now is our check that the
 * swallow worked:
 * @until printf
 *
 * The full source code follows:
 * @include edje-swallow.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-swallow edje-swallow.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc swallow.edc
 * @endverbatim
 * @example edje-swallow.c
 */

/**
 * @page tutorial_edje_text Edje Text example
 *
 *
 * This example shows how to manipulate TEXT and TEXTBLOCK parts from code.
 *
 * The very first we are going to do is register a callback to react to changes
 * in the text of our parts:
 * @dontinclude edje-text.c
 * @skipline edje_object_text_change_cb_set
 *
 *
 * @dontinclude edje-text.c
 * @skipline text_change
 * @note Since edje_obj represent a group we'll be notified whenever any part's
 * text in that group changes.
 *
 * We now set the text for two our two parts:
 * @dontinclude edje-text.c
 * @skip text_set
 * @until edje_object_part_text_set(edje_obj, "part_two"
 * @note Since the "part_two" part is a TEXTBLOCK we can use formatting such as
 * @<b@>
 *
 * And we now move on to selection issues, first thing we do is make sure the
 * user can select text:
 * @dontinclude edje-text.c
 * @skip edje_object_part_text_select_allow_set
 * @until edje_object_part_text_select_all
 *
 * We then select the entire text, and print the selected text:
 * @dontinclude edje-text.c
 * @skipline printf("selection: %s\n",
 *
 * We now unselect the entire text(set selection to none), and print the
 * selected text:
 * @dontinclude edje-text.c
 * @skip edje_object_part_text_select_none
 * @until printf
 *
 * Our example will look like this:
 *
 * @image html edje-text.png
 * @image rtf edje-text.png
 * @image latex edje-text.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-text.c
 *
 *
 * The theme used in this example is:
 * @include text.edc
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-text edje-text.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc text.edc
 * @endverbatim
 * @example edje-text.c
 */

/**
 * @page tutorial_edje_table Table example
 *
 * In this example, we illustrate how to organize your objects on a table, using
 * the edje_object_part_table functions. To be easier to understand the objects
 * in this example will be four simple rects, when the user click over one
 * item with the left button its is removed from the table, if any other button
 * was used all items are removed. For each action is printed a message with
 * the current number of rows and columns.
 *
 * We started creating an EDC file with one part of the type TABLE called
 * @b "table_part", that is the part which we will refer to access the table:
 * @include table.edc
 *
 * On the other hand, in the C file we first create the rectangles and added a
 * callback for mouse down, as you can see bellow:
 * @dontinclude edje-table.c
 * @skip _rects_create
 * @until }
 * @skip }
 * @until }
 *
 * With the objects created we have to pack them into the table, to do this, we
 * just have to use the function edje_object_part_table_pack().
 * @dontinclude edje-table.c
 * @skip (!edje_object_part_table_pack
 * @until 4
 *
 * The other bit of code that is relevant to us now is our event handler for
 * when the user click over the rectangle. Here we use the function
 * edje_object_part_table_unpack() to remove the item from the table or
 * edje_object_part_table_clear() to remove all items, it depends on which mouse
 * button the user uses.
 * @dontinclude edje-table.c
 * @skip _on_mouse_down
 * @until }
 *
 * Finally, the last important thing in this example is about how to know how many
 * columns and rows are there in the table, It should be noted that this function
 * don't tell you how many items are there in the table, just the number of the
 * columns and rows of the table.
 * @dontinclude edje-table.c
 * @skip _columns_rows_
 * @until }
 *
 * The example's window should look like this picture:
 *
 * @image html edje-table-example.png
 * @image rtf edje-table-example.png
 * @image latex edje-table-example.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-table.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-table edje-table.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc table.edc
 * @endverbatim
 * @example edje-table.c
 */

/**
 * @page tutorial_edje_box Box example - basic usage
 *
 * This example shows how to append, insert and remove elements from an Edje box
 * part. It will make use of the edje_object_part_box functions.
 *
 * To play with this example, use mouse left click to delete an existing
 * rectangle from the box and right mouse click to add a new rectangle just
 * before the clicked one. Use the keyboard keys "a" to append a rectangle, "i"
 * to prepend, and "c" to remove all rectangles from the box.
 *
 * We will store our example global information in the data structure defined
 * below, and also set some callbacks for resizing the canvas and exiting the
 * window:
 *
 * @dontinclude edje-box.c
 * @skip static const char
 * @until ecore_evas_geometry_get
 * @until }
 *
 * In the @c main function, we create our @c Ecore_Evas, add a background to it,
 * and finally load our @c Edje file that contains a @c Box part. This part is
 * named @c "example/box" in this case, and we use this name to append elements
 * to it.
 *
 * The code until now is the one that follows:
 *
 * @dontinclude edje-box.c
 * @skip main(int argc __UNUSED__, char *argv[])
 * @until ecore_evas_data_set(ee, "background", bg)
 *
 * Also notice that we set the callback @c _bg_key_down for @c "key down" events
 * on the background object, and that object is the one with focus.
 *
 * Now we add some small rectangles to the box part, using the
 * edje_object_part_box_append() API, and set some callbacks for @c "mouse down"
 * events on every object. These callbacks will be used to add or delete objects
 * from the box part.
 *
 * @dontinclude edje-box.c
 * @skip bg = evas_object_rectangle_add(evas)
 * @until evas_object_event
 * @until }
 *
 * Now let's take a look at the callbacks for key down and mouse down events:
 *
 * @dontinclude edje-box.c
 * @skip ecore_evas_geometry_get
 * @skip static
 * @until evas_object_event
 * @until }
 * @until }
 *
 * This callback for mouse down events will get left clicks and remove the
 * object that received that left click from the box part, and then delete it.
 * This is done with the edje_object_part_box_remove() function.
 *
 * However, on right clicks it will create a new rectangle object, and add it
 * just before the right clicked object, using
 * edje_object_part_box_insert_before().
 *
 * And this is the key down callback:
 *
 * @until remove_all
 * @until }
 *
 * It will insert elements at the beginning of the box if "i" was pressed, using
 * edje_object_part_box_insert_at(). It will also append objects to the box if
 * "a" was pressed, just exactly like we did in the @c main function. And will
 * remove all objects (deleting them) if "c" was pressed.
 *
 * As you can see, this example uses the @c "horizontal_flow" layout for the
 * box, where each item is put linearly in rows, in as many rows as necessary to
 * store all of them.
 *
 * The example's window should look like this picture:
 *
 * @image html edje-box-example.png
 * @image rtf edje-box-example.png
 * @image latex edje-box-example.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-box.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-box edje-box.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc box.edc
 * @endverbatim
 * @example edje-box.c
 */

/**
 * @page tutorial_edje_box2 Box example - custom layout
 *
 * This example shows how to register a custom layout to be used by the Edje box
 * part. It will use edje_box_layout_register() for that.
 *
 * To play with this example, use the keyboard modifier keys and number keys
 * together. The Ctrl key is used for adding elements, and Shift is used for
 * removing them. For instance, Ctrl + 3 will insert a new rectangle object in
 * the 3rd position of the box, while Shift + 6 will try to remove the 6th
 * element of the box.
 *
 * This example is very similar to the other box example, has a structure with
 * global data, a callback for key down events where we create or delete
 * rectangle objects and add or remove them to/from the box part.
 *
 * But the important part is the next one:
 *
 * @dontinclude edje-box2.c
 * @skip static void
 * @until }
 *
 * This code implements our custom layout, which will position every object
 * added to the box in a diagonal through the size of the box part. Notice that
 * it just calculates the position and offset based on the size of the box and
 * number of children, and then moves each child to the respective position.
 *
 * Later on the @c main function, everything we need to do is to register this
 * custom layout function with edje:
 *
 * @dontinclude edje-box2.c
 * @skipline edje_box_layout_register
 *
 * And use it inside the box.edc file:
 *
 * @dontinclude box.edc
 * @skip example/group2
 * @skip example/title
 * @skip part
 * @until BOX
 * @until example/box
 *
 * The example's window should look like this picture:
 *
 * @image html edje-box2-example.png
 * @image rtf edje-box2-example.png
 * @image latex edje-box2-example.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-box2.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-box2 edje-box2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc box.edc
 * @endverbatim
 * @example edje-box2.c
 */

/**
 * @page tutorial_edje_drag Dragable parts example
 *
 * This example shows how to manipulate a dragable part through the
 * edje_object_part_drag API.
 *
 * First, in the edc code, we are declaring a part which will be our movable
 * part, called "knob". It is a normal rectangle, which contains a block called
 * "dragable", that will define the area where this rectangle can be moved, and
 * in which axis it can be moved.
 *
 * This is our part:
 *
 * @dontinclude drag.edc
 * @skip // drag_area
 * @skip part
 * @until example/knob
 * @until example/knob
 *
 * Notice that it defines, through its @c "x:" and @c "y:' properties, that the
 * part will be only moved on the y axis (vertical). Check the edc reference
 * docs for more info about this.
 *
 * Now, in our example C code, we just do the same as on the other examples,
 * setting some global data on a structure, load the edje file and so:
 *
 * @dontinclude edje-drag.c
 * @skip static const char *PARTNAME
 * @until ;
 *
 * @skip main(int argc __UNUSED__, char *argv[])
 * @until evas_object_show
 *
 * We want to use the drag_page and drag_step functions, and in order to do so we
 * need to define the step size and page size of our dragable part. They are
 * defined as float values which represent a portion of the entire size of the
 * dragable area:
 *
 * @until drag page step
 *
 * We are going to use the keyboard to move the @c knob part, through the key
 * down callback @c _bg_key_down, but we also want to know when the user has
 * moved the knob by using the mouse (which is possible, since we defined that
 * this part will receive mouse events). Thus, we set a callback for the signal
 * "drag", which comes from the dragable part:
 *
 * @dontinclude edje-drag.c
 * @skipline evas_object_event_callback_add
 *
 * @skipline edje_object_signal_callback_add
 *
 * Now, let's take a look at our key down callback:
 *
 * @dontinclude edje-drag.c
 * @skip _on_bg_key_down
 * @until }
 * @skip else
 * @until }
 * @skip else
 * @until }
 * @skip else
 * @until }
 * @skip else
 * @until }
 * @skip else
 * @until }
 * @skip else
 * @until }
 * @skip else
 * @until }
 *
 * On this callback we define that the user will use the "up" and "down" arrows
 * to move the dragable part, respectively, -1.0 and 1.0 times the step size.
 * And that the "Page Up" (Prior) and "Page Down" (Next) keys will move -1.0 and
 * 1.0 times the page size. Both of these will occur on the vertical axis, since
 * we pass 0.0 as value to the respective horizontal axis parameters. And our
 * dragable part also only supports being moved in the vertical axis (defined in
 * the edc).
 *
 * We also define that the "m" key will be used to explicitly position the knob
 * part in the middle of the dragable area.
 *
 * And here is the callback for the @c "drag" signal that is received from the
 * theme:
 *
 * @dontinclude edje-drag.c
 * @skip _on_knob_moved
 * @until }
 *
 * The example's window should look like this picture:
 *
 * @image html edje-drag-example.png
 * @image rtf edje-drag-example.png
 * @image latex edje-drag-example.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-drag.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-drag edje-drag.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc drag.edc
 * @endverbatim
 * @example edje-drag.c
 */

/**
 * @page tutorial_edje_perspective Perspective example
 *
 * This example demonstrates how someone can set a perspective to be used by an
 * Edje object, but setting a global perspective. The API for setting a
 * perspective for just one Edje object is almost the same and it's trivial, so
 * we are not doing that on this example.
 *
 * Let's go first to the main function, where we start creating our objects and
 * loading the theme. We also set some variables that will be used globally in
 * our program:
 *
 * @dontinclude edje-perspective.c
 * @skip main(
 * @until focal =
 *
 * A boolean is used to indicate that we are animating.
 *
 * We also set the @c app.x and @c app.y to (0, 0) because the original position
 * of our text + rectangle part will be on top left. This is a convention that
 * we are using in this example, and setting x, y to 1, 1 would mean bottom
 * right.  We do this to later define the name of the signals that we are
 * sending to the theme.
 *
 * After this, some boilerplate code to load the theme:
 *
 * @until evas_object_show(app.bg)
 *
 * Now we are going to setup a callback to tell us that the animation has ended.
 * We do this just to avoid sending signals to the theme while it's animating.
 *
 * @until edje_object_signal
 *
 * Finally, let's create our perspective object, define its position, focal
 * distance and z plane position, and set it as global:
 *
 * @until global_set
 *
 * Notice that if we wanted to set it just to our edje object, instead of
 * setting the perspective as global to the entire canvas, we could just use
 * edje_object_perspective_set() instead of edje_perspective_global_set(). The
 * rest of the code would be exactly the same.
 *
 * Now, let's take a look at what we do in our callbacks.
 *
 * The callback for key_down is converting the arrow keys to a signal that
 * represents where we want our text and rectangle moved to. It does that by
 * using the following function:
 *
 * @dontinclude edje-perspective.c
 * @skip part_move(
 * @until }
 *
 * Notice that, after sending the signal to the Edje object, we set our boolean
 * to store that we are animating now. It will only be unset when we receive a
 * signal from the theme that the animation has ended.
 *
 * Now, on the key_down code, we just call this function when the arrows or
 * "PgUp" or "PgDown" keys are pressed:
 *
 * @until unhandled
 * @until }
 *
 * Notice that we also do something else when the numeric keyboard "+" and "-"
 * keys are pressed. We change the focal distance of our global perspective, and
 * that will affect the part that has a map rotation applied to it, with
 * perspective enabled. We also need to call edje_object_calc_force(), otherwise
 * the Edje object has no way to know that we changed the global perspective.
 *
 * Try playing with these keys and see what happens to the animation when the
 * value of the focal distance changes.
 *
 * Finally we add a callback for the animation ended signal:
 *
 * @skip  _animation_end_cb
 * @until }
 *
 *
 * The example's window should look like this picture:
 *
 * @image html edje-perspective-example.png
 * @image rtf edje-perspective-example.png
 * @image latex edje-perspective-example.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-perspective.c
 *
 * The full .edc file
 * @include perspective.edc
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-perspective edje-perspective.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc perspective.edc
 * @endverbatim
 * @example edje-perspective.c
 */

/**
 * @page Example_Edje_Signals_Messages Edje signals and messages
 *
 * In this example, we illustrate how Edje signals and Edje messages
 * work.
 *
 * We place, in the canvas, an Edje object along with a @b red border
 * image to delimit its geometry. The object's group definition is so
 * that we have four parts:
 * - a blue rectangle, aligned to the right
 * - a white rectangle, aligned to the left
 * - a text part, aligned to the center
 * - a clipper rectangle on the blue rectangle
 *
 * The left rectangle is bound to a <b>color class</b>, so that we can
 * multiply its colors by chosen values on the go:
 * @dontinclude signals-messages.edc
 * @until visible
 * @until }
 * @until }
 * @until }
 *
 * The @c \#define's on the beginning will serve as message
 * identifiers, for our accorded message interface between the code
 * and the this theme file.
 *
 * Let's move to the code, then. After instantiating the Edje object,
 * we register two <b>signal callbacks</b> on it. The first one uses
 * @b globbing, making all of the wheel mouse actions over the left
 * rectangle to trigger @c _mouse_wheel. Note that those kind of
 * signals are generated @b internally (and automatically) in Edje. The
 * second is a direct signal match, to a (custom) signal we defined in
 * the EDC, ourselves:
 * @dontinclude edje-signals-messages.c
 * @skip edje_object_add
 * @until _mouse_over
 * @dontinclude edje-signals-messages.c
 * @skip print signals coming from theme
 * @until }
 * @until }
 *
 * That second callback is on a signal we emit on the theme, where we
 * just translate Edje @c "mouse,move" internal events to the custom @c
 * "mouse,over" one. When that signals reaches the code, we are,
 * besides printing the signals' strings, sending a @b message back to
 * the theme. We generate random values of color components and send
 * them as an #EDJE_MESSAGE_INT_SET message type:
 * @dontinclude signals-messages.edc
 * @skip custom signal
 * @until }
 * @dontinclude edje-signals-messages.c
 * @skip mouse over signals
 * @until }
 *
 * In our theme we'll be changing the @c "cc" color class' values with
 * those integer values of the message, so that moving the mouse over
 * the right rectangle will change the left one's colors:
 * @dontinclude signals-messages.edc
 * @skip public message
 * @until }
 * @until }
 *
 * Now we're also sending messages <b>from the Edje object</b>,
 * besides signals.  We do so when one clicks with the left button
 * over the left rectangle.  With that, we change the text part's
 * text, cycling between 3 pre-set strings declared in the EDC. With
 * each new text string attribution, we send a string message to our
 * code, with the current string as argument:
 * @dontinclude signals-messages.edc
 * @skip program
 * @until }
 * @until }
 * @skip change text
 * @until }
 * @until }
 * @dontinclude signals-messages.edc
 * @skip set_text_string
 * @until }
 *
 * To get the message in code, we have to register a message handler, as
 * follows:
 * @dontinclude edje-signals-messages.c
 * @skip message_handler_set
 * @until message_handler_set
 * @dontinclude edje-signals-messages.c
 * @skip print out
 * @until }
 *
 * To interact with the last missing feature -- emitting signals
 * <b>from code</b> -- there's a command line interface to exercise
 * it.  A help string can be asked for with the 'h' key:
 * @dontinclude edje-signals-messages.c
 * @skip commands
 * @until ;
 *
 * The @c 't' command will send either @c "part_right,show" or @c
 * "part_right,hide" signals to the Edje object (those being the
 * emission part of the signal), which was set to react on them as the
 * names indicate. We'll set the right rectangle's visibility on/off,
 * respectively, for those two signals:
 * @dontinclude signals-messages.edc
 * @skip hide right rectangle
 * @until }
 * @until }
 * @dontinclude edje-signals-messages.c
 * @skip keyname, "t"
 * @until }
 *
 * The example's window should look like this picture:
 *
 * @image html edje-signals-messages-example.png
 * @image rtf edje-signals-messages-example.png
 * @image latex edje-signals-messages-example.eps width=\textwidth
 *
 * The full example follows, along with its EDC file.
 *
 * @include signals-messages.edc
 * @include edje-signals-messages.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-signals-messages edje-signals-messages.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc signals-messages.edc
 * @endverbatim
 * @example edje-signals-messages.c
 */

/**
 * @page tutorial_edje_color_class Edje Color Class example
 * @dontinclude edje-color-class.c
 *
 * This example shows how to manipulate and change Color classes. In this example
 * we will create two surfaces to show what happens when you change the color
 * class at the process and object level.
 *
 * It's a very simple example, there are two surfaces created from the same EDC,
 * but just in one of them we will set a specific color class, although both will be
 * affected by color class set at the process level as you will see.
 *
 * It's important you know that all colors has the format R G B A. Just to be easier
 * to understand this example, we will create a small set of colors that will be used
 * along of the example. This piece of code is shown below:
 * @skip static color colors_init_data
 * @until return EINA_FALSE
 * @until }
 *
 * Focusing on the relevant parts of the code we go right to the part where we set
 * the new color class. For that we will use the functions edje_color_class_set (
 * which will affect all edjes) and edje_object_color_class_set (which affects just
 * the specific object).
 * @skip edje_color_class_set
 * @until Text shadow
 * @until Text shadow
 * @note
 *       - argv[1] is the name of a color class used in the EDC.
 *       - The second and third colors only apply to text part.
 *       - The color class set for the object overrides the color previously set.
 *
 * After we have set the color class we will check the color classes, for that
 * we created a function which prints all color classes and tries to get theirs
 * values and print too.
 * @dontinclude edje-color-class.c
 * @skip _color_classes_print(void)
 * @until free
 * @until }
 * @until }
 *
 * There are two other things that are worth mentioning, we added two callbacks for the
 * objects, one for mouse down (that we use to delete the color class) and another
 * for the signal emmited when a color class is deleted.
 * @skip  evas_object_event
 * @until NULL
 * @skip  edje_object_si
 * @until process
 *
 * And then we delete the color class:
 * @dontinclude edje-color-class.c
 * @skip _on_mouse_down
 * @until }
 *
 * Our example will look like this, if you run with the parameters "green_class gray pink yellow":
 *
 * @image html edje-color-class-example.png
 * @image rtf edje-color-class-example.png
 * @image latex edje-color-class-example.eps width=\textwidth
 * @n
 * @image html edje-color-class-example2.png
 * @image rtf edje-color-class-example2.png
 * @image latex edje-color-class-example2.eps width=\textwidth
 *
 * The full source code follows:
 * @include edje-color-class.c
 *
 *
 * The theme used in this example is:
 * @include color-class.edc
 *
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-color-class edje-color-class.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc color-class.edc
 * @endverbatim
 * @example edje-color-class.c
 */

/**
 * @page tutorial_edje_animations Edje Animations example
 *
 * In this example we will figure out how to manipulate the animations on
 * an Edje object. After reading this document you will be able to manipulate
 * the frametime, freeze, pause and stop, all animations on an Edje object.
 *
 * To play with this example you will use the keyboard. Below are listed the
 * keys and what each does.
 *
 * - '+' Increase the frametime;
 * - '-' Decrease the frametime;
 * - '=' Prints the actual frametime and says if the animations is playing;
 * - 'f' Freezes the animations in the Edje object;
 * - 'F' Freezes the animations in all objects in the running program;
 * - 't' Thaws the animations in the Edje object;
 * - 'T' Thaws the animations in all objects in the running program;
 * - 's' Pauses the animations;
 * - 'p' Plays the animations previously stopped;
 * - 'a' Starts the animation in the Edje object;
 * - 'A' Stops the animations in the Edje object;
 *
 * Now that we've explained how to use our example, we will see how it is made.
 * Let's start by looking at the piece of code responsible to the actions commented
 * above.
 * @dontinclude edje-animations.c
 * @skip _on_key_down
 * @until Stopping
 * @until }
 * @until }
 * @note The actions for the keys 'f' and 'F' will have the same effect in
 *       our example, just because there is only one object in the running
 *       program, The same happens with the keys 't' and 'T'.
 *
 * As you may have seen these set of functions are pretty easy to handle. The other
 * important part of this example is the EDC file. The animations used in the
 * code were created there
 * @dontinclude animations.edc
 * @skip program
 * @until after: "animation,state1"
 * @until }
 * @skip program
 * @until }
 * @skip program
 * @until }
 * @until }
 *
 * The example's window should look like this picture:
 *
 * @image html edje-animations.png
 * @image rtf edje-animations.png
 * @image latex edje-animations.eps width=\textwidth
 * @n
 * @image html edje-animations2.png
 * @image rtf edje-animations2.png
 * @image latex edje-animations2.eps width=\textwidth
 *
 * The full example follows.
 *
 * @include edje-animations.c
 * @include animations.edc
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-animations edje-animations.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc animations.edc
 * @endverbatim
 */

 /**
 * @page tutorial_edje_multisense Multisense example
 * @dontinclude edje-multisense.c
 *
 * This is a simple example in which a rect is created and sound and tone
 * are played on mouse down event.
 *
 * Focusing on the creation of sample and tone. It should be noted that
 * creation of sample sound is from any supported (sndfile lib) audio file,
 * tone from of specific audible frequency range are controlled by the theme:
 *
 * The full source code follows:
 * @include edje-multisense.c
 * @include multisense.edc
 */

/**
 * @page tutorial_edje_basic2 Edje basics example 2
 *
 * In this example we will show how to load an image and move it across the window.
 *
 * To load the image to our program, it needs to be declared in the .edc using the images block:
 * @dontinclude basic2.edc
 * @skip images
 * @until }
 *
 * @note COMP means that we are using a lossless compression
 *
 * Then to be able to use it in our window we must declare a part for this image:
 *
 * @skip part{
 * @until }
 * @until }
 * @until }
 *
 * Now we move to our .c file, you will notice this define:
 * @dontinclude edje-basic2.c
 * @skipline #define WALK
 *
 * This means how fast we want to move the image across the screen
 *
 * To load our edje file we will use this command, we do just like the last example (Basic example):
 *
 * @skip if(!edje_object
 * @until evas_object_show
 *
 * If we want to move our image, we need to add a callback to be able to do this, so we define:
 *
 * @skipline evas_object_event_callback
 *
 * To get the position of the image we use this:
 * @dontinclude edje-basic2.c
 * @skipline evas_object_geometry
 *
 * Now we use the if's to check in what direction the user wants to move the image then we move it:
 *
 * @skip if(strcmp
 * @until evas_object_move
 *
 * The example's window should look like this picture:
 *
 * @image html basic2final.png
 * @image rtf basic2final.png
 * @image latex basic2final.eps width=\textwidth
 *
 * The complete .edc file:
 * @include basic2.edc
 *
 * And the source code:
 * @include edje-basic2.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-basic2 edje-basic2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc -id /path/to/the/image basic2.edc
 * @endverbatim
 *
 */

/**
 * @page tutorial_edje_swallow2 Swallow example 2
 *
 * This example will show you how to load an image using evas and fill a swallow with it.
 * It's basically almost like the last example, but with a minor change.
 *
 * This variables are used to store the name of the image that is going to be used,
 * the path to it and a variable that will store the error cause if something goes wrong.
 *
 * Here it is:
 * @dontinclude edje-swallow2.c
 * @skipline char         edje_file
 * @skipline const char  *img
 * @skipline Evas_Load
 *
 *
 * Then we load the image with this command:
 *
 * @skip img =
 * @until evas_object_image_file_set(img,
 *
 * To check if we had some problem we use:
 *
 * @skip err = evas
 * @until }
 *
 * Now we are going to swallow it and check if worked. If you notice we are
 * using "part_one" as argument. We do this because we must explicit what part of our
 * .edc file we want to swallow:
 *
 * @skip edje_object_part
 * @until printf
 *
 * The example's window should look like this picture:
 *
 * @image html swallow2final.png
 * @image rtf swallow2final.png
 * @image latex swallow2final.eps width=\textwidth
 *
 * The complete .edc file:
 * @include swallow.edc
 *
 * And the source code:
 * @include edje-swallow2.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o edje-swallow2 edje-swallow2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc swallow.edc
 * @endverbatim
 */

/**
 * @page tutorial_edje_signals_2 Edje Signals example 2
 *
 * In this example we will make use of signals to help to move an image away from the mouse pointer.
 *
 * Signals are software interruption, this means that when it happens and if the program is sensitive to it
 * the program will stop whatever it is doing and handle the signal.
 *
 * In this example we are only sensitive to the "mouse,move" signal so we need to register a callback to it.
 * To do this we will add a signal callback to our edje object that will detect "mouse,move" signal
 * coming from the part "part_image" and when this happens we will call the function _on_mouse_over passing
 * the evas pointer as a parameter. The evas pointer is passed as a parameter because we need to know
 * where is the mouse pointer in the screen.
 *
 * We can see bellow how we can listen to the signal:
 *
 * @dontinclude signals2.c
 * @skip edje_object_signal
 * @until );
 *
 *
 * Now, let's pass to the callback function. If we want to keep the ball away from the mouse pointer
 * we need to now where is the ball and where is the mouse and we can easily discovery these things using
 * this:
 *
 * For the object position in the canvas:
 * @dontinclude signals2.c
 * @skipline evas_object_geometry
 *
 * For the mouse position relative to the screen:
 * @skipline evas_pointer_output
 *
 * Now that we have the position of the mouse and the object we just need
 * to set the new location and move the object. To set the new location we do this:
 * @skip if
 * @until y -= (
 *
 * You can change the formula above if you like. Because we are changing the object's position
 * we need to do something if the new position is beyond the canvas size. So here it is:
 *
 * @skip if
 * @until y = 0
 *
 * Then now what we need to do is move the object:
 * @skipline  evas_object
 *
 * Here is the complete callback function:
 *
 * @dontinclude signals2.c
 * @skip _on_mouse_over
 * @until }
 *
 *
 * When you compile and run it you should see this:
 * @image html signal2final.png
 * @image rtf signal2final.png
 * @image latex signal2final.eps width=\textwidth
 *
 * The .edc file:
 * @include signalsBubble.edc
 *
 * The source code:
 * @include signals2.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o signals2 signals2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc -id /path/to/the/image signalsBubble.edc
 * @endverbatim
 */

/**
 * @page tutorial_edje_animations_2 Edje animations example 2
 *
 * In this example we will make an animation of a bouncing ball.
 *
 * Our focus now will be in the .edc file, because in the C source code we just load the edje object and do
 * nothing else.
 *
 * We want to give the freedom to the object to use the whole canvas of our program, so lets define
 * the min, max of our group:
 *
 * @dontinclude animations2.edc
 * @skipline max
 * @skipline min
 *
 * You will notice that in our .c file the canvas will have this size
 *
 * Now we will define our part that's going to be our image, the ball:
 * @skip part{
 * @until type:
 *
 *
 * At the description block bellow we are saying that this part has an image, defining
 * the max and min size and it's position on the edje_object. The default state is the first
 * state of the part, this means that when the edje object is loaded this one is going to be showed to you.
 *
 * Here it is:
 * @dontinclude animations2.edc
 * @skip description
 * @until }
 * @until }
 *
 * Now in the next description block we are saying where the ball is going to stop.
 * Note that we have the "inherit" property. This means we are inheriting everything from default,
 * except rel1 and rel2, because we are redefining it.
 *
 * Check the code:
 *
 * @skip description
 * @until }
 *
 * We defined how our object will look like and it's position during the animation,
 * now we need to define how it's going to act during the time. To do this we will
 * use the programs block
 *
 * The first program block will start the animation, it will wait for the 'load' signal. This signal
 * is generated when the edje object is loaded. The 'after' property is saying to this program block exactly this:
 * "When you finish, call the program 'animation,state1' ". The 'in' property is saying, wait 0.5 seconds until you execute this program block.
 *
 * Here is the code:
 *
 * @skip program {
 * @until }
 *
 * Now lets make the ball move and bounce it. In the second program block we are defining what we need to do
 * with the action property. So we are saying change to the state "down-state" using the transition BOUNCE
 * and apply this to the part "part_bubble". You can notice that BOUNCE has three parameters, the first one
 * is saying how much time the transition will last, the second one is the factor of curviness
 * and the last one is saying how many times and object will bounce.
 *
 * The code is very easy:
 *
 * @skip program {
 * @until }
 *
 * Now all you have to do is compile the code and run it!
 *
 * When you compile and run it you should see this:
 * @image html signal2final.png
 * @image rtf signal2final.png
 * @image latex signal2final.eps width=\textwidth
 *
 * The .edc file:
 * @include animations2.edc
 *
 * The source code:
 * @include animations2.c
 *
 * To compile use this command:
 * @verbatim
 * gcc -o animations2 animations2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
 * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
 * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
 * `pkg-config --cflags --libs evas ecore ecore-evas edje`
 *
 * edje_cc  animations2.edc
 * @endverbatim
 */