Components are written in an XML markup language called the formVista Markup Language or FVML for short.
FVML is similar to HTML. It consists of tags and attributes organized in a heirarchy. However, instead of describing just what something looks like, FVML is used to describe:
how is the appearance of the component structured?
what theme should be applied when displaying the component?
what processing should happen when the component is loaded?
what client side javascript features should be used and hooked up?
what user actions does the component handle and what should be done in each case?
what validation should be done on user input and what errors messages should be displayed?
As an example of what FVML looks like the following is stripped down version of the FVML source for the Complete Form example from the demoshell Component Gallery section. It handles displaying a form, processing the submissions, validation, adding the row to the database and displaying feedback through a columnlist component. (The search, edit and update sections have been removed to simplify the example. To see this form in action please see the demoshell Component Gallery.)
<component type="form"
name="form_complete"
defaultlook="flattabsimple_form_">
<!--
===============================================================
This section is invoked when the form is submitted and it passes
validation.
-->
<onDoInsert>
<mysql table="demo_table">
<query_hint type="primary_key" field="demo_table_ref" />
<query_hint type="createdate" field="entry_date" />
</mysql>
<!--
now that we've added the row, we'll use the feedback component
to display the new list. The message here is sent to the
component used for feedback in ${feedbackmsg}
-->
<feedback component="fvml/form_complete_list">
This is feedback for an INSERT command.
</feedback>
</onDoInsert>
<!--
===============================================================
The body section describes what "widgets" make up the appearance
of the form in the browser.
-->
<body template="withtitle" title="A Basic formVista Smart Form">
<text template="withlabel" label="Description">
Some example text.
</text>
<!-- a simple input form field with a required validator -->
<input template="withlabel"
label="A Required Field"
field="title">
<!--
if the user submits this form without entering anything into
the field above, the form will automatically be re-rendered
with this inline error message.
-->
<validate test="required">This field is required</validate>
</input>
<htmleditor template="withlabel"
label="WYSIWYG Input"
field="description">
<!--
this causes a javascript function to be called at the end of
the page after the editor is constructed to set any content
into it.
-->
<js name="setFieldContent" options="html"/>
</htmleditor>
<input template="submitbutton" field="submit" label="Post Form">
<!-- we use a javascript submit -->
<js type="javascript" name="submit"/>
</input>
</body>
</component>
|
A key advantage of FVML is that everything related to this form is described in this one file. This includes how data is pulled into the component, how the component is rendered possibly with (i.e. what it looks like), how user interaction with that component is validated, how user actions are responded to and how actions are saved into the data store.
GetData
ProcCmd
JavascriptIncludes
CSSIncludes
Javascript
Render
RenderSubmenus
Footer
