efl-js: JavaScript Eolian binding

To configure elementary sources with bindings to use in nodejs add
––with-js=nodejs in configure flags in EFL compilation to generate
node files, then compile elementary normally:

path/to/efl$ configure --with-js=nodejs
path/to/efl$ make
path/to/efl$ make install

path/to/elm$ configure
path/to/efl$ make
path/to/efl$ make install

To use, you have to require elm:

elm = require('elm')

The bindings is divided in two parts: generated and manually
written. The generation uses the Eolian library for parsing Eo files
and generate C++ code that is compiled against V8 interpreter library
to create a elm.node file that can be required in a node.js instance.

@feature

2 files changed, 1023 insertions, 1 deletions

diff --git a/doc/Doxyfile.in b/doc/Doxyfile.in
index 7c0e86a61..6ad06e39a 100644
--- a/doc/Doxyfile.in
+++ b/doc/Doxyfile.in
@@ -1,7 +1,7 @@
 PROJECT_NAME           = Elementary
 PROJECT_NUMBER         = @PACKAGE_VERSION@
 OUTPUT_DIRECTORY       = .
-INPUT                  = @srcdir@/examples.dox @srcdir@/examples-cxx.dox @top_srcdir@/src/lib @srcdir@/index.doxy @top_srcdir@/src/bin/elm_prefs_cc_handlers.c
+INPUT                  = @srcdir@/examples.dox @srcdir@/examples-cxx.dox @srcdir@/examples-js.dox @top_srcdir@/src/lib @srcdir@/index.doxy @top_srcdir@/src/bin/elm_prefs_cc_handlers.c
 IMAGE_PATH             = @srcdir@/img
 OUTPUT_LANGUAGE        = English
 GENERATE_HTML          = YES
diff --git a/doc/examples-js.dox b/doc/examples-js.dox
new file mode 100644
index 000000000..37f867a63
--- /dev/null
+++ b/doc/examples-js.dox
@@ -0,0 +1,1022 @@
+/**
+ * @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 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 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.
+
+ * @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,
+ * 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 @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
+ */
\ No newline at end of file