(Rectangle) Email Sample Overview

The (Rectangle) Email sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a UI component hierarchy.

The sample uses UI components (such as elm_conformant and elm_naviframe) for the view management, and the elm_genlist UI component for the content inside the main view.

The following figure illustrates the main view of the (Rectangle) Email, its wireframe structure, and the UI component tree.

Figure: (Rectangle) Email screen

Implementation

The create_base_gui() function is responsible for creating the application layout. It starts by creating a window, and adds the elm_conformant to it to decorate the window with an indicator. The elm_naviframe component is added to act as the window view manager 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 *btn;
   Elm_Object_Item *nf_it;

   // Window
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_conformant_set(ad->win, EINA_TRUE);
   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);
   evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   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);

   // Naviframe
   ad->nf = elm_naviframe_add(ad->conform);
   elm_object_content_set(ad->conform, ad->nf);
   eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
   eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_MORE, eext_naviframe_more_cb, NULL);
   evas_object_show(ad->nf);

   // Genlist
   ad->genlist = create_genlist(ad);

   btn = create_title_btn(ad);
   nf_it = elm_naviframe_item_push(ad->nf, "Email", NULL, btn, ad->genlist, NULL);
   elm_naviframe_item_pop_cb_set(nf_it, naviframe_pop_cb, NULL);

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

The create_genlist() function creates a genlist, which has 2 item classes: group item and item.

static Evas_Object*
create_genlist(appdata_s *ad)
{
   Evas_Object *genlist;
   Elm_Object_Item *item;
   int index = 0;

   // Create item class
   Elm_Genlist_Item_Class *gtc = elm_genlist_item_class_new();
   Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();

   gtc->item_style = "title";
   gtc->func.text_get = gl_text_get;
   gtc->func.content_get = gl_icon_get;
   gtc->func.del = gl_del_cb;

   itc->item_style = "2text";
   itc->func.text_get = gl_text_get;
   itc->func.content_get = gl_icon_get;
   itc->func.del = gl_del_cb;

   // Genlist
   genlist = elm_genlist_add(ad->nf);
   // COMPRESS MODE
   // For the mobile view, because it has a full window, compress mode must be used
   elm_genlist_mode_set(genlist, ELM_LIST_COMPRESS);
   // HOMOGENEOUS MODE
   // If item height is same when each style name is same, use homogeneous mode
   elm_genlist_homogeneous_set(genlist, EINA_TRUE);

   for (index = 0; index < 20; index++) 
   {
      item_data_s *id = calloc(sizeof(item_data_s), 1);
      id->index = index;
      if (index == 0)	
      {
         item = elm_genlist_item_append(genlist, // Genlist object
                                        gtc, // Item class
                                        id, // Item class user data
                                        NULL,
                                        ELM_GENLIST_ITEM_GROUP, // Item type
                                        gl_selected_cb, // Select smart callback
                                        ad); // Smart callback user data
         elm_genlist_item_select_mode_set(item, ELM_OBJECT_SELECT_MODE_DISPLAY_ONLY);
      }
      else
      {
         item = elm_genlist_item_append(genlist, // Genlist object
                                        itc, // Item class
                                        id, // Item class user data
                                        NULL,
                                        ELM_GENLIST_ITEM_NONE, // Item type
                                        gl_selected_cb, // Select smart callback
                                        ad); // Smart callback user data
      }
      id->item = item;
   }

   elm_genlist_item_class_free(gtc);
   elm_genlist_item_class_free(itc);
   evas_object_show(genlist);

   return genlist;
}

When the genlist is clicked, the main view changes to the second view.

Figure: Second view screen

static void
gl_selected_cb(void *data, Evas_Object *obj, void *event_info)
{
   Evas_Object *label;
   Elm_Object_Item *it = event_info;
   appdata_s *ad = data;
   elm_genlist_item_selected_set(it, EINA_FALSE);
   label = create_label(ad, elm_object_item_part_text_get(it, "elm.text"));
   elm_naviframe_item_push(ad->nf, elm_object_item_part_text_get(it, "elm.text.1"), NULL, NULL, label, NULL);

   return;
}