RAD concept: From Visual design to Working App in Flash without programming

Posted on September 20, 2008


Working at a webcompany I deal with designers and backend programmers.

Last thursday I started to implement my “plug and play” concept for a Cadillac mini-site to build database driven forms FAST in Flash. It was either doing it properly or use the good old crappy 8 (or so) repetative front end steps: 1) placing text fields on stage, 2) placing backgrounds, 3) programming getters and setters for the fields, 4) building XML interfaces to pass the data, 5) applying input filters to the fields 6) validating the user input on post, 7) sending data to the server, 8) parsing the server response, 9) fluffing things up with different active-states on form fields (like “highlight when active” and such things).

“Like the IDE of MS Access but with better ground rules”

Since each visible field represents a field defined in the database, many manual steps can be cut out by using a generalized Rules Based Form Engine. Using rules instead of code makes it possible to shift form-building to the interaction designer. It will be a bit like the IDE of Microsoft Access, but more adaptable and with better ground rules 🙂

Main design targets:

  1. Building forms should be possible both visually (drag & drop) and via XML definitions
  2. Any designer should be able to build completely working forms in Flash without having to do one line of code
  3. Styles, colors, field labels and other settings should be centralized and switchable per language
  4. Feedback on user input: idem

Current Steps:

  1. Create an empty moviclip
  2. Atach the “Form” class to it
  3. Drop the form elements (fields, labels and buttons) in the form
  4. Give these fields in the Flash IDE the exact name of the XML tag they correspond to.
  5. Give the form a name in the Flash IDE
  6. Create the XML definition that tells the form what to do and how to do it

Linking the XML defintion to the form

The Form class uses the name of a movieclip to load the corresponding XML definition. So if you name your form “Customer” on stage, it will attempt to load the XML definition “xml/formdefinitions/Customer_form.xml”

Localization (language specific labels and feedback)

Localization mainly consists of relabelling every form field on stage. By choosing a different language, the event model (not described here and will be developed monday) will tell every form via a singleton to reload the localization file of each form, by calling “xml/formdefinitions/{formname}_local_{language identifier}.xml”. When no localization file is found, the defaults from the Form definitions XML will be used.

Example of the XML form definition


<saveComplete OKresponse=”OK” ERRORresponse=”ERROR” responseXnode=”status”/>
<!– The server expects specifically structured XML–>
<!– Each form has specific default settings on fonts, placement and behavior–>

<defaultStyle fieldWidth=”370″ fieldHeight=”22″
rowHeight=”22″ fieldleftmargin=”125″ columnWidth=”380″ fieldtopmargin=”2″>

<!– Each label and field can use a basic set of default settings to make it look just right–>
<input leftmargin=”125″ topmargin=”0″ errorempty=”[fieldname] is required”>
<textfield maxChars=”100″ restrict=”A-Za-z”  textColor=”0xFFFFFF”/>
<format font=”trade gothic lt com” size=”13″ italic=”true” color=”0xFFFFFF”/>
<label leftmargin=”0″ topmargin=”0″>
<textfield textColor=”0xFFFFFF”/>
<format font=”trade gothic lt com” size=”9″ italic=”true” color=”0xFFFFFF”/>

<!–Fields can be placed by code or via the IDE. If fields are not on stage they are created by the Form handler–>
A select box / dropdown can be populated either via code or via a source–>
<select name=”ModelID” label=”YOUR TESTDRIVE MODEL” type=”field” required=”true” col=”0″>
<value id=”1461″ label=”CADILLAC XLR-V”/>
<value id=”1466″ label=”CADILLAC CTS 2008″/>
<value id=”1461″ label=”CADILLAC XLR-V”/>

Sample of select box populated via an external source.
The Mapping attribute helps the parser to parse the XML to the right format for the Form handler–>
<select name=”DealerID” label=”PREFERRED DEALER *” type=”field” required=”true” col=”0″
mapping=”value id='[DealerID]’ label='[DealerName]’ link='[Country_ISO]'”
You can specify a fields looks and behavior by adding (flash based) settings to the field–>
<input name=”FirstName” label=”FIRST NAME *” type=”field” required=”true” col=”0″>
<textfield maxChars=”100″ restrict=”A-Za-z”  textColor=”0xFFFFFF”/>
<format font=”trade gothic lt com” size=”13″ italic=”true” color=”0xFFFFFF”/>
<label name=”a” label=”WHERE DID YOU FIRST HEAR OR SEE THIS CAR? *” type=”field” required=”true” col=”0″>

Posted in: Uncategorized