diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js
index 1f0b49ac88737837424911a338a9405696729cfe..1a469f5b35073de6ac4738807593c49070559952 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.js
@@ -93,7 +93,7 @@
       });
     })
 
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var i,
         erp5_document = this.state.erp5_document,
         form_definition = this.state.form_definition,
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml
index ad3096876e3ca5abc7d301a15ef7ca39e135039b..6200f024b876f5ef1fb7ea8d73f621b3ed7dc74c 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.27320.12986.51029</string> </value>
+                <value> <string>954.27330.54941.29149</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475762090.29</float>
+                        <float>1476193992.94</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
index 2509adb0e6fc1e69640e87402e2a18130f19810e..05ea7b1c7bc74d34838c74f917418069cc0eaff4 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.js
@@ -32,7 +32,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var gadget = this;
       if (modification_dict.hasOwnProperty('label_text')) {
         this.state.label_text_element.textContent = this.state.label_text;
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.xml
index 68c4918c422368d90dc41d2ca2f86aa9912db92c..58f072e179b6192841d4062718911d155150611f 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_label_field_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.25940.33315.42837</string> </value>
+                <value> <string>954.25941.22930.26914</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475678720.94</float>
+                        <float>1476194017.94</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
index 14e60e4f3447d4af9841e201a8562aebb222a6e8..3a6ef9969537d7c09006b62f565bcfd6ec0ab654 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
@@ -446,7 +446,7 @@
     .allowPublicAcquisition("renderApplication", function (param_list) {
       return this.render.apply(this, param_list);
     })
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var gadget = this,
         route_result = gadget.state;
       if (modification_dict.hasOwnProperty('url')) {
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
index 479cdc674754652ed2f8e509e0fcdf365d7f7462..117e56ee185c299a0a2bc6dbbf0b7b2c047d1c5f 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.23080.38606.35464</string> </value>
+                <value> <string>954.34539.19221.9523</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475507095.45</float>
+                        <float>1476198512.38</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js
index e50c925f4e8cf16f7801bca256395c5ec6afabe0..2223cbe5a514192655dd3792662c2623896912b5 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js
@@ -42,7 +42,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var form_gadget = this,
         icon,
         selector = form_gadget.element.querySelector("h3"),
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml
index 39f568a61f58a41320ddabec5801e76044ac2e59..96ed19713f811de396a2203152edb252a086cc73 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.5593.38130.32665</string> </value>
+                <value> <string>954.5594.14865.13670</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474544293.54</float>
+                        <float>1476194100.02</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js
index e77c841f3e9180834d68d015d6ed0e9f33a62005..dae8d3e3c7e509c5541c02174bae5f7f42b275f5 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js
@@ -33,7 +33,7 @@
         });
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var form_gadget = this;
 
       // render the erp5 form
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml
index b7e1d1bec23060a1af2e93eddd64feac2130eb35..d3bfc88d06bfc72c91a80fd30eaa2813ddc4fcf0 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.5675.50023.58965</string> </value>
+                <value> <string>954.34605.28227.45721</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474549231.17</float>
+                        <float>1476198578.1</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js
index 383a50743615d0b2cebe43feaace89d63fc87217..7b31d1c5e3af6b37b773696fc831f92909d0b764 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js
@@ -43,7 +43,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var form_gadget = this;
 
       // render the erp5 form
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml
index 58c04cca5f978b8770e6a43e8a7b076c0c8e311d..ae64491a5d0066576b090ceba6df53b2ba3310a6 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.25820.35404.6229</string> </value>
+                <value> <string>954.25821.46431.41233</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475671542.46</float>
+                        <float>1476194167.31</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.js
index 41d3eee1cfee84da0dc8cea00b73e5759af0b7a9..3f16a56c674768bc9472c6b5f8b71de4c4c11ea4 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.js
@@ -25,7 +25,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var gadget = this;
 
       // render the erp5 form
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.xml
index 3b6c5cf7a3935ea4d46f77b555454c7af4ce9d20..5afc1c90b53df18c1a338f7434469c103086e37c 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_js.xml
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1474546509.43</float>
+                        <float>1476194151.17</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.js
index 12b1952d6f67adaf1dbff5050b43d8148d6117f6..f6fc62eb9bd4e07a985f92a2f5251bfbe3d8c8f6 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.js
@@ -88,7 +88,7 @@
             });
         });
     })
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var queue,
         gadget = this,
         options = this.state.options,
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.xml
index 7ebe27701d50ec24a80d89af2c1d40c612f94857..15fc48a587833dbeff2d648bee012ffbbbb81255 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_formpage_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.15904.46164.40277</string> </value>
+                <value> <string>954.23027.11225.50944</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475503870.23</float>
+                        <float>1476194208.6</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.js
index d74a89d6b59f51b1ff762d2b4e3f02ee7bf5c818..e70595c18c10b96cda7fbd10ab92312c198cad6b 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.js
@@ -69,7 +69,7 @@
         form_gadget_url: form_gadget_url
       });
     })
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var gadget = this,
         form_gadget,
         section_container_element = document.createElement('div'),
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.xml
index 6943bf488ac4aa0ffa4ae7d7d60b9f66fe0e5b3f..f4dd7b751553e73ff39b2a33acf08e6fa48eb8f2 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_report_view_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.25917.62680.11605</string> </value>
+                <value> <string>954.25919.63902.23893</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475677438.49</float>
+                        <float>1476194238.38</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js
index 248e6309e8f87bac3041801cbf4449f3f6d98247..a0ac7a89614b13fbf4adf7b3bb3c282b48aff1d6 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js
@@ -15,7 +15,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var gadget = this;
       return gadget.getDeclaredGadget('input')
         .push(function (input_gadget) {
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
index 385d28a87ade5b479989a5d0cd4c884263976bc1..ca5c3ab397d00ab62fd8dd49e8a76ce697df0eef 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.17331.42805.29064</string> </value>
+                <value> <string>954.17336.1268.55074</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475248801.1</float>
+                        <float>1476194269.08</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.js
index 802d40b402010204064f0e48416e871662a85ddb..065a5ae2cafa0c6514d34d63dd36cd17df3b2fe9 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.js
@@ -1,133 +1,72 @@
-/*global window, rJS, RSVP, loopEventListener, document */
+/*global window, rJS */
 /*jslint indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP, loopEventListener, document) {
+(function (window, rJS) {
   "use strict";
 
   rJS(window)
-    .ready(function (gadget) {
-      return gadget.getElement()
-        .push(function (element) {
-          gadget.props = {};
-          gadget.element = element;
-        });
-    })
-
-    .declareAcquiredMethod("notifyValid", "notifyValid")
-    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
-    .declareAcquiredMethod("notifyChange", "notifyChange")
-    .declareMethod('getTextContent', function () {
-      return this.props.value;
+    .setState({
+      tag: 'p'
     })
     .declareMethod('render', function (options) {
-      var element,
-        field_json = options.field_json || {},
-        created = false;
-      this.props.value = field_json.value || field_json.default || "";
-      this.props.editable = field_json.editable;
-      if (field_json.editable) {
-        element = this.element.querySelector('input');
-        if (element === null) {
-          element = document.createElement('input');
-          element.setAttribute("type", "text");
-          created = true;
-        }
-        element.setAttribute('value', this.props.value);
-        element.setAttribute('name', field_json.key);
-        element.setAttribute('title', field_json.title);
-        if (field_json.required === 1) {
-          element.setAttribute('required', 'required');
-        } else {
-          element.removeAttribute('required');
-        }
-        if (field_json.disabled) {
-          element.setAttribute("disabled", "disabled");
+      var field_json = options.field_json || {},
+        state_dict = {
+          value: field_json.value || field_json.default || "",
+          editable: field_json.editable,
+          required: field_json.required,
+          name: field_json.key,
+          title: field_json.title
+        };
+      state_dict.text_content = state_dict.value;
+      return this.changeState(state_dict);
+    })
+    .onStateChange(function (modification_dict) {
+      var element = this.element,
+        gadget = this,
+        url,
+        result;
+      if (modification_dict.hasOwnProperty('editable')) {
+        if (gadget.state.editable) {
+          url = 'gadget_html5_input.html';
         } else {
-          element.removeAttribute('disabled');
+          url = 'gadget_html5_element.html';
         }
+        result = this.declareGadget(url, {scope: 'sub'})
+          .push(function (input) {
+            // Clear first to DOM, append after to reduce flickering/manip
+            while (element.firstChild) {
+              element.removeChild(element.firstChild);
+            }
+            element.appendChild(input.element);
+            return input;
+          });
       } else {
-        element = this.element.querySelector('p');
-        if (element === null) {
-          element = document.createElement("p");
-          element.setAttribute("class", "ui-content-non-editable");
-          created = true;
-        }
-        element.textContent = this.props.value;
-      }
-      if (created) {
-        this.element.innerHTML = '';
-        this.element.appendChild(element);
+        result = this.getDeclaredGadget('sub');
       }
+      return result
+        .push(function (input) {
+          return input.render(gadget.state);
+        });
+
     })
 
     .declareMethod('getContent', function () {
-      var input,
-        result = {};
-      if (this.props.editable) {
-        input = this.element.querySelector('input');
-        result[input.getAttribute('name')] = input.value;
+      if (this.state.editable) {
+        return this.getDeclaredGadget('sub')
+          .push(function (gadget) {
+            return gadget.getContent();
+          });
       }
-      return result;
+      return {};
     })
 
     .declareMethod('checkValidity', function () {
-      var result;
-      if (!this.props.editable) {
-        return true;
-      }
-      result = this.element.querySelector('input').checkValidity();
-      if (result) {
-        return this.notifyValid()
-          .push(function () {
-            return result;
+      if (this.state.editable) {
+        return this.getDeclaredGadget('sub')
+          .push(function (gadget) {
+            return gadget.checkValidity();
           });
       }
-      return result;
-    })
-
-    .declareService(function () {
-      ////////////////////////////////////
-      // Check field validity when the value changes
-      ////////////////////////////////////
-      var field_gadget = this;
-      if (!field_gadget.props.editable) {
-        return;
-      }
-
-      function notifyChange() {
-        return RSVP.all([
-          field_gadget.checkValidity(),
-          field_gadget.notifyChange()
-        ]);
-      }
-
-      // Listen to input change
-      return loopEventListener(
-        field_gadget.element.querySelector('input'),
-        'change',
-        false,
-        notifyChange
-      );
-    })
-
-    .declareService(function () {
-      ////////////////////////////////////
-      // Inform when the field input is invalid
-      ////////////////////////////////////
-      var field_gadget = this;
-      if (!field_gadget.props.editable) {
-        return;
-      }
-      function notifyInvalid(evt) {
-        return field_gadget.notifyInvalid(evt.target.validationMessage);
-      }
-
-      // Listen to input change
-      return loopEventListener(
-        field_gadget.element.querySelector('input'),
-        'invalid',
-        false,
-        notifyInvalid
-      );
+      return true;
     });
 
-}(window, rJS, RSVP, loopEventListener, document));
\ No newline at end of file
+}(window, rJS));
\ No newline at end of file
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.xml
index a4b7070385126083651ff58f1a0e94cb88f51b5d..4d0e785e20d3bd9f25858a247bc8b88ce5bcb179 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_stringfield_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>953.643.50676.9335</string> </value>
+                <value> <string>954.34570.5720.55227</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1470315124.05</float>
+                        <float>1476197972.06</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.js
index f12ebd476c3e4bba624a551a3ead6fab47d2ab3b..186b3c2b26bdfa0ec4a3f245bdb9e1ba06d8f2c9 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.js
@@ -19,7 +19,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function (modification_dict) {
+    .onStateChange(function (modification_dict) {
       var element = this.element,
         gadget = this,
         url,
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.xml
index 5c336598f313d7a9deaa39c2097e998cb5a76ddb..d88eeeabcb8d9b93c02897c791ad722099849b71 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_textareafield_js.xml
@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.15897.25014.42086</string> </value>
+                <value> <string>954.34595.10317.3037</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475764759.74</float>
+                        <float>1476198249.72</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js
index 603eced8834dce6ba9214c2811969896c60c3993..45527da558b92e28e9f366ae3c3a4f34c8b60d57 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.js
@@ -17,7 +17,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var element = this.element,
         new_element = document.createElement(this.state.tag);
       new_element.textContent = this.state.text_content;
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml
index 13daefe09cbf9765e64b56135514fe7082b4dce1..dba6bd037030245dee774a73119501d2b3dd6197 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_element_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.22958.17507.4778</string> </value>
+                <value> <string>954.22958.59420.56644</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475499774.36</float>
+                        <float>1476194334.9</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
index 20aef828c4110388eab158695627a881c512a628..75e67e5d7559c8e2fed6e5c338c36d0650d28160 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
@@ -25,7 +25,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var textarea = this.element.querySelector('input');
       textarea.setAttribute('value', this.state.value);
       textarea.value = this.state.value;
@@ -99,6 +99,6 @@
     .onEvent('invalid', function (evt) {
       // invalid event does not bubble
       return this.notifyInvalid(evt.target.validationMessage);
-    }, true, true);
+    }, true, false);
 
 }(window, rJS, RSVP));
\ No newline at end of file
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
index b34dc073b99c24995e718ac30c70e59215bc9bc8..b08be901bbf3ab902f41335e124d979c1971105f 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.22957.21991.6673</string> </value>
+                <value> <string>954.34535.18115.52548</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475511138.87</float>
+                        <float>1476198804.5</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js
index 676dce5df40733ef90a1f24d213bd78abc9049d6..f03cf977622a63a089ccf5ee3bcf1c5490faf5a6 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js
@@ -31,7 +31,7 @@
       return this.changeState(state_dict);
     })
 
-    .declareMethod('updateDOM', function () {
+    .onStateChange(function () {
       var textarea = this.element.querySelector('textarea');
       // textarea.setAttribute('value', this.state.value);
       textarea.value = this.state.value;
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml
index 36381923e782a3bf0a23d37d673c1842c9c8dee8..fc82995b9552916e66f148d49b79d767cee4cdbd 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.27370.32393.51592</string> </value>
+                <value> <string>954.27455.2029.68</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1475769541.61</float>
+                        <float>1476194310.55</float>
                         <string>UTC</string>
                       </tuple>
                     </state>