diff --git a/media/code_c/tutorial/panes/panes.c b/media/code_c/tutorial/panes/panes.c new file mode 100644 index 000000000..4ab66e325 --- /dev/null +++ b/media/code_c/tutorial/panes/panes.c @@ -0,0 +1,116 @@ +#include + +// clicked callback +static void +_clicked_cb(void *data, Evas_Object *obj, void *event_info) +{ + printf("Clicked\n"); +} + +// press callback +static void +_press_cb(void *data, Evas_Object *obj, void *event_info) +{ + printf("Pressed\n"); +} + +// unpress callback +static void +_unpress_cb(void *data, Evas_Object *obj, void *event_info) +{ + printf("Unpressed, size : %f\n", elm_panes_content_left_size_get(obj)); +} + +// 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; +} + + 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); + + Evas_Object *panes, *panes_h, *bt; + + // Add an elm_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); + + // Add a horizontal elm_panes + panes_h = elm_panes_add(win); + elm_panes_horizontal_set(panes_h, EINA_TRUE); + elm_object_part_content_set(panes, "left", panes_h); + + // 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); + + // 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); + + // 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); + + //panes callbacks + evas_object_smart_callback_add(panes, "clicked", _clicked_cb, panes); + evas_object_smart_callback_add(panes, "press", _press_cb, panes); + evas_object_smart_callback_add(panes, "unpress", _unpress_cb, panes); + evas_object_smart_callback_add(panes, "clicked,double", _clicked_double_cb, + panes); + + //panes_h callbacks + evas_object_smart_callback_add(panes_h, "clicked", _clicked_cb, panes_h); + evas_object_smart_callback_add(panes_h, "press", _press_cb, panes_h); + evas_object_smart_callback_add(panes_h, "unpress", _unpress_cb, panes_h); + evas_object_smart_callback_add(panes_h, "clicked,double", _clicked_double_cb, + panes_h); + + evas_object_show(win); + elm_run(); + return 0; +} +ELM_MAIN() diff --git a/media/panes.png b/media/panes.png new file mode 100644 index 000000000..eeb363317 Binary files /dev/null and b/media/panes.png differ diff --git a/pages/docs.txt b/pages/docs.txt index cefed8b88..40c2f2dd5 100644 --- a/pages/docs.txt +++ b/pages/docs.txt @@ -39,6 +39,7 @@ Go check the current available version of EFL on each distro/platform: * [[tutorial/basic_tutorial|Basic Tutorial]] * [[tutorial/genlist_tutorial|Genlist Tutorial]] + * [[tutorial/panes_tutorial|Panes Tutorial]] ---- diff --git a/pages/tutorial/panes_tutorial.txt b/pages/tutorial/panes_tutorial.txt new file mode 100644 index 000000000..a681e85af --- /dev/null +++ b/pages/tutorial/panes_tutorial.txt @@ -0,0 +1,247 @@ +~~Title: Panes Tutorial~~ +==== Panes Tutorial ==== + +This tutorial explains how to use Panes in the application. + +=== Table of Contents === + + * [[#Initializing_the_Application|Initializing the Application]] + * [[#Creating_a_Panes_Widget|Creating a Panes Widget]] + * [[#Configure_the_Panes|Configure the Panes]] + * [[#Handling_Signals|Handling Signals]] + + +A panes example : {{ :panes.png?direct |list}} + +//**__The whole code__ : **//{{/code_c/tutorial/panes/panes.c}} +-------- + +=== Initializing the Application === + +The code below shows a typical elementary application that creates a window +entitled "Panes Tutorial". The panes goes inside. + + +#include + +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() + + +=== Creating a Panes Widget === + +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); + + +=== Configure the 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); + + +==== Handling Signals ==== + +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__ : **//{{/code_c/tutorial/panes/panes.c}}