Wearable native

Button: Using Buttons

This tutorial teaches the basics of the button component interactions.

This feature is supported in wearable applications only.

Warm-up

Become familiar with the Button API basics by learning about:

Initializing the Button Application

This use case creates an application with a window entitled "Button Basic Tutorial". The window consists of a box component, and a button is placed inside the box.

To create a typical elementary application:

static void
create_base_gui(appdata_s *ad) 
{
   // Window
   Evas_Object *btn1, *btn2, *btn3;

   ad->win = elm_win_util_standard_add("main", "Button Basic Tutorial");
   elm_win_autodel_set(ad->win, EINA_TRUE);

   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

   ad->box = elm_box_add(ad->win);
   evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_show(ad->box);
   elm_win_resize_object_add(ad->win, ad->box);

   create_button(ad->box);

   // Show the window after the base GUI is set up
   evas_object_show(ad->win);
}

static bool
app_create(void *data)
{
   appdata_s *ad = data;
   create_base_gui(ad);

   return true;
}

int
main(int argc, char **argv)
{
   struct app_data ad = {0,};
   ui_app_lifecycle_callback_s event_callback = {0,};

   event_callback.create = app_create;

   return ui_app_main(&argc, &argv, &event_callback, &ad);
}

Using Button Styles

The basic application code is the same as in the Hello World example.

To use various button styles:

  1. To create buttons using various styles:

    • Create a basic text-only button: 
      Evas_Object* button;

button = elm_button_add(box);
elm_object_text_set(button, "Click me");
evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
elm_box_pack_end(box, button);
evas_object_show(button);
    • Create a basic icon button (no text, just an icon): 
      Evas_Object* button2;
Evas_Object* icon2;

button2 = elm_button_add(box);
icon2 = elm_icon_add(box);
elm_image_file_set(icon2, "icon.png", NULL);
elm_object_content_set(button2, icon2);
evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5);
elm_box_pack_end(box, button2);
evas_object_show(button2);
    • Create a button with both an icon and a text label: 
      Evas_Object* button3;
Evas_Object* icon3;
button3 = elm_button_add(box);
icon3 = elm_icon_add(box);
elm_image_file_set(icon3, "icon.png", NULL);
elm_object_content_set(button3, icon3);
elm_object_text_set(button3, "Press me");
evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5);
elm_box_pack_end(box, button3);
evas_object_show(button3);

  2. To disable a button so that it is not in use, only shown:

    elm_object_disabled_set(button2, EINA_TRUE);

Managing Button Events

The Elementary buttons respond to user interactions with several events.

To manage button events:

  • Handle click events:

    The "click" event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.

    static void _button_click_cb(void *data, Evas_Object *button, void *ev) 
{
   elm_object_text_set(button, "Clicked!");
}
evas_object_smart_callback_add(button, "clicked", _button_click_cb, NULL);
  • Handle press and unpress events:

    The button can respond to the separate press and unpress events instead of the entire click event.

    static void _button_press_cb(void *data, Evas_Object *button, void *ev) 
{
   elm_object_text_set(button, "Pressed!");
}
static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) 
{
   elm_object_text_set(button, "Unpressed!");
}

evas_object_smart_callback_add(button3, "pressed", _button_press_cb, NULL);
evas_object_smart_callback_add(button3, "unpressed", _button_unpress_cb, NULL);
  • Handle repeated events:

    The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.

    static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) 
{
   static int count = 0;
   char buf[16];

   snprintf(buf, sizeof(buf), "Repeat %d", count++);

   elm_object_text_set(button, buf);
}

elm_button_autorepeat_set(button3, EINA_TRUE);
elm_button_autorepeat_initial_timeout_set(button3, 1.0);
elm_button_autorepeat_gap_timeout_set(button3, 0.5);
evas_object_smart_callback_add(button3, "repeated", _button_repeat_cb, NULL);
Go to top