This code places five Elementary clock widgets on a window, each of them exemplifying a part of the widget's API. Before explaining each clock to be more didatical let's start with the basics.
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.
A box arranges objects in a linear fashion, governed by a layout function that defines the details of this arrangement. The box will use an internal function to set the layout to a single row, vertical by default.
Now let's create the box with the JS binding method, passing our window object 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.
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.
We create each clock with the JS binding method, passing our window object as parent. The first of them is the pristine clock, using the defaults for a clock, which are military time with no seconds shown.
When using the elm.Box the packing method of the subobj - clock in this case - should be defined. 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. In this part of the code we also make clock visible.
The second clock shows ther am/pm time, that we also create with the JS binding method, passing our window object as parent. Setting show_am_pm to true and again choosing the packing method and making clock visible.
The third one will show the seconds digits, which will flip in synchrony with system time. Note, besides, that the time itself is different from the system's – it was customly set with time_set():
In both fourth and fifth ones, we turn on the edition mode. See how you can change each of the sheets on it, and be sure to try holding the mouse pressed over one of the sheet arrows. The forth one also starts with a custom time set:
The fifth, besides editable, it has only the time units editable, for hours, minutes and seconds. For this we used edit_mode_set with the parameter digedit that sets indentifiers for which clock digits should be editable, when a clock widget is in edition mode. Values may be OR-ed together to make a mask, naturally.
Possible values for digedit:
default:Default value. Means that all digits are editable, when in edition mode.
hour_decimal:Decimal digit of hours value should be editable;
hour_unit:Unit digit of hours value should be editable;
min_decimal:Decimal digit of minutes value should be editable;
min_unit:Unit digit of minutes value should be editable;
sec_decimal:Decimal digit of seconds value should be editable;
sec_unit:Unit digit of seconds value should be editable;
all:All digits should be editable;
Finishing this example we should set win to be visible.
See the full clock_example.js, whose window should look like this picture:
