efl-js: JavaScript Eolian bindingdevs/felipealmeida/js

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

52 files changed, 2803 insertions, 46 deletions

diff --git a/Makefile_Eolian_Cxx_Helper.am b/Makefile_Eolian_Cxx_Helper.am
index 8b792e012..bbae6f0c5 100644
--- a/Makefile_Eolian_Cxx_Helper.am
+++ b/Makefile_Eolian_Cxx_Helper.am
@@ -6,7 +6,7 @@ AM_V_EOLCXX = $(am__v_EOLCXX_@AM_V@)
 am__v_EOLCXX_ = $(am__v_EOLCXX_@AM_DEFAULT_V@)
 am__v_EOLCXX_0 = @echo "  EOLCXX  " $@;
 
-SUFFIXES += .eo.hh
+SUFFIXES += .eo.hh .eo.impl.hh
 
 %.eo.impl.hh %.eo.hh: %.eo $(_EOLIAN_CXX_DEP)
 	$(AM_V_EOLCXX) \
diff --git a/Makefile_Eolian_Js_Helper.am b/Makefile_Eolian_Js_Helper.am
new file mode 100644
index 000000000..11c31347e
--- /dev/null
+++ b/Makefile_Eolian_Js_Helper.am
@@ -0,0 +1,15 @@
+
+if HAVE_JS
+EOLIAN_JS = @eolian_js@
+_EOLIAN_JS_DEP = @eolian_js@
+endif
+
+AM_V_EOLJS = $(am__v_EOLJS_@AM_V@)
+am__v_EOLJS_ = $(am__v_EOLJS_@AM_DEFAULT_V@)
+am__v_EOLJS_0 = @echo "  EOLJS  " $@;
+
+SUFFIXES += .eo.js.cc
+
+%.eo.js.cc: %.eo $(_EOLIAN_JS_DEP)
+	$(AM_V_EOLJS)$(EOLIAN_JS) $(EOLIAN_FLAGS) -o $@ $<
+
diff --git a/configure.ac b/configure.ac
index 1271665b8..c1856fa8a 100644
--- a/configure.ac
+++ b/configure.ac
@@ -36,6 +36,12 @@ AC_ARG_ENABLE([cxx-bindings],
    [want_cxx11="${enableval}"],
    [want_cxx11="yes"])
 
