2
* @page edje_examples Edje Examples
5
* @li @ref Example_Edje_Basics
6
* @li @ref tutorial_edje_nested
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
25
* @page Example_Edje_Basics Edje basics example
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.
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:
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
44
* @dontinclude edje-basic.c
45
* @skip edje_object_add
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"
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
62
* Than, we exemplify edje_object_part_exists():
63
* @dontinclude edje-basic.c
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
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
84
* The @c "min" and @c "max" EDC properties can be queried with the
86
* @dontinclude edje-basic.c
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
99
* @dontinclude edje-basic.c
101
* @until size calculation is
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.
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
112
* @dontinclude edje-basic.c
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->key, "s") == 0
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->key, "r") == 0
136
* The example's window should look like this picture:
138
* @image html edje-basics-example.png
139
* @image rtf edje-basics-example.png
140
* @image latex edje-basics-example.eps width=\textwidth
142
* The full example follows.
143
* @include edje-basic.c
145
* To compile use this command:
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`
153
* @example edje-basic.c
157
* @page tutorial_edje_nested Edje Nested Part (hierarchy) example
159
* Nested part feature represents the concept of hierarchy to edje.
161
* A nested part inherits it's location relatively to the parent part.
162
* Thus, parent part modifications such move or map effects all nested parts.
163
* To declare a nested part just start a new part declaration within
164
* (before closing) the current part declaration.
166
* Note that nested part declaration is allowed only after
167
* current part name is defined.
169
* Here's an example of a rect nested in other rect plus inner nested rect:
170
* @include edje-nested.edc
172
* The example's window should look like this picture:
174
* @image html edje-nested.png
175
* @image rtf edje-nested.png
176
* @image latex edje-nested.eps width=\textwidth
180
* @page tutorial_edje_swallow Swallow example
181
* @dontinclude edje-swallow.c
183
* This is a simple example in which we create a rect and swallow it.
185
* Focusing on the relevant parts of the code we go right to the creation of our
186
* rectangle. It should be noted that we don't resize or show our rect, that is
187
* because when an object is swallowed it's geometry and visibility is
188
* controlled by the theme:
190
* @skipline evas_object_rectangle_add
193
* The other bit of code that is relevant to us now is our check that the
197
* The full source code follows:
198
* @include edje-swallow.c
200
* To compile use this command:
202
* gcc -o edje-swallow edje-swallow.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
203
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
204
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
206
* edje_cc swallow.edc
208
* @example edje-swallow.c
212
* @page tutorial_edje_text Edje Text example
215
* This example shows how to manipulate TEXT and TEXTBLOCK parts from code.
217
* The very first we are going to do is register a callback to react to changes
218
* in the text of our parts:
219
* @dontinclude edje-text.c
220
* @skipline edje_object_text_change_cb_set
223
* @dontinclude edje-text.c
224
* @skipline text_change
225
* @note Since edje_obj represent a group we'll be notified whenever any part's
226
* text in that group changes.
228
* We now set the text for two our two parts:
229
* @dontinclude edje-text.c
231
* @until edje_object_part_text_set(edje_obj, "part_two"
232
* @note Since the "part_two" part is a TEXTBLOCK we can use formatting such as
235
* And we now move on to selection issues, first thing we do is make sure the
236
* user can select text:
237
* @dontinclude edje-text.c
238
* @skip edje_object_part_text_select_allow_set
239
* @until edje_object_part_text_select_all
241
* We then select the entire text, and print the selected text:
242
* @dontinclude edje-text.c
243
* @skipline printf("selection: %s\n",245
* We now unselect the entire text(set selection to none), and print the
247
* @dontinclude edje-text.c
248
* @skip edje_object_part_text_select_none
251
* Our example will look like this:
253
* @image html edje-text.png
254
* @image rtf edje-text.png
255
* @image latex edje-text.eps width=\textwidth
257
* The full source code follows:
258
* @include edje-text.c
261
* The theme used in this example is:
264
* To compile use this command:
266
* gcc -o edje-text edje-text.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
267
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
268
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
272
* @example edje-text.c
276
* @page tutorial_edje_table Table example
278
* In this example, we illustrate how to organize your objects on a table, using
279
* the edje_object_part_table functions. To be easier to understand the objects
280
* in this example will be four simple rects, when the user click over one
281
* item with the left button its is removed from the table, if any other button
282
* was used all items are removed. For each action is printed a message with
283
* the current number of rows and columns.
285
* We started creating an EDC file with one part of the type TABLE called
286
* @b "table_part", that is the part which we will refer to access the table:
289
* On the other hand, in the C file we first create the rectangles and added a
290
* callback for mouse down, as you can see bellow:
291
* @dontinclude edje-table.c
292
* @skip _rects_create
297
* With the objects created we have to pack them into the table, to do this, we
298
* just have to use the function edje_object_part_table_pack().
299
* @dontinclude edje-table.c
300
* @skip (!edje_object_part_table_pack
303
* The other bit of code that is relevant to us now is our event handler for
304
* when the user click over the rectangle. Here we use the function
305
* edje_object_part_table_unpack() to remove the item from the table or
306
* edje_object_part_table_clear() to remove all items, it depends on which mouse
307
* button the user uses.
308
* @dontinclude edje-table.c
309
* @skip _on_mouse_down
312
* Finally, the last important thing in this example is about how to know how many
313
* columns and rows are there in the table, It should be noted that this function
314
* don't tell you how many items are there in the table, just the number of the
315
* columns and rows of the table.
316
* @dontinclude edje-table.c
317
* @skip _columns_rows_
320
* The example's window should look like this picture:
322
* @image html edje-table-example.png
323
* @image rtf edje-table-example.png
324
* @image latex edje-table-example.eps width=\textwidth
326
* The full source code follows:
327
* @include edje-table.c
329
* To compile use this command:
331
* gcc -o edje-table edje-table.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
332
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
333
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
337
* @example edje-table.c
341
* @page tutorial_edje_box Box example - basic usage
343
* This example shows how to append, insert and remove elements from an Edje box
344
* part. It will make use of the edje_object_part_box functions.
346
* To play with this example, use mouse left click to delete an existing
347
* rectangle from the box and right mouse click to add a new rectangle just
348
* before the clicked one. Use the keyboard keys "a" to append a rectangle, "i"
349
* to prepend, and "c" to remove all rectangles from the box.
351
* We will store our example global information in the data structure defined
352
* below, and also set some callbacks for resizing the canvas and exiting the
355
* @dontinclude edje-box.c
356
* @skip static const char
357
* @until ecore_evas_geometry_get
360
* In the @c main function, we create our @c Ecore_Evas, add a background to it,
361
* and finally load our @c Edje file that contains a @c Box part. This part is
362
* named @c "example/box" in this case, and we use this name to append elements
365
* The code until now is the one that follows:
367
* @dontinclude edje-box.c
368
* @skip main(int argc __UNUSED__, char *argv[])
369
* @until ecore_evas_data_set(ee, "background", bg)
371
* Also notice that we set the callback @c _bg_key_down for @c "key down" events
372
* on the background object, and that object is the one with focus.
374
* Now we add some small rectangles to the box part, using the
375
* edje_object_part_box_append() API, and set some callbacks for @c "mouse down"
376
* events on every object. These callbacks will be used to add or delete objects
379
* @dontinclude edje-box.c
380
* @skip bg = evas_object_rectangle_add(evas)
381
* @until evas_object_event
384
* Now let's take a look at the callbacks for key down and mouse down events:
386
* @dontinclude edje-box.c
387
* @skip ecore_evas_geometry_get
389
* @until evas_object_event
393
* This callback for mouse down events will get left clicks and remove the
394
* object that received that left click from the box part, and then delete it.
395
* This is done with the edje_object_part_box_remove() function.
397
* However, on right clicks it will create a new rectangle object, and add it
398
* just before the right clicked object, using
399
* edje_object_part_box_insert_before().
401
* And this is the key down callback:
406
* It will insert elements at the beginning of the box if "i" was pressed, using
407
* edje_object_part_box_insert_at(). It will also append objects to the box if
408
* "a" was pressed, just exactly like we did in the @c main function. And will
409
* remove all objects (deleting them) if "c" was pressed.
411
* As you can see, this example uses the @c "horizontal_flow" layout for the
412
* box, where each item is put linearly in rows, in as many rows as necessary to
415
* The example's window should look like this picture:
417
* @image html edje-box-example.png
418
* @image rtf edje-box-example.png
419
* @image latex edje-box-example.eps width=\textwidth
421
* The full source code follows:
422
* @include edje-box.c
424
* To compile use this command:
426
* gcc -o edje-box edje-box.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
427
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
428
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
432
* @example edje-box.c
436
* @page tutorial_edje_box2 Box example - custom layout
438
* This example shows how to register a custom layout to be used by the Edje box
439
* part. It will use edje_box_layout_register() for that.
441
* To play with this example, use the keyboard modifier keys and number keys
442
* together. The Ctrl key is used for adding elements, and Shift is used for
443
* removing them. For instance, Ctrl + 3 will insert a new rectangle object in
444
* the 3rd position of the box, while Shift + 6 will try to remove the 6th
445
* element of the box.
447
* This example is very similar to the other box example, has a structure with
448
* global data, a callback for key down events where we create or delete
449
* rectangle objects and add or remove them to/from the box part.
451
* But the important part is the next one:
453
* @dontinclude edje-box2.c
457
* This code implements our custom layout, which will position every object
458
* added to the box in a diagonal through the size of the box part. Notice that
459
* it just calculates the position and offset based on the size of the box and
460
* number of children, and then moves each child to the respective position.
462
* Later on the @c main function, everything we need to do is to register this
463
* custom layout function with edje:
465
* @dontinclude edje-box2.c
466
* @skipline edje_box_layout_register
468
* And use it inside the box.edc file:
470
* @dontinclude box.edc
471
* @skip example/group2
472
* @skip example/title
477
* The example's window should look like this picture:
479
* @image html edje-box2-example.png
480
* @image rtf edje-box2-example.png
481
* @image latex edje-box2-example.eps width=\textwidth
483
* The full source code follows:
484
* @include edje-box2.c
486
* To compile use this command:
488
* gcc -o edje-box2 edje-box2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
489
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
490
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
494
* @example edje-box2.c
498
* @page tutorial_edje_drag Dragable parts example
500
* This example shows how to manipulate a dragable part through the
501
* edje_object_part_drag API.
503
* First, in the edc code, we are declaring a part which will be our movable
504
* part, called "knob". It is a normal rectangle, which contains a block called
505
* "dragable", that will define the area where this rectangle can be moved, and
506
* in which axis it can be moved.
510
* @dontinclude drag.edc
513
* @until example/knob
514
* @until example/knob
516
* Notice that it defines, through its @c "x:" and @c "y:' properties, that the
517
* part will be only moved on the y axis (vertical). Check the edc reference
518
* docs for more info about this.
520
* Now, in our example C code, we just do the same as on the other examples,
521
* setting some global data on a structure, load the edje file and so:
523
* @dontinclude edje-drag.c
524
* @skip static const char *PARTNAME
527
* @skip main(int argc __UNUSED__, char *argv[])
528
* @until evas_object_show
530
* We want to use the drag_page and drag_step functions, and in order to do so we
531
* need to define the step size and page size of our dragable part. They are
532
* defined as float values which represent a portion of the entire size of the
535
* @until drag page step
537
* We are going to use the keyboard to move the @c knob part, through the key
538
* down callback @c _bg_key_down, but we also want to know when the user has
539
* moved the knob by using the mouse (which is possible, since we defined that
540
* this part will receive mouse events). Thus, we set a callback for the signal
541
* "drag", which comes from the dragable part:
543
* @dontinclude edje-drag.c
544
* @skipline evas_object_event_callback_add
546
* @skipline edje_object_signal_callback_add
548
* Now, let's take a look at our key down callback:
550
* @dontinclude edje-drag.c
551
* @skip _on_bg_key_down
568
* On this callback we define that the user will use the "up" and "down" arrows
569
* to move the dragable part, respectively, -1.0 and 1.0 times the step size.
570
* And that the "Page Up" (Prior) and "Page Down" (Next) keys will move -1.0 and
571
* 1.0 times the page size. Both of these will occur on the vertical axis, since
572
* we pass 0.0 as value to the respective horizontal axis parameters. And our
573
* dragable part also only supports being moved in the vertical axis (defined in
576
* We also define that the "m" key will be used to explicitly position the knob
577
* part in the middle of the dragable area.
579
* And here is the callback for the @c "drag" signal that is received from the
582
* @dontinclude edje-drag.c
583
* @skip _on_knob_moved
586
* The example's window should look like this picture:
588
* @image html edje-drag-example.png
589
* @image rtf edje-drag-example.png
590
* @image latex edje-drag-example.eps width=\textwidth
592
* The full source code follows:
593
* @include edje-drag.c
595
* To compile use this command:
597
* gcc -o edje-drag edje-drag.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
598
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
599
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
603
* @example edje-drag.c
607
* @page tutorial_edje_perspective Perspective example
609
* This example demonstrates how someone can set a perspective to be used by an
610
* Edje object, but setting a global perspective. The API for setting a
611
* perspective for just one Edje object is almost the same and it's trivial, so
612
* we are not doing that on this example.
614
* Let's go first to the main function, where we start creating our objects and
615
* loading the theme. We also set some variables that will be used globally in
618
* @dontinclude edje-perspective.c
622
* A boolean is used to indicate that we are animating.
624
* We also set the @c app.x and @c app.y to (0, 0) because the original position
625
* of our text + rectangle part will be on top left. This is a convention that
626
* we are using in this example, and setting x, y to 1, 1 would mean bottom
627
* right. We do this to later define the name of the signals that we are
628
* sending to the theme.
630
* After this, some boilerplate code to load the theme:
632
* @until evas_object_show(app.bg)
634
* Now we are going to setup a callback to tell us that the animation has ended.
635
* We do this just to avoid sending signals to the theme while it's animating.
637
* @until edje_object_signal
639
* Finally, let's create our perspective object, define its position, focal
640
* distance and z plane position, and set it as global:
644
* Notice that if we wanted to set it just to our edje object, instead of
645
* setting the perspective as global to the entire canvas, we could just use
646
* edje_object_perspective_set() instead of edje_perspective_global_set(). The
647
* rest of the code would be exactly the same.
649
* Now, let's take a look at what we do in our callbacks.
651
* The callback for key_down is converting the arrow keys to a signal that
652
* represents where we want our text and rectangle moved to. It does that by
653
* using the following function:
655
* @dontinclude edje-perspective.c
659
* Notice that, after sending the signal to the Edje object, we set our boolean
660
* to store that we are animating now. It will only be unset when we receive a
661
* signal from the theme that the animation has ended.
663
* Now, on the key_down code, we just call this function when the arrows or
664
* "PgUp" or "PgDown" keys are pressed:
669
* Notice that we also do something else when the numeric keyboard "+" and "-"
670
* keys are pressed. We change the focal distance of our global perspective, and
671
* that will affect the part that has a map rotation applied to it, with
672
* perspective enabled. We also need to call edje_object_calc_force(), otherwise
673
* the Edje object has no way to know that we changed the global perspective.
675
* Try playing with these keys and see what happens to the animation when the
676
* value of the focal distance changes.
678
* Finally we add a callback for the animation ended signal:
680
* @skip _animation_end_cb
684
* The example's window should look like this picture:
686
* @image html edje-perspective-example.png
687
* @image rtf edje-perspective-example.png
688
* @image latex edje-perspective-example.eps width=\textwidth
690
* The full source code follows:
691
* @include edje-perspective.c
694
* @include perspective.edc
696
* To compile use this command:
698
* gcc -o edje-perspective edje-perspective.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
699
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
700
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
701
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
703
* edje_cc perspective.edc
705
* @example edje-perspective.c
709
* @page Example_Edje_Signals_Messages Edje signals and messages
711
* In this example, we illustrate how Edje signals and Edje messages
714
* We place, in the canvas, an Edje object along with a @b red border
715
* image to delimit its geometry. The object's group definition is so
716
* that we have four parts:
717
* - a blue rectangle, aligned to the right
718
* - a white rectangle, aligned to the left
719
* - a text part, aligned to the center
720
* - a clipper rectangle on the blue rectangle
722
* The left rectangle is bound to a <b>color class</b>, so that we can
723
* multiply its colors by chosen values on the go:
724
* @dontinclude signals-messages.edc
730
* The @c \#define's on the beginning will serve as message
731
* identifiers, for our accorded message interface between the code
732
* and the this theme file.
734
* Let's move to the code, then. After instantiating the Edje object,
735
* we register two <b>signal callbacks</b> on it. The first one uses
736
* @b globbing, making all of the wheel mouse actions over the left
737
* rectangle to trigger @c _mouse_wheel. Note that those kind of
738
* signals are generated @b internally (and automatically) in Edje. The
739
* second is a direct signal match, to a (custom) signal we defined in
740
* the EDC, ourselves:
741
* @dontinclude edje-signals-messages.c
742
* @skip edje_object_add
744
* @dontinclude edje-signals-messages.c
745
* @skip print signals coming from theme
749
* That second callback is on a signal we emit on the theme, where we
750
* just translate Edje @c "mouse,move" internal events to the custom @c
751
* "mouse,over" one. When that signals reaches the code, we are,
752
* besides printing the signals' strings, sending a @b message back to
753
* the theme. We generate random values of color components and send
754
* them as an #EDJE_MESSAGE_INT_SET message type:
755
* @dontinclude signals-messages.edc
756
* @skip custom signal
758
* @dontinclude edje-signals-messages.c
759
* @skip mouse over signals
762
* In our theme we'll be changing the @c "cc" color class' values with
763
* those integer values of the message, so that moving the mouse over
764
* the right rectangle will change the left one's colors:
765
* @dontinclude signals-messages.edc
766
* @skip public message
770
* Now we're also sending messages <b>from the Edje object</b>,
771
* besides signals. We do so when one clicks with the left button
772
* over the left rectangle. With that, we change the text part's
773
* text, cycling between 3 pre-set strings declared in the EDC. With
774
* each new text string attribution, we send a string message to our
775
* code, with the current string as argument:
776
* @dontinclude signals-messages.edc
783
* @dontinclude signals-messages.edc
784
* @skip set_text_string
787
* To get the message in code, we have to register a message handler, as
789
* @dontinclude edje-signals-messages.c
790
* @skip message_handler_set
791
* @until message_handler_set
792
* @dontinclude edje-signals-messages.c
796
* To interact with the last missing feature -- emitting signals
797
* <b>from code</b> -- there's a command line interface to exercise
798
* it. A help string can be asked for with the 'h' key:
799
* @dontinclude edje-signals-messages.c
803
* The @c 't' command will send either @c "part_right,show" or @c
804
* "part_right,hide" signals to the Edje object (those being the
805
* emission part of the signal), which was set to react on them as the
806
* names indicate. We'll set the right rectangle's visibility on/off,
807
* respectively, for those two signals:
808
* @dontinclude signals-messages.edc
809
* @skip hide right rectangle
812
* @dontinclude edje-signals-messages.c
816
* The example's window should look like this picture:
818
* @image html edje-signals-messages-example.png
819
* @image rtf edje-signals-messages-example.png
820
* @image latex edje-signals-messages-example.eps width=\textwidth
822
* The full example follows, along with its EDC file.
824
* @include signals-messages.edc
825
* @include edje-signals-messages.c
827
* To compile use this command:
829
* gcc -o edje-signals-messages edje-signals-messages.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
830
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
831
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
832
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
834
* edje_cc signals-messages.edc
836
* @example edje-signals-messages.c
840
* @page tutorial_edje_color_class Edje Color Class example
841
* @dontinclude edje-color-class.c
843
* This example shows how to manipulate and change Color classes. In this example
844
* we will create two surfaces to show what happens when you change the color
845
* class at the process and object level.
847
* It's a very simple example, there are two surfaces created from the same EDC,
848
* but just in one of them we will set a specific color class, although both will be
849
* affected by color class set at the process level as you will see.
851
* It's important you know that all colors has the format R G B A. Just to be easier
852
* to understand this example, we will create a small set of colors that will be used
853
* along of the example. This piece of code is shown below:
854
* @skip static color colors_init_data
855
* @until return EINA_FALSE
858
* Focusing on the relevant parts of the code we go right to the part where we set
859
* the new color class. For that we will use the functions edje_color_class_set (
860
* which will affect all edjes) and edje_object_color_class_set (which affects just
861
* the specific object).
862
* @skip edje_color_class_set
866
* - argv[1] is the name of a color class used in the EDC.
867
* - The second and third colors only apply to text part.
868
* - The color class set for the object overrides the color previously set.
870
* After we have set the color class we will check the color classes, for that
871
* we created a function which prints all color classes and tries to get theirs
872
* values and print too.
873
* @dontinclude edje-color-class.c
874
* @skip _color_classes_print(void)
879
* There are two other things that are worth mentioning, we added two callbacks for the
880
* objects, one for mouse down (that we use to delete the color class) and another
881
* for the signal emitted when a color class is deleted.
882
* @skip evas_object_event
884
* @skip edje_object_si
887
* And then we delete the color class:
888
* @dontinclude edje-color-class.c
889
* @skip _on_mouse_down
892
* Our example will look like this, if you run with the parameters "green_class gray pink yellow":
894
* @image html edje-color-class-example.png
895
* @image rtf edje-color-class-example.png
896
* @image latex edje-color-class-example.eps width=\textwidth
898
* @image html edje-color-class-example2.png
899
* @image rtf edje-color-class-example2.png
900
* @image latex edje-color-class-example2.eps width=\textwidth
902
* The full source code follows:
903
* @include edje-color-class.c
906
* The theme used in this example is:
907
* @include color-class.edc
910
* To compile use this command:
912
* gcc -o edje-color-class edje-color-class.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
913
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
914
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
915
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
917
* edje_cc color-class.edc
919
* @example edje-color-class.c
923
* @page tutorial_edje_animations Edje Animations example
925
* In this example we will figure out how to manipulate the animations on
926
* an Edje object. After reading this document you will be able to manipulate
927
* the frametime, freeze, pause and stop, all animations on an Edje object.
929
* To play with this example you will use the keyboard. Below are listed the
930
* keys and what each does.
932
* - '+' Increase the frametime;
933
* - '-' Decrease the frametime;
934
* - '=' Prints the actual frametime and says if the animations is playing;
935
* - 'f' Freezes the animations in the Edje object;
936
* - 'F' Freezes the animations in all objects in the running program;
937
* - 't' Thaws the animations in the Edje object;
938
* - 'T' Thaws the animations in all objects in the running program;
939
* - 's' Pauses the animations;
940
* - 'p' Plays the animations previously stopped;
941
* - 'a' Starts the animation in the Edje object;
942
* - 'A' Stops the animations in the Edje object;
944
* Now that we've explained how to use our example, we will see how it is made.
945
* Let's start by looking at the piece of code responsible to the actions commented
947
* @dontinclude edje-animations.c
952
* @note The actions for the keys 'f' and 'F' will have the same effect in
953
* our example, just because there is only one object in the running
954
* program, The same happens with the keys 't' and 'T'.
956
* As you may have seen these set of functions are pretty easy to handle. The other
957
* important part of this example is the EDC file. The animations used in the
958
* code were created there
959
* @dontinclude animations.edc
961
* @until after: "animation,state1"
969
* The example's window should look like this picture:
971
* @image html edje-animations.png
972
* @image rtf edje-animations.png
973
* @image latex edje-animations.eps width=\textwidth
975
* @image html edje-animations2.png
976
* @image rtf edje-animations2.png
977
* @image latex edje-animations2.eps width=\textwidth
979
* The full example follows.
981
* @include edje-animations.c
982
* @include animations.edc
984
* To compile use this command:
986
* gcc -o edje-animations edje-animations.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
987
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
988
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
989
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
991
* edje_cc animations.edc
996
* @page tutorial_edje_multisense Multisense example
997
* @dontinclude edje-multisense.c
999
* This is a simple example in which a rect is created and sound and tone
1000
* are played on mouse down event.
1002
* Focusing on the creation of sample and tone. It should be noted that
1003
* creation of sample sound is from any supported (sndfile lib) audio file,
1004
* tone from of specific audible frequency range are controlled by the theme:
1006
* The full source code follows:
1007
* @include edje-multisense.c
1008
* @include multisense.edc
1012
* @page tutorial_edje_basic2 Edje basics example 2
1014
* In this example we will show how to load an image and move it across the window.
1016
* To load the image to our program, it needs to be declared in the .edc using the images block:
1017
* @dontinclude basic2.edc
1021
* @note COMP means that we are using a lossless compression
1023
* Then to be able to use it in our window we must declare a part for this image:
1030
* Now we move to our .c file, you will notice this define:
1031
* @dontinclude edje-basic2.c
1032
* @skipline #define WALK
1034
* This means how fast we want to move the image across the screen
1036
* To load our edje file we will use this command, we do just like the last example (Basic example):
1038
* @skip if(!edje_object
1039
* @until evas_object_show
1041
* If we want to move our image, we need to add a callback to be able to do this, so we define:
1043
* @skipline evas_object_event_callback
1045
* To get the position of the image we use this:
1046
* @dontinclude edje-basic2.c
1047
* @skipline evas_object_geometry
1049
* Now we use the if's to check in what direction the user wants to move the image then we move it:
1052
* @until evas_object_move
1054
* The example's window should look like this picture:
1056
* @image html basic2final.png
1057
* @image rtf basic2final.png
1058
* @image latex basic2final.eps width=\textwidth
1060
* The complete .edc file:
1061
* @include basic2.edc
1063
* And the source code:
1064
* @include edje-basic2.c
1066
* To compile use this command:
1068
* gcc -o edje-basic2 edje-basic2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1069
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1070
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1071
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
1073
* edje_cc -id /path/to/the/image basic2.edc
1079
* @page tutorial_edje_swallow2 Swallow example 2
1081
* This example will show you how to load an image using evas and fill a swallow with it.
1082
* It's basically almost like the last example, but with a minor change.
1084
* This variables are used to store the name of the image that is going to be used,
1085
* the path to it and a variable that will store the error cause if something goes wrong.
1088
* @dontinclude edje-swallow2.c
1089
* @skipline const char *edje_file
1090
* @skipline const char *img
1091
* @skipline Evas_Load
1094
* Then we load the image with this command:
1097
* @until evas_object_image_file_set(img,
1099
* To check if we had some problem we use:
1104
* Now we are going to swallow it and check if worked. If you notice we are
1105
* using "part_one" as argument. We do this because we must explicit what part of our
1106
* .edc file we want to swallow:
1108
* @skip edje_object_part
1111
* The example's window should look like this picture:
1113
* @image html swallow2final.png
1114
* @image rtf swallow2final.png
1115
* @image latex swallow2final.eps width=\textwidth
1117
* The complete .edc file:
1118
* @include swallow.edc
1120
* And the source code:
1121
* @include edje-swallow2.c
1123
* To compile use this command:
1125
* gcc -o edje-swallow2 edje-swallow2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1126
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1127
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1128
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
1130
* edje_cc swallow.edc
1135
* @page tutorial_edje_signals_2 Edje Signals example 2
1137
* In this example we will make use of signals to help to move an image away from the mouse pointer.
1139
* Signals are software interruption, this means that when it happens and if the program is sensitive to it
1140
* the program will stop whatever it is doing and handle the signal.
1142
* In this example we are only sensitive to the "mouse,move" signal so we need to register a callback to it.
1143
* To do this we will add a signal callback to our edje object that will detect "mouse,move" signal
1144
* coming from the part "part_image" and when this happens we will call the function _on_mouse_over passing
1145
* the evas pointer as a parameter. The evas pointer is passed as a parameter because we need to know
1146
* where is the mouse pointer in the screen.
1148
* We can see bellow how we can listen to the signal:
1150
* @dontinclude signals2.c
1151
* @skip edje_object_signal
1155
* Now, let's pass to the callback function. If we want to keep the ball away from the mouse pointer
1156
* we need to now where is the ball and where is the mouse and we can easily discovery these things using
1159
* For the object position in the canvas:
1160
* @dontinclude signals2.c
1161
* @skipline evas_object_geometry
1163
* For the mouse position relative to the screen:
1164
* @skipline evas_pointer_output
1166
* Now that we have the position of the mouse and the object we just need
1167
* to set the new location and move the object. To set the new location we do this:
1171
* You can change the formula above if you like. Because we are changing the object's position
1172
* we need to do something if the new position is beyond the canvas size. So here it is:
1177
* Then now what we need to do is move the object:
1178
* @skipline evas_object
1180
* Here is the complete callback function:
1182
* @dontinclude signals2.c
1183
* @skip _on_mouse_over
1187
* When you compile and run it you should see this:
1188
* @image html signal2final.png
1189
* @image rtf signal2final.png
1190
* @image latex signal2final.eps width=\textwidth
1193
* @include signalsBubble.edc
1196
* @include signals2.c
1198
* To compile use this command:
1200
* gcc -o signals2 signals2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1201
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1202
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1203
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
1205
* edje_cc -id /path/to/the/image signalsBubble.edc
1210
* @page tutorial_edje_animations_2 Edje animations example 2
1212
* In this example we will make an animation of a bouncing ball.
1214
* Our focus now will be in the .edc file, because in the C source code we just load the edje object and do
1217
* We want to give the freedom to the object to use the whole canvas of our program, so lets define
1218
* the min, max of our group:
1220
* @dontinclude animations2.edc
1224
* You will notice that in our .c file the canvas will have this size
1226
* Now we will define our part that's going to be our image, the ball:
1231
* At the description block bellow we are saying that this part has an image, defining
1232
* the max and min size and it's position on the edje_object. The default state is the first
1233
* state of the part, this means that when the edje object is loaded this one is going to be showed to you.
1236
* @dontinclude animations2.edc
1241
* Now in the next description block we are saying where the ball is going to stop.
1242
* Note that we have the "inherit" property. This means we are inheriting everything from default,
1243
* except rel1 and rel2, because we are redefining it.
1250
* We defined how our object will look like and it's position during the animation,
1251
* now we need to define how it's going to act during the time. To do this we will
1252
* use the programs block
1254
* The first program block will start the animation, it will wait for the 'load' signal. This signal
1255
* is generated when the edje object is loaded. The 'after' property is saying to this program block exactly this:
1256
* "When you finish, call the program 'animation,state1' ". The 'in' property is saying, wait 0.5 seconds until you execute this program block.
1263
* Now lets make the ball move and bounce it. In the second program block we are defining what we need to do
1264
* with the action property. So we are saying change to the state "down-state" using the transition BOUNCE
1265
* and apply this to the part "part_bubble". You can notice that BOUNCE has three parameters, the first one
1266
* is saying how much time the transition will last, the second one is the factor of curviness
1267
* and the last one is saying how many times and object will bounce.
1269
* The code is very easy:
1274
* Now all you have to do is compile the code and run it!
1276
* When you compile and run it you should see this:
1277
* @image html signal2final.png
1278
* @image rtf signal2final.png
1279
* @image latex signal2final.eps width=\textwidth
1282
* @include animations2.edc
1285
* @include animations2.c
1287
* To compile use this command:
1289
* gcc -o animations2 animations2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
1290
* -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
1291
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
1292
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
1294
* edje_cc animations2.edc