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
_Email_UI/images/circle_email_sd.png)
_Email_UI/images/circle_email_tree.png)
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
_Email_UI/images/circle_email_detail_view.png)
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;
}