view release on metacpan or  search on metacpan

doc/html/Form.html  view on Meta::CPAN

<p>A custom <b>"init"</b> event is also supported which is fired on an input that gets its value initialized with the initialization of the form.</p>
<p><code>handler</code> (Function) - handler to fire.</p>
<p>Signature</p>
<pre>  function handler(event[, newValue[, oldValue]]) {
    event.target // element being observed
  }</pre>

<p><code>newValue</code> is set for the <code>change</code> and the <code>init</code> events.</p>
<p><code>oldValue</code> is set for the <code>change</code>.</p>
<p><b>NOTE:</b> Form.Element.setValue method is wrapped in GvaScript.ProtoExtensions module to programatically fire the blur event after setting the value on the input, and hence firing the change handler if any.</p>
<p>[<i>This method can be called either as an instance method or as a generic method. If calling as a generic, pass the form HTMLElement/id in as the first argument.</i>]</p>

    </div>
  </div>
  <div class="TN_node" id="unregister">
    <h3 class="TN_label">unregister</h3>
    <div class="TN_content">
      <pre>   gvascript_form.unregister(expression[, eventName[, handler]])
   GvaScript.Form.unregister(form, expression[, eventName[, handler]])</pre>

<p>removes observers set on given <code>expression</code>.  if <code>eventName</code> is provided, will only stop observing that eventName.
if <code>handler</code> is also provided, will just stop calling this handler.</p>
<p>NOTE that the same handler signature should be used in the register method for it to work in the unregister method.</p>
<p>[<i>This method can be called either as an instance method or as a generic method. If calling as a generic, pass the form HTMLElement/id in as the first argument.</i>]</p>

    </div>
  </div>
  <div class="TN_node" id="init">
    <h3 class="TN_label">init</h3>
    <div class="TN_content">
      <pre>   gvascript_form.init(initial_tree, prefix)
   GvaScript.Form.init(form, initial_tree, prefix)</pre>

<p><code>form</code> is the id of a form (or directly the DOM element).  Optional
<code>initial_tree</code> is a javascript nested datastructure containing
initial values for fields, that will be passed to the 
<a href="#fill_from_tree">/fill_from_tree</a> method.</p>
<p>[<i>This method can be called either as an instance method or as a generic method. If calling as a generic, pass the form HTMLElement/id in as the first argument.</i>]</p>

    </div>
  </div>
  <div class="TN_node" id="to_hash">
    <h3 class="TN_label">to_hash</h3>
    <div class="TN_content">
      <pre>  var flat_hash = GvaScript.Form.to_hash(form);</pre>

<p>Inspects the contents of all fields in <code>form</code> and 
returns a flat hash of pairs (key-value).</p>
<p>[<i>This method can be called either as an instance method or as a generic method. If calling as a generic, pass the form HTMLElement/id in as the first argument.</i>]</p>

    </div>
  </div>
  <div class="TN_node" id="to_tree">
    <h3 class="TN_label">to_tree</h3>
    <div class="TN_content">
      <pre>  var tree = GvaScript.Form.to_tree(form);</pre>

<p>Inspects the contents of all fields in <code>form</code> and 
returns a data tree, were dotted names in form names
are expanded into sub-arrays or sub-hashes. So for example 
if the form looks like</p>
<pre>  &lt;input name="father.firstname"&gt; &lt;input name="father.lastname"&gt;&lt;br&gt;
  &lt;input name="mother.firstname"&gt; &lt;input name="mother.lastname"&gt;&lt;br&gt;
  &lt;div repeat="child" repeat-start="1"&gt;
    &lt;input name="#{child.path}.firstname"&gt;&lt;br&gt;
  &lt;/div&gt;</pre>

<p>and if that form has been expanded with 3 repetition blocks
for children, the resulting tree would be</p>
<pre>  { "father" : {"firstname" : ..., "lastname": ...},
    "mother" : {"firstname" : ..., "lastname": ...},
    "child"  : [ {"firstname": ...},
                 {"firstname": ...},
                 {"firstname": ...} ] }</pre>

<p>[<i>This method can be called either as an instance method or as a generic method. If calling as a generic, pass the form HTMLElement/id in as the first argument.</i>]</p>

    </div>
  </div>
  <div class="TN_node" id="fill_from_tree">
    <h3 class="TN_label">fill_from_tree</h3>
    <div class="TN_content">
      <pre>  GvaScript.Form.fill_from_tree(form, field_prefix, tree);</pre>

<p>Fills the form from values found in <code>tree</code> (this is the 
reverse of the <a href="#to_tree">/to_tree</a> operation).
Optional <code>field_prefix</code> is prepended to key names in <code>tree</code> for
finding the corresponding form fields.</p>
<p>The method walks through nested subtrees in <code>tree</code>: the sequence
of keys leading to a leaf is concatenated into a flat string, with dot 
separators, and if the form has a corresponding input element,
the value of that element is set to the value of the leaf.
Furthermore, if the initial tree contains repeated data sets
(array subtrees), and if the form contains repeat elements
with the same path, then new repetition blocks are 
dynamically created to match the number of items in the array:
so if the form above is filled with the following tree</p>
<pre>  { "child"  : [ {"firstname": "Abel"},
                 {"firstname": "Bob"},
                 {"firstname": "Cod"},
                 {"firstname": "Dave"}, ] }</pre>

<p>then four repetition blocks will automatically created in the form.</p>
<p>[<i>This method can be called either as an instance method or as a generic method. If calling as a generic, pass the form HTMLElement/id in as the first argument.</i>]</p>

    </div>
  </div>
  <div class="TN_node" id="add">
    <h3 class="TN_label">add</h3>
    <div class="TN_content">
      <pre>  GvaScript.Form.add(repeat_name, count);</pre>

<p>Creates one or several new repetition blocks.  The parameter <code>count</code>
is optional and defaults to 1.  Focus is automatically given to the
first input element in the last repetition block that has an
<code>autofocus</code> attribute (if any).</p>
<p>See <i>Alien::GvaScript::Repeat/add</i> for more explanations on
the <code>add</code> operation.</p>

    </div>
  </div>