[UI Sample] Setting Sample Overview

The [UI Sample] Setting sample application demonstrates how to implement a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.

It uses UI components, such as elm_conformant and elm_naviframe for the view management, elm_layout for UI component management inside the view, and elm_genlist for the content inside the main view.

Main View

The following figure illustrates the main view of the Settings sample application, its wireframe structure, and the UI component tree.

Figure: [UI Sample] Setting screen

The create_base_gui() function is responsible for creating the application layout. It starts by creating a window, and adds elm_conformant to it to decorate the window with an indicator. elm_naviframe is added to act as a view manager of the window and provide the window title functionality. The main view is created using the create_genlist() function and added to the naviframe.

static void
create_base_gui(appdata_s *ad)
{
   Evas_Object *bg;
   Elm_Object_Item *nf_it;

   // Window
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_autodel_set(ad->win, EINA_TRUE);

   if (elm_win_wm_rotation_supported_get(ad->win)) 
   {
      int rots[4] = { 0, 90, 180, 270 };
      elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
   }

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

   // 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);
   elm_win_resize_object_add(ad->win, ad->conform);
   evas_object_show(ad->conform);

   // Indicator BG
   bg = elm_bg_add(ad->conform);
   elm_object_style_set(bg, "indicator/headerbg");
   elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
   evas_object_show(bg);

   // Naviframe
   ad->nf = elm_naviframe_add(ad->conform);
   eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, nf_back_cb, ad);
   eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_MORE, nf_more_cb, ad);
   elm_object_content_set(ad->conform, ad->nf);
   evas_object_show(ad->nf);

   // Genlist
   ad->genlist = create_genlist(ad->nf);
   
   nf_it = elm_naviframe_item_push(ad->nf, "Settings", NULL, NULL, ad->genlist, NULL);

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

   ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
}

Pop-up View

When a menu key is clicked, the keydown_cb() function is called to create a pop-up menu.

static Eina_Bool
keydown_cb(void *data, int type, void *event)
{
   appdata_s *ad = data;
   Ecore_Event_Key *ev = event;
   if (ev->keyname && !strcmp(ev->keyname, KEY_END)) 
   {
      // Hide the window
      elm_win_lower(ad->win);
      return ECORE_CALLBACK_DONE;
   } 
   else if (ev->keyname && !strcmp(ev->keyname, KEY_MORE)) 
   {
      if (!ad->popup)
         ad->popup = create_menu_popup(ad);
      else 
      {
         evas_object_del(ad->popup);
         ad->popup = NULL;
      }
      return ECORE_CALLBACK_DONE;
   }

   return ECORE_CALLBACK_PASS_ON;
}

Figure: Pop-up screen

The pop-up menu has 2 items. When the user clicks one of them, the main view is changed to the second view.

static void
popup_cb(void *data, Evas_Object *obj, void *event_info)
{
   appdata_s *ad = (appdata_s *)data;
   Evas_Object *label;
   Elm_Object_Item *nf_it = elm_naviframe_top_item_get(ad->nf);
   const char *text = elm_object_item_text_get((Elm_Object_Item *) event_info);
   const char *title = elm_object_item_text_get(nf_it);

   evas_object_del(ad->popup);
   ad->popup = NULL;

   if (text && !strcmp(text, "Second View")) 
   {
      if (tot; e && strcmp(title, label)) 
      {
         label = create_label(ad->nf, "Second View");
         elm_naviframe_item_push(ad->nf, "Help", NULL, NULL, layout, NULL);
      }
   } 
   else if (text && !strcmp(text, "Settings")) 
   {
      if (title && strcmp(title, label)) 
      {
         elm_naviframe_item_pop(ad->nf);
      }
   }
}

Second View

When a genlist or pop-up menu item is clicked, the main view is changed to the second view.

Figure: Second View screen

static void
gl_selected_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *nf = (Evas_Object *)data, *label;
   Elm_Object_Item *it = event_info; 
   item_data_s *id = elm_object_item_data_get(it);

   // Downplay the item
   elm_genlist_item_selected_set(it, EINA_FALSE);

   // Create the second view

   label = create_label(nf, "Second View");
   elm_naviframe_item_push(nf, "Second View", NULL, NULL, label, NULL);
}