(Circle) Email UI Sample Overview

Wearable native

The (Circle) Email sample application demonstrates how to implement a circular view with elementary UI components and EFL Extension circular UI components.

The sample uses UI components, such as elm_conformant for view management, and elm_popup, elm_genlist, and eext_more_option_layout for the content inside the main view. eext_genlist is also used for the content of the main view as well as for the circular scrollbar.

The following figure illustrates the main view of the (Circle) Email sample application, its wireframe structure, and component tree.

Figure: (Circle) Email screen

(Circle) Email Screen

(Circle) Email Tree


Main View

The create_base_gui() function is responsible for creating the application layout. It starts by creating a window, then adds elm_conformant to it to add surface for the circular UI component visual effect render. The conformant contains a main view (genlist) created by the create_genlist() function.

static void
create_base_gui(appdata_s *ad)
   // Window
   Evas_Object *win, *conform;
   win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_autodel_set(win, EINA_TRUE);

   evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);

   // Conformant 
   conform = elm_conformant_add(win);

   evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, conform);

   // Naviframe
   ad->nf = elm_naviframe_add(conform);
   elm_object_content_set(conform, ad->nf);
   ad->circle_surface = eext_circle_surface_naviframe_add(ad->nf);


   eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);

   // Show the window after the base GUI is set up

The create_main_view() function pushes the genlist into the naviframe to show the main view of the application.

static void
create_main_view(appdata_s *ad)
   Elm_Object_Item *nf_it;
   Evas_Object *genlist;

   genlist = create_genlist(ad);

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

Genlist is added using the create_genlist() function and set as the content of a multiple option layout. This genlist component has 3 item classes (title_with_groupindex, groupindex, and 3text styles).

static Evas_Object *
create_genlist(appdata_s *ad)
   int i;
   Evas_Object *genlist;
   Elm_Object_Item *item;

   Elm_Genlist_Item_Class *tic = elm_genlist_item_class_new();
   Elm_Genlist_Item_Class *gic = elm_genlist_item_class_new();
   Elm_Genlist_Item_Class *iic = elm_genlist_item_class_new();
   Elm_Genlist_Item_Class *pic = elm_genlist_item_class_new();

   tic->item_style = "title_with_groupindex";
   tic->func.text_get = gl_text_get;
   tic->func.content_get = NULL;
   tic->func.del = gl_del;

   gic->item_style = "groupindex";
   gic->func.text_get = gl_text_get;
   gic->func.content_get = NULL;
   gic->func.del = gl_del;

   iic->item_style = "3text";
   iic->func.text_get = gl_text_get;
   iic->func.content_get = NULL;
   iic->func.del = gl_del;

   pic->item_style = "padding";

   genlist = elm_genlist_add(ad->more_option_layout);
   ad->circle_genlist = eext_circle_object_genlist_add(genlist, ad->circle_surface);

   eext_circle_object_genlist_scroller_policy_set(ad->circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
   eext_rotary_object_event_activated_set(ad->circle_genlist, EINA_TRUE);

   for (i = 0; i < NUM_OF_ITEMS; i++)
      item_data *id = calloc(sizeof(item_data), 1);
      id->index = i;

      if (i == 0)
         item = elm_genlist_item_append(// Genlist object
                                        // Item class	
                                        // Data
      else if (i == 1)
         item = elm_genlist_item_append(// Genlist object
                                        // Item class
                                        // Data
         item = elm_genlist_item_append(// Genlist object
                                        // Item class
                                        // Data
      id->item = item;
   // Padding Item Here
   elm_genlist_item_append(genlist, pic, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);


   return genlist;

Detail View

The detail view is activated when the user clicks the genlist item.

Figure: (Circle) Email detail view

(Circle) Email detail view

The gl_selected_cb() function adds a label for the naviframe content. This naviframe item has the title area with the name of the view.

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, it);
   // View changed to text detail view
   elm_naviframe_item_push(ad->nf, elm_object_item_part_text_get(it, "elm.text"), NULL, NULL, label, NULL);


The create_label() function creates an elm_label with text.

static Evas_Object*
create_label(appdata_s *ad, Elm_Object_Item *it)
   Evas_Object *label;
   char buf[PATH_MAX];

   label = elm_label_add(ad->nf);

   // Label created for text view
   snprintf(buf, sizeof(buf), "%s %s", elm_object_item_part_text_get(it, "elm.text.1"), elm_object_item_part_text_get(it, "elm.text.2"));
   elm_label_line_wrap_set(label, ELM_WRAP_MIXED);
   elm_object_text_set(label, buf);

   return label;