Detailed docs, examples and explanations for the elm_theme set of funtions
[framework/uifw/elementary.git] / doc / examples.dox
1 /**
2  * @page Examples Examples
3  *
4  * Here is a page with Elementary examples.
5  *
6  * @ref bg_01_example_page
7  *
8  * @ref bg_02_example_page
9  *
10  * @ref bg_03_example_page
11  *
12  * @ref actionslider_example_page
13  *
14  * @ref elm_animator_example_page_01
15  *
16  * @ref transit_example_01_explained
17  *
18  * @ref transit_example_02_explained
19  *
20  * @ref general_functions_example_page
21  */
22
23 /**
24  * @page bg_01_example_page elm_bg - Plain color background.
25  * @dontinclude bg_example_01.c
26  *
27  * The full code for this example can be found at @ref bg_example_01_c,
28  * in the function @c test_bg_plain. It's part of the @c elementar_test
29  * suite, and thus has the code for the three examples referenced by this
30  * documentation.
31  *
32  * This first example just sets a default background with a plain color. The
33  * first part consists of creating an Elementary window. It's the common
34  * piece of code that you'll see everywhere in Elementary: @skip elm_main
35  * @until autodel_set
36  *
37  * Now we really create our background object, using the window object as
38  * its parent:
39  *
40  * @skipline bg_add
41  *
42  * Then we set the size hints of the background object so that it will use
43  * all space available for it, and then add it as a resize object to the
44  * window, making it visible in the end:
45  *
46  * @skip size_hint_weight_set
47  * @until resize_object_add
48  *
49  * See @ref evas_object_size_hint_weight_set and elm_win_resize_object_add()
50  * for more detailed info about these functions.
51  *
52  * The end of the example is quite simple, just setting the minimum and
53  * maximum size of the background, so the Elementary window knows that it
54  * has to have at least the minimum size. The background also won't scale to
55  * a size above its maximum. Then we resize the window and show it in the
56  * end:
57  *
58  * @skip set size hints
59  * @until }
60  *
61  * And here we finish our very simple background object usage example.
62  */
63
64 /**
65  * @page bg_02_example_page elm_bg - Image background.
66  * @dontinclude bg_example_02.c
67  *
68  * The full code for this example can be found at @ref bg_example_02_c,
69  * in the function @c test_bg_image. It's part of the @c elementar_test
70  * suite, and thus has the code for the three examples referenced by this
71  * documentation.
72  *
73  * This is the second example, and shows how to use the Elementary
74  * background object to set an image as background of your application.
75  *
76  * We start this example exactly in the same way as the previous one, even
77  * when creating the background object:
78  *
79  * @skip elm_main
80  * @until bg_add
81  *
82  * Now it's the different part.
83  *
84  * Our background will have an image, that will be displayed over the
85  * background color. Before loading the image, we set the load size of the
86  * image. The load size is a hint about the size that we want the image
87  * displayed in the screen. It's not the exact size that the image will have,
88  * but usually a bit bigger. The background object can still be scaled to a
89  * size bigger than the one set here. Setting the image load size to
90  * something smaller than its real size will reduce the memory used to keep
91  * the pixmap representation of the image, and the time to load it. Here we
92  * set the load size to 20x20 pixels, but the image is loaded with a size
93  * bigger than that (since it's just a hint):
94  *
95  * @skipline load_size_set
96  *
97  * And set our background image to be centered, instead of stretched or
98  * scaled, so the effect of the elm_bg_load_size_set() can be easily
99  * understood:
100  *
101  * @skipline option_set
102  *
103  * We need a filename to set, so we get one from the previous installed
104  * images in the @c PACKAGE_DATA_DIR, and write its full path to a buffer.
105  * Then we use this buffer to set the filename in the background object:
106  *
107  * @skip snprintf
108  * @until bg_file_set
109  *
110  * Notice that the third argument of the elm_bg_file_set() function is @c
111  * NULL, since we are setting an image to this background. This function
112  * also supports setting an edje group as background, in which case the @c
113  * group parameter wouldn't be @c NULL, but be the name of the group
114  * instead.
115  *
116  * Finally, we can set the size hints, add the background as a resize
117  * object, and resize the window, exactly the same thing we do in the @ref
118  * bg_01_example_page example:
119  *
120  * @skip size_hint
121  * @until }
122  *
123  * And this is the end of this example.
124  *
125  * This example will look like this:
126  * @image html screenshots/bg_01.png
127  * @image latex screenshots/bg_01.eps
128  */
129
130 /**
131  * @page bg_03_example_page elm_bg - Background properties.
132  * @dontinclude bg_example_03.c
133  *
134  * The full code for this example can be found at @ref bg_example_03_c, in the
135  * function @c test_bg_options, with the callbacks @c _cb_overlay_changed, @c
136  * _cb_color_changed and @c _cb_radio_changed defined in the beginning of the
137  * file. It's part of the @c elementar_test suite, and thus has the code for
138  * the three examples referenced by this documentation.
139  *
140  * This example will show the properties available for the background object,
141  * and will use of some more widgets to set them.
142  *
143  * In order to do this, we will set some callbacks for these widgets. The
144  * first is for the radio buttons that will be used to choose the option
145  * passed as argument to elm_bg_option_set():
146  *
147  * @skip _cb_radio_changed
148  * @until }
149  *
150  * The next callback will be used when setting the overlay (using
151  * elm_bg_overlay_set()):
152  *
153  * @skip _cb_overlay_changed
154  * @until }
155  * @until }
156  *
157  * And the last one, used to set the color (with elm_bg_color_set()):
158  *
159  * @skip _cb_color_changed
160  * @until }
161  *
162  * We will get back to what these functions do soon. If you want to know more
163  * about how to set these callbacks and what these widgets are, look for:
164  * @li elm_radio_add()
165  * @li elm_check_add()
166  * @li elm_spinner_add()
167  *
168  * Now going to the main function, @c test_bg_options, we have the common
169  * code with the other examples:
170  *
171  * @skip bg-options
172  * @until autodel_set
173  *
174  * We add a plain background to this window, so it will have the default
175  * background color behind everything:
176  *
177  * @skip bg = elm_bg_add
178  * @until evas_object_show(bg)
179  *
180  * Then we add a vertical box (elm_box_add()) that will hold the background
181  * object that we are going to play with, as well as a horizontal box that
182  * will hold widgets:
183  *
184  * @skip elm_box_add
185  * @until evas_object_show
186  *
187  * Now we add the background object that is going to be of use for our
188  * example. It is an image background, as used in @ref bg_02_example_page ,
189  * so the code should be familiar:
190  *
191  * @skip elm_bg_add
192  * @until evas_object_show
193  *
194  * Notice the call to elm_box_pack_end(): it will pack the background object
195  * in the end of the Elementary box declared above. Just refer to that
196  * documentation for more info.
197  *
198  * Since this Elementary background is already an image background, we are
199  * going to play with its other properties. We will change its option
200  * (CENTER, SCALE, STRETCH, TILE), its color (RGB), and add an overlay to it.
201  * For all of these properties, we are going to add widgets that will
202  * configure them.
203  *
204  * First, lets add the horizontal box that will hold these widgets:
205  * @skip hbox
206  * @until align_set
207  *
208  * For now, just consider this @c hbox as a rectangle that will contain the
209  * widgets, and will distribute them horizontally inside its content. Then we
210  * add radio buttons that will allow us to choose the property to use with
211  * this background:
212  *
213  * @skip radio_add
214  * @until evas_object_show
215  *
216  * Again, I won't give details about the use of these widgets, just look for
217  * their documentation if necessary. It's enough to know for now that we are
218  * packing them in the @c hbox, setting a label for them, and the most
219  * important parts: setting its value to @c ELM_BG_OPTION_CENTER and its
220  * callback to @c _cb_radio_changed (the function defined in the beginning of
221  * this example). We do this for the next 3 radio buttons added after this
222  * one, each of them with a different value.
223  *
224  * Now taking a look at the code of the callback @c _cb_radio_changed again,
225  * it will call elm_bg_option_set() with the value set from the checked radio
226  * button, thus setting the option for this background. The background is
227  * passed as argument to the @p data parameter of this callback, and is
228  * referenced here as @c o_bg.
229  *
230  * Later we set the default value for this radio button:
231  *
232  * @skipline elm_radio_value_set
233  *
234  * Then we add a checkbox for the elm_bg_overlay_set() function:
235  *
236  * @skip check_add
237  * @until evas_object_show
238  *
239  * Now look at the code of the @c _cb_overlay_changed again. If the checkbox
240  * state is checked, an overlay will be added to the background. It's done by
241  * creating an Edje object, and setting it with elm_bg_overlay_set() to the
242  * background object. For information about what are and how to set Edje
243  * object, look at the Edje documentation.
244  *
245  * Finally we add a spinner object (elm_spinner_add()) to be used to select
246  * the color of our background. In its callback it's possible to see the call
247  * to elm_bg_color_set(), which will change the color of this background.
248  * This color is used by the background to fill areas where the image doesn't
249  * cover (in this case, where we have an image background). The spinner is
250  * also packed into the @c hbox :
251  *
252  * @skip elm_spinner_add
253  * @until evas_object_show
254  *
255  * Then we just have to pack the @c hbox inside the @c box, set some size
256  * hints, and show our window:
257  *
258  * @skip pack_end
259  * @until }
260  *
261  * Now to see this code in action, open elementary_test, and go to the "Bg
262  * Options" test. It should demonstrate what was implemented here.
263  */
264
265 /**
266  * @page actionslider_example_page Actionslider usage
267  * @dontinclude actionslider_example_01.c
268  *
269  * For this example we are going to assume knowledge of evas smart callbacks
270  * and some basic evas object functions. Elementary is not meant to be used
271  * without evas, if you're not yet familiar with evas it probably is worth
272  * checking that out.
273  *
274  * And now to the example, when using Elementary we start by including
275  * Elementary.h:
276  * @skipline #include
277  *
278  * Next we define some callbacks, they all share the same signature because
279  * they are all to be used with evas_object_smart_callback_add().
280  * The first one just prints the selected label(in two different ways):
281  * @until }
282  *
283  * This next callback is a little more interesting, it makes the selected
284  * label magnetic(except if it's the center label):
285  * @until }
286  *
287  * This callback enables or disables the magnetic propertty of the center
288  * label:
289  * @until }
290  *
291  * And finally a callback to stop the main loop when the window is closed:
292  * @until }
293  *
294  * To be able to create our actionsliders we need to do some setup, but this
295  * isn't really relevant here, so if you want to know about that go @ref
296  * Win "here".
297  *
298  * With all that boring stuff out of the way we can proceed to creating some
299  * actionsliders.@n
300  * All actionsliders are created the same way:
301  * @skipline actionslider_add
302  * Next we must choose where the indicator starts, and for this one we choose
303  * the right, and set the right as magnetic:
304  * @skipline indicator_pos_set
305  * @until magnet_pos_set
306  *
307  * We then set the labels for the left and right, passing NULL as an argument
308  * to any of the labels makes that position have no label.
309  * @until Stop
310  *
311  * Furthermore we mark both left and right as enabled positions, if we didn't
312  * do this all three positions would be enabled:
313  * @until RIGHT
314  *
315  * Having the the enabled positions we now add a smart callback to change
316  * which position is magnetic, so that only the last selected position is
317  * magnetic:
318  * @until NULL
319  *
320  * And finally we set our printing callback and show the actionslider:
321  * @until object_show
322  * @skip pack_end
323  *
324  * For our next actionslider we are going to do much as we did for the
325  * previous except we are going to have the center as the magnet(and not
326  * change it):
327  * @skipline actionslider_add
328  * @skipline indicator_pos_set
329  * @until object_show
330  *
331  * And another actionslider, in this one the indicator starts on the left.
332  * It has labels only in the center and right, and both bositions are
333  * magnetic. Because the left doesn't have a label and is not magnetic once
334  * the indicator leaves it can't return:
335  * @skipline actionslider_add
336  * @skipline indicator_pos_set
337  * @until object_show
338  * @note The greyed out area is a @ref Styles "style".
339  *
340  * And now an actionslider with a label in the indicator, and whose magnet
341  * properties change based on what was last selected:
342  * @skipline actionslider_add
343  * @skipline indicator_pos_set
344  * @until object_show
345  * @note The greyed out area is a @ref Styles "style".
346  *
347  * We are almost done, this next one is just an actionslider with all
348  * positions magnetized and having every possible label:
349  * @skipline actionslider_add
350  * @skipline indicator_pos_set
351  * @until object_show
352  *
353  * And for our last actionslider we have one that turns the magnetic property
354  * on and off:
355  * @skipline actionslider_add
356  * @skipline indicator_pos_set
357  * @until object_show
358  *
359  * The example will look like this:
360  * @image html screenshots/actionslider_01.png
361  * @image latex screenshots/actionslider_01.eps
362  *
363  * See the full source code @ref actionslider_example_01 "here"
364  */
365
366 /**
367  * @page elm_animator_example_page_01 Animator usage
368  * @dontinclude animator_example_01.c
369  *
370  * For this example we will be using a bit of evas, you could animate a
371  * elementary widget in much the same way, but to keep things simple we use
372  * an evas_object_rectangle.
373  *
374  * As every other example we start with our include and a simple callback to
375  * exit the app when the window is closed:
376  * @skipline #include
377  * @until }
378  *
379  * This next callback is the one that actually creates our animation, it
380  * changes the size, position and color of a rectangle given to it in @a
381  * data:
382  * @until }
383  *
384  * Next we have a callback that prints a string, nothing special:
385  * @until }
386  *
387  * This next callback is a little more interesting, it has a state variable
388  * to know if the animation is currently paused or running, and it toogles
389  * the state of the animation accordingly:
390  * @until }
391  * @until }
392  * @until }
393  *
394  * Finally we have a callback to stop the animation:
395  * @until }
396  *
397  * As with every example we need to do a bit of setup before we can actually
398  * use an animation, but for the purposes of this example that's not relevant
399  * so let's just skip to the good stuff, creating an animator:
400  * @skipline animator_add
401  * @note Since elm_animator is not a widget we can give it a NULL parent.
402  *
403  * Now that we have an elm_animator we set it's duration to 1 second:
404  * @line duration_set
405  *
406  * We would also like our animation to be reversible, so:
407  * @line reverse_set
408  *
409  * We also set our animation to repeat as many times as possible, which will
410  * mean that _end_cb will only be called after UINT_MAX * 2 seconds(UINT_MAX
411  * for the animation running forward and UNIT_MAX for the animation running
412  * backwards):
413  * @line repeat_set
414  *
415  * To add some fun to our animation we will use the IN_OUT curve style:
416  * @line curve_style
417  *
418  * To actually animate anything we need an operation callback:
419  * @line operation_callback
420  *
421  * Even though we set our animation to repeat for a very long time we are
422  * going to set a end callback to it:
423  * @line completion_callback
424  * @note Notice that stoping the animation with the stop button will not make
425  * _end_cb be called.
426  *
427  * Now that we have fully set up our animator we can tell it to start
428  * animating:
429  * @line animate
430  *
431  * There's a bit more of code that doesn't really matter to use so we skip
432  * right down to our last interesting point:
433  * @skipline animator_del
434  * @note Because we created our animator with no parent we need to delete it
435  * ourselves.
436  *
437  * The example should look like this:
438  * @image html screenshots/animator_example_01.png
439  * @image latex screenshots/animator_example_01.eps
440  * @n
441  * @image html screenshots/animator_example_02.png
442  * @image latex screenshots/animator_example_02.eps
443  * @n
444  * @image html screenshots/animator_example_03.png
445  * @image latex screenshots/animator_example_03.eps
446  *
447  * The full source code for this example can be found @ref
448  * animator_example_01_c "here"
449  */
450
451 /**
452  * @page transit_example_03_c elm_transit - Combined effects and options.
453  *
454  * This example shows how to apply the following transition effects:
455  * @li translation
456  * @li color
457  * @li rotation
458  * @li wipe
459  * @li zoom
460  * @li resizing
461  *
462  * It allows you to apply more than one effect at once, and also allows to
463  * set properties like event_enabled, auto_reverse, repeat_times and
464  * tween_mode.
465  *
466  * @include transit_example_03.c
467  */
468
469 /**
470  * @page transit_example_04_c elm_transit - Combined effects over two objects.
471  *
472  * This example shows how to apply the transition effects:
473  * @li flip
474  * @li resizable_flip
475  * @li fade
476  * @li blend
477  * over two objects. This kind of transition effect is used to make one
478  * object disappear and another one appear on its place.
479  *
480  * You can mix more than one effect of this type on the same objects, and the
481  * transition will apply both.
482  *
483  * @include transit_example_04.c
484  */
485
486 /**
487  * @page transit_example_01_explained elm_transit - Basic transit usage.
488  * @dontinclude transit_example_01.c
489  *
490  * The full code for this example can be found at @ref transit_example_01_c.
491  *
492  * This example shows the simplest way of creating a transition and applying
493  * it to an object. Similarly to every other elementary example, we create a
494  * window, set its title, size, autodel property, and setup a callback to
495  * exit the program when finished:
496  *
497  * @skip on_done
498  * @until evas_object_resize
499  *
500  * We also add a resizeable white background to use behind our animation:
501  *
502  * @skip bg_add
503  * @until evas_object_show
504  *
505  * And then we add a button that we will use to demonstrate the effects of
506  * our animation:
507  *
508  * @skip button_add
509  * @until evas_object_show(win)
510  *
511  * Notice that we are not adding the button with elm_win_resize_object_add()
512  * because we don't want the window to control the size of the button. We
513  * will use the transition to change the button size, so it could conflict
514  * with something else trying to control that size.
515  *
516  * Now, the simplest code possible to create the resize animation:
517  *
518  * @skip transit_add
519  * @until transit_go
520  *
521  * As you can see, this code is very easy to understand. First, we create the
522  * transition itself with elm_transit_add(). Then we add the button to this
523  * transition with elm_transit_object_add(), which means that the transition
524  * will operate over this button. The effect that we want now is changing the
525  * object size from 100x50 to 300x150, and can be achieved by adding the
526  * resize effect with elm_transit_effect_resizing_add().
527  *
528  * Finally, we set the transition time to 5 seconds and start the transition
529  * with elm_transit_go(). If we wanted more effects applied to this
530  * button, we could add them to the same transition. See the
531  * @ref transit_example_03_c to watch many transitions being applied to an
532  * object.
533  */
534
535 /**
536  * @page transit_example_02_explained elm_transit - Chained transitions.
537  * @dontinclude transit_example_02.c
538  *
539  * The full code for this example can be found at @ref transit_example_02_c.
540  *
541  * This example shows how to implement a chain of transitions. This chain is
542  * used to start a transition just after another transition ended. Similarly
543  * to every other elementary example, we create a window, set its title,
544  * size, autodel property, and setup a callback to exit the program when
545  * finished:
546  *
547  * @skip on_done
548  * @until evas_object_resize
549  *
550  * We also add a resizeable white background to use behind our animation:
551  *
552  * @skip bg_add
553  * @until evas_object_show
554  *
555  * This example will have a chain of 4 transitions, each of them applied to
556  * one button. Thus we create 4 different buttons:
557  *
558  * @skip button_add
559  * @until evas_object_show(bt4)
560  *
561  * Now we create a simple translation transition that will be started as soon
562  * as the program loads. It will be our first transition, and the other
563  * transitions will be started just after this transition ends:
564  *
565  * @skip transit_add
566  * @until transit_go
567  *
568  * The code displayed until now has nothing different from what you have
569  * already seen in @ref transit_example_01_explained, but now comes the new
570  * part: instead of creating a second transition that will start later using
571  * a timer, we create the it normally, and use
572  * elm_transit_chain_transit_add() instead of elm_transit_go. Since we are
573  * adding it in a chain after the first transition, it will start as soon as
574  * the first transition ends:
575  *
576  * @skip transit_add
577  * @until transit_chain_transit_add
578  *
579  * Finally we add the 2 other transitions to the chain, and run our program.
580  * It will make one transition start after the other finish, and there is the
581  * transition chain.
582  */
583
584 /**
585  * @page general_functions_example_page General (top-level) functions example
586  * @dontinclude general_funcs_example.c
587  *
588  * As told in their documentation blocks, the
589  * elm_app_compile_*_dir_set() family of functions have to be called
590  * before elm_app_info_set():
591  * @skip tell elm about
592  * @until elm_app_info_set
593  *
594  * We are here setting the fallback paths to the compiling time target
595  * paths, naturally. If you're building the example out of the
596  * project's build system, we're assuming they are the canonical ones.
597  *
598  * After the program starts, elm_app_info_set() will actually run and
599  * then you'll see an intrincasy: Elementary does the prefix lookup @b
600  * twice. This is so because of the quicklaunch infrastructure in
601  * Elementary (@ref Start), which will register a predefined prefix
602  * for possible users of the launch schema. We're not hooking into a
603  * quick launch, so this first call can't be avoided.
604  *
605  * If you ran this example from your "bindir" installation
606  * directiory, no output will emerge from these both attempts -- it
607  * will find the "magic" file there registered and set the prefixes
608  * silently. Otherwise, you could get something like:
609  @verbatim
610  WARNING: Could not determine its installed prefix for 'ELM'
611        so am falling back on the compiled in default:
612          usr
613        implied by the following:
614          bindir    = usr/lib
615          libdir    = usr/lib
616          datadir   = usr/share/elementary
617          localedir = usr/share/locale
618        Try setting the following environment variables:
619          ELM_PREFIX     - points to the base prefix of install
620        or the next 4 variables
621          ELM_BIN_DIR    - provide a specific binary directory
622          ELM_LIB_DIR    - provide a specific library directory
623          ELM_DATA_DIR   - provide a specific data directory
624          ELM_LOCALE_DIR - provide a specific locale directory
625  @endverbatim
626  * if you also didn't change those environment variables (remember
627  * they are also a valid way of communicating your prefix to the
628  * binary) - this is the scenario where it fallbacks to the paths set
629  * for compile time.
630  *
631  * Then, you can check the prefixes set on the standard output:
632  * @skip prefix was set to
633  * @until locale directory is
634  *
635  * In the fragment
636  * @skip by using this policy
637  * @until elm_win_autodel_set
638  * we demonstrate the use of Elementary policies. The policy defining
639  * under which circunstances our application should quit automatically
640  * is set to when its last window is closed (this one has just one
641  * window, though). This will save us from having to set a callback
642  * ourselves on the window, like done in @ref bg_example_01_c "this"
643  * example. Note that we need to tell the window to delete itself's
644  * object on a request to destroy the canvas coming, with
645  * elm_win_autodel_set().
646  *
647  * What follows is some boilerplate code, creating a frame with a @b
648  * button, our object of interest, and, below, widgets to change the
649  * button's behavior and exemplify the group of functions in question.
650  *
651  * @dontinclude general_funcs_example.c
652  * We enabled the focus highlight object for this window, so that you
653  * can keep track of the current focused object better:
654  * @skip elm_win_focus_highlight_enabled_set
655  * @until evas_object_show
656  * Use the tab key to navigate through the focus chain.
657  *
658  * @dontinclude general_funcs_example.c
659  * While creating the button, we exemplify how to use Elementary's
660  * finger size information to scale our UI:
661  * @skip fprintf(stdout, "Elementary
662  * @until evas_object_show
663  *
664  * @dontinclude general_funcs_example.c
665  * The first checkbox's callback is:
666  * @skip static void
667  * @until }
668  * When unsetting the checkbox, we disable the button, which will get a new
669  * decoration (greyed out) and stop receiving events. The focus chain
670  * will also ignore it.
671  *
672  * Following, there are 2 more buttons whose actions are focus/unfocus
673  * the top button, respectively:
674  * @skip focus callback
675  * @until }
676  * and
677  * @skip unfocus callback
678  * @until }
679  * Note the situations in which they won't take effect:
680  * - the button is not allowed to get focus or
681  * - the button is disabled
682  *
683  * The first restriction above you'll get by a second checkbox, whose
684  * callback is:
685  * @skip focus allow callback
686  * @until }
687  * Note that the button will still get mouse events, though.
688  *
689  * Next, there's a slider controlling the button's scale:
690  * @skip scaling callback
691  * @until }
692  *
693  * Experiment with it, so you understand the effect better. If you
694  * change its value, it will mess with the button's original size,
695  * naturally.
696  *
697  * The full code for this example can be found
698  * @ref general_functions_example_c "here".
699  */
700
701 /**
702  * @page theme_example_01 Theme - Using extensions
703  *
704  * @dontinclude theme_example_01.c
705  *
706  * Using extensions is extremely easy, discarding the part where you have to
707  * write the theme for them.
708  *
709  * In the following example we'll be creating two buttons, one to load or
710  * unload our extension theme and one to cycle around three possible styles,
711  * one of which we created.
712  *
713  * After including our one and only header we'll jump to the callback for
714  * the buttons. First one takes care of loading or unloading our extension
715  * file, relative to the default theme set (thus the @c NULL in the
716  * functions first parameter).
717  * @skipline Elementary.h
718  * @skip static void
719  * @until }
720  * @until }
721  * @until }
722  *
723  * The second button, as we said before, will just switch around different
724  * styles. In this case we have three of them. The first one is our custom
725  * style, named after something very unlikely to find in the default theme.
726  * The other two styles are the standard and one more, anchor, which exists
727  * in the default and is similar to the default, except the button vanishes
728  * when the mouse is not over it.
729  * @skip static void
730  * @until }
731  * @until }
732  *
733  * So what happens if the style switches to our custom one when the
734  * extension is loaded? Elementary falls back to the default for the
735  * widget.
736  *
737  * And the main function, simply enough, will create the window, set the
738  * buttons and their callbacks, and just to begin with our button styled
739  * we're also loading our extension at the beginning.
740  * @skip int
741  * @until ELM_MAIN
742  *
743  * In this case we wanted to easily remove extensions, but all adding an
744  * extension does is tell Elementary where else it should look for themes
745  * when it can't find them in the default theme. Another way to do this
746  * is to set the theme search order using elm_theme_set(), but this requires
747  * that the developer is careful not to override any user configuration.
748  * That can be helped by adding our theme to the end of whatver is already
749  * set, like in the following snippet.
750  * @code
751  * char buf[4096];
752  * snprintf(buf, sizeof(buf), "%s:./theme_example.edj", elme_theme_get(NULL);
753  * elm_theme_set(NULL, buf);
754  * @endcode
755  *
756  * If we were using overlays instead of extensions, the same thing applies,
757  * but the custom theme must be added to the front of the search path.
758  *
759  * In the end, we should be looking at something like this:
760  * @image html screenshots/theme_example_01.png
761  * @image latex screenhots/theme_example_01.eps
762  *
763  * That's all. Boringly simple, and the full code in one piece can be found
764  * @ref theme_example_01.c "here".
765  *
766  * And the code for our extension is @ref theme_example.edc "here".
767  *
768  * @example theme_example_01.c
769  * @example theme_example.edc
770  */
771
772 /**
773  * @page theme_example_02 Theme - Using overlays
774  *
775  * @dontinclude theme_example_02.c
776  *
777  * Overlays are like extensions in that you tell Elementary that some other
778  * theme contains the styles you need for your program. The difference is that
779  * they will be look in first, so they can override the default style of any
780  * widget.
781  *
782  * There's not much to say about them that hasn't been said in our previous
783  * example about @ref theme_example_01 "extensions", so going quickly through
784  * the code we have a function to load or unload the theme, which will be
785  * called when we click any button.
786  * @skipline Elementary.h
787  * @skip static void
788  * @until }
789  *
790  * And the main function, creating the window and adding some buttons to it.
791  * We load our theme as an overlay and nothing else. Notice there's no style
792  * set for any button there, which means they should be using the default
793  * that we override.
794  * @skip int
795  * @until ELM_MAIN
796  *
797  * That's pretty much it. The full code is @ref theme_example_02.c "here" and
798  * the definition of the theme is the same as before, and can be found in
799  * @ref theme_example.edc "here".
800  *
801  * @example theme_example_02.c
802  */
803
804 /**
805  * @page bg_example_01_c bg_example_01.c
806  * @include bg_example_01.c
807  * @example bg_example_01.c
808  */
809
810 /**
811  * @page bg_example_02_c bg_example_02.c
812  * @include bg_example_02.c
813  * @example bg_example_02.c
814  */
815
816 /**
817  * @page bg_example_03_c bg_example_03.c
818  * @include bg_example_03.c
819  * @example bg_example_03.c
820  */
821
822 /**
823  * @page actionslider_example_01 Actionslider example
824  * @include actionslider_example_01.c
825  * @example actionslider_example_01.c
826  */
827
828 /**
829  * @page animator_example_01_c Animator example 01
830  * @include animator_example_01.c
831  * @example animator_example_01.c
832  */
833
834 /**
835  * @page transit_example_01_c Transit example 1
836  * @include transit_example_01.c
837  * @example transit_example_01.c
838  */
839
840 /**
841  * @page transit_example_02_c Transit example 2
842  * @include transit_example_02.c
843  * @example transit_example_02.c
844  */
845
846 /**
847  * @page general_functions_example_c General (top-level) functions example
848  * @include general_funcs_example.c
849  * @example general_funcs_example.c
850  */