Forms Overview

For HTML form development, ActiveWAFL provides the following features.

  • A clean look and consistent form element appearance for general page use as well as embedding in a toolbar
  • Client-side data field validation for virtually any type of data
  • Automatic server-side validation of model properties
  • Convenient ways to quickly develop forms for displaying and editing data models and lists of data models
  • High-level wrappers for creating typed label/input property controls
  • Serialization of form data

Form Styles

Forms start out with default CSS that make them easy to see and use on desktop computers, laptops, tablets, and phones.

Below is an example of HTML markup that could be used to generate a form

  1.       <div class="Row">
  2.          <div class="Spans12">
  3.             <label>Field X Label</label>
  4.             <input type="text" value="Field X" />
  5.          </div>
  6.       </div>
  7.       <div class="Row">                      
  8.          <div class="Spans12">
  9.             <label>Field Y Label</label>
  10.             <input type="text" value="Field Y" />
  11.          </div>
  12.       </div>
  13.       <div class="Row">                      
  14.          <div class="Spans6">
  15.             <label>Field 1 Label</label>
  16.             <input type="text" value="Field 1" />
  17.          </div>
  18.          <div class="Spans6">
  19.             <label>Field 2 Label</label>
  20.             <input type="text" value="Field 2" />
  21.          </div>
  22.       </div>
  23.       <div class="Row">                      
  24.          <div class="Spans4">
  25.             <label>Field 3 Label</label>
  26.             <input type="text" value="Field 3" />
  27.          </div>
  28.          <div class="Spans4">
  29.             <label>Field 4 Label</label>
  30.             <input type="text" value="Field 4" />
  31.          </div>
  32.          <div class="Spans4">
  33.             <label>Field 6 Label</label>
  34.             <select>
  35.                <option>Option 1</option>
  36.                <option>Option 2</option>
  37.                <option>Option 3</option>
  38.             </select>
  39.          </div>
  40.       </div>
  41.       <div class="Row">                      
  42.          <div class="Spans12">
  43.             <label>Field 10 Label</label>
  44.             <input type="radio" value="1" /> Some value #1&emsp;
  45.             <input type="radio" value="2" /> Some value #2&emsp;
  46.             <input type="radio" value="2" /> Some value #3
  47.          </div>
  48.       </div>
  49.       <div class="Row">                      
  50.          <div class="Spans12">
  51.             <menu>
  52.                <button>Test Action 1</button>
  53.                <button>Test Action 2</button>
  54.                <button>Test Action 3</button>
  55.             </menu>
  56.          </div>
  57.       </div>
  58.    </form>

Here is an example of what the form looks like for the given example code

Some value #1   Some value #2   Some value #3

Property Inputs

  • Property Inputs provide a labeled input control for a data model property
  • Property Inputs can be used to compose forms that look nice and are functional out-of-the-box
  • For example, the Model Editor control is composed of Property Input controls
  • The HTML element type is determined by the data type of the model property
Property Input control's data types and their respective input element HTML type
Strings
input[type="text"]
Booleans
input [type="checkbox"]
Integer
{ ui name="Spinner" }
Bounded Number
{ ui name="Spinner" }
Other
input[type="text"]
Presentation Template (Smarty syntax) code to generate a set of Property Inputs
  1. <form class="Auto Layout Grid">
  2.    <div class="Row">
  3.       <div class="Spans8">
  4.          { property_input model=$MODEL->GetFieldValue("DemoModel") property="Title" label=true }
  5.       </div>
  6.       <div class="Spans4">
  7.          { property_input model=$MODEL->GetFieldValue("DemoModel") property="Opacity" label=true }
  8.       </div>
  9.    </div>
  10.    <div class="Row">
  11.       <div class="Spans6">
  12.          { property_input model=$MODEL->GetFieldValue("DemoModel") property="Color" label=true }
  13.       </div>
  14.       <div class="Spans3">
  15.          { property_input model=$MODEL->GetFieldValue("DemoModel") property="Height" label=true }
  16.       </div>
  17.       <div class="Spans3">
  18.          { property_input model=$MODEL->GetFieldValue("DemoModel") property="Width" label=true }
  19.       </div>
  20.    </div>
  21. </form>
example of the HTML that might be generated by the Property Input control
  1. <form class="Auto Layout Grid">
  2.    <div class="Row">
  3.       <div class="Spans8">
  4.          <label for="Title">Title</label>
  5.          <input id="Title" name="Title" type="text" value="Test Rectangle 1" />
  6.       </div>
  7.       <div class="Spans4">
  8.          <label for="Opacity">Opacity</label>
  9.          <input id="Opacity" name="Opacity" type="text" value=".75" />
  10.       </div>
  11.    </div>
  12.    <div class="Row">
  13.       <div class="Spans6">
  14.          <label for="Color">Color</label>
  15.          <input id="Color" name="Color" type="text" value="#456789" />
  16.       </div>
  17.       <div class="Spans3">
  18.          <label for="Height">Height</label>
  19.          <input id="Height" name="Height" type="text" value="150" />
  20.       </div>
  21.       <div class="Spans3">
  22.          <label for="Width">Width</label>
  23.          <input id="Width" name="Width" type="text" value="75" />
  24.       </div>
  25.    </div>
  26. </form>

Rendered property input (inside of a form)

Model Editor

A Model Editor is used to provide a simple and clean interface for editing the properties of a data model.

Presentation Template (Smarty syntax) code to generate a Model Editor
  1. {ui name="ModelEditor" Model=$MODEL->GetFieldValue("DemoModel")}

Example Model Editor for the rectangle class

Model List

A Model List is used to show one or more models' properties in a tabular format

  • Full CRUD support
  • Each model in the list has edit and delete controls
  • New instances of models can be added to the list
  • Code
    {ui name="ModelList" Models=$MODEL->GetFieldValue("DemoModels")}
    Example

    ActiveWaflWeb\FunctionalModel\Rectangle List

    RectangleId Title Color Height Width Opacity
    1 Test Rectangle 1 #334455 45 130 0  
    2 Test Rectangle 2 #668811 70 140 0