+AC_ARG_ENABLE([js-bindings],
+   [AS_HELP_STRING([--enable-js-bindings],
+       [enable JS bindings. @<:@default=disabled@:>@])],
+   [want_js="${enableval}"],
+   [want_js="yes"])
+
 # Tests
 
 AC_ARG_WITH([tests],
@@ -196,6 +202,7 @@ EFL_WITH_BIN([eldbus], [eldbus_codegen], [eldbus-codegen])
 # Force the helper to try external eolian generators
 AM_CONDITIONAL([HAVE_EOLIAN_GEN], [true])
 AM_CONDITIONAL([HAVE_EOLIAN_CXX], [true])
+AM_CONDITIONAL([HAVE_EOLIAN_JS], [true])
 
 EFL_ENABLE_BIN([elementary-test])
 EFL_ENABLE_BIN([elementary-codegen])
@@ -256,13 +263,6 @@ ELM_CHECK_OPTION([eweather], [0.2.0])
 ELM_CHECK_OPTION([emap], [0.1.0])
 ELM_CHECK_OPTION([eweb])
 
-PKG_CHECK_MODULES([ELEMENTARY], [${requirement_elm_pc}])
-PKG_CHECK_MODULES([ELEMENTARY_PC], [${requirement_elm_pc_only}])
-
-EFL_ENABLE_EO_API_SUPPORT
-EFL_ENABLE_BETA_API_SUPPORT
-
-
 if test "x${HAVE_CXX11}" = "x1" -a "x${want_cxx11}" = "xyes"; then
    PKG_CHECK_MODULES([ELEMENTARY_CXX],
       [
@@ -294,6 +294,67 @@ else
 fi
 AM_CONDITIONAL([HAVE_CXX11], [test "x${have_cxx11}" = "xyes"])
 
+if test "x${want_js}" = "xyes"; then
+   PKG_CHECK_MODULES([ELEMENTARY_JS],
+      [
+        eolian-js >= efl_version
+        eo-js >= efl_version
+        efl-js >= efl_version
+        eina-js >= efl_version
+        efl-cxx >= efl_version
+        eo-cxx >= efl_version
+        eina-cxx >= efl_version
+      ],
+      [
+        requirement_elm_js_pc="${requirement_elm_js_pc} \
+          eolian-js >= efl_version \
+          eo-js >= efl_version \
+          efl-js >= efl_version \
+          eina-js >= efl_version \
+          efl-cxx >= efl_version \
+          eina-cxx >= efl_version \
+          eo-cxx >= efl_version \
+        "
+        have_js="yes"
+        dep_js=`$PKG_CONFIG --variable=want_js efl-js`
+      ],
+      [have_js="no"
+       dep_js="none"
+      ]
+   )
+else
+   have_js="no"
+   dep_js="none"
+fi
+
+PKG_CHECK_MODULES([ELEMENTARY], [${requirement_elm_pc}])
+if test "x${have_js}" = "xyes"; then
+  PKG_CHECK_MODULES([ELEMENTARY_JS], [${requirement_elm_js_pc}])
+fi
+PKG_CHECK_MODULES([ELEMENTARY_PC], [${requirement_elm_pc_only}])
+
+EFL_ENABLE_EO_API_SUPPORT
+EFL_ENABLE_BETA_API_SUPPORT
+
+AM_CONDITIONAL([HAVE_JS], [test "x${have_js}" = "xyes"])
+
+AM_CONDITIONAL([HAVE_NODEJS], [test "x${dep_js}" = "xnodejs"])
+AC_DEFINE_IF([HAVE_NODEJS], [test "x${dep_js}" = "xnodejs"],
+  [1], [Using NodeJS])
+AC_SUBST([want_js])
+AC_SUBST([HAVE_NODEJS])
+
+AM_CONDITIONAL([HAVE_JS], [test "x${dep_js}" = "xnodejs" -o "x${dep_js}" = "xlibv8" -o "x${dep_js}" = "xlibuv"])
+AC_DEFINE_IF([HAVE_JS], [test "x${dep_js}" = "xnodejs" -o "x${dep_js}" = "xlibv8" -o "x${dep_js}" = "xlibuv"],
+             [1], [Compiling bindings for JavaScript])
+AC_SUBST([HAVE_JS])
+
+AM_CONDITIONAL([HAVE_LIBUV], [test "x${dep_js}" = "xnodejs" -o "x${dep_js}" = "xlibuv"])
+AC_DEFINE_IF([HAVE_LIBUV], [test "x${dep_js}" = "xnodejs" -o "x${dep_js}" = "xlibuv"],
+             [1], [Compiling libuv event loop integration])
+AC_SUBST([HAVE_LIBUV])
+
+EFL_WITH_BIN([eolian-js], [eolian-js], [eolian_js])
 
 MODULE_EDJE=`${PKG_CONFIG} --variable=module_arch edje`
 AC_SUBST([MODULE_EDJE])
@@ -359,6 +420,7 @@ ELEMENTARY_LIBS="${ELEMENTARY_LIBS} ${requirement_elm_libs}"
 ELEMENTARY_PC_LIBS="${ELEMENTARY_PC_LIBS} ${requirement_elm_libs}"
 
 AC_SUBST([requirement_elm_pc])
+AC_SUBST([requirement_elm_js_pc])
 
 # check unit testing library
 if test "${want_tests}" = "yes"; then
@@ -564,6 +626,7 @@ echo "  elm_prefs_cc.............: ${elm_prefs_cc}"
 echo "  eolian_gen...............: ${eolian_gen}"
 echo "  eolian_cxx...............: ${eolian_cxx}"
 echo "  eldbus_codegen...........: ${eldbus_codegen}"
+echo "  eolian_js...............:  ${eolian_js}"
 echo
 echo "  Build elementary_test....: ${have_elementary_test}"
 echo "  Build elementary_codegen.: ${have_elementary_codegen}"
@@ -573,6 +636,7 @@ echo "  Examples installed.......: ${enable_install_examples}"
 echo "  Build elementary_config..: ${have_elementary_config}"
 echo "  Enable debug.............: ${want_elementary_debug}"
 echo "  Enable C++...............: ${have_cxx11}"
+echo "  Enable JavaScript........: ${have_js}"
 echo
 echo "Compilation................: make (or gmake)"
 echo "  CPPFLAGS.................: $CPPFLAGS"
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
diff --git a/m4/ac_define_if.m4 b/m4/ac_define_if.m4
new file mode 100644
index 000000000..961ca6445
--- /dev/null
+++ b/m4/ac_define_if.m4
@@ -0,0 +1,7 @@
+dnl use: AC_DEFINE_IF(id, testcond, val, comment)
+AC_DEFUN([AC_DEFINE_IF],
+[
+if $2; then
+   AC_DEFINE($1, $3, $4)
+fi
+])
diff --git a/src/examples/Makefile.am b/src/examples/Makefile.am
index dc18ec719..112dbeb0e 100644
--- a/src/examples/Makefile.am
+++ b/src/examples/Makefile.am
@@ -145,7 +145,8 @@ evas3d_scene_on_button_example.c \
 evas3d_object_on_button_example.c \
 evas3d_map_example.edc \
 evas3d_map_example.c \
-track_example_01.c
+track_example_01.c \
+twitter_example_01.edc
 
 if HAVE_CXX11
 SRCS += \
@@ -197,7 +198,8 @@ files_DATA += \
 	theme_example.edj \
 	layout_example.edj\
 	codegen_example.edj \
-	evas3d_map_example.edj
+	evas3d_map_example.edj \
+	twitter_example_01.edj
 
 clean-local:
 	rm -f *.edj *.epb *.cfg *.cfg.bkp
@@ -528,4 +530,4 @@ screenshots:
 
 endif
 
-EXTRA_DIST = dict.txt layout_example.edc theme_example.edc codegen_example.edc evas3d_map_example.edc
+EXTRA_DIST = dict.txt layout_example.edc theme_example.edc codegen_example.edc evas3d_map_example.edc twitter_example_01.edc
diff --git a/src/examples/bg_example_01.js b/src/examples/bg_example_01.js
new file mode 100644
index 000000000..227259b63
--- /dev/null
+++ b/src/examples/bg_example_01.js
@@ -0,0 +1,15 @@
+
+var elm = require('elm')
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Bg Plain");
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+win.setSize(320,320);
+win.setVisible(true);
+
diff --git a/src/examples/bg_example_02.js b/src/examples/bg_example_02.js
new file mode 100644
index 000000000..e8e1a63e0
--- /dev/null
+++ b/src/examples/bg_example_02.js
@@ -0,0 +1,19 @@
+
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Bg Image");
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setLoadSize(20,20);
+bg.setOption(elm.Elm.Bg.Option.CENTER);
+
+//TODO: elm_app_data_dir_get
+bg.setFile('../../data/images/plant_01.jpg', null);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+win.setSize(320, 320);
+win.setVisible(true);
diff --git a/src/examples/box_js_example_01.js b/src/examples/box_js_example_01.js
new file mode 100644
index 000000000..ba7761da5
--- /dev/null
+++ b/src/examples/box_js_example_01.js
@@ -0,0 +1,34 @@
+
+var elm = require('elm')
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle('title');
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+bx = new elm.Elm.Box(win);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+
+entry = new elm.Elm.Label(win);
+entry.setSize(100, 100);
+entry.setText(null, "Texto");
+
+console.log('Texto: ', entry.getText(null));
+
+entry.setSizeHintWeight(1.0, 1.0);
+entry.setSizeHintAlign(-1.0, -1.0);
+entry.setWrapWidth(50);
+bx.packEnd(entry);
+entry.setVisible(true);
+
+bx.setVisible(true);
+
+win.setSize(300, 320);
+win.setVisible(true);
+
+console.log("Going to wait now\n");
diff --git a/src/examples/box_js_example_02.js b/src/examples/box_js_example_02.js
new file mode 100644
index 000000000..6e76bd11a
--- /dev/null
+++ b/src/examples/box_js_example_02.js
@@ -0,0 +1,86 @@
+
+var efl = require('efl')
+var elm = require('elm')
+
+_add_cb = function(){
+    var btn = new elm.Elm.Button(win);
+    btn.setText("elm.text", "I do nothing");
+    bx.packEnd(btn);
+    btn.setVisible(true);
+}
+
+_clear_cb = function(){
+    bx.clear();
+}
+
+_unpack_cb = function(btn){
+    bx.unpack(btn);
+    btn.setColor(128, 64, 0, 128)
+}
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Box example");
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+bigbox = new elm.Elm.Box(win)
+bigbox.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bigbox);
+
+bx = new elm.Elm.Box(win)
+bx.setSizeHintWeight(1.0, 1.0);
+bx.setHorizontal(true);
+bigbox.packEnd(bx);
+bx.setVisible(true);
+
+bt = new elm.Elm.Button(win);
+bt.textSet("elm.text", "Add");
+bx.packEnd(bt);
+bt.setVisible(true);
+bt.on('clicked', _add_cb);
+
+bt = new elm.Elm.Button(win);
+bt.textSet("elm.text", "Clear");
+bx.packEnd(bt);
+bt.setVisible(true);
+bt.on('clicked', _clear_cb);
+
+bx = new elm.Elm.Box(win)
+bx.setSizeHintWeight(1.0, 1.0);
+bx.setSizeHintAlign(-1.0, -1.0);
+bx.setHorizontal(true);
+bigbox.packEnd(bx);
+bx.setVisible(true);
+
+bt = new elm.Elm.Button(win);
+bt.textSet("elm.text", "Button 1");
+bx.packEnd(bt);
+bt.setSizeHintWeight(1.0, 1.0);
+bt.setSizeHintAlign(-1.0, -1.0);
+bt.setVisible(true);
+bt.on('clicked', _unpack_cb);
+
+bt = new elm.Elm.Button(win);
+bt.textSet("elm.text", "Button 2");
+bx.packEnd(bt);
+bt.setSizeHintWeight(1.0, 0.0);
+bt.setSizeHintAlign(1.0, 0.5);
+bt.setVisible(true);
+bt.on('clicked', _unpack_cb);
+
+bt = new elm.Elm.Button(win);
+bt.textSet("elm.text", "Button 3");
+bx.packEnd(bt);
+bt.setVisible(true);
+bt.on('clicked', _unpack_cb);
+
+bigbox.setVisible(true);
+
+win.setSize(300, 320);
+win.setVisible(true);
+
+console.log("Going to wait now\n");
diff --git a/src/examples/bubble_example_01.js b/src/examples/bubble_example_01.js
new file mode 100644
index 000000000..89ee4737b
--- /dev/null
+++ b/src/examples/bubble_example_01.js
@@ -0,0 +1,54 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Bg Plain");
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+label1 = new elm.Elm.Label(win);
+label1.setText(null, "Bubble with no icon, info or label");
+label1.setVisible(true);
+
+console.log(efl);
+
+icon = new efl.Evas.Rectangle(win);
+icon.setColor( 0, 0, 255, 255);
+icon.setVisible(true);
+
+bubble1 = new elm.Elm.Bubble(win);
+bubble1.contentSet("icon", icon);
+bubble1.setText("info", "INFO");
+bubble1.setText(null, "LABEL");
+bubble1.contentSet(null, label1);
+bubble1.setSize(300, 100);
+bubble1.setVisible(true);
+
+corner = 0;
+bubble1.on('clicked',
+  function()
+  {
+      ++corner;
+      if (corner > 3)
+          bubble1.pos_set(corner = 0);
+      else
+          bubble1.pos_set(corner);
+  });
+
+label2 = new elm.Elm.Label(win);
+label2.setText(null, "Bubble with no icon, info or label");
+label2.setVisible(true);
+
+bubble2 = new elm.Elm.Bubble(win);
+bubble2.contentSet(null, label2);
+bubble2.setSize(200, 50);
+bubble2.setPosition(0, 110);
+bubble2.setVisible(true);
+
+win.setSize(300, 200);
+win.setVisible(true);
diff --git a/src/examples/button_example_00.js b/src/examples/button_example_00.js
new file mode 100644
index 000000000..64d7c8f6f
--- /dev/null
+++ b/src/examples/button_example_00.js
@@ -0,0 +1,21 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Hello, World!");
+win.setAutohide(true);
+
+btn = new elm.Elm.Button(win);
+btn.setText(null, "Good-Bye, World!");
+btn.setSize(120, 30);
+btn.setPosition(60, 15);
+btn.setSizeHintWeight(1.0, 1.0);
+btn.setSizeHintAlign(1.0, 1.0);
+btn.setVisible(true);
+
+btn.on('clicked', function () { console.log('clicked'); } );
+
+win.setSize(240, 60);
+win.setVisible(true);
+
diff --git a/src/examples/button_example_01.js b/src/examples/button_example_01.js
new file mode 100644
index 000000000..5f34c112a
--- /dev/null
+++ b/src/examples/button_example_01.js
@@ -0,0 +1,208 @@
+efl = require('efl');
+elm = require('elm');
+
+_btn_options_cb = function(_btn) {
+     var text = _btn.textGet("elm.text");
+     var lbl = text.split(": ");
+
+     var t = parseFloat(lbl[1]);
+     if (lbl[0] === "Initial")
+     {
+         console.log ("Initial: " + lbl[1]);
+         up.setAutorepeatInitialTimeout(t);
+         down.setAutorepeatInitialTimeout(t);
+         left.setAutorepeatInitialTimeout(t);
+         right.setAutorepeatInitialTimeout(t);
+     }
+     else if (lbl[0] === "Gap")
+     {
+         console.log ("Gap: " + lbl[1]);
+         up.setAutorepeatGapTimeout(t);
+         down.setAutorepeatGapTimeout(t);
+         left.setAutorepeatGapTimeout(t);
+         right.setAutorepeatGapTimeout(t);
+     }
+}
+
+_btn_cursors_move = function(_btn) {
+   var size = mid.getSizeHintAlign();
+   var ax = size[0];
+   var ay = size[1];
+   console.log ("cursor move: ", size[0], size[1]);
+
+   if (!icon_still) {
+       var icon = new elm.Elm.Icon(mid);
+       var icon_still_p = mid.contentUnset("icon");
+       if (icon_still_p) {
+           icon_still_p.setVisible(false);
+        }
+      icon.setStandard("chat");
+      mid.contentSet("icon", icon);
+   }
+
+   if (_btn.getPosition()[1] == up.getPosition()[1]) {
+        ay -= 0.05;
+        if (ay < 0.0) ay = 0.0;
+   }
+   else if (_btn.getPosition()[1] == down.getPosition()[1]) {
+       ay += 0.05;
+       if (ay > 1.0) ay = 1.0;
+   }
+   else if (_btn.getPosition()[0] == left.getPosition()[0]) {
+        ax -= 0.05;
+        if (ax < 0.0) ax = 0.0;
+   }
+   else if (_btn.getPosition()[0] == right.getPosition()[0]) {
+        ax += 0.05;
+        if (ax > 1.0) ax = 1.0;
+   }
+   mid.setSizeHintAlign(ax, ay);
+}
+
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Button example");
+win.setAutohide(true);
+
+icon_still = new elm.Elm.Icon(win);
+mid = new elm.Elm.Button(win);
+up = new elm.Elm.Button(win);
+down = new elm.Elm.Button(win);
+left = new elm.Elm.Button(win);
+right = new elm.Elm.Button(win);
+
+_btn_cursors_release = function() {
+    if (icon_still)
+    {
+       mid.contentSet("icon", icon_still);
+       icon_still = null;
+    }
+}
+
+box = new elm.Elm.Box(win);
+box.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(box);
+box.setVisible(true);
+
+box_initial = new elm.Elm.Box(win);
+box_initial.setHorizontal(true);
+box_initial.setSizeHintWeight(1.0, 0.0);
+box.packEnd(box_initial);
+box_initial.setVisible(true);
+
+btn = new elm.Elm.Button(win);
+btn.setText("elm.text", "Initial: 0.0");
+box_initial.packEnd(btn);
+btn.setVisible(true);
+
+btn.on('clicked', _btn_options_cb);
+
+btn2 = new elm.Elm.Button(win);
+btn2.setText("elm.text", "Initial: 1.0");
+box_initial.packEnd(btn2);
+btn2.setVisible(true);
+btn2.on('clicked', _btn_options_cb);
+
+btn3 = new elm.Elm.Button(win);
+btn3.setText("elm.text", "Initial: 5.0");
+box_initial.packEnd(btn3);
+btn3.setVisible(true);
+btn3.on('clicked', _btn_options_cb);
+
+box_gap = new elm.Elm.Box(win);
+box_gap.setHorizontal(true);
+box_gap.setSizeHintWeight(1.0, 0.0);
+box.packEnd(box_gap);
+box_gap.setVisible(true);
+
+btn4 = new elm.Elm.Button(win);
+btn4.setText("elm.text", "Gap: 0.1");
+box_gap.packEnd(btn4);
+btn4.setVisible(true);
+btn4.on('clicked', _btn_options_cb);
+
+btn5 = new elm.Elm.Button(win);
+btn5.setText("elm.text", "Gap: 0.5");
+box_gap.packEnd(btn5);
+btn5.setVisible(true);
+btn5.on('clicked', _btn_options_cb);
+
+btn6 = new elm.Elm.Button(win);
+btn6.setText("elm.text", "Gap: 1.0");
+box_gap.packEnd(btn6);
+btn6.setVisible(true);
+btn6.on('clicked', _btn_options_cb);
+
+up.setAutorepeat(true);
+up.setAutorepeatInitialTimeout(1.0);
+up.setAutorepeatGapTimeout(0.5);
+up.setSizeHintWeight(1.0, 0.0);
+up.setSizeHintAlign(-1.0, 0.0);
+box.packEnd(up);
+up.setVisible(true);
+up.on('repeated', _btn_cursors_move)
+up.on('unpressed', _btn_cursors_release);
+icon_up = new elm.Elm.Icon(win);
+icon_up.setStandard("arrow_up");
+up.contentSet("icon", icon_up);
+
+box_inferior = new elm.Elm.Box(win);
+box_inferior.setHorizontal(true);
+box_inferior.setSizeHintWeight(1.0, 1.0);
+box_inferior.setSizeHintAlign(-1.0, -1.0);
+box.packEnd(box_inferior);
+box_inferior.setVisible(true);
+
+left.setAutorepeat(true);
+left.setAutorepeatInitialTimeout(1.0);
+left.setAutorepeatGapTimeout(0.5);
+left.setSizeHintWeight(0.0, 1.0);
+left.setSizeHintAlign(0.0, -1.0);
+box_inferior.packEnd(left);
+left.setVisible(true);
+left.on('repeated', _btn_cursors_move)
+left.on('unpressed', _btn_cursors_release);
+
+icon_left = new elm.Elm.Icon(win);
+icon_left.setStandard("arrow_left");
+left.contentSet("icon", icon_left);
+
+mid.setSizeHintWeight(1.0, 1.0);
+box_inferior.packEnd(mid);
+mid.setVisible(true);
+
+icon_mid = new elm.Elm.Icon(win);
+icon_mid.setStandard("close");
+mid.contentSet("icon", icon_mid);
+
+right.setAutorepeat(true);
+right.setAutorepeatInitialTimeout(1.0);
+right.setAutorepeatGapTimeout(0.5);
+right.setSizeHintWeight(0.0, 1.0);
+right.setSizeHintAlign(0.0, -1.0);
+box_inferior.packEnd(right);
+right.setVisible(true);
+right.on('repeated', _btn_cursors_move);
+right.on('unpressed', _btn_cursors_release);
+
+icon_right = new elm.Elm.Icon(win);
+icon_right.setStandard("arrow_right");
+right.contentSet("icon", icon_right);
+
+down.setAutorepeat(true);
+down.setAutorepeatInitialTimeout(1.0);
+down.setAutorepeatGapTimeout(0.5);
+down.setSizeHintWeight(1.0, 0.0);
+down.setSizeHintAlign(-1.0, 0.0);
+box.packEnd(down);
+down.setVisible(true);
+down.on('repeated', _btn_cursors_move);
+down.on('unpressed', _btn_cursors_release);
+
+icon_down = new elm.Elm.Icon(win);
+icon_down.setStandard("arrow_down");
+down.contentSet("icon", icon_down);
+
+win.setSize(300, 320);
+win.setVisible(true);
+
diff --git a/src/examples/calendar_example_01.js b/src/examples/calendar_example_01.js
new file mode 100644
index 000000000..980bf83a2
--- /dev/null
+++ b/src/examples/calendar_example_01.js
@@ -0,0 +1,14 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Calendar Creation Example");
+win.setAutohide(true);
+
+cal = new elm.Elm.Calendar(win);
+cal.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(cal);
+cal.setVisible(true);
+
+win.setVisible(true);
diff --git a/src/examples/calendar_example_02.js b/src/examples/calendar_example_02.js
new file mode 100644
index 000000000..c8b53fd75
--- /dev/null
+++ b/src/examples/calendar_example_02.js
@@ -0,0 +1,17 @@
+elm = require('elm');
+
+//var weekdays = ["S", "M", "T", "W", "T", "F", "S"];
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Calendar Layout Formatting Example");
+win.setAutohide(true);
+
+cal = new elm.Elm.Calendar(win);
+cal.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(cal);
+
+//cal.format_function_set(funtion);
+//cal.weekdays_names_set(weekdays);
+
+cal.setVisible(true);
+win.setVisible(true);
diff --git a/src/examples/calendar_example_03.js b/src/examples/calendar_example_03.js
new file mode 100644
index 000000000..481079fc6
--- /dev/null
+++ b/src/examples/calendar_example_03.js
@@ -0,0 +1,15 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Calendar Min/Max Year Example");
+win.setAutohide(true);
+
+cal = new elm.Elm.Calendar(win);
+cal.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(cal);
+cal.setMinMaxYear(2020,2022);
+cal.setVisible(true);
+
+win.setVisible(true);
diff --git a/src/examples/calendar_example_04.js b/src/examples/calendar_example_04.js
new file mode 100644
index 000000000..7f1094149
--- /dev/null
+++ b/src/examples/calendar_example_04.js
@@ -0,0 +1,32 @@
+
+elm = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Calendar Day Selection Example");
+win.setAutohide(true);
+
+box = new elm.Elm.Box(win);
+box.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(box);
+box.setVisible(true);
+
+cal = new elm.Elm.Calendar(win);
+cal.setSizeHintWeight(1.0, 1.0);
+cal.setSizeHintAlign(-1.0, -1.0);
+cal.setSelectMode(elm.Elm.Calendar.Select.Mode.NONE);
+win.resizeObjectAdd(cal);
+cal.setVisible(true);
+box.packEnd(cal);
+
+cal2 = new elm.Elm.Calendar(win);
+cal2.setSizeHintWeight(1.0, 1.0);
+cal2.setSizeHintAlign(-1.0, -1.0);
+// selected_time_set uses tm* struct
+//dateCurrent = new Date();
+//dateSelected = dateCurrent.getSeconds() + 2 * 3600 * 24;
+//cal2.selected_time_set(dateSelected);
+cal2.setVisible(true);
+box.packEnd(cal2);
+
+win.setVisible(true);
diff --git a/src/examples/calendar_example_05.js b/src/examples/calendar_example_05.js
new file mode 100644
index 000000000..7759b2da8
--- /dev/null
+++ b/src/examples/calendar_example_05.js
@@ -0,0 +1,29 @@
+
+elm = require('elm');
+
+_print_cal_info_cb = function ()
+{
+   //var sel_time = cal.selected_time_get()
+
+   var interval = cal.getInterval();
+   var mm_yr = cal.getMinMaxYear();
+   var sel_enable = cal.getSelectMode() != elm.Elm.Calendar.Select.Mode.NONE;
+   var wds = cal.getWeekdaysNames();
+
+   console.log("weekdays= " + wds + ", interval= " + interval +
+                   "\nYear_Min: "+mm_yr[0]+ ", Year_Max: "+mm_yr[1]+", Sel Enabled: "+sel_enable);
+}
+
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Calendar Getters Example");
+win.setAutohide(true);
+
+cal = new elm.Elm.Calendar(win);
+cal.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(cal);
+
+cal.on('changed', _print_cal_info_cb);
+
+cal.setVisible(true);
+win.setVisible(true);
diff --git a/src/examples/clock_example.js b/src/examples/clock_example.js
new file mode 100644
index 000000000..f13c07e72
--- /dev/null
+++ b/src/examples/clock_example.js
@@ -0,0 +1,43 @@
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Clock Example");
+win.setAutohide(true);
+
+bx = new elm.Elm.Box(win);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+bx.setVisible(true);
+
+ck = new elm.Elm.Clock(win);
+bx.packEnd(ck);
+ck.setVisible(true);
+
+ck2 = new elm.Elm.Clock(win);
+ck2.setShowAmPm(true);
+bx.packEnd(ck2);
+ck2.setVisible(true);
+
+ck3 = new elm.Elm.Clock(win);
+ck3.setShowSeconds(true);
+ck3.setTime(10, 11, 12);
+bx.packEnd(ck3);
+ck3.setVisible(true);
+
+ck4 = new elm.Elm.Clock(win);
+ck4.setEdit(true);
+ck4.setShowSeconds(true);
+ck4.setShowAmPm(true);
+ck4.setTime(10, 11, 12);
+bx.packEnd(ck4);
+ck4.setVisible(true);
+
+ck5 = new elm.Elm.Clock(win);
+ck5.setShowSeconds(true);
+ck5.setEdit(true);
+digedit = elm.Elm.Clock.EditMode.HOUR_UNIT | elm.Elm.Clock.EditMode.MIN_UNIT | elm.Elm.Clock.EditMode.SEC_UNIT;
+ck5.setEditMode(digedit);
+bx.packEnd(ck5);
+ck5.setVisible(true);
+
+win.setVisible(true);
diff --git a/src/examples/datetime_example.js b/src/examples/datetime_example.js
new file mode 100644
index 000000000..92b361ec8
--- /dev/null
+++ b/src/examples/datetime_example.js
@@ -0,0 +1,42 @@
+
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Datetime");
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+bx = new elm.Elm.Box(win);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+bx.setVisible(true);
+
+datetime = new elm.Elm.Datetime(bx);
+datetime.setSizeHintWeight(1.0, 1.0);
+datetime.setSizeHintAlign(-1.0, 0.5);
+datetime.fieldVisibleSet(elm.Elm.Datetime.FieldType.HOUR, false);
+datetime.fieldVisibleSet(elm.Elm.Datetime.FieldType.MINUTE, false);
+datetime.fieldVisibleSet(elm.Elm.Datetime.FieldType.AMPM, false);
+bx.packEnd(datetime);
+datetime.setVisible(true);
+
+datetime = new elm.Elm.Datetime(bx);
+datetime.setSizeHintWeight(1.0, 1.0);
+datetime.setSizeHintAlign(-1.0, 0.5);
+datetime.fieldVisibleSet(elm.Elm.Datetime.FieldType.YEAR, false);
+datetime.fieldVisibleSet(elm.Elm.Datetime.FieldType.MONTH, false);
+datetime.fieldVisibleSet(elm.Elm.Datetime.FieldType.DATE, false);
+bx.packEnd(datetime);
+datetime.setVisible(true);
+
+datetime = new elm.Elm.Datetime(bx);
+datetime.setSizeHintWeight(1.0, 1.0);
+datetime.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(datetime);
+datetime.setVisible(true);
+
+win.setVisible(true);
diff --git a/src/examples/icon_example_01.js b/src/examples/icon_example_01.js
new file mode 100644
index 000000000..a1689349c
--- /dev/null
+++ b/src/examples/icon_example_01.js
@@ -0,0 +1,33 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Icon Plain");
+win.setAutohide(true);
+
+icon = new elm.Elm.Icon(win);
+//icon.order_lookup_set(ELM_ICON_LOOKUP_THEME_FDO); Ja eh o default
+icon.setStandard("home");
+
+var path, group;
+r = icon.getFile(path, group);
+path = r[0];
+gruop = r[1];
+console.log("path = " + path + ", group = " + group);
+
+var name;
+name = icon.getStandard();
+console.log("name = " + name);
+
+icon.setNoScale(true);
+icon.setResizable(false, true);
+icon.setSmooth(false);
+icon.setFillOutside(true);
+
+icon.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(icon);
+icon.setVisible(true);
+
+win.setSize(320, 320);
+win.setVisible(true);
diff --git a/src/examples/menu_example_01.js b/src/examples/menu_example_01.js
new file mode 100644
index 000000000..9e3170fe8
--- /dev/null
+++ b/src/examples/menu_example_01.js
@@ -0,0 +1,37 @@
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Menu");
+win.setAutohide(true);
+
+rect = new efl.Evas.Rectangle(win);
+win.resizeObjectAdd(rect);
+rect.setSizeHintMin( 0, 0);
+rect.setColor( 0, 0, 0, 0);
+rect.setVisible(true);
+
+menu = new elm.Elm.Menu(win);
+menu.itemAdd(null, null, "first item", null, null); // item_add nao implementado
+menu_it = menu.itemAdd(null, "mail-reply-all", "second intem", null, null);
+
+menu.itemAdd(menu_it, "object-rotate-left", "menu 1", null, null);
+button = new elm.Elm.Button(win);
+button.textSet("elm.text", "button - delete items");
+menu_it1 = menu.itemAdd(menu_it, null, null, null, null);
+menu_it1.setPartContent(null, button);
+
+//button.event_clicked(del_it);
+
+menu.itemSeparatorAdd(menu_it);
+menu.itemAdd(menu_it, null, "third item", null, null);
+menu.itemAdd(menu_it, null, "fourth item", null, null);
+menu.itemAdd(menu_it, "window-new", "sub menu", null, null);
+
+menu_it = menu.itemAdd(null, null, "third item", null, null);
+menu_it.setDisabled(true);
+
+menu.setVisible(true);
+rect.on('mouse_down', function(){menu.visible_set(true)});
+win.setSize(250, 350);
+win.setVisible(true);
diff --git a/src/examples/popup_example_01.js b/src/examples/popup_example_01.js
new file mode 100644
index 000000000..2e39763c0
--- /dev/null
+++ b/src/examples/popup_example_01.js
@@ -0,0 +1,32 @@
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Popup");
+win.setAutohide(true);
+
+content = new elm.Elm.Label(win);
+content.setText("elm.text", "<align=center>Content</align>");
+
+popup = new elm.Elm.Popup(win);
+popup.setTimeout(3);
+
+popup.on('timeout', function()
+			   {
+			       console.log("timeout");
+			       popup.setVisible(false);
+			   });
+
+popup.contentSet("elm.swallow.content", content);
+
+popup.setText("title,text", "Title");
+popup.setVisible(true);
+
+popup.on('block_clicked', function()
+			   {
+			       console.log("clicked")
+			       popup.setVisible(false);
+ 			   });
+
+win.setSize(480, 800);
+win.setVisible(true);
diff --git a/src/examples/radio_example_01.js b/src/examples/radio_example_01.js
new file mode 100644
index 000000000..ac91c2c41
--- /dev/null
+++ b/src/examples/radio_example_01.js
@@ -0,0 +1,65 @@
+
+elm = require('elm');
+
+_cb = function(obj){
+   console.log(obj.textGet("elm.text"), "state value:", obj.getStateValue());
+}
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Radio");
+win.setAutohide(true);
+
+bx = new elm.Elm.Box(win);
+bx.setHorizontal(true);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+bx.setVisible(true);
+
+radio_g = new elm.Elm.Radio(win);
+radio_g.textSet("elm.text", "Radio 1");
+radio_g.setStateValue(1);
+radio_g.setValue(1);
+ic = new elm.Elm.Icon(win);
+ic.setStandard("home");
+radio_g.contentSet("icon", ic);
+bx.packEnd(radio_g);
+radio_g.setSizeHintWeight(1.0, 1.0);
+radio_g.setSizeHintAlign(-1.0, -1.0);
+radio_g.on('changed', _cb);
+radio_g.setVisible(true);
+
+radio = new elm.Elm.Radio(win);
+radio.textSet("elm.text", "Radio 2");
+radio.setStateValue(2);
+radio.groupAdd(radio_g);
+ic = new elm.Elm.Icon(win);
+ic.setStandard("file");
+radio.contentSet("icon", ic);
+bx.packEnd(radio);
+radio.setSizeHintWeight(1.0, 1.0);
+radio.setSizeHintAlign(-1.0, -1.0);
+radio.on('changed', _cb);
+radio.setVisible(true);
+
+radio = new elm.Elm.Radio(win);
+radio.textSet("elm.text", "Radio 3");
+radio.setStateValue(3);
+radio.groupAdd(radio_g);
+bx.packEnd(radio);
+radio.setSizeHintWeight(1.0, 1.0);
+radio.setSizeHintAlign(-1.0, -1.0);
+radio.on('changed', _cb);
+radio.setVisible(true);
+
+radio = new elm.Elm.Radio(win);
+radio.textSet("elm.text", "Radio 4");
+radio.setStateValue(4);
+radio.groupAdd(radio_g);
+bx.packEnd(radio);
+radio.setSizeHintWeight(1.0, 1.0);
+radio.setSizeHintAlign(-1.0, -1.0);
+radio.on('changed', _cb);
+radio.setVisible(true);
+
+
+win.setVisible(true);
diff --git a/src/examples/separator_example_01.js b/src/examples/separator_example_01.js
new file mode 100644
index 000000000..53fc3cafa
--- /dev/null
+++ b/src/examples/separator_example_01.js
@@ -0,0 +1,41 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Separator");
+win.setAutohide(true);
+
+bg = new elm.Elm.Bg(win);
+bg.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bg);
+bg.setVisible(true);
+
+bx = new elm.Elm.Box(win);
+bx.setHorizontal(true);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+bx.setVisible(true);
+
+rect = new efl.Evas.Rectangle(win);
+rect.setColor( 0, 255, 0, 255)
+rect.setSizeHintMin( 90, 200);
+rect.setSizeHintWeight(1.0, 1.0);
+rect.setSizeHintAlign(-1.0, -1.0);
+rect.setVisible(true);
+bx.packEnd(rect);
+
+separator = new elm.Elm.Separator(win);
+separator.setHorizontal(true);
+separator.setVisible(true);
+bx.packEnd(separator);
+
+rect2 = new efl.Evas.Rectangle(win);
+rect2.setColor( 0, 0, 255, 255);
+rect2.setSizeHintMin( 90, 200);
+rect2.setSizeHintWeight(1.0, 1.0);
+rect2.setSizeHintAlign(-1.0, -1.0);
+rect2.setVisible(true);
+bx.packEnd(rect2);
+
+win.setVisible(true);
diff --git a/src/examples/slider_example.js b/src/examples/slider_example.js
new file mode 100644
index 000000000..e585119d9
--- /dev/null
+++ b/src/examples/slider_example.js
@@ -0,0 +1,104 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Slider Example");
+win.setAutohide(true);
+
+bx = new elm.Elm.Box(win);
+//bx.setHorizontal(true);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+bx.setVisible(true);
+
+sl = new elm.Elm.Slider(win);
+sl.setSizeHintAlign(-1.0, 0.5);
+sl.setSizeHintWeight(1.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+/* with icon, end and label */
+sl = new elm.Elm.Slider(win);
+sl.textSet("elm.text", "Counter");
+
+ic = new elm.Elm.Icon(win);
+ic.setStandard("home");
+ic.setResizable(false, false);
+sl.contentSet("icon", ic);
+
+ic = new elm.Elm.Icon(win);
+ic.setStandard("folder");
+ic.setResizable(false, false);
+sl.contentSet("end", ic);
+
+sl.setSizeHintAlign(-1.0, 0.5);
+sl.setSizeHintWeight(1.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+/* value set and span size */
+sl = new elm.Elm.Slider(win);
+sl.setValue(1);
+sl.setSpanSize(200);
+sl.setSizeHintAlign(-1.0, 0.5);
+sl.setSizeHintWeight(1.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+/* with unit label and min - max */
+sl = new elm.Elm.Slider(win);
+sl.setUnitFormat("%1.0f units");
+sl.setMinMax(0, 100);
+sl.setSizeHintAlign(-1.0, 0.5);
+sl.setSizeHintWeight(1.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+/* with indicator label and inverted */
+sl = new elm.Elm.Slider(win);
+sl.setIndicatorFormat("%1.2f");
+sl.setInverted(true);
+sl.setSizeHintAlign(-1.0, 0.5);
+sl.setSizeHintWeight(1.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+/* vertical with indicator format func */
+sl = new elm.Elm.Slider(win);
+sl.setHorizontal(false);
+//indicator_format = function()
+//                  {
+//                      indicator = new char[32];
+//                      nprintf(indicator, 32, "%1.2f u", val);
+//                      return indicator;
+//                  }
+//indicator_free = function() {console.log("free")}
+//sl.indicator_format_function_set(indicator_format, indicator_free);
+
+sl.setSizeHintAlign(0.5, -1.0);
+sl.setSizeHintWeight(0.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+/* callbacks */
+sl = new elm.Elm.Slider(win);
+sl.setUnitFormat("%1.3f units");
+sl.setSizeHintAlign(-1.0, 0.5);
+sl.setSizeHintWeight(1.0, 1.0);
+bx.packEnd(sl);
+sl.setVisible(true);
+
+sl.on('changed', function(obj)
+                  {
+                     val = obj.value_get();
+                     console.log("Changed to " + val);
+                  });
+
+sl.on('delay_changed', function(obj)
+                 {
+                    val = obj.value_get();
+                    console.log("Delay changed to " + val);
+                 });
+
+win.setVisible(true);
diff --git a/src/examples/spinner_example.js b/src/examples/spinner_example.js
new file mode 100644
index 000000000..c9d2917da
--- /dev/null
+++ b/src/examples/spinner_example.js
@@ -0,0 +1,90 @@
+
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Spinner Example");
+win.setAutohide(true);
+
+bx = new elm.Elm.Box(win);
+bx.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(bx);
+bx.setVisible(true);
+
+sp = new elm.Elm.Spinner(win);
+sp.setSizeHintWeight(1.0, 1.0);
+sp.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp);
+sp.setVisible(true);
+
+sp2 = new elm.Elm.Spinner(win);
+sp2.setLabelFormat("Percentage %%%1.2f something");
+sp2.setSizeHintWeight(1.0, 1.0);
+sp2.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp2);
+sp2.setVisible(true);
+
+sp3 = new elm.Elm.Spinner(win);
+sp3.setLabelFormat("%1.1f units");
+sp3.setStep(1.5);
+sp3.setWrap(true);
+sp3.setMinMax(-50.0, 250.0);
+sp3.setSizeHintWeight(1.0, 1.0);
+sp3.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp3);
+sp3.setVisible(true);
+
+sp4 = new elm.Elm.Spinner(win);
+sp4.setStyle("vertical");
+sp4.setInterval(0.2);
+sp4.setSizeHintWeight(1.0, 1.0);
+sp4.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp4);
+sp4.setVisible(true);
+
+sp5 = new elm.Elm.Spinner(win);
+sp5.setEditable(false);
+sp5.setSizeHintWeight(1.0, 1.0);
+sp5.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp5);
+sp5.setVisible(true);
+
+sp6 = new elm.Elm.Spinner(win);
+sp6.setEditable(false);
+sp6.setMinMax(1, 12);
+sp6.specialValueAdd(1, "January");
+sp6.specialValueAdd(2, "February");
+sp6.specialValueAdd(3, "March");
+sp6.specialValueAdd(4, "April");
+sp6.specialValueAdd(5, "May");
+sp6.specialValueAdd(6, "June");
+sp6.specialValueAdd(7, "July");
+sp6.specialValueAdd(8, "August");
+sp6.specialValueAdd(9, "September");
+sp6.specialValueAdd(10, "October");
+sp6.specialValueAdd(11, "November");
+sp6.specialValueAdd(12, "December");
+sp6.setSizeHintWeight(1.0, 1.0);
+sp6.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp6);
+sp6.setVisible(true);
+
+sp7 = new elm.Elm.Spinner(win);
+sp7.setSizeHintWeight(1.0, 1.0);
+sp7.setSizeHintAlign(-1.0, 0.5);
+bx.packEnd(sp7);
+sp7.setVisible(true);
+sp7.setEditable(true);
+
+sp7.on('changed',
+  function(obj)
+  {
+      console.log("Value changed to " + obj.value_get());
+  });
+
+sp7.on('delay_changed',
+  function(obj)
+  {
+      console.log("Value delay changed to " + obj.value_get());
+  });
+
+win.setVisible(true);
diff --git a/src/examples/table_example_01.js b/src/examples/table_example_01.js
new file mode 100644
index 000000000..928f25494
--- /dev/null
+++ b/src/examples/table_example_01.js
@@ -0,0 +1,34 @@
+
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Table");
+win.setAutohide(true);
+
+table = new elm.Elm.Table(win);
+win.resizeObjectAdd(table);
+table.setVisible(true);
+table.setPadding(5, 5);
+table.setHomogeneous(true);
+
+label = new elm.Elm.Label(win);
+label.setText("elm.text", "label 0");
+label.setVisible(true);
+table.pack(label, 0, 0, 1, 1);
+
+label = new elm.Elm.Label(win);
+label.setText("elm.text", "label 1");
+label.setVisible(true);
+table.pack(label, 1, 0, 1, 1);
+
+label = new elm.Elm.Label(win);
+label.setText("elm.text", "label 2");
+label.setVisible(true);
+table.pack(label, 0, 1, 1, 1);
+
+label = new elm.Elm.Label(win);
+label.setText("elm.text", "label 3");
+label.setVisible(true);
+table.pack(label, 1, 1, 1, 1);
+
+win.setVisible(true);
diff --git a/src/examples/table_example_02.js b/src/examples/table_example_02.js
new file mode 100644
index 000000000..af51ec793
--- /dev/null
+++ b/src/examples/table_example_02.js
@@ -0,0 +1,38 @@
+
+efl = require('efl');
+elm = require('elm');
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Table");
+win.setAutohide(true);
+
+table = new elm.Elm.Table(win);
+win.resizeObjectAdd(table);
+table.setVisible(true);
+table.setHomogeneous(false);
+
+rect = new efl.Evas.Rectangle(win);
+rect.setColor( 255, 0, 0, 255)
+rect.setSizeHintMin( 100, 50);
+rect.setVisible(true)
+table.pack(rect, 0, 0, 2, 1);
+
+rect2 = new efl.Evas.Rectangle(win);
+rect2.setColor( 0, 255, 0, 255)
+rect2.setSizeHintMin( 50, 100);
+rect2.setVisible(true)
+table.pack(rect2, 0, 1, 1, 2);
+
+rect3 = new efl.Evas.Rectangle(win);
+rect3.setColor( 0, 0, 255, 255)
+rect3.setSizeHintMin( 50, 50);
+rect3.setVisible(true)
+table.pack(rect3, 1, 1, 1, 1);
+
+rect4 = new efl.Evas.Rectangle(win);
+rect4.setColor( 255, 255, 0, 255)
+rect4.setSizeHintMin( 50, 50);
+rect4.setVisible(true)
+table.pack(rect4, 1, 2, 1, 1);
+
+win.setVisible(true);
diff --git a/src/examples/thumb_example_01.js b/src/examples/thumb_example_01.js
new file mode 100644
index 000000000..c12a98829
--- /dev/null
+++ b/src/examples/thumb_example_01.js
@@ -0,0 +1,38 @@
+elm = require('elm');
+
+_generation_started_cb = function(obj)
+{
+   console.log("thumbnail generation started.");
+}
+
+_generation_finished_cb = function(obj)
+{
+   console.log("thumbnail generation finished.");
+}
+
+_generation_error_cb = function(obj)
+{
+   console.log("thumbnail generation error.");
+}
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Table");
+win.setAutohide(true);
+
+thumb = new elm.Elm.Thumb(win);
+
+thumb.on('generate_start', _generation_started_cb);
+thumb.on('generate_stop', _generation_finished_cb);
+thumb.on('generate_error', _generation_error_cb);
+
+thumb.setSize(160, 160);
+thumb.setEditable(false);
+thumb.setFile("../../data/images/plant_01.jpg", null);
+thumb.reload();
+
+thumb.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(thumb);
+
+thumb.setVisible(true);
+win.setSize(320, 320);
+win.setVisible(true);
diff --git a/src/examples/twitter_example_01.edc b/src/examples/twitter_example_01.edc
new file mode 100644
index 000000000..8a98930ff
--- /dev/null
+++ b/src/examples/twitter_example_01.edc
@@ -0,0 +1,89 @@
+collections {
+    group {
+        name: "tweet";
+        parts
+        {
+            part {
+                name: "user_icon";
+                type: SWALLOW;
+                description {
+                    rel1 {
+                        relative: 0.0 0.0;
+                        offset: 2 2;
+                    }
+                    rel2 {
+                        relative: 0.0 0.0;
+                        offset: 50 50 ;
+                    }
+                }
+            }
+            part {
+                name: "user_name";
+                type: TEXT;
+                effect: SOFT_SHADOW;
+                description {
+                    color: 0 190 255 255;
+                    rel1 {
+                          relative: 1.0 0.0;
+                          to_x: "user_icon";
+                          offset: 7 4;
+                    }
+                    rel2 {
+                          relative: 1.0 0.0;
+                          to_x: "user_icon";
+                          offset: 120 30;
+                    }
+                    text {
+                        text: "User Name";
+                        size: 12;
+                        font: "sans:style=Bold";
+                        min: 1 1;
+                        ellipsis: -1;
+                        align: 0.0 0.0;
+                    }
+                }
+            }
+            part {
+                name: "screen_name";
+                type: TEXT;
+                description {
+                    rel1 {
+                        relative: 1.0 0.0;
+                        to: "user_name";
+                        offset: 15 4;
+                    }
+                    rel2 {
+                        relative: 1.0 1.0;
+                        to: "user_name";
+                        offset: 75 10;
+                    }
+                    text {
+                        text: "scname";
+                        size: 10;
+                        font: "sans";
+                        min: 1 1;
+                        ellipsis: -1;
+                        align: 0.0 0.0;
+                    }
+                }
+            }
+           part {
+                name: "tweet_text";
+                type: SWALLOW;
+                description {
+                            rel1 {
+                                 relative: 0.0 1.0;
+                                 to: "user_name";
+                                 offset: 0 0;
+                                 }
+                            rel2 {
+                                 relative: 0.0 1.0;
+                                 to: "user_name";
+                                 offset: 250 80;
+                                 }
+                }
+            }
+        }
+    }
+}
+
diff --git a/src/examples/twitter_example_01.js b/src/examples/twitter_example_01.js
new file mode 100644
index 000000000..84d1d7d76
--- /dev/null
+++ b/src/examples/twitter_example_01.js
@@ -0,0 +1,82 @@
+
+efl = require('efl');
+elm = require('elm');
+
+util = require('util');
+fs = require('fs');
+
+user_acount = 'EnlightenmentKo'
+
+request = require('request'); //need "npm install request"
+Twitter = require('twitter'); //need "npm install twitter"
+
+var twit = new Twitter({
+  consumer_key: 'ZbSM93w5Sp2cyZ2SG0XuCvoHV',
+  consumer_secret: 'g8N7EEQLpdKPnAsS9hWuQV29FYjBkhH62jhZzXyYymDw87DKye',
+  access_token_key: '222611263-pPhKKjYh59uuNLP0b86sP7aAtLhdecjVQaEsCDCv',
+  access_token_secret: 'l7ccNKXTVv6cymfSD1gQH61tmfixkdna2QmOjPtpVxSHD'
+});
+
+win = new elm.Elm.WinStandard(null);
+win.setTitle("Twitter App");
+win.setAutohide(true);
+
+box = new elm.Elm.Box(win);
+box.setSizeHintWeight(1.0, 1.0);
+win.resizeObjectAdd(box);
+box.setVisible(true);
+
+list = new elm.Elm.List(win);
+list.setSizeHintWeight(1.0, 1.0);
+list.setSizeHintAlign(-1.0, -1.0);
+box.packEnd(list);
+list.setVisible(true);
+
+icon_array = new Array();
+
+twit.get('statuses/user_timeline', {screen_name: user_acount, count:10}, function(error, tweets, response) {
+    if (!error){
+        file = fs.createWriteStream('/tmp/twitter_pic.jpg');
+        file.on('finish', function() {
+            console.log("finished");
+            for (i=0; i < icon_array.length; i++) {
+                console.log(i);
+                icon_array[i].setFile("/tmp/twitter_pic.jpg", null);
+            }
+        });
+        if (tweets.length > 0) {
+            request(tweets[0].user.profile_image_url).pipe(file);
+        }
+
+        for(i=0; i < tweets.length; i++){
+            var layout = new elm.Elm.Layout(win);
+            layout.setFile("twitter_example_01.edj", "tweet");
+
+            var user_name = tweets[i].user.name;
+            var screen_name = tweets[i].user.screen_name;
+            var user_icon_url = tweets[i].user.profile_image_url;
+            var text = tweets[i].text;
+
+            layout.setText("user_name", screen_name);
+            layout.setText("screen_name", " - @"+screen_name);
+            var entry = new elm.Elm.Entry(win);
+            entry.setText("elm.text", text);
+            console.log(text);
+            layout.contentSet("tweet_text", entry);
+
+            layout.setSizeHintMin(127, 96);
+            layout.setSizeHintWeight(1.0, 1.0);
+            layout.setSizeHintAlign(-1.0, -1.0);
+
+            var icon = new elm.Elm.Image(win);
+            icon.setFillInside(true);
+            icon_array.push(icon);
+            layout.contentSet("user_icon", icon);
+            item = list.itemAppend("", layout, null, null, null);
+        }
+        list.go();
+    }
+});
+
+win.setSize(380,400);
+win.setVisible(true);
diff --git a/src/lib/Makefile.am b/src/lib/Makefile.am
index 3b6153272..7f2d61598 100644
--- a/src/lib/Makefile.am
+++ b/src/lib/Makefile.am
@@ -8,6 +8,7 @@ EOLIAN_FLAGS = @DEPS_EOLIAN_FLAGS@ \
 
 include $(top_srcdir)/Makefile_Eolian_Helper.am
 include $(top_srcdir)/Makefile_Eolian_Cxx_Helper.am
+include $(top_srcdir)/Makefile_Eolian_Js_Helper.am
 
 AM_CPPFLAGS = \
 -DELM_INTERNAL_API_ARGESFSDFEFC=1 \
@@ -634,6 +635,8 @@ elm_eolian_impl_hh = $(elm_eolian_files:%.eo=%.eo.impl.hh)
 
 elm_eolian_eot_h = $(elm_eolian_type_files:%.eot=%.eot.h)
 
+elm_eolian_js_cc = $(elm_eolian_files:%.eo=%.eo.js.cc)
+
 BUILT_SOURCES = \
 	$(elm_eolian_c)	\
 	$(elm_eolian_h)	\
@@ -656,3 +659,47 @@ nodist_includecxxbindings_HEADERS = Elementary.hh $(elm_eolian_hh) $(elm_eolian_
 CLEANFILES += $(nodist_includecxxbindings_HEADERS)
 EXTRA_DIST += Elementary.hh.in
 endif
+
+if HAVE_JS
+CLEANFILES += $(elm_eolian_js_cc)
+
+lib_LTLIBRARIES += libelementary_js.la
+
+AM_V_CP = $(am__v_CP_@AM_V@)
+am__v_CP_ = $(am__v_CP_@AM_DEFAULT_V@)
+am__v_CP_0 = @echo "  CP  " $@;
+CP = cp
+
+if HAVE_NODEJS
+elm.node: libelementary_js.la
+	$(AM_V_CP)$(CP) $(abs_top_builddir)/src/lib/.libs/libelementary_js.so $(abs_top_builddir)/src/lib/elm.node
+
+elmnodedir = $(libdir)
+elmnode_DATA = elm.node
+
+CLEANFILES += ${elmnodedir_DATA}
+EXTRA_DIST += ${elmnodedir_DATA}
+
+BUILT_SOURCES += ${elmnodedir_DATA}
+endif
+
+AM_CXXFLAGS = @ELEMENTARY_CFLAGS@ @ELEMENTARY_JS_CFLAGS@
+
+elm_js_object_files = $(elm_eolian_files:%.eo=%.eo.js.l$(OBJEXT))
+elm_js_object_files: $(elm_eolian_js_cc)
+
+libelementary_js_la_SOURCES = elementary_js.cc
+nodist_EXTRA_libelementary_js_la_SOURCES = $(elm_eolian_js_cc)
+
+libelementary_js_la_CXXFLAGS = @ELEMENTARY_CFLAGS@ @ELEMENTARY_JS_CFLAGS@
+libelementary_js_la_LIBADD = \
+@ELEMENTARY_LIBS@ \
+@ELEMENTARY_JS_LIBS@ \
+libelementary.la \
+@LTLIBINTL@ \
+$(elm_js_object_files)
+
+libelementary_js_la_LDFLAGS = @EFL_LTLIBRARY_FLAGS@
+
+endif
+
diff --git a/src/lib/elc_fileselector_entry.c b/src/lib/elc_fileselector_entry.c
index e998c433e..afaa43301 100644
--- a/src/lib/elc_fileselector_entry.c
+++ b/src/lib/elc_fileselector_entry.c
@@ -226,7 +226,7 @@ _elm_fileselector_entry_elm_layout_text_set(Eo *obj, Elm_Fileselector_Entry_Data
 }
 
 EOLIAN static const char *
-_elm_fileselector_entry_elm_layout_text_get(const Eo *obj, Elm_Fileselector_Entry_Data *sd, const char *part)
+_elm_fileselector_entry_elm_layout_text_get(Eo *obj, Elm_Fileselector_Entry_Data *sd, const char *part)
 {
    if (part && strcmp(part, "default"))
      {
diff --git a/src/lib/elc_multibuttonentry.c b/src/lib/elc_multibuttonentry.c
index 23b98e858..51f8639c8 100644
--- a/src/lib/elc_multibuttonentry.c
+++ b/src/lib/elc_multibuttonentry.c
@@ -1481,7 +1481,7 @@ _elm_multibuttonentry_elm_layout_text_set(Eo *obj, Elm_Multibuttonentry_Data *sd
 }
 
 EOLIAN static const char*
-_elm_multibuttonentry_elm_layout_text_get(const Eo *obj, Elm_Multibuttonentry_Data *sd, const char *part)
+_elm_multibuttonentry_elm_layout_text_get(Eo *obj, Elm_Multibuttonentry_Data *sd, const char *part)
 {
    const char *text = NULL;
 
diff --git a/src/lib/elc_naviframe.c b/src/lib/elc_naviframe.c
index 441c418e6..59c76b52c 100644
--- a/src/lib/elc_naviframe.c
+++ b/src/lib/elc_naviframe.c
@@ -1029,7 +1029,7 @@ _elm_naviframe_elm_layout_text_set(Eo *obj, Elm_Naviframe_Data *sd EINA_UNUSED,
 }
 
 EOLIAN static const char*
-_elm_naviframe_elm_layout_text_get(const Eo *obj, Elm_Naviframe_Data *sd EINA_UNUSED, const char *part)
+_elm_naviframe_elm_layout_text_get(Eo *obj, Elm_Naviframe_Data *sd EINA_UNUSED, const char *part)
 {
    Elm_Object_Item *it = elm_naviframe_top_item_get(obj);
    if (!it) return NULL;
diff --git a/src/lib/elc_popup.c b/src/lib/elc_popup.c
index 7c926f999..ba9686df9 100644
--- a/src/lib/elc_popup.c
+++ b/src/lib/elc_popup.c
@@ -1059,7 +1059,7 @@ _content_text_get(const Elm_Popup_Data *sd)
 }
 
 EOLIAN static const char*
-_elm_popup_elm_layout_text_get(const Eo *obj EINA_UNUSED, Elm_Popup_Data *_pd, const char *part)
+_elm_popup_elm_layout_text_get(Eo *obj EINA_UNUSED, Elm_Popup_Data *_pd, const char *part)
 {
    const char *text = NULL;
 
diff --git a/src/lib/elementary_js.cc b/src/lib/elementary_js.cc
new file mode 100644
index 000000000..873d637ab
--- /dev/null
+++ b/src/lib/elementary_js.cc
@@ -0,0 +1,288 @@
+
+#ifdef HAVE_CONFIG_H
+#include <elementary_config.h>
+#endif
+
+#include <Elementary.h>
+
+#include <Eina.hh>
+#include <Eina_Js.hh>
+
+#include <iostream>
+
+#include <Efl.h>
+#include <Eo.h>
+#include <Ecore.h>
+#include <Ecore_Evas.h>
+
+#include <Eina.hh>
+
+#ifdef EAPI
+# undef EAPI
+#endif
+#ifdef _WIN32
+# define EAPI __declspec(dllimport)
+#else
+# ifdef __GNUC__
+#  if __GNUC__ >= 4
+#   define EAPI __attribute__ ((visibility("default")))
+#  else
+#   define EAPI
+#  endif
+# else
+#  define EAPI
+# endif
+#endif /* ! _WIN32 */
+
+EAPI void register_elm_app_client(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_app_client_view(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_app_server(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_app_server_view(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_atspi_app_object(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_accessible(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_action(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_component(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_editable_text(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_image(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_selection(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_text(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_value(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_widget_action(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_atspi_window(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_fileselector(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_interface_scrollable(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_elm_pan(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+
+namespace elm {
+
+EAPI void register_access(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_actionslider(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_bg(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_box(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_bubble(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_button(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_calendar(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_check(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_clock(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_colorselector(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_conformant(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_container(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_ctxpopup(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_datetime(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_dayselector(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_diskselector(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_entry(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_fileselector(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_fileselector_button(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_fileselector_entry(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_flip(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_flipselector(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_frame(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_gengrid(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_gengrid_pan(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_genlist(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_genlist_pan(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_gesture_layer(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_glview(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_grid(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_hover(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_hoversel(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_icon(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_image(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_index(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_inwin(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_label(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_layout(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_list(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_map(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_map_pan(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_mapbuf(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_menu(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_multibuttonentry(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_naviframe(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_notify(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_panel(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_panes(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_photo(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_photocam(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_photocam_pan(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_player(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_plug(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_popup(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_prefs(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_progressbar(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_radio(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_route(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_scroller(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_segment_control(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_separator(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_slider(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_slideshow(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_spinner(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_systray(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_table(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_thumb(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_toolbar(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_video(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_web(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_widget(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_win(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_win_standard(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_widget_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_color_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_dayselector_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_hoversel_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_segment_control_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_slideshow_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_flipselector_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_menu_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_ctxpopup_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_index_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_multibuttonentry_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_naviframe_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_genlist_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_gengrid_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_list_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_toolbar_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_diskselector_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+EAPI void register_popup_item(v8::Handle<v8::Object> global, v8::Isolate* isolate);
+
+}
+
+#ifdef HAVE_NODEJS
+#include <eina_js_node.hh>
+
+namespace {
+#endif
+
+void init(v8::Handle<v8::Object> exports)
+{
+#ifdef HAVE_NODEJS
+  static char* argv[] = {const_cast<char*>("node")};
+  ::elm_init(1, argv);
+
+  elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_HIDDEN);
+#endif
+  
+  try
+    {
+      elm::register_access(exports, v8::Isolate::GetCurrent());
+      elm::register_actionslider(exports, v8::Isolate::GetCurrent());
+      ::register_elm_app_client(exports, v8::Isolate::GetCurrent());
+      ::register_elm_app_client_view(exports, v8::Isolate::GetCurrent());
+      ::register_elm_app_server(exports, v8::Isolate::GetCurrent());
+      ::register_elm_app_server_view(exports, v8::Isolate::GetCurrent());
+      ::register_elm_atspi_app_object(exports, v8::Isolate::GetCurrent());
+      elm::register_bg(exports, v8::Isolate::GetCurrent());
+      elm::register_box(exports, v8::Isolate::GetCurrent());
+      elm::register_bubble(exports, v8::Isolate::GetCurrent());
+      elm::register_button(exports, v8::Isolate::GetCurrent());
+      elm::register_calendar(exports, v8::Isolate::GetCurrent());
+      elm::register_check(exports, v8::Isolate::GetCurrent());
+      elm::register_clock(exports, v8::Isolate::GetCurrent());
+      elm::register_colorselector(exports, v8::Isolate::GetCurrent());
+      elm::register_conformant(exports, v8::Isolate::GetCurrent());
+      elm::register_container(exports, v8::Isolate::GetCurrent());
+      elm::register_ctxpopup(exports, v8::Isolate::GetCurrent());
+      elm::register_datetime(exports, v8::Isolate::GetCurrent());
+      elm::register_dayselector(exports, v8::Isolate::GetCurrent());
+      elm::register_diskselector(exports, v8::Isolate::GetCurrent());
+      elm::register_entry(exports, v8::Isolate::GetCurrent());
+      elm::register_fileselector(exports, v8::Isolate::GetCurrent());
+      elm::register_fileselector_button(exports, v8::Isolate::GetCurrent());
+      elm::register_fileselector_entry(exports, v8::Isolate::GetCurrent());
+      elm::register_flip(exports, v8::Isolate::GetCurrent());
+      elm::register_flipselector(exports, v8::Isolate::GetCurrent());
+      elm::register_frame(exports, v8::Isolate::GetCurrent());
+      elm::register_gengrid(exports, v8::Isolate::GetCurrent());
+      elm::register_gengrid_pan(exports, v8::Isolate::GetCurrent());
+      elm::register_genlist(exports, v8::Isolate::GetCurrent());
+      elm::register_genlist_pan(exports, v8::Isolate::GetCurrent());
+      elm::register_gesture_layer(exports, v8::Isolate::GetCurrent());
+      elm::register_glview(exports, v8::Isolate::GetCurrent());
+      elm::register_grid(exports, v8::Isolate::GetCurrent());
+      elm::register_hover(exports, v8::Isolate::GetCurrent());
+      elm::register_hoversel(exports, v8::Isolate::GetCurrent());
+      elm::register_icon(exports, v8::Isolate::GetCurrent());
+      elm::register_image(exports, v8::Isolate::GetCurrent());
+      elm::register_index(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_accessible(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_action(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_component(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_editable_text(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_image(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_selection(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_text(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_value(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_widget_action(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_atspi_window(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_fileselector(exports, v8::Isolate::GetCurrent());
+      ::register_elm_interface_scrollable(exports, v8::Isolate::GetCurrent());
+      elm::register_inwin(exports, v8::Isolate::GetCurrent());
+      elm::register_label(exports, v8::Isolate::GetCurrent());
+      elm::register_layout(exports, v8::Isolate::GetCurrent());
+      elm::register_list(exports, v8::Isolate::GetCurrent());
+      elm::register_map(exports, v8::Isolate::GetCurrent());
+      elm::register_map_pan(exports, v8::Isolate::GetCurrent());
+      elm::register_mapbuf(exports, v8::Isolate::GetCurrent());
+      elm::register_menu(exports, v8::Isolate::GetCurrent());
+      elm::register_multibuttonentry(exports, v8::Isolate::GetCurrent());
+      elm::register_naviframe(exports, v8::Isolate::GetCurrent());
+      elm::register_notify(exports, v8::Isolate::GetCurrent());
+      ::register_elm_pan(exports, v8::Isolate::GetCurrent());
+      elm::register_panel(exports, v8::Isolate::GetCurrent());
+      elm::register_panes(exports, v8::Isolate::GetCurrent());
+      elm::register_photo(exports, v8::Isolate::GetCurrent());
+      elm::register_photocam(exports, v8::Isolate::GetCurrent());
+      elm::register_photocam_pan(exports, v8::Isolate::GetCurrent());
+      elm::register_player(exports, v8::Isolate::GetCurrent());
+      elm::register_plug(exports, v8::Isolate::GetCurrent());
+      elm::register_popup(exports, v8::Isolate::GetCurrent());
+      elm::register_prefs(exports, v8::Isolate::GetCurrent());
+      elm::register_progressbar(exports, v8::Isolate::GetCurrent());
+      elm::register_radio(exports, v8::Isolate::GetCurrent());
+      elm::register_route(exports, v8::Isolate::GetCurrent());
+      elm::register_scroller(exports, v8::Isolate::GetCurrent());
+      elm::register_segment_control(exports, v8::Isolate::GetCurrent());
+      elm::register_separator(exports, v8::Isolate::GetCurrent());
+      elm::register_slider(exports, v8::Isolate::GetCurrent());
+      elm::register_slideshow(exports, v8::Isolate::GetCurrent());
+      elm::register_spinner(exports, v8::Isolate::GetCurrent());
+      elm::register_systray(exports, v8::Isolate::GetCurrent());
+      elm::register_table(exports, v8::Isolate::GetCurrent());
+      elm::register_thumb(exports, v8::Isolate::GetCurrent());
+      elm::register_toolbar(exports, v8::Isolate::GetCurrent());
+      elm::register_video(exports, v8::Isolate::GetCurrent());
+      elm::register_web(exports, v8::Isolate::GetCurrent());
+      elm::register_widget(exports, v8::Isolate::GetCurrent());
+      elm::register_win(exports, v8::Isolate::GetCurrent());
+      elm::register_win_standard(exports, v8::Isolate::GetCurrent());
+      elm::register_widget_item(exports, v8::Isolate::GetCurrent());
+      elm::register_color_item(exports, v8::Isolate::GetCurrent());
+      elm::register_dayselector_item(exports, v8::Isolate::GetCurrent());
+      elm::register_hoversel_item(exports, v8::Isolate::GetCurrent());
+      elm::register_segment_control_item(exports, v8::Isolate::GetCurrent());
+      elm::register_slideshow_item(exports, v8::Isolate::GetCurrent());
+      elm::register_flipselector_item(exports, v8::Isolate::GetCurrent());
+      elm::register_menu_item(exports, v8::Isolate::GetCurrent());
+      elm::register_ctxpopup_item(exports, v8::Isolate::GetCurrent());
+      elm::register_index_item(exports, v8::Isolate::GetCurrent());
+      elm::register_multibuttonentry_item(exports, v8::Isolate::GetCurrent());
+      elm::register_naviframe_item(exports, v8::Isolate::GetCurrent());
+      elm::register_genlist_item(exports, v8::Isolate::GetCurrent());
+      elm::register_gengrid_item(exports, v8::Isolate::GetCurrent());
+      elm::register_list_item(exports, v8::Isolate::GetCurrent());
+      elm::register_toolbar_item(exports, v8::Isolate::GetCurrent());
+      elm::register_diskselector_item(exports, v8::Isolate::GetCurrent());
+      elm::register_popup_item(exports, v8::Isolate::GetCurrent());
+    }
+  catch(...)
+    {
+      std::cout << "Exception" << std::endl;
+    }
+}
+  
+#ifdef HAVE_NODEJS
+}
+NODE_MODULE(elm, init)
+#endif
diff --git a/src/lib/elm_actionslider.c b/src/lib/elm_actionslider.c
index f7095a92d..3f1dbc19c 100644
--- a/src/lib/elm_actionslider.c
+++ b/src/lib/elm_actionslider.c
@@ -459,7 +459,7 @@ _elm_actionslider_elm_layout_text_set(Eo *obj, Elm_Actionslider_Data *_pd EINA_U
 }
 
 EOLIAN static const char*
-_elm_actionslider_elm_layout_text_get(const Eo *obj, Elm_Actionslider_Data *_pd EINA_UNUSED, const char *part)
+_elm_actionslider_elm_layout_text_get(Eo *obj, Elm_Actionslider_Data *_pd EINA_UNUSED, const char *part)
 {
    const char *text = NULL;
 
diff --git a/src/lib/elm_actionslider.eo b/src/lib/elm_actionslider.eo
index c41a4e328..dbae20722 100644
--- a/src/lib/elm_actionslider.eo
+++ b/src/lib/elm_actionslider.eo
@@ -70,8 +70,8 @@ class Elm.Actionslider (Elm.Layout, Evas.Selectable_Interface)
       Elm.Widget.focus_next_manager_is;
       Elm.Widget.focus_direction_manager_is;
       Elm.Widget.theme_apply;
-      Elm.Layout.text_set;
-      Elm.Layout.text_get;
+      Elm.Layout.text.set;
+      Elm.Layout.text.get;
       Elm.Layout.text_aliases.get;
       Elm.Layout.sizing_eval;
    }
diff --git a/src/lib/elm_bubble.eo b/src/lib/elm_bubble.eo
index a98c07d33..b574ef79c 100644
--- a/src/lib/elm_bubble.eo
+++ b/src/lib/elm_bubble.eo
@@ -46,7 +46,7 @@ class Elm.Bubble (Elm.Layout, Evas.Clickable_Interface)
       Elm.Widget.focus_next;
       Elm.Widget.focus_direction_manager_is;
       Elm.Widget.access;
-      Elm.Layout.text_set;
+      Elm.Layout.text.set;
       Elm.Layout.text_aliases.get;
       Elm.Layout.content_aliases.get;
       Elm.Layout.sizing_eval;
diff --git a/src/lib/elm_entry.c b/src/lib/elm_entry.c
index ec6e502e3..a0ab31d33 100644
--- a/src/lib/elm_entry.c
+++ b/src/lib/elm_entry.c
@@ -3001,7 +3001,7 @@ _elm_entry_elm_layout_text_set(Eo *obj, Elm_Entry_Data *sd, const char *part, co
 }
 
 EOLIAN static const char *
-_elm_entry_elm_layout_text_get(const Eo *obj, Elm_Entry_Data *sd, const char *item)
+_elm_entry_elm_layout_text_get(Eo *obj, Elm_Entry_Data *sd, const char *item)
 {
    const char *text;
 
diff --git a/src/lib/elm_entry.eo b/src/lib/elm_entry.eo
index 9dd9e3646..f3eb285a9 100644
--- a/src/lib/elm_entry.eo
+++ b/src/lib/elm_entry.eo
@@ -917,11 +917,11 @@ class Elm.Entry (Elm.Layout, Elm_Interface_Scrollable, Evas.Clickable_Interface,
       Elm.Container.content_set;
       Elm.Layout.theme_enable;
       Elm.Layout.sizing_eval;
-      Elm.Layout.text_get;
+      Elm.Layout.text.get;
       Elm.Layout.signal_callback_add;
       Elm.Layout.signal_callback_del;
       Elm.Layout.signal_emit;
-      Elm.Layout.text_set;
+      Elm.Layout.text.set;
       Elm.Layout.content_aliases.get;
       Elm_Interface_Scrollable.policy.set;
       Elm_Interface_Scrollable.bounce_allow.set;
diff --git a/src/lib/elm_fileselector.eo b/src/lib/elm_fileselector.eo
index 891a18024..14a9f8a7e 100644
--- a/src/lib/elm_fileselector.eo
+++ b/src/lib/elm_fileselector.eo
@@ -41,7 +41,7 @@ class Elm.Fileselector (Elm.Layout, Elm_Interface_Fileselector,
       Elm.Widget.theme_apply;
       Elm.Widget.focus_next_manager_is;
       Elm.Layout.sizing_eval;
-      Elm.Layout.text_set;
+      Elm.Layout.text.set;
       Elm_Interface_Fileselector.selected_paths.get;
       Elm_Interface_Fileselector.custom_filter_append;
       Elm_Interface_Fileselector.expandable;
diff --git a/src/lib/elm_fileselector_entry.eo b/src/lib/elm_fileselector_entry.eo
index 00c51c243..43ed2a69e 100644
--- a/src/lib/elm_fileselector_entry.eo
+++ b/src/lib/elm_fileselector_entry.eo
@@ -93,8 +93,8 @@ class Elm.Fileselector_Entry (Elm.Layout, Elm_Interface_Fileselector,
       Elm.Container.content_get;
       Elm.Container.content_unset;
       Elm.Container.content_set;
-      Elm.Layout.text_set;
-      Elm.Layout.text_get;
+      Elm.Layout.text.set;
+      Elm.Layout.text.get;
       Elm.Layout.sizing_eval;
       Elm_Interface_Fileselector.selected;
       Elm_Interface_Fileselector.folder_only;
diff --git a/src/lib/elm_label.eo b/src/lib/elm_label.eo
index 9f18be18b..509741726 100644
--- a/src/lib/elm_label.eo
+++ b/src/lib/elm_label.eo
@@ -125,7 +125,7 @@ class Elm.Label (Elm.Layout)
       Elm.Widget.focus_next_manager_is;
       Elm.Widget.focus_direction_manager_is;
       Elm.Widget.theme_apply;
-      Elm.Layout.text_set;
+      Elm.Layout.text.set;
       Elm.Layout.text_aliases.get;
       Elm.Layout.sizing_eval;
    }
diff --git a/src/lib/elm_layout.c b/src/lib/elm_layout.c
index c16b8fe8c..e701d07f1 100644
--- a/src/lib/elm_layout.c
+++ b/src/lib/elm_layout.c
@@ -1190,7 +1190,7 @@ _elm_layout_text_set(Eo *obj, Elm_Layout_Smart_Data *sd, const char *part, const
 }
 
 EOLIAN static const char*
-_elm_layout_text_get(const Eo *obj, Elm_Layout_Smart_Data *sd, const char *part)
+_elm_layout_text_get(Eo *obj, Elm_Layout_Smart_Data *sd, const char *part)
 {
    ELM_WIDGET_DATA_GET_OR_RETURN(obj, wd, NULL);
 
diff --git a/src/lib/elm_layout.eo b/src/lib/elm_layout.eo
index 49d1b3b3f..6e3e37631 100644
--- a/src/lib/elm_layout.eo
+++ b/src/lib/elm_layout.eo
@@ -211,19 +211,19 @@ class Elm.Layout (Elm.Container, Efl.File)
             @in part_name: const(char)*; [[A part from loaded edje group.]]
          }
       }
-      text_set {
-         [[Set the text of the given part.]]
-         return: bool;
-         params {
-            @in part: const(char)* @nullable; [[The TEXT part where to set the text.]]
-            @in text: const(char)* @nullable; [[The text to set.]]
+      @property text {
+         set {
+            [[Set the text of the given part.]]
+            return: bool;
          }
-      }
-      text_get @const {
-         [[Get the text set in the given part.]]
-         return: const(char)*;
-         params {
-            @in part: const(char)*; [[The TEXT part to retrieve the text off.]]
+         get {
+            [[Get the text set in the given part.]]
+         }
+         keys {
+            part: const(char)* @nullable; [[The TEXT part where to set the text.]]
+         }
+         values {
+            text: const(char)* @nullable; [[The text to set.]]
          }
       }
       signal_callback_add {
diff --git a/src/lib/elm_multibuttonentry.eo b/src/lib/elm_multibuttonentry.eo
index 650521934..ad6bfce83 100644
--- a/src/lib/elm_multibuttonentry.eo
+++ b/src/lib/elm_multibuttonentry.eo
@@ -181,8 +181,8 @@ class Elm.Multibuttonentry (Elm.Layout)
       Elm.Widget.on_focus;
       Elm.Widget.translate;
       Elm.Widget.event;
-      Elm.Layout.text_set;
-      Elm.Layout.text_get;
+      Elm.Layout.text.set;
+      Elm.Layout.text.get;
       Elm.Layout.sizing_eval;
    }
    events {
diff --git a/src/lib/elm_naviframe.eo b/src/lib/elm_naviframe.eo
index 0978797b1..b5571412c 100644
--- a/src/lib/elm_naviframe.eo
+++ b/src/lib/elm_naviframe.eo
@@ -154,8 +154,8 @@ class Elm.Naviframe (Elm.Layout, Elm_Interface_Atspi_Widget_Action)
       Elm.Container.content_get;
       Elm.Container.content_set;
       Elm.Container.content_unset;
-      Elm.Layout.text_set;
-      Elm.Layout.text_get;
+      Elm.Layout.text.set;
+      Elm.Layout.text.get;
       Elm.Layout.signal_emit;
       Elm.Layout.sizing_eval;
       Elm_Interface_Atspi_Widget_Action.elm_actions.get;
diff --git a/src/lib/elm_popup.eo b/src/lib/elm_popup.eo
index b80f8f8ec..ec90a9e80 100644
--- a/src/lib/elm_popup.eo
+++ b/src/lib/elm_popup.eo
@@ -175,8 +175,8 @@ class Elm.Popup (Elm.Layout, Elm_Interface_Atspi_Widget_Action)
       Elm.Container.content_get;
       Elm.Container.content_set;
       Elm.Container.content_unset;
-      Elm.Layout.text_set;
-      Elm.Layout.text_get;
+      Elm.Layout.text.set;
+      Elm.Layout.text.get;
       Elm.Layout.sizing_eval;
       Elm_Interface_Atspi_Widget_Action.elm_actions.get;
       Elm_Interface_Atspi_Accessible.state_set.get;