/**
* @page Examples-js Examples with Javascript Bindings.
*
* Here is a list of Elementary JS Examples.
*
* @ref bg_js_example_02
*
* @ref calendar_js_example_01
*
* @ref calendar_js_example_03
*
* @ref clock_js_example
*
* @ref datetime_js_example
*
* @ref icon_js_example_01
*
* @ref separator_js_example_01
*
*/
/**
* @page bg_js_example_02 elm.Bg - Image background using Javascript Binding
* @dontinclude bg_example_02.js
* This is the second background example and shows how to use the
* Elementary background object to set an image as background of your
* application.
* 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 solely with elm module.
* @skipline require
* 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 @p true, hidding the window, instead of destroying it.
* @skip win
* @until autohide_set
* Our background will have an image, that will be displayed over the
* background color.
* To do so, first we create the background that will display our
* image.
* @skipline bg
* Then, before loading this image, we set the load size of the
* image. The load size is a hint about the size that we want the
* image displayed in the screen. It's not the exact size that the
* image will have, but usually a bit bigger. The background object
* can still be scaled to a size bigger than the one set here. Setting
* the image load size to something smaller than its real size will
* reduce the memory used to keep the pixmap representation of the
* image, and the time to load it. Here we set the load size to 20x20
* pixels, but the image is loaded with a size bigger than that (since
* it's just a hint).
* @skipline load_size_set
* Now we load our image from it's directory, using file_set. Notice
* that the second argument of the file_set() function is @c null,
* since we are setting an image to this background. This function
* also supports setting an Eet file as background, in which case the
* @c key parameter wouldn't be @c null, but be the name of the Eet
* key instead.
* @skipline file
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @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 finally we make background visible.
* @skip win
* @until visible
* Now we only have to set the size for our window and make it
* visible.
* @skip size_set
* @until visible
* The full code for this example can be found at @ref
* bg_example_02.js .
* This example will look like this:
* @image html screenshots/bg_example_02.png
* @image latex screenshots/bg_example_02.eps width=\textwidth
* @example bg_example_02.js
*/
/**
* @page calendar_js_example_01 Calendar - Simple creation with Javascript Binding
* @dontinclude calendar_example_01.js
* As a first example, let's just display a calendar in our window,
* explaining all steps required to do so.
* 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 solely with elm module.
* @skipline require
* 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 @p true, hidding the window, instead of destroying it.
* @skip Win
* @until autohide_set
* Now, the exciting part, let's create the calendar with the JS
* binding method, passing our window object as parent.
* @skipline Calendar
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @note Default weight hint values are 0.0, for both axis.
* Now we add the calendar as a resize-object to win informing that
* when the size of the win changes so should the calendar's
* size. And finally we make our calendar and window visibles.
* @skip win
* @until win.visible
* Our example will look like this:
* @image html screenshots/calendar_example_01.png
* @image latex screenshots/calendar_example_01.eps width=\textwidth
* See the full source code @ref calendar_example_01.js here.
* @example calendar_example_01.js
*/
/**
* @page calendar_js_example_03 Calendar - Years restrictions with Javascript Binding
* @dontinclude calendar_example_03.js
* This example explains how to set max and min year to be displayed
* by a calendar object. This means that user won't be able to see or
* select a date before and after selected years. By default, limits
* are 1902 and maximum value will depends on platform architecture
* (year 2037 for 32 bits); You can read more about time functions on
* @c ctime manpage.
* 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 @p true, hidding the window, instead of destroying it.
* @skip win
* @until autohide_set
* Now let's create the calendar with the JS binding method, passing
* our window object as parent.
* @skipline Calendar
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @note Default weight hint values are 0.0, for both axis.
* Now we add the calendar as a resize-object to win informing that
* when the size of the win changes so should the calendar's
* size.
* @skipline win
* Straigh to the point, to set the limits for years you need only to
* call min_max_year_set(). First value is minimum year, second is
* maximum. If first value is negative, it won't apply limit for min
* year, if the second one is negative, won't apply for max year.
* Setting both to negative value will clear limits (default state):
* @skipline min_max_year_set
* Finally we just have to make calendar and window visible.
* @skip cal.visible
* @until win.visible
* Our example will look like this:
* @image html screenshots/calendar_example_03.png
* @image latex screenshots/calendar_example_03.eps width=\textwidth
* See the full source code @ref calendar_example_03.js here.
* @example calendar_example_03.js
*/
/**
* @page datetime_js_example Datetime Example with Javascript Binding
* @dontinclude datetime_example.js
* 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.
* @skip efl
* @until elm
* 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 @p true, hidding the window, instead of destroying it.
* @skip Win
* @until autohide_set
* Now we construct the elm background and for this we use the JS
* method below, setting win as it's parent.
* @skipline elm.Bg
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @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 finally we make it visible.
* @skip win
* @until visible
* @remarks If a color it's not setted the default color will be used.
* 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.
* @skipline elm.Box
* @until weight_set
* 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.
* @skip win
* @until visible
* 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.
* @skip datetime
* @until weight
* Now we have to The function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal alignment
* hint.
* @li 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.
* @skipline align
* @note Default alignment hint values are 0.5, for both axis.
* An important feature for the datetime is the setting of what we
* want it to display. We can achieve that by using:
* @p field_visible_set (elm.Elm_Datetime_Field_Type.fieldtype_, visible_)
* Parameters are:
* @li @p fieldtype_: type of the field, supports 6 fields:
* @p year: Indicates Year field.
* @p month: Indicates Month field.
* @p date: Indicates Date field.
* @p hour: Indicates Hour field,
* @p minute: Indicates Minute field.
* @p ampm: Indicates AM/PM field.
* @li @p visible_: @p true field can be visible, @p false otherwise.
* @attention Setting this API True does not ensure that the field is
* visible, apart from this, the field's format must be present in
* Datetime overall format. If a field's visibility is set to False
* then it won't appear even though its format is present in overall
* format. So if and only if this API is set true and the
* corresponding field's format is present in Datetime format, the
* field is visible.
* @note By default the field visibility is set to @p true.
* 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.
* @note Hour format 12hr(1-12) or 24hr(0-23) display can be selected
* by setting the corresponding user format. The corresponding Month
* and AM/PM strings are displayed according to the system’s language
* settings.
* @skip hour
* @until ampm
* When using the elm box the packing method of the subobj - datetime
* in this case - should be defined. There are four possible methods:
* @li @c pack_start(subobj_) - Add an object to the beginning of the
* pack list. Pack @c 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.
* @li @c pack_end(subobj_) - Add an object at the end of the pack
* list. Pack @c 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.
* @li @c pack_before(subobj_, before_) - Adds an object to the box
* before the indicated object. This will add the @c subobj_ to the
* box indicated before the object indicated with @c 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.
* @li @c pack_after(subobj_, after_) - Adds an object to the box
* after the indicated object. This will add the @c subobj_ to the box
* indicated after the object indicated with @c 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.
* @skip pack_end
* @until 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 @p true.
* @skip datetime
* @until visible
* 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.
* @skip datetime
* @until win.visible
* See the full @ref datetime_example.js .
* This example should look like:
* @image html screenshots/datetime_example.png
* @image latex screenshots/datetime_example.eps width=\textwidth
* @example datetime_example.js
*/
/**
* @page clock_js_example Clock widget example with Javascript Binding.
* @dontinclude clock_example.js
* 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.
* @skip efl
* @until elm
* 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 @p true, hidding the window, instead of destroying it.
* @skip Win
* @until autohide_set
* 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.
* @skipline elm.Box
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @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.
* @skip win
* @until visible
* 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.
* @skipline Clock
* When using the elm.Box the packing method of the subobj - clock
* in this case - should be defined. There are four possible methods:
* @li @c pack_start(subobj_) - Add an object to the beginning of the
* pack list. Pack @c 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.
* @li @c pack_end(subobj_) - Add an object at the end of the pack
* list. Pack @c 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.
* @li @c pack_before(subobj_, before_) - Adds an object to the box
* before the indicated object. This will add the @c subobj_ to the
* box indicated before the object indicated with @c 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.
* @li @c pack_after(subobj_, after_) - Adds an object to the box
* after the indicated object. This will add the @c subobj_ to the box
* indicated after the object indicated with @c 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 clock
* visible.
* @skip pack_end
* @until visible
* The second clock shows the 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.
* @skip Clock
* @until visible
* The third one will show the seconds digits, which will flip in
* synchrony with system time. Note, besides, that the time itself is
* @b different from the system's -- it was customly set with
* time_set():
* @skip ck3
* @until visible
* 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:
* @skip ck4
* @until visible
* The fifth, besides editable, it has only the time @b 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:
* @li @p default: Default value. Means that all digits are
* editable, when in edition mode.
* @li @p hour_decimal: Decimal digit of hours value should
* be editable;
* @li @p hour_unit: Unit digit of hours value should be
* editable;
* @li @p min_decimal: Decimal digit of minutes value should
* be editable;
* @li @p min_unit: Unit digit of minutes value should be
* editable;
* @li @p sec_decimal: Decimal digit of seconds value should
* be editable;
* @li @p sec_unit: Unit digit of seconds value should be
* editable;
* @li @p all: All digits should be editable;
* Finishing this example we should set win to be visible.
* @skip ck5
* @until win.visible
* See the full @ref clock_example.js, whose window should look
* like this picture:
* @image html screenshots/clock_example.png
* @image latex screenshots/clock_example.eps width=\textwidth
* @example clock_example.js
*/
/**
* @page separator_js_example_01 Separator with Javascript Binding
* @dontinclude separator_example_01.js
* Separator is a very thin object used to separate other objects,
* which 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 @a 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.
* @skip efl
* @until elm
* 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 @p true, hidding the window, instead of destroying it.
* @skip win
* @until autohide_set
* Now let's create the background with the JS binding method, passing
* our window as parent.
* @skipline bg
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @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.
* @skip win
* @until visible
* 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 @a true, the
* box will become horizontal, arranging contents from left to right.
* @skip bx
* @until horizontal
* 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.
* @skip weight
* @until 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).
* @skip rect
* @until min_set
* 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.
* @until weight
* Now we have to The function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal alignment
* hint.
* @li 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.
* @skipline align
* @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:
* @li @c pack_start(subobj_) - Add an object to the beginning of the
* pack list. Pack @c 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.
* @li @c pack_end(subobj_) - Add an object at the end of the pack
* list. Pack @c 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.
* @li @c pack_before(subobj_, before_) - Adds an object to the box
* before the indicated object. This will add the @c subobj_ to the
* box indicated before the object indicated with @c 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.
* @li @c pack_after(subobj_, after_) - Adds an object to the box
* after the indicated object. This will add the @c subobj_ to the box
* indicated after the object indicated with @c 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.
* @skip visible
* @until pack
* 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.
* @skip separator
* @until pack
* 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 @p true.
* @skip rect2
* @until win.visible
* The full code for this example can be found at @ref separator_example_01.js .
* This example will look like:
* @image html screenshots/separator_example_01.png
* @image latex screenshots/separator_example_01.eps width=\textwidth
* @example separator_example_01.js
*/
/**
* @page icon_js_example_01 Icon Example with Javascript Binding
* @dontinclude icon_example_01.js
* This example is as simple as possible. An icon object will be added
* to the window over a blank background, and set to be resizable
* together with the window. All the options set through the example
* will affect the behavior of this icon.
* 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.
* @skip efl
* @until elm
* 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 @p true, hidding the window, instead of destroying it.
* @skip win
* @until autohide_set
* Now we construct the elm icon and for this we use the JS method
* below, setting it's parent. An icon object is used to display
* standard icon images ("delete", "edit", "arrows", etc.) or images
* coming from a custom file (PNG, JPG, EDJE, etc.), on icon contexts.
* @skipline icon
* Now we can set the standard "home" icon, chosen for this example.
* @skipline standard
* An interesting thing is that after setting this, it's possible to
* check where in the filesystem is the theme used by this icon, and
* the name of the group used, using file_get. Note that when a
* function get returns two parameters, they are therefore stored in a
* array, following the same order as the function.
* @skip path
* @until console
* We can also get the name of the standard icon that we setted
* before.
* @skip name
* @until console
* We can now go setting our options.
* no_scale_set() is used just to set this value to true as we don't
* actually want to scale our icon, just resize it.
* resizable_set() is used to allow the icon to be resized to a size
* smaller than the original one, but not to a size bigger than it.
* smooth_set() will disable the smooth scaling, so the scale
* algorithm used to scale the icon to the new object size is going to
* be faster, but with a lower quality.
* fill_outside_set() is used to ensure that the icon will fill the
* entire area available to it, even if keeping the aspect ratio. The
* icon will overflow its width or height (any of them that is
* necessary) to the object area, instead of resizing the icon down
* until it can fit entirely in this area.
* This is the code for setting these options:
* @until fill_outside
* However, if you try this example you may notice that this image is
* not being affected by all of these options. This happens because
* the used icon will be from elementary theme, and thus it has its
* own set of options like smooth scaling and fill_outside
* options. You can change the "home" icon to use some image (from
* your system) and see that then those options will be respected.
* To better understand, the function @c 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:
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
* @li 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.
* @skipline weight_set
* @note Default weight hint values are 0.0, for both axis.
* Now we add the icon as a resize_object to win informing that
* when the size of the win changes so should the icon's
* size. And finally we make icon visible.
* @skip resize
* @until visible
* Now we set the size for the window, making it visible in the end:
* @skip size_set
* @until visible
* The full code for this example can be found at @ref icon_example_01.js
* This example will look like this:
* @image html screenshots/icon_example_01.png
* @image latex screenshots/icon_example_01.eps width=\textwidth
* @example icon_example_01.js
*/