The Rich UI controller mechanism relates
a single view,
a widget, with a single a model, a data field; for more information,
see "Rich UI validation and formatting." You can also use Rich UI
to simulate traditional form processing, which is characteristic of
business software.
For example, you might want
to create an application that fulfills
the following steps:
- The application presents data to the user
- The user either accepts or updates the data; clicks a button or
presses a key to submit the data; validates the input; and commits
all of the validated data to some backend code, in this case, to a
service
Rich UI form processing uses the ValidatingForm
widget, which is
primarily a collection of form fields. When you declare a form field,
you reference a controller and can include the following details:
- The displayName string field, which provides the text for an onscreen
label
- The labelClass string field, for the CSS class that
is used when
the label is displayed. By default, the class name is eglRuiTextLabel.
The following code are example entries for validating
a form:
employeeForm ValidatingForm { entries = [
new FormField { displayName="Name:", controller=nameController },
new FormField { displayName="Age:", controller=ageController },
new FormField { displayName="Salary:", controller=salaryController }
]};
The form as a whole has the following functions:
- isValid invokes the controller-specific
functions of the same name. Field validation occurs in the order in
which the form fields are listed in the entries array. You might want
to update the form-level isValid function
so that it references functions that provide cross-field validation.
- validStateSetter is the default validStateSetter function
for any controllers that are referenced in the form, but with an additional
behavior.
If you use the form-level function (that is, if any of
the controllers lack their own validStateSetter function),
every form label that is associated with invalid content is displayed
in accordance with the following Cascading Stylesheet (CSS) class:
the initial class, such as EglRuiTextLabel, and the following secondary
class: FormErrorLabel.
For invalid input in any form field,
use the same kind of display.
- commit commits
all of the views to the
related models with one command; in this example, the command is employeeForm.commit.
The order of the view-specific commit invocations
is the order in which the form fields are listed in the entries array.
After you invoke the form-level commit function,
you can transmit all of the model data to a service.
- publish publishes
all of the models
to the related views with one command; in this example, the command
is employeeForm.publish. The order of the model-specific publish invocations
is the order in which the form fields are listed in the entries array.
You can invoke the form-level publish command
in an application function that receives data that is returned from
a service.