During the vistaShow() step, formVista uses the defined “look” of a component to “render” it to the browser. The rendering system design was chosen to make it possible to reuse design work in new components freeing developers from having to ask designers for updates each time a tweak is made to a component FVML file. It was also chosen to allow the system to be more approachable. While we could have designed something that resembled the complexities of CSS in all things, such a system would have had a prohibitive learning curve for many more designers.
formVista components are themed (or skinned) at the tag level. During rendering, each tag in the <BODY> section of a component renders itself by locating and expanding it's corresponding “template fragment file”. Which template fragment file is used depends on the current look defined for the component, the template=”..” attribute of the tag itself and whether or not it's being rendered in “error” mode.
Template fragment files just include enough HTML to render the tag in question. For example, in the form_complete demoshell example which uses the “flattabsimple_form_” look, the input field:
<input template="withlabel" label="A Required Field" field="title">
|
uses a template fragment file called flattabsimple_form_withlabel.tmpl in the templates/input directory. That file contains:
<TR>
<TD> <img src="${TEMPLATE_PREFIX}/art/spacer.gif" height="1" border="0"><br> <div class="flattabsimpleFormInputTitle">$ATTRS{label}</div> </td>
<TD width="5"> <img src="${TEMPLATE_PREFIX}/art/spacer.gif" width="5" height="1" border="0"> </td>
<TD> <INPUT class="flattabsimpleFormInputField" NAME="${FIELD}" VALUE="${DATA}"> </td>
</tr>
|
When it's time for that particular input tag to render itself, it loads this file and expands the variables and outputs it to the browser. Notice that this particular tag assumes it's in a table with three columns. If you look at the corresponding <body> template file you.
