21. Implementing an HTML Form in JSP using Skyway Tag Library

PROBLEM

Implementing user interfaces can be tedious. Skyway provides a JSP tag library for making it easier to bind form elements to Model data. Skyway Builder's tag library extends the Spring Form tag library.

SOLUTION

Spring MVC provides a JSP tag library (Spring Form) for making it easier to bind form elements to Model data. Skyway Builder's tag library extends the Spring Form tag library, but there may be occasions that the UI developer prefers to use the Spring Form tag library directly or needs to access server-side functionality generated by Skyway Builder from pre-existing JSP pages implemented with the Spring Form library.

The Skyway tag library was created to address some of the difficulties of using the Spring Form tag library. For one thing in order to configure the Spring Form tags, you need to revert to the model/view artifacts and mapping configuration. This is tedious and error-proned. The Skyway tags extends the Spring tags and adds a custom property editor for each web control. Furthermore Skyway Builder provides wizards for configuring model variables and url mappings.

HOW IT WORKS

In order to use the Skyway tag library, standard JSP tag library conventions apply. You will need to add the following JSP directive to the JSP page that will use the Skyway tag libary.

Example 2.21. JSP Directive to include Skyway JSP Tag Library

<%@taglib uri="http://www.skywaysoftware.com/taglibs/core" prefix="skyway"%>     

Here is a list of the form-related web controls that are available in the Skyway JSP. Refer to the Skyway Web Control reference guide for more detailed information.

Example 2.22. HTML Form using Skyway Builder Tag Library

<!-- The labels and ids have been omitted for brevity.  -->
<skyway:form name="myForm" 
             commandName="MyModel" 1
             action="${pageContext.request.contextPath}/MyController/saveModel.action">2
   <skyway:input type="text" controller="MyController" path="name"></skyway:input>3
   <skyway:textarea controller="MyController" path="description"></skyway:textarea>
   <skyway:checkbox controller="MyController" path="validated"></skyway:checkbox>
   <skyway:dropdown size="1"  
                    items="${countries}"4 
                    controller="MyController"
                    path="country">
   </skyway:dropdown>
   <skyway:radiobuttons controller="MyController" 
                        items="${paises}" 5
                        path="color">
   </skyway:radiobuttons>
   <skyway:button type="submit" label="ok"></skyway:button>6
</skyway:form>
</body>
</html>   

1

The commandName attribute is configured with the name of the Model that contains the variables that will be set by this form. In this example the Controller contains a model called "MyModel".

2

The action attribute is configured with the URL that will handle the form submission.

3

The skyway:input controller attribute is configured with the controller that will be used to process this form. The skyway:input path attribute is configured with the model variable that the form element will be bound to. In this example, name is a variable defined in "MyModel".

4

In order to populate a dropdown with a list of items stored in variable, the items attribute should be configured with a Model variable. The variable can be a list, map, or collection of objects.

5

Populating radio button options is very similar to dropdown options. For the items attribute you can use a list, map, or collection of objects.

6

A Skyway button will submit the form to the specified action.

RELATED RECIPES

  1. Implementing an HTML Form in JSP using standard HTML elements

  2. Implementing an HTML Form in JSP using Spring Form Tag Library

  3. Using Third-Party Tag Libraries