This example places three Elementary Datetime widgets on a window, each of them exemplifying the widget's different usage.
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 we construct the elm background and for this we use the JS method below, setting win as it's 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:
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.
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 finally we make it visible.
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. Using Evas weight_set function again to hint on how a container object should resize a given child within its area.
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.
The first of them is "only Date display". We will create it using the JS method below. The weight hint works with datetime the same as it did with background and box.
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:
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.
An important feature for the datetime is the setting of what we want it to display. We can achieve that by using:
field_visible_set (elm.Elm_Datetime_Field_Type.fieldtype_, visible_)
fieldtype_:type of the field, supports 6 fields:
year: Indicates Year field.
month: Indicates Month field.
date: Indicates Date field.
hour: Indicates Hour field,
minute: Indicates Minute field.
ampm: Indicates AM/PM field.
truefield can be visible,
For this first datetime we are setting the hour, minute and am/pm to not be visible, doing this we'll display in our datetime the year, month and date.
When using the elm box the packing method of the subobj - datetime in this case - should be defined. There are four possible methods:
pack_start(subobj_)- Add an object to the beginning of the pack list. Pack
subobj_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. Pack
subobj_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 the
subobj_to the box indicated before the object indicated with
before_. 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 the
subobj_to the box indicated after the object indicated with
after_. 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 datetime visible.
For our second datetime, we'll also set the size hints weight and align, but in this case, the fields year, month and date will be not visible, and thus displaying in our datetime the hour, minute and AM/PM. Finally we choose it's packing method and set the visibility of datetime to
For our third and last datetime, we setted the weight and align as before, chose our packing method and made it visible. Note that in this case we didn't exclude any type of field leaving all visible. Beeing this datetime the last one, here we'll also set win to be visible.
See the full datetime_example.js .
This example should look like: