The (Circle) Setting Time sample application demonstrates how to implement a circular view with elementary UI components and EFL Extension circle UI components.
The sample application uses UI components, such as elm_conformant and elm_naviframe for view management, elm_layout for UI component management inside the view, and elm_label and elm_button for the content inside the main view. The Datetime component that is provided by EFL Extension is also used for content of the main view.
The following figure illustrates the main view of the (Circle) Setting Time sample application, its wireframe structure, and component tree.
Figure: (Circle) Setting Time main view
_Time_Setting_UI/images/circle_setting_time_sd.png)
_Time_Setting_UI/images/circle_setting_time_tree.png)
Implementation
Main View
The create_base_gui() function is responsible for creating the application layout. It starts by creating a window, and adds elm_conformant. The conformant contains a naviframe for main view of this application. elm_naviframe adds the surface for the circular UI component visual effect rendering, and it is added to act as a view manager of the window and to provide the window title functionality. The main view is created using the create_main_view() function and added to the naviframe.
static void
create_base_gui(appdata_s *ad)
{
Evas_Object *win, *conform;
// Window
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);
// eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
// 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);
create_main_view(ad);
elm_object_content_set(conform, ad->nf);
eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
// Add a surface for the circle object
ad->circle_surface = eext_circle_surface_naviframe_add(ad->nf);
// Show the window after the base GUI is set up
evas_object_show(win);
}
The create_main_view() function creates the content of the main view. It consists of a naviframe containing a layout that has a bottom button swallow part. The naviframe has a title on top, and a content area in the middle of the view. The elm_label is added to the content area of naviframe. This function calls the current_time_set() function to set the text of the elm_label.
static void
create_main_view(appdata_s *ad)
{
Elm_Object_Item *nf_it;
Evas_Object *button, *layout;
time_t local_time = time(NULL);
struct tm *time_info = localtime(&local_time);
ad->saved_time = *time_info;
layout = elm_layout_add(ad->nf);
evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_layout_theme_set(layout, "layout", "bottom_button", "default");
evas_object_show(layout);
ad->label = elm_label_add(layout);
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
label_text_set(ad->label, ad->saved_time);
evas_object_show(ad->label);
elm_object_part_content_set(layout, "elm.swallow.content", ad->label);
button = elm_button_add(layout);
elm_object_style_set(button, "bottom/queue");
elm_object_text_set(button, "Set Time");
elm_object_part_content_set(layout, "elm.swallow.button", button);
evas_object_smart_callback_add(button, "clicked", time_set_button_clicked_cb, ad);
evas_object_show(button);
nf_it = elm_naviframe_item_push(ad->nf, "Setting time", NULL, NULL, layout, NULL);
elm_naviframe_item_pop_cb_set(nf_it, naviframe_pop_cb, NULL);
}
The label_text_set() function gets the time according to the format specification (hour and minute in this case), and places the result in the label.
static void
label_text_set(Evas_Object *label, struct tm t)
{
char buf[200] = {0};
char text_buf[PATH_MAX];
strftime(buf, sizeof(buf), "%H:%M", &t);
snprintf(text_buf, sizeof(text_buf), "<align=center><font_size=80>%s</font_size></align>", buf);
elm_object_text_set(label, text_buf);
}
Set Time View
When the bottom button is clicked, the time picker view is added on main view.
Figure: (Circle) Setting Time set time view
_Time_Setting_UI/images/circle_setting_time_set_time_view.png)
The time_set_button_clicked_cb() function is called when the user clicks the bottom button in the main view.
The function creates the content of the time picker. The time picker consists of a layout containing the datetime view and a bottom button area. The elm_button has been added to the bottom of layout with a check icon. Then the text for elm.text part is set as Set Time, and the eext_circle_object_datetime_add() function is called with the created circle surface object to represent the circular visual effect on the datetime. The eext_rotary_object_event_activated_set() function is also needed to let the datetime get the rotary event callback.
static void
time_set_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
struct appdata *ad = data;
Evas_Object *button, *icon, *layout, *circle_datetime;
Elm_Object_Item *nf_it = NULL;
layout = elm_layout_add(ad->nf);
elm_layout_theme_set(layout, "layout", "circle", "datetime");
button = elm_button_add(layout);
elm_object_style_set(button, "bottom");
icon = elm_image_add(button);
elm_image_file_set(icon, ICON_DIR "/check.png", NULL);
elm_object_content_set(button, icon);
evas_object_show(icon);
elm_object_part_content_set(layout, "elm.swallow.btn", button);
evas_object_smart_callback_add(button, "clicked", set_clicked_cb, ad);
elm_object_part_text_set(layout, "elm.text", "Set Time");
ad->datetime = elm_datetime_add(layout);
circle_datetime = eext_circle_object_datetime_add(ad->datetime, ad->circle_surface);
eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
elm_datetime_format_set(ad->datetime, FORMAT);
elm_datetime_value_set(ad->datetime, &ad->saved_time);
elm_object_style_set(ad->datetime, "timepicker/circle");
elm_object_part_content_set(layout, "elm.swallow.content", ad->datetime);
nf_it = elm_naviframe_item_push(ad->nf, "Time picker", NULL, NULL, layout, NULL);
elm_naviframe_item_title_enabled_set(nf_it, EINA_FALSE, EINA_FALSE);
}
The set_clicked_cb() function is called when the user clicks the bottom button in the time picker view. It changes the label text to the selected value and the view is changed to the main view.
static void
set_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
elm_datetime_value_get(ad->datetime, &ad->saved_time);
label_text_set(ad->label, ad->saved_time);
elm_naviframe_item_pop(ad->nf);
}