Slider widget example with C++ Binding

This code places seven Elementary slider widgets on a window, each of them exemplifying a part of the widget's API.

The first part consists of including the headers. In this case we are only working with the Elementary C++ binding and thus we need only to include him.

#include <Elementary.hh>

If necessary the C and/or the C++ headers should be include here as well.

Now we need to actually start the code and set the elm_policy, which defines for a given policy group/identifier a new policy's value, respectively. In this example the only policy we need to set a value for is ELM_POLICY_QUIT, possibles values for it are:

elm_main (int argc, char *argv[])

As you can see, the policy we chose was to quit when the last win is hidden as opose to examples with the C bindings where we perpetually set it to quit when last win was closed. This changed was necessary because in C++ binding as the elm mainloop stop running all object are destroyed, references are unreferenced and events are stopped at ELM_MAIN().

See also
For more details consult elm_policy_set

Next step is creating an Elementary window, in this example we use the C++ binding method with the elm_win_util_standard_add that is a elm_win_legacy function, better explained below. And then we set the autohide state for it.

elm_win_util_standard_add (const char *name, const char *tittle) Adds a window object with standard setup.


This creates a window but also puts in a standard background with elm_bg_add(), as well as setting the window title to title. The window type created is of type ELM_WIN_BASIC, with the NULL as the parent widget. Returns the created object or NULL on failure.

The autohide works similarly to autodel, automatically handling "delete,request" signals when set to true, with the difference that it will hide the window, instead of destroying it.

It is specially designed to work together with ELM_POLICY_QUIT_LAST_WINDOW_HIDDEN which allows exiting Elementary's main loop when all the windows are hidden.

::elm::win win(elm_win_util_standard_add("slider", "Slider Example"));

autodel and autohide are not mutually exclusive. The window will be destructed if both autodel and autohide is set to EINA_TRUE or true.

Now let's create a box with the C++ binding method, passing our window object as parent, we'll use this box to contain our slider object.

::elm::box bx(efl::eo::parent = win);

To better understand, the function size_hint_weight_set for C++ bindings originated from C bindings function evas_object_size_hint_weight_set, that is EFL Evas type function. With this function we set the hints for an object's weight. The parameters are:

This is not a size enforcement in any way, it's just a hint that should be used whenever appropriate. This is a hint on how a container object should resize a given child within its area.

Containers may adhere to the simpler logic of just expanding the child object's dimensions to fit its own (see the EVAS_HINT_EXPAND helper weight macro in the EFL Evas Documentation) or the complete one of taking each child's weight hint as real weights to how much of its size to allocate for them in each axis. A container is supposed to, after normalizing the weights of its children (with weight hints), distribute the space it has to layout them by those factors – most weighted children get larger in this process than the least ones.

bx.size_hint_weight_set(EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

Default weight hint values are 0.0, for both axis.

Then we add the box as a resize-object to win informing that when the size of the win changes so should the box's size. Remember always to set the box visibility to true.

Now we'll create our slider, using the C++ binding method and set it's size hint that works with slider the same way as with box, for more, look above. This is the default slider.

The function size_hint_align_set for C++ bindings originated from C bindings function evas_object_size_hint_align_set, that is EFL Evas type function. With this function we set the hints for an object's alignment. The parameters are:

These are hints on how to align an object inside the boundaries of a container/manager. Accepted values are in the 0.0 to 1.0 range, with the special value EVAS_HINT_FILL used to specify "justify" or "fill" by some users. In this case, maximum size hints should be enforced with higher priority, if they are set. Also, any padding hint set on objects should add up to the alignment space on the final scene composition.

For the horizontal component, 0.0 means to the left, 1.0 means to the right. Analogously, for the vertical component, 0.0 to the top, 1.0 means to the bottom.

This is not a size enforcement in any way, it's just a hint that should be used whenever appropriate.

Default alignment hint values are 0.5, for both axis.

When using the elm box the packing method of the subobj - slider in this case - should be defined. There are four possible methods:

In this and most examples we use pack_end by choice and practicality, in this part of the code we also make slider visible.

As you see, the defaults for a slider are:

Actually it's pretty useless this way. So let's learn how to improve it.

Creating the second slider, the difference being that we set a text and two icons.

Creating the first icon as standard "home" and not resizable and finally add icon as content for the second slider.

Our second icon is the standard "folder", also not resizable and with add it also to the second slider.

The same as before, the size hints weight, align will be setted and the packing method for the second slider. Also making it visible.

If the bar size need to be changed, it can be done with span set function, that doesn't accounts other widget's parts size. Also the bar can starts with a not default value (0.0), as we done on third slider:

So far, users won't be able to see the slider value. If it's required, it can be displayed in two different areas, units label or above the indicator.

Let's place a units label on our widget, and also let's set minimum and maximum value, by default it uses 0.0 and 1.0:

If above the indicator is the place to display the value, just set it. Also, is possible to invert a bar, as you can see:

But if you require to use a function a bit more customized to show the value, is possible to registry a callback function that will be called to display unit or indicator label. For this we suggest you use a lambda type function.

In this case, a function to free this will be required, also a Lambda.

See also
To learn more consult Lambda Functions with Elementary - C++11.

Now we add our two labdas as indicators for our sixth slider and set the hints, packing method and visibility for our slider.

For our seventh slider we'll show that slider can also be displayed vertically:

Finally the last slider will exemplify how to listen to slider's signals, changed and delay,changed . First we need to implement callback functions that will simply print slider's value, using lambda again:

The first callback function should be called everytime value changes, the second one only after user stops to increment or decrement. Try to keep arrows pressed and check the difference.

Finally we just have to make our window visible. Then run the elm mainloop, starting to handle events and drawing operations.

See the full example, whose window should look like this picture: