Page Example

(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

Implementation

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);
   evas_object_show(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);

   create_main_view(ad);

   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
   evas_object_show(win);
}

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
                                        genlist,            
                                        // Item class	
                                        tic,
                                        // Data
                                        id,
                                        NULL,
                                        ELM_GENLIST_ITEM_GROUP,
                                        NULL,
                                        NULL);
      else if (i == 1)
         item = elm_genlist_item_append(// Genlist object
                                        genlist,            
                                        // Item class
                                        gic,               
                                        // Data
                                        id,                 
                                        NULL,
                                        ELM_GENLIST_ITEM_GROUP,
                                        NULL,
                                        NULL);
      else
         item = elm_genlist_item_append(// Genlist object
                                        genlist,            
                                        // Item class
                                        iic,                
                                        // Data
                                        id,                 
                                        NULL,
                                        ELM_GENLIST_ITEM_NONE,
                                        NULL,
                                        NULL);
      id->item = item;
   }
   // Padding Item Here
   elm_genlist_item_append(genlist, pic, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);

   elm_genlist_item_class_free(tic);
   elm_genlist_item_class_free(gic);
   elm_genlist_item_class_free(iic);
   elm_genlist_item_class_free(pic);
   evas_object_show(genlist);

   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);

   return;
}

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);
   evas_object_show(label);

   return label;
}