Hover example

On this example we are going to have a button that when clicked will show our hover widget, this hover will have content set on it's left, top, right and middle positions. In the middle position we are placing a button that when clicked will hide the hover. We are also going to use a non-default theme for our hover. We won't explain the functioning of button for that see Button.

We start our example with a couple of callbacks that show and hide the data they're given(which we'll see later on is the hover widget):

static void
_show_hover(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
evas_object_show(data);
}
EINA_UNUSED
#define EINA_UNUSED
Used to indicate that a function parameter is purposely unused.
Definition: eina_types.h:339
evas_object_show
EVAS_API void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition: evas_object_main.c:1814
Evas_Object
Efl_Canvas_Object Evas_Object
An Evas Object handle.
Definition: Evas_Common.h:185
static void
_hide_hover(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
evas_object_hide(data);
}
evas_object_hide
EVAS_API void evas_object_hide(Evas_Object *eo_obj)
Makes the given Evas object invisible.
Definition: evas_object_main.c:1823

In our main function we'll do some initialization and then create 3 rectangles, one red, one green and one blue to use in our hover. We'll also create the 2 buttons that will show and hide the hover:

EAPI_MAIN int
elm_main(int argc EINA_UNUSED, char **argv EINA_UNUSED)
{
Evas_Object *win, *bt, *bt2, *rect, *rect2, *rect3, *hover;
elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
win = elm_win_util_standard_add("hover", "Hover");
elm_win_autodel_set(win, EINA_TRUE);
rect = evas_object_rectangle_add(evas_object_evas_get(win));
evas_object_size_hint_min_set(rect, 25, 25);
evas_object_color_set(rect, 255, 0, 0, 255);
evas_object_show(rect);
rect2 = evas_object_rectangle_add(evas_object_evas_get(win));
evas_object_size_hint_min_set(rect2, 25, 25);
evas_object_color_set(rect2, 0, 255, 0, 255);
evas_object_show(rect2);
rect3 = evas_object_rectangle_add(evas_object_evas_get(win));
evas_object_size_hint_min_set(rect3, 25, 25);
evas_object_color_set(rect3, 0, 0, 255, 255);
evas_object_show(rect3);
bt = elm_button_add(win);
elm_object_text_set(bt, "Show hover");
evas_object_move(bt, 60, 90);
evas_object_resize(bt, 80, 20);
evas_object_show(bt);
bt2 = elm_button_add(win);
elm_object_text_set(bt2, "Hide hover");
evas_object_show(bt2);
EINA_TRUE
#define EINA_TRUE
boolean value TRUE (numerical value 1)
Definition: eina_types.h:539
elm_button_add
Evas_Object * elm_button_add(Evas_Object *parent)
Add a new button to the parent's canvas.
Definition: efl_ui_button.c:459
elm_policy_set
Eina_Bool elm_policy_set(unsigned int policy, int value)
Set a new policy's value (for a given policy group/identifier).
Definition: elm_main.c:1380
ELM_POLICY_QUIT_LAST_WINDOW_CLOSED
@ ELM_POLICY_QUIT_LAST_WINDOW_CLOSED
quit when the application's last window is closed
Definition: elm_general.h:248
ELM_POLICY_QUIT
@ ELM_POLICY_QUIT
under which circumstances the application should quit automatically.
Definition: elm_general.h:227
elm_win_autodel_set
void elm_win_autodel_set(Eo *obj, Eina_Bool autodel)
Set the window's autodel state.
Definition: efl_ui_win.c:6189
elm_win_util_standard_add
Evas_Object * elm_win_util_standard_add(const char *name, const char *title)
Adds a window object with standard setup.
Definition: efl_ui_win.c:9576
evas_object_color_set
EVAS_API void evas_object_color_set(Evas_Object *obj, int r, int g, int b, int a)
Sets the general/main color of the given Evas object to the given one.
Definition: evas_object_main.c:2024
evas_object_move
EVAS_API void evas_object_move(Evas_Object *obj, Evas_Coord x, Evas_Coord y)
Move the given Evas object to the given location inside its canvas' viewport.
Definition: evas_object_main.c:1171
evas_object_resize
EVAS_API void evas_object_resize(Evas_Object *obj, Evas_Coord w, Evas_Coord h)
Changes the size of the given Evas object.
Definition: evas_object_main.c:1236
evas_object_evas_get
EVAS_API Evas * evas_object_evas_get(const Eo *eo_obj)
Get the Evas to which this object belongs to.
Definition: evas_object_main.c:2662
evas_object_size_hint_min_set
EVAS_API void evas_object_size_hint_min_set(Evas_Object *obj, Evas_Coord w, Evas_Coord h)
Sets the hints for an object's minimum size.
Definition: evas_object_main.c:2611
evas_object_rectangle_add
EVAS_API Evas_Object * evas_object_rectangle_add(Evas *e)
Adds a rectangle to the given evas.
Definition: evas_object_rectangle.c:78

With all of that squared away we can now get to the heart of the matter, creating our hover widget, which is easy as pie:

hover = elm_hover_add(win);
elm_hover_add
Evas_Object * elm_hover_add(Evas_Object *parent)
Adds a hover object to parent.
Definition: elm_hover.c:685

Having created our hover we now need to set the parent and target. Which if you recall from the function documentations are going to tell the hover which area it should cover and where it should be centered:

elm_hover_parent_set(hover, win);
elm_hover_target_set(hover, bt);
elm_hover_parent_set
void elm_hover_parent_set(Evas_Object *obj, Evas_Object *parent)
Sets the parent object for the hover.
Definition: elm_hover.c:757

Now we set the theme for our hover. We're using the popout theme which gives our contents a white background and causes their appearance to be animated:

elm_object_style_set(hover, "popout");
elm_object_style_set
Eina_Bool elm_object_style_set(Evas_Object *obj, const char *style)
Set the style to used by a given widget.
Definition: elm_main.c:1583

And finally we set the content for our positions:

elm_object_part_content_set(hover, "left", rect);
elm_object_part_content_set(hover, "top", rect2);
elm_object_part_content_set(hover, "right", rect3);
elm_object_part_content_set(hover, "middle", bt2);
elm_object_part_content_set
void elm_object_part_content_set(Evas_Object *obj, const char *part, Evas_Object *content)
Set the content on part of a given container widget.
Definition: elm_main.c:1562

So far so good? Great 'cause that's all there is too it, what is left now is just connecting our buttons to the callbacks we defined at the beginning of the example and run the main loop:

evas_object_smart_callback_add(bt, "clicked", _show_hover, hover);
evas_object_smart_callback_add(bt2, "clicked", _hide_hover, hover);
evas_object_resize(win, 200, 200);
evas_object_show(win);
elm_run();
return 0;
}
ELM_MAIN()
ELM_MAIN
#define ELM_MAIN()
macro to be used after the elm_main() function
Definition: elm_general.h:556
elm_run
void elm_run(void)
Run Elementary's main loop.
Definition: elm_main.c:1357
evas_object_smart_callback_add
EVAS_API void evas_object_smart_callback_add(Evas_Object *eo_obj, const char *event, Evas_Smart_Cb func, const void *data)
Add (register) a callback function to the smart event specified by event on the smart object obj.
Definition: evas_object_smart.c:1040

Our example will initially look like this:

And after you click the "Show hover" button it will look like this: