Separator is a very thin object used to separate other objects, wich can be vertical or horizontal.
This example shows how to create a window and separate in two parts, each one will be filled with a background color to show the division. The separator is used to visually mark the division between two parts.
The first part consists of including the necessary modules and for this we'll use the Node.js require() function. In this example, we are working with elm and efl modules.
Next step is creating an Elementary window with Win_Standard without a parent, which is the type used for all of our examples. Here we also set the title that will appear at the top of our window and then the autohide state for it.
The autohide works automatically handling "delete,request" signals when set to true, hidding the window, instead of destroying it.
Now let's create the background with the JS binding method, passing our window as parent.
To better understand, the function size_hint_weight_set for JS 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:
- x - Double ranging from 0.0 to 1.0 use as horizontal hint.
- y - Double ranging from 0.0 to 1.0 use as vertical hint.
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 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.
- Note
- Default weight hint values are 0.0, for both axis.
Now we add the background as a resize-object to win informing that when the size of the win changes so should the background's size and setting it's visibility. You can change the background's color using color_set, if not, the default color will be used.
To put a box in the window we also need to set it's parent. By default, box object arranges their contents vertically from top to bottom. By calling this function with horizontal as true, the box will become horizontal, arranging contents from left to right.
The value that we set EFL Evas function size_hint_weight_set expands the box to cover all win's area and adding it as a resize_object to win informing that when the size of the win changes so should the box's size. In the end we make the box visible.
Now we create a retangle, like before, we just need to setting it's parent. After created, we set the color to show the difference between the next rectangle and define the minimun size of each side by using size_hint_min_set(minimum width, minimum height).
As in the background, the value we set EFL Evas function size_hint_weight_set expands the background to cover all area defined in size_hint_min_set. We also need to expand the rectangle to fill the area if the win's size change, if not, win can change it's size and the rectangle will only fill it's own previous area.
Now we have to The function size_hint_align_set for JS 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:
- x - Double ranging from 0.0 to 1.0 use as horizontal alignment hint.
- y - Double ranging from 0.0 to 1.0 use as vertical alignment hint.
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, 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.
- Note
- Default alignment hint values are 0.5, for both axis.
Now we only need to set the visibility of the rectangle and add our retangle to box with the packing method of the subobj - rectangle in this case. There are four possible methods:
pack_start(subobj_)- Add an object to the beginning of the pack list. Packsubobj_into the box obj, placing it first in the list of children objects. The actual position the object will get on screen depends on the layout used. If no custom layout is set, it will be at the top or left, depending if the box is vertical or horizontal, respectively.
pack_end(subobj_)- Add an object at the end of the pack list. Packsubobj_into the box obj, placing it last in the list of children objects. The actual position the object will get on screen depends on the layout used. If no custom layout is set, it will be at the bottom or right, depending if the box is vertical or horizontal, respectively.
pack_before(subobj_, before_)- Adds an object to the box before the indicated object. This will add thesubobj_to the box indicated before the object indicated withbefore_. If before is not already in the box, results are undefined. Before means either to the left of the indicated object or above it depending on orientation.
pack_after(subobj_, after_)- Adds an object to the box after the indicated object. This will add thesubobj_to the box indicated after the object indicated withafter_. If after is not already in the box, results are undefined. After means either to the right of the indicated object or below it depending on orientation.
In this and most examples we use pack_end by choice and practicality.
Once we have our first rectangle in the box we create and add our separator. Using the same approach, we setting it's parent. Since our box is in horizontal mode it's a good idea to set the separator to be horizontal too. Finishing with the visibility and packing method.
After all this, we just need to create another rectangle, setting the color, size hints, make rect2 visible and packing in the box. Don't forget to set the win's visibility as true.
The full code for this example can be found at separator_example_01.js .
This example will look like:
