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