Popup: Using Popups

This tutorial teaches the basics of the popup component interactions.

This feature is supported in wearable applications only.

Warm-up

Become familiar with the Popup API basics by learning about:

• Initializing the Popup Application

  Create a base application where popups can be used.

• Using Popup Styles

  Create various popup styles to customize the your popup.

• Managing Popup Events

  Handle various popup events.

Initializing the Popup Application

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

To create a typical elementary application:

static void
create_base_gui(appdata_s *ad)
{
   // Window
   ad->win = elm_win_util_standard_add("main", "Popup 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);

   // Conformant
   ad->conform = elm_conformant_add(ad->win);
   elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
   elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
   evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(ad->win, ad->conform);
   evas_object_show(ad->conform);

   create_popup(ad->conform);

   // 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 Popup Styles

To create popups using various styles:

• Create a basic text-only popup:

  Evas_Object *popup;
  struct appdata *ad;
  ad = (struct appdata *) data;
  
  popup = elm_popup_add(ad->win_main);
  evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
  eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
  elm_object_text_set(popup, "This has only texts");
  evas_object_show(popup);
  

• Create a popup with a title and text. The title,text attribute is the title area text part that defines the title label.

  Evas_Object *popup;
  struct appdata *ad;
  ad = (struct appdata *) data;
  
  popup = elm_popup_add(ad->win_main);
  evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
  elm_object_part_text_set(popup, "title,text", "Title");
  elm_object_text_set(popup,"This Popup has title area and text");
  eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
  evas_object_show(popup);
  

• Create a popup with a title, text, and 2 buttons:

  Evas_Object *popup;
  Evas_Object *btn;
  struct appdata *ad = (struct appdata *) data;
  
  popup = elm_popup_add(ad->win_main);
  evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
  elm_object_part_text_set(popup, "title,text", "Title");
  eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
  elm_object_text_set(popup, "This is title text 2button popup");
  
  btn = elm_button_add(popup);
  elm_object_style_set(btn, "popup");
  evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_object_text_set(btn, "Cancel");
  elm_object_part_content_set(popup, "button1", btn);
  evas_object_smart_callback_add(btn, "clicked", _response_cb, popup);
  
  btn = elm_button_add(popup);
  elm_object_style_set(btn, "popup");
  evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_object_text_set(btn, "OK");
  elm_object_part_content_set(popup, "button2", btn);
  evas_object_smart_callback_add(btn, "clicked", _response_cb, popup);
  
  evas_object_show(popup);
  

• Create a toast popup:

  Evas_Object *popup;
  struct appdata *ad = (struct appdata *) data;
  
  popup = elm_popup_add(ad->win_main);
  elm_object_style_set(popup, "toast");
  elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
  evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
  eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
  elm_object_part_text_set(popup,"elm.text", "Saving Contacts to sim");
  
  evas_object_smart_callback_add(popup, "block,clicked", _block_clicked_cb, NULL);
  elm_popup_timeout_set(popup, 2.0);
  evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
  
  evas_object_show(popup);
  

Managing Popup Events

The Elementary popups respond to user interactions with several events.

To manage popup events:

• Handle timeout events:

  The "timeout" event is triggered whenever a popup is closed as a result of timeout.

  static void _timeout_cb(void *data, Evas_Object *obj, void *event_info)
  {
     evas_object_del(obj);
  }
  elm_popup_timeout_set(popup, 3.0);
  evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
  

• Handle the block,clicked events:

  The "block,clicked" event is triggered whenever the user taps on a blocked event area.

  static void _block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
  {
     evas_object_del(obj);
  }
  evas_object_smart_callback_add(popup, "block,clicked", _block_clicked_cb, NULL);