2011-07-29 09:45:49 -07:00
|
|
|
/**
|
|
|
|
* @page Examples Examples
|
|
|
|
*
|
|
|
|
* Here is a page with examples.
|
|
|
|
*
|
2011-08-01 12:49:06 -07:00
|
|
|
* @li @ref Example_Edje_Basics
|
|
|
|
* @li @ref tutorial_edje_swallow
|
2011-08-01 12:49:18 -07:00
|
|
|
* @li @ref tutorial_edje_text
|
2011-08-01 13:15:23 -07:00
|
|
|
* @li @ref tutorial_edje_table
|
2011-08-03 11:57:38 -07:00
|
|
|
* @li @ref tutorial_edje_color_class
|
2011-08-01 13:15:23 -07:00
|
|
|
* @li @ref Example_Edje_Signals_Messages
|
2011-08-02 10:14:29 -07:00
|
|
|
* @li @ref tutorial_edje_box
|
|
|
|
* @li @ref tutorial_edje_box2
|
2011-08-03 14:11:30 -07:00
|
|
|
* @li @ref tutorial_edje_drag
|
2011-08-05 12:53:10 -07:00
|
|
|
* @li @ref tutorial_edje_perspective
|
2011-08-05 06:52:14 -07:00
|
|
|
* @li @ref tutorial_edje_animations
|
2011-07-29 09:45:49 -07:00
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @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 acces 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 minumim 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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-basics-example.eps width=\textwidth
|
2011-07-29 09:45:49 -07:00
|
|
|
*
|
|
|
|
* The full example follows.
|
|
|
|
*
|
|
|
|
* @include edje-basic.c
|
|
|
|
* @example edje-basic.c
|
|
|
|
*/
|
2011-07-29 09:47:06 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @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
|
|
|
|
* @example edje-swallow.c
|
2011-08-01 12:49:18 -07:00
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @page tutorial_edje_text Edje Text example
|
|
|
|
* @dontinclude edje-text.c
|
|
|
|
*
|
|
|
|
* 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:
|
|
|
|
* @skip _on_destroy
|
|
|
|
* @skip static void
|
|
|
|
* @until }
|
|
|
|
*
|
|
|
|
* @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:
|
|
|
|
* @until text_set
|
|
|
|
* @until text_set
|
|
|
|
* @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:
|
|
|
|
* @until select_allow
|
|
|
|
*
|
|
|
|
* We then select the entire text, and print the selected text:
|
|
|
|
* @until printf
|
|
|
|
*
|
|
|
|
* We now unselect the entire text(set selection to none), and print the
|
|
|
|
* selected text:
|
|
|
|
* @until printf
|
|
|
|
*
|
|
|
|
* Our example will look like this:
|
|
|
|
*
|
|
|
|
* @image html edje-text.png
|
|
|
|
* @image rtf edje-text.png
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-text.eps width=\textwidth
|
2011-08-01 12:49:18 -07:00
|
|
|
*
|
|
|
|
* The full source code follows:
|
|
|
|
* @include edje-text.c
|
|
|
|
* @example edje-text.c
|
|
|
|
*
|
|
|
|
* The theme used in this example is:
|
|
|
|
* @include text.edc
|
|
|
|
* @example text.edc
|
2011-08-01 13:04:17 -07:00
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @page tutorial_edje_table Table example
|
|
|
|
*
|
|
|
|
* In this example, we illustrate how to organize your objects on a table, using
|
2011-08-02 10:14:29 -07:00
|
|
|
* the edje_object_part_table functions. To be easier to understand the objects
|
2011-08-01 13:04:17 -07:00
|
|
|
* 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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-table-example.eps width=\textwidth
|
2011-08-01 13:04:17 -07:00
|
|
|
*
|
|
|
|
* The full source code follows:
|
|
|
|
* @include edje-table.c
|
|
|
|
* @example edje-table.c
|
|
|
|
*/
|
2011-08-01 13:15:23 -07:00
|
|
|
|
2011-08-02 10:14:29 -07:00
|
|
|
/**
|
|
|
|
* @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:
|
|
|
|
*
|
|
|
|
* @skip main
|
|
|
|
* @until evas_object_show(app.edje)
|
|
|
|
*
|
|
|
|
* 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.
|
|
|
|
*
|
|
|
|
* @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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-box-example.eps width=\textwidth
|
2011-08-02 10:14:29 -07:00
|
|
|
*
|
|
|
|
* The full source code follows:
|
|
|
|
* @include edje-box.c
|
|
|
|
* @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 struct _App
|
|
|
|
* @skip static
|
|
|
|
* @until }
|
|
|
|
* @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:
|
|
|
|
*
|
|
|
|
* @skipline edje_box_layout_register
|
|
|
|
*
|
|
|
|
* And use it inside the .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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-box2-example.eps width=\textwidth
|
2011-08-02 10:14:29 -07:00
|
|
|
*
|
|
|
|
* The full source code follows:
|
|
|
|
* @include edje-box2.c
|
|
|
|
* @example edje-box2.c
|
|
|
|
*/
|
|
|
|
|
2011-08-03 14:11:30 -07:00
|
|
|
/**
|
|
|
|
* @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 value changed
|
|
|
|
* @skip }
|
|
|
|
* @skip int
|
|
|
|
* @until evas_object_show(app.edje)
|
|
|
|
*
|
|
|
|
* 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:
|
|
|
|
*
|
|
|
|
* @until _knob_moved_cb
|
|
|
|
*
|
|
|
|
* Now, let's take a look at our key down callback:
|
|
|
|
*
|
|
|
|
* @dontinclude edje-drag.c
|
|
|
|
* @skip _canvas_resize_cb
|
|
|
|
* @skip static
|
|
|
|
* @until unhandled key
|
|
|
|
* @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:
|
|
|
|
*
|
|
|
|
* @until }
|
|
|
|
*
|
|
|
|
* The example's window should look like this picture:
|
|
|
|
*
|
|
|
|
* @image html edje-drag-example.png
|
|
|
|
* @image rtf edje-drag-example.png
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-drag-example.eps width=\textwidth
|
2011-08-03 14:11:30 -07:00
|
|
|
*
|
|
|
|
* The full source code follows:
|
|
|
|
* @include edje-drag.c
|
|
|
|
* @example edje-drag.c
|
|
|
|
*/
|
|
|
|
|
2011-08-05 12:53:10 -07:00
|
|
|
/**
|
|
|
|
* @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.edje)
|
|
|
|
*
|
|
|
|
* 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:
|
|
|
|
*
|
|
|
|
* @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
|
|
|
|
* @example edje-perspective.c
|
|
|
|
*/
|
|
|
|
|
2011-08-01 13:15:23 -07:00
|
|
|
/**
|
|
|
|
* @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_cb. 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_cb
|
|
|
|
* @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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-signals-messages-example.eps width=\textwidth
|
2011-08-01 13:15:23 -07:00
|
|
|
*
|
|
|
|
* The full example follows, along with its EDC file.
|
|
|
|
*
|
|
|
|
* @include signals-messages.edc
|
|
|
|
* @include edje-signals-messages.c
|
|
|
|
* @example edje-signals-messages.c
|
|
|
|
*/
|
2011-08-03 11:57:38 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @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 proccess 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, althoug 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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-color-class-example.eps width=\textwidth
|
2011-08-05 09:08:07 -07:00
|
|
|
* @n
|
|
|
|
* @image html edje-color-class-example2.png
|
|
|
|
* @image rtf edje-color-class-example2.png
|
|
|
|
* @image latex edje-color-class-example2.eps width=\textwidth
|
2011-08-03 11:57:38 -07:00
|
|
|
*
|
|
|
|
* The full source code follows:
|
|
|
|
* @include edje-color-class.c
|
|
|
|
* @example edje-color-class.c
|
|
|
|
*
|
|
|
|
* The theme used in this example is:
|
|
|
|
* @include color-class.edc
|
|
|
|
* @example color-class.edc
|
|
|
|
*/
|
2011-08-05 06:52:14 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @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_cb
|
|
|
|
* @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
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-animations.eps width=\textwidth
|
2011-08-05 09:08:07 -07:00
|
|
|
* @n
|
2011-08-05 06:52:14 -07:00
|
|
|
* @image html edje-animations2.png
|
|
|
|
* @image rtf edje-animations2.png
|
2011-08-05 07:25:33 -07:00
|
|
|
* @image latex edje-animations2.eps width=\textwidth
|
2011-08-05 06:52:14 -07:00
|
|
|
*
|
|
|
|
* The full example follows.
|
|
|
|
*
|
|
|
|
* @include edje-animations.c
|
|
|
|
* @include animations.edc
|
|
|
|
*/
|