efl/doc/elementary_examples_js.dox

1023 lines
37 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* @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 <b>"only Date display"</b>. 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 systems 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 <b>edition
* mode</b>. 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
*/