Layout - Predefined Layout

This example shows how one can use the Layout with a predefined theme layout to add a back and next button to a simple window.

The full source code for this example can be found at layout_example_02.c.

After setting up the window and background, we add the layout widget to the window. But instead of using elm_layout_file_set() to load its theme from a custom theme file, we can use elm_layout_theme_set() to load one of the predefined layouts that come with elementary. Particularly on this example, we load the them of class "layout", group "application" and style "content-back-next" (since we want the back and next buttons).

   layout = elm_layout_add(win);
   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, layout);
   if (!elm_layout_theme_set(
         layout, "layout", "application", "content-back-next"))
     fprintf(stderr, "Failed to set layout");
   evas_object_show(layout);

This default theme contains only a "content" area named "elm.swallow.content", where we can add any widget (it can be even a container widget, like a box, frame, list, or even another layout). Since we just want to show the resulting layout, we add a simple icon to it:

This default layout also provides some signals when the next and prev buttons are clicked. We can register callbacks to them with the elm_object_signal_callback_add() function:

In the Layout - Signals and Size Changed you can see how to send signals to the layout with elm_object_signal_emit().

Now our callback just changes the picture being displayed when one of the buttons are clicked:

static const char *images[] = { "home", "close", "arrow_up", "arrow_down", NULL };
 
struct _App {
     int current;
};
 
static void
_signal_cb(void *data, Evas_Object *o, const char *emission, const char *source EINA_UNUSED)
{
   struct _App *app = data;
   Evas_Object *icon = elm_object_part_content_get(o, "elm.swallow.content");
 
   printf("signal received\n");
 
   if (!strcmp("elm,action,back", emission))
     app->current--;
   else if (!strcmp("elm,action,next", emission))
     app->current++;
 
   if (app->current < 0)
     app->current = (sizeof(images) / sizeof(images[0])) - 2;
   else if (images[app->current] == NULL)
     app->current = 0;
 
   elm_icon_standard_set(icon, images[app->current]);
}

It's possible to see that it gets the name of the image being shown from the array of image names, going forward on this array when "next" is clicked and backward when "back" is clicked.

A screenshot of this example can be seen on: