This tutorial explains how to use Panes in the application.

• Initializing the Application
• Creating a Panes Widget
• Configure the Panes
• Handling Signals

A panes example :

The whole code: panes.c

The code below shows a typical elementary application that creates a window entitled “Panes Tutorial”. The panes goes inside.

#include <Elementary.h>
 
EAPI_MAIN int
elm_main(int argc, char **argv)
{
   Evas_Object *win;
 
   win = elm_win_util_standard_add("Panes", "Panes Tutorial");
   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
   elm_win_autodel_set(win, EINA_TRUE);
   //win 400x400 px
   evas_object_resize(win, 400, 400);
 
   //panes code here
 
   evas_object_show(win);
   elm_run();
   return 0;
}
ELM_MAIN()

The elm_panes widget adds a draggable bar between two contents. When dragged, this bar resizes the contents. To create a new Panes into an Elementary object, use the elm_panes_add() function:

// Add an elm_panes
Evas_Object *panes;
panes = elm_panes_add(win);
evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(win, panes);
evas_object_show(panes);

By default, the orientation of the Panes is vertical. To modify the orientation, use the elm_panes_horizontal_set() function.

Evas_Object *panes_h;
// Add a horizontal elm_panes
panes_h = elm_panes_add(win);
elm_panes_horizontal_set(panes_h, EINA_TRUE);

The code above creates another Panes object and sets the horizontal orientation. To add content in a panes, use the elm_object_part_content_set() function. Here we add the horizontal Panes panes_h to the “left” part of the first Panes panes created.

elm_object_part_content_set(panes, "left", panes_h);

This is how to set a button object to the “right” side of our vertical Panes widget.

// Create a button object
bt = elm_button_add(win);
elm_object_text_set(bt, "Right");
evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(bt);
 
// and set it to the "right" part of the vertical Panes
elm_object_part_content_set(panes, "right", bt);

The content of the horizontal Panes is set with two button objects (up and down). When populating a vertically displayed Panes, the left content is placed at the top, and the right content is placed at the bottom.

// Create a "Up" button
bt = elm_button_add(win);
elm_object_text_set(bt, "Up");
evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(bt);
elm_object_part_content_set(panes_h, "left", bt);
 
// Create a "Down" button
bt = elm_button_add(win);
elm_object_text_set(bt, "Down");
evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(bt);
elm_object_part_content_set(panes_h, "right", bt);

The elm_panes can be dragged with the mouse but the proportion can also be set with the elm_panes_content_left_size_set() and elm_panes_content_right_size_set() functions. As an example, this is how to set the left size of both panes to 80%.

// Set the proportion of the panes to 80%
elm_panes_content_left_size_set(panes, 0.8);
elm_panes_content_left_size_set(panes_h, 0.8);

The Panes proportions can also be fixed so that the user is not able to drag them. To do this, use the elm_panes_fixed_set() function.

// Fix the Panes proportion
elm_panes_fixed_set(panes_h, EINA_TRUE);

The Panes widgets emit four different signals, depending on the users' interaction with the draggable bar.

• “press” - The pane is pressed.
• “unpressed” - The pane is released after being pressed.
• “clicked” - The pane is clicked.
• “clicked,double” - The pane is double clicked.

A callback function is added for each of them.

“click” Signal

The callback function for the clicked signal prints “Clicked” to standard output.

// click callback
static void
_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
   printf("Clicked\n");
}

This is how to register this callback function to the vertical panes.

    evas_object_smart_callback_add(panes, "clicked", _clicked_cb, panes);

“press” Signal

The callback function for the clicked signal prints “Clicked” to standard output.

// press callback
static void
_press_cb(void *data, Evas_Object *obj, void *event_info)
{
   printf("Pressed\n");
}

The callback function for the “press” signal prints “Pressed” to the standard output.

evas_object_smart_callback_add(panes, "press", _press_cb, panes);

“unpress” Signal

For the “unpress” signal, the proportion size of the left content of the Panes widget is printed to the standard output. To do this, use the elm_panes_content_left_size_get() function.

static void
_unpress_cb(void *data, Evas_Object *obj, void *event_info)
{
   printf("Unpressed, size : %f\n", elm_panes_content_left_size_get(obj));
}

This is how to register this callback function to the vertical panes.

evas_object_smart_callback_add(panes, "unpress", _unpress_cb, panes);

“clicked,double” Signal

Hide the left part of the Panes widget on the “clicked,double” signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes widget, use the elm_panes_content_left_size_get() and elm_panes_content_left_size_set() functions, and a variable to store the value of the current proportion.

// double clicked callback
static void
_clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
{
   static double size = 0.0;
   double tmp_size = 0.0;
   tmp_size = elm_panes_content_left_size_get(obj);
   if (tmp_size > 0)
     {
        elm_panes_content_left_size_set(obj, 0.0);
        printf("Double clicked, hidden.\n");
     }
   else
     {
        elm_panes_content_left_size_set(obj, size);
        printf("Double clicked, restoring size.\n");
     }
   size = tmp_size;
}

This is how to register this callback function to the Panes.

evas_object_smart_callback_add(panes, "clicked,double", _clicked_double_cb, panes);

The whole code: panes.c