Overview

inputEx is built around the Field class. It is an abstract class (we never instantiate it). All the other field classes inherits directly or indirectly from this base class. (see diagram below) Warning: this diagram is not complete. See <a href="treeview.html">treeview</a> for the full class diagram <center> <img src="../images/inputEx-class-diagram.png" /> </center> <h2>Instantiating a Field / the “type” property :</h2> There are 3 ways to instantiate a Field : <ul> <li>Calling the class constructor (classic) : <pre><code> var field = new inputEx.StringField({name: 'test'}); </code></pre></li> <li>Using the inputEx function with the “type” construction: <pre><code> var field = inputEx({ type: 'string', inputParams: {name: 'test'} }); </code></pre></li> <li>Through a meta-field (see below)</li> </ul> The default “type” associations : (Warning: this table is not complete, but each class follow the same naming conventions.) <style> #associationTypes { margin-left: 40px; } #associationTypes td { width: 200px; padding: 2px; } #associationTypes tr.odd { background-color: #aaaaff; } #associationTypes th { font-weight: bold; text-align: center; padding: 5px; background-color: white; } </style> <table id="associationTypes"> <thead> <tr> <th>type string</th> <th>class</th> <th>loader module</th> </tr> </thead> <tbody> <tr class="odd"> <td>boolean</td> <td>inputEx.CheckBox</td> <td>inputex-checkbox</td> </tr> <tr> <td>color</td> <td>inputEx.ColorField</td> <td>inputex-colorfield</td> </tr> <tr class="odd"> <td>date</td> <td>inputEx.DateField</td> <td>inputex-datefield</td> </tr> <tr> <td>email</td> <td>inputEx.EmailField</td> <td>inputex-emailfield</td> </tr> <tr class="odd"> <td>form</td> <td>inputEx.Form</td> <td>inputex-form</td> </tr> <tr> <td>group</td> <td>inputEx.Group</td> <td>inputex-group</td> </tr> <tr class="odd"> <td>hidden</td> <td>inputEx.HiddenField</td> <td>inputex-hiddenfield</td> </tr> <tr> <td>html</td> <td>inputEx.RTEField</td> <td>inputex-rtefield</td> </tr> <tr class="odd"> <td>inplaceedit</td> <td>inputEx.InPlaceEdit</td> <td>inputex-inplaceedit</td> </tr> <tr> <td>IPv4</td> <td>inputEx.IPv4Field</td> <td>inputex-ipv4field</td> </tr> <tr class="odd"><td>list</td> <td>inputEx.ListField</td> <td>inputex-listfield</td> </tr> <tr class="odd"> <td>password</td> <td>inputEx.PasswordField</td> <td>inputex-passwordfield</td> </tr> <tr> <td>select</td> <td>inputEx.SelectField</td> <td>inputex-selectfield</td> </tr> <tr class="odd"><td>string</td> <td>inputEx.StringField</td> <td>inputex-stringfield</td> </tr> <tr> <td>text</td> <td>inputEx.Textarea</td> <td>inputex-textarea</td> </tr> <tr class="odd"><td>type</td> <td>inputEx.TypeField</td> <td>inputex-typefield</td> </tr> <tr> <td>uneditable</td> <td>inputEx.UneditableField</td> <td>inputex-uneditablefield</td> </tr> <tr class="odd"> <td>url</td> <td>inputEx.UrlField</td> <td>inputex-urlfield</td> </tr> </tbody> </table> To link a class with a “type”, we use : <pre><code> inputEx.registerType(inputEx.StringField, 'string'); </code></pre> <h2>Meta-Fields :</h2> Some special fields called meta-fields take one or multiple “type” construction objects as configuration. <ul> <li>Group: A group of fields. It is itself a Field so it can be combined with any other field.</li> <li>Form: A group that provide ajax form capabilities.</li> <li>List: list of any subfield.</li> <li>InPlaceEdit: Make any subfield inplace-editable.</li> <li>Typefield: A special field that returns a config object to create an instance through the inputEx.buildField function. We create a form for each Field class to define the parameters for the specified field.</li> </ul> <h2>Insert a Field into the DOM :</h2> <pre><code> var field = inputEx.FieldClass({...options...}); parentEl.appendChild( field.getEl() ); // or var field = inputEx.FieldClass({...options..., parentEl: parentEl}); // or var field = inputEx.FieldClass({...options..., parentEl: 'parentElId'}); </code></pre> <h2>The “updated” event :</h2> All the fields fire the same event when they are “updated”. To subscribe this event for a field, use : (see <a href="http://developer.yahoo.com/yui/event/#customevent" target="_new">YUI Custom Events</a> for more informations) <pre><code> myField.updatedEvt.subscribe(function(e,value) { // value = new value returned by getValue ...code here... }, scope, true); </code></pre> This event is fired when you use a setValue on the field. If you want to disable this behaviour, pass “false” as second argument to the setValue and the event won’t be fired. <pre><code> // This setValue won't fire the updatedEvt myField.setValue("My Value", false); </code></pre> 2009-11-26T04:22:26-08:00 192484 overview

108752

Overview

2009-04-21T05:52:52-07:00

39354