David Janes’ Code Weblog

InputEx is a neat Javascript library by Eric Abouaf and other contributors to dynamically create forms. It’s best shown by example, so:

• detailed examples of how to create all individual fields
• a form builder in Javascript (click on the pencil to close popups or try my version – see the notes below)

I’m working on a project called GenX that allows people to dynamically lookup, edit and create data in editors (such as in WordPress). One of the features I want is the ability to add maps so after a week of research, I’ve created a MapField for inputEx:

• see the MapField example

Notes

• this is just a preliminary version; there’s probably some code style and idiom issues that need to be worked out
• I’m going to ask the InputEx group to pick this up; I reserve no rights
• it’s not fully integrated into the Builder example yet
• it works with Google Maps, Yahoo Maps and Microsoft’s Virtual Earth. You will need a key for your domain for Google Maps, see the example above about how to insert your key
• it introduces a concept of a Globals for MapField, as there are certain settings (i.e. your mapping keys) that really belong at “class” level rather than instantiated object level
• Mapping APIs are dynamically loaded
• Zoom levels are returned in native format and “universal format“
• I’ve done all my testing of FF3, so there may be browser issues I need to look at

Code changes

• the only files needed are
  • examples/map_field.html
  • js/fields/MapField.js

Where this is going

• I’ve spent the last week working on maps; I need to get back to using this code rather than improving and documenting it
• I want to add a geocoder
• I want the geocoder to be able to be sensitive to other form fields, so for example if you’re entering an address it can actually use those as an input

One final mod to inputEx

I’ve modified the builder to make the pencil icon more obviously become the close button when you’ve opened a subpanel. You can see the demo here. Here’s the change set:

In images:

curl --location http://www.famfamfam.com/lab/icons/silk/icons/pencil_delete.png \
 > pencil_delete.png

In inputex/inputExBuilder/css/inputExBuilder.css add:

div.inputEx-TypeField-EditButton.opened {
   background-image: url(../../images/pencil_delete.png);
}

In inputex/js/fields/TypeField.js replace onTogglePropertiesPanel with:

   onTogglePropertiesPanel: function() {
      if (this.propertyPanel.style.display == 'none') {
         this.propertyPanel.style.display = '';
         YAHOO.util.Dom.addClass(this.button, "opened");
      } else {
         this.propertyPanel.style.display = 'none';
         YAHOO.util.Dom.removeClass(this.button, "opened");
      }
   },