Application Store UI Sample Overview

The [UI Sample] ApplicationStore sample application demonstrates how to implement a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.

The sample uses UI components, such as elm_naviframe and elm_scroller for the view management, containers, such as elm_table and elm_box for UI component management inside the view, and UI components, such as elm_button, elm_label, and elm_image for the content inside the view.

The following figure illustrates the main screen of the [UI Sample] ApplicationStore, its wireframe structure, and the UI component tree.

Figure: [UI Sample] ApplicationStore screen

Application Layout

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 decorate the window with an indicator. elm_naviframe is added to act as a view manager of the window and provide the window title functionality. The main view is created using the add_main_view() function and added to the naviframe.

static void
create_base_gui(appdata_s *ad)
{
   Evas_Object *bg = NULL;

   // Window 
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_app_base_scale_set(1.8);

   elm_win_conformant_set(ad->win, EINA_TRUE);
   elm_win_autodel_set(ad->win, EINA_TRUE);

   if (elm_win_wm_rotation_supported_get(ad->win)) 
   {
      int rots[4] = {0, 90, 180, 270};
      elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
   }

   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);

   // Conformant 
   ad->conform = elm_conformant_add(ad->win);
   elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
   elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
   evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(ad->win, ad->conform);
   evas_object_show(ad->conform);

   // Indicator BG
   bg = elm_bg_add(ad->conform);
   elm_object_style_set(bg, "indicator/headerbg");
   elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
   evas_object_show(bg);

   // Base Layout 
   ad->layout = elm_layout_add(ad->conform);
   evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_layout_theme_set(ad->layout, "layout", "application", "default");
   evas_object_show(ad->layout);

   elm_object_content_set(ad->conform, ad->layout);

   // Naviframe 
   ad->nf = elm_naviframe_add(ad->conform);

   // Main view 
   ad->mainview = add_main_view(ad);

   elm_naviframe_item_push(ad->nf, "Application Store", NULL, NULL, ad->mainview, NULL);

   elm_object_part_content_set(ad->layout, "elm.swallow.content", ad->nf);

   // Show the window after the base GUI is set up 
   evas_object_show(ad->win);

   eext_object_event_callback_add(ad->mainview, EEXT_CALLBACK_BACK, mainview_back_cb, ad);
}

Main View

The add_main_view() function creates the content of the view by composing a scroller and a container component (elm_box) to arrange the individual content UI component vertically. The scroller adds the scrolling facility in case the content size is bigger than the available space.

The individual item in the container can be a content UI component, such as elm_button, or another container, such as elm_table or elm_box as shown in the function.

static Evas_Object *
add_main_view(appdata_s *ad)
{
   Evas_Object *scroller, *main_view, *item_table, *item_header, *item_content;
   int content_height = ELM_SCALE_SIZE(240);
   int grid_item_height = ELM_SCALE_SIZE(60);

   scroller = elm_scroller_add(win);
   elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
   evas_object_size_hint_weight_set(scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   evas_object_size_hint_align_set(scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
   evas_object_show(scroller);

   main_view = elm_box_add(win);
   elm_box_align_set(main_view, 0, 0);
   evas_object_size_hint_weight_set(main_view, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_box_padding_set(main_view, ELM_SCALE_SIZE(10), ELM_SCALE_SIZE(15));
   elm_object_content_set(scroller, main_view);
   
   item_table = add_item_table(main_view, grid_item_height);
   evas_object_show(item_grid);
   elm_box_pack_end(main_view, item_table);

An item header is created and added to the main box container.

   item_header = create_item_header(main_view, "<font_size=30>New Movie releases</font_size>");
   evas_object_show(item_header);
   elm_box_pack_end(main_view, item_header);
   
   item_content = create_item_content(main_view, content_height, 0);
   evas_object_show(item_content);
   elm_box_pack_end(main_view, item_content);
}

The add_item_table() function creates a table and packs the button component into it.

static Evas_Object *
add_item_table(Evas_Object *parent, int content_height)
{
   Evas_Object *content_table, *content *ic;

   content_table = elm_table_add(parent);
   elm_table_homogeneous_set(content_table, EINA_TRUE);
   evas_object_size_hint_align_set(content_table, EVAS_HINT_FILL, EVAS_HINT_FILL);
   elm_table_padding_set(content_table, ELM_SCALE_SIZE(5), ELM_SCALE_SIZE(5));
   evas_object_show(content_table);

   ic = create_image(parent, "apps.jpg", content_height);
   content = create_button(content_table, ic);
   evas_object_show(content);
   elm_table_pack(content_table, content, 0, 0, 1, 1);
}

static Evas_Object*
create_button(Evas_Object *parent, Evas_Object *content)
{
   Evas_Object *button = elm_button_add(parent);
   elm_object_style_set(button, "transparent");
   evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.0);
   evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.0);

   elm_object_content_set(button, content);

A listener callback for mouse events is added to the button.

   evas_object_smart_callback_add(button, "pressed", pressed_cb, content);
   evas_object_smart_callback_add(button, "unpressed", unpressed_cb, content);
   evas_object_smart_callback_add(button, "clicked", clicked_cb, content);
}

The create_label() function creates a label component.

static Evas_Object*
create_label(Evas_Object *parent, const char * text)
{
   Evas_Object *text_obj = elm_label_add(button);
   elm_object_text_set(text_obj, text);

   return text_obj;
}

The create_image() function creates an image to be used as a content object within the button.

static Evas_Object*
create_image(Evas_Object *parent, const char *image_path, int min_height)
{
   char path[100] = {0};
   snprintf(path, sizeof(path), ICON_DIR"/%s", image_path);
   Evas_Object *ic = elm_image_add(button);
   elm_image_file_set(ic, path, NULL);
   evas_object_size_hint_min_set(ic, 0, min_height);

   return ic;
}

The listener callback gets the call when there is a mouse event on the button.

In the following snippet:

• user_data is the data provided by the user during callback registration.
• obj is the handle to the object on which the event occurred.
• event_info is the data the object wants to pass to the callback function.

static void
clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
{
   // Add your application logic
}