• Info
• Initial State
• View Source
• Run

Basic VSPX Programming

VX-S-2 Generic VSPX form controls

Scriptable form and form controls

Simple form and field validation example

The vspx:form control represents scriptable container of a HTML form. It may contains several other controls which are represented below. In the form.vspx example the form contains two vspx:label, two vspx:text and vspx:button controls. In that way vspx:form behaves as control and container, as it may contain other controls and have rendition. The vspx:label controls are shown in that example again to see that these can be used as a child of any vspx: container. Also the values of vspx:label are data bound to the name of control and name of page class.

The vspx:text is a text input control which can accept data from user. It may have modifiers which only change appearance from text to password or hidden field. In that example the vspx:text controls are in their default form.

The vspx:button control is a generic scriptable button, which originates post events. In practice it renders as a submit button, but with modifiers it can appear as image or link, so in that cases client-side Java scripts are generated to allow posting.

The last in that example we should notice is vspx:validator components assigned to the vspx:text fields. These are used to perform server-side validation of data entered by user.

So in short the page will display two fields to enter a data, which must be integer numbers. Where the second one must be in the range from 10 to 20. If you enter a different value an error will appear.

Check-box example

This example presents a scriptable check-box (vspx:check-box) and submit button which is modified to look-like as link. Changing a state of check-box and posting a form will change the value of the label at the bottom.

Radio and radio group controls

The radio-button and radio-group represented in this example shows usage of radio controls. The main difference in approach is using a container to designate group of radio boxes or to use attribute "group-name" to do that. These are used as a scriptable variant of radio button in HTML.

Select list example

This example shows the usage of select-list control, which is a VSPX analogue of the select control. Its members must be pre-defined with vspx:item controls which are similar to "option" in HTML variant.

Text area example

Sometimes a free-form text needs to be entered in a forms, in that case (in HTML practice) textarea is used. In the VSPX world the scriptable variant of it is vspx:textarea. This example shows simple form allowing 50 chars at max to be entered.

Inter-field form validation

As we noticed in the last and first example we have a vspx:validators to control the user input. But they was per text field. What if we need to check two or more inputs against each other in some order? In that case we can use the form validation. The date.vspx example shows two fields to be filled as date strings. Each filed is tested to be valid date string, and finally if first date is below second the validation will be passed. This is done with validator assigned to the vspx:form control. The default values are initialized to be in incorrect order to see validation on first hit.

View the source	Action
1. check_box.vspx	Run
2. date.vspx	Run
3. form.vspx	Run
4. radio.vspx	Run
5. radio_group.vspx	Run
6. select.vspx	Run
7. textarea.vspx	Run