tangcl
/
www-content
forked from enlightenment/www-content
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wiki page clouseau.md changed with summary [Update to new API] by Andrew Williams

This commit is contained in:
Andrew Williams 2017-12-07 02:24:15 -08:00 committed by apache
parent 4ad7a3a5c8
commit 3298ec1072
1 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
pages/develop/debug/c/clouseau.md.txt
View File

@ -23,57 +23,55 @@ The following sections will demonstrate the use of Clouseau to debug a simple "H
Create the following program in your development environment or text editor:
```c
#define EFL_EO_API_SUPPORT 1
#define EFL_BETA_API_SUPPORT 1
#include <Eina.h>
#include <Elementary.h>
#include <Efl_Ui.h>
static void
on_done(void *data, Evas_Object *obj, void *event_info)
_quit(void *data EINA_UNUSED, const Efl_Event *event EINA_UNUSED)
{
`` quit the mainloop (elm_run function will return)
elm_exit();
// quit the mainloop (elm_run function will return)
efl_exit(0);
}
EAPI_MAIN int
elm_main(int argc, char **argv)
EAPI_MAIN void
efl_main(void *data EINA_UNUSED, const Efl_Event *ev EINA_UNUSED)
{
Evas_Object *win, *box, *lab, *btn;
Efl_Ui_Win *win;
Efl_Ui_Box *box;
`` new window - new background
win = elm_win_util_standard_add("hello", "Hello");
`` when the user clicks "close" on a window there is a request to delete
evas_object_smart_callback_add(win, "delete,request", on_done, NULL);
`` add a box object - default is vertical. a box holds children in a row,
`` either horizontally or vertically. nothing more.
box = elm_box_add(win);
`` make the box horizontal
elm_box_horizontal_set(box, EINA_TRUE);
`` add object as a resize object for the window (controls window minimum
`` size as well as gets resized if window is resized)
elm_win_resize_object_add(win, box);
evas_object_show(box);
`` add a label widget, set the text and put it in the pad frame
lab = elm_label_add(win);
`` set default text of the label
elm_object_text_set(lab, "Hello out there world!");
`` pack the label at the end of the box
elm_box_pack_end(box, lab);
evas_object_show(lab);
`` add an ok button
btn = elm_button_add(win);
`` set default text of button to "OK"
elm_object_text_set(btn, "OK");
`` pack the button at the end of the box
elm_box_pack_end(box, btn);
evas_object_show(btn);
`` call on_done when button is clicked
evas_object_smart_callback_add(btn, "clicked", on_done, NULL);
`` now we are done, show the window
evas_object_show(win);
// new window - new background
win = efl_add(EFL_UI_WIN_CLASS, NULL,
efl_ui_win_type_set(efl_added, EFL_UI_WIN_BASIC),
efl_text_set(efl_added, "Hello World"),
efl_ui_win_autodel_set(efl_added, EINA_TRUE));
`` run the mainloop and process events and callbacks
elm_run();
return 0;
// when the user clicks "close" on a window there is a request to delete
efl_event_callback_add(win, EFL_UI_WIN_EVENT_DELETE_REQUEST, _quit, NULL);
// add a box object - default is vertical.
box = efl_add(EFL_UI_BOX_CLASS, win,
efl_content_set(win, efl_added),
// make the box horizontal
efl_ui_direction_set(efl_added, EFL_UI_DIR_HORIZONTAL));
// add a label widget, set the text and put it in the box
efl_add(EFL_UI_TEXT_CLASS, box,
efl_text_set(efl_added, "Hello out there world!"),
efl_ui_text_interactive_selection_allowed_set(efl_added, EINA_FALSE),
efl_pack(box, efl_added));
// add a quit button
efl_add(EFL_UI_BUTTON_CLASS, box,
efl_text_set(efl_added, "Quit"),
efl_pack(box, efl_added),
efl_event_callback_add(efl_added, EFL_UI_EVENT_CLICKED,
_quit, efl_added));
}
ELM_MAIN()
EFL_MAIN()
```
Save and compile the program as "helloworld".
@ -92,39 +90,37 @@ The following screenshot demonstrates Clouseau's output:
* Yellow - The "helloworld" application
* Red - the composition of the "helloworld" application
* Blue - the characteristic of ``Elm`` and ``Evas_object``
* Blue - the characteristic of ``Efl.Ui`` and ``Efl.Canvas``
### Exploring Hello World ###
The application is composed of three main widgets : ``Elm_win``, ``Elm_bg``, and ``Elm_box``.
The application is composed of three main widgets : ``Efl.Ui.Win``, ``Efl.Ui.Bg``, and ``Efl.Ui.Box``.
```c
win = elm_win_util_standard_add("hello", "Hello");
win = efl_add(EFL_UI_WIN_CLASS, NULL);
[...]
box = elm_box_add(win);
box = efl_add(EFL_UI_BOX_CLASS, win);
```
The ``elm_win_util_standard_add()`` function creates the window widget, ``win``, which is the root widget often used in an application. It also adds a standard background (``Elm_bg``). Then the ``elm_box_add`` function creates a ``box`` widget.
The ``efl_add(EFL_UI_WIN_CLASS, NULL)`` line creates the window widget, ``win``, which is the root widget often used in an application. It also adds a standard background (``Efl.Bg``). Then the ``efl_add(EFL_UI_BOX_CLASS, win)`` line creates a ``box`` widget.
```c
elm_box_pack_end(box, lab);
[...]
elm_box_pack_end(box, btn);
efl_pack(box, efl_added);
```
The ``elm_box_pack_end()`` functions add ``lab`` and ``btn`` widgets at the end of the pack list, so the ``lab`` and ``btn`` widgets appear inside the ``box`` widget.
The ``efl_pack()`` functions add the label and button widgets at the end of the pack list, so that they appear inside the ``box`` widget.
The blue section of the screenshot shows certain characteristics of the object and widget: their position, size, color and so on. Some of these characteristics are dynamic and can be updated with the reload button in Clouseau.
```c
elm_win_resize_object_add(win, box);
efl_content_set(win, efl_added)
```
The ``elm_win_resize_object_add()`` function controls the size of the window such that it takes up the minimum of space. You can see in the blue section that the minimum and maximum size are equal as a consequence of this function call.
The ``efl_content_set()`` function sets the content of the window such that it will resize to take up the minimum space. You can see in the blue section that the minimum and maximum size are equal as a consequence of this function call.
### Displaying All Objects ##
To control the objects that are displayed, click on the "Settings" button and deselect "Only show Elementary widgets" as per the below screenshot:
To control the objects that are displayed, click on the "Settings" button and deselect "Only show Efl.Ui widgets" as per the below screenshot:
![Clouseau Settings](/_media/settings_clouseau.png)
@ -132,6 +128,6 @@ This will display all the program's objects, demonstrating that widgets are just
![Clouseau Objects](/_media/clouseau_object.png)
Highlighted in yellow is the ``Elm_box``, which is an ``Evas_box`` composed of an ``Evas_rectangle``, an ``Elm_Label`` and an ``Elm_Button``.
Highlighted in yellow is the ``Efl.Ui.Box``, which is an ``Efl.Canvas.Box`` composed of an ``Efl.Canvas.Rectangle``, an ``Efl.Ui.Text`` and an ``Efl.Ui.Button``.
A Button widget is an Edje_Object which is composed of four ``Evas_rectangle``, one ``Evas_image`` and two ``Evas_text``.
A Button widget is an Efl.Ui.Button which is composed of four ``Efl.Canvas.Rectangle``, one ``Efl.Canvas.Image`` and two ``Efl.Canvas.Text``.