PROBLEM
HTML is the predominant markup language for web applications. While there are a variety of web technologies for simplifying the definition of html-based user interfaces and facilitating the integration of the UI with server logic (see Spring Tag Library and Skyway Tag Library), a UI developer should not be forced to use other technologies for doing standard HTML, like an HTML form. As long as the UI developer understands how to interact with the server logic, the developer should be able to implement user interfaces using standard HTML.
SOLUTION
Skyway Builder provides a JSP tag library to make it easier to implement HTML forms, but a developer isn't required to use it. A developer can implement a form using the standard form tags, like <form>, <input>, <textarea>, <radio>, <select>, <button>, etc... This enables a UI developer compose user interfaces using any HTML editor of their choice.
HOW IT WORKS
The following table describes the key attribute configurations for various standard HTML controls in order interact with a Spring MVC application generated by Skyway Builder.
Table 2.2. Binding HTML Form Controls
| HTML Form Control | Attribute Configuration | ||
|---|---|---|---|
| <form> | action: The URL that the form should be posted to. The URL composed of a defined URL Mapping that is prefixed with the application context. The URL Mapping must be set to bind request variable. Otherwise the form data will be discarded. | ||
| <input>, <textarea><select>, <option> | name: The model variable that the HTML control should be bound to. When the form is posted, the value of the web control will assigned to the variable specified. | ||
The following HTML fragment shows how you can implement an HTML form using standard HTML controls.
Example 2.17. HTML Form using Standard HTML Controls
<!-- The labels and ids have been omitted for brevity. --> <form id="MyModel"name="myForm" action="${pageContext.request.contextPath}/MyController/saveModel.action"
method="post"> <input name="name" type="text" value=""/>
<textarea name="description" rows="3" cols="20"></textarea> <input name="validated" type="checkbox" value="true"/> <select name="country"> <option value="-">--Please Select</option> <option value="USA">USA</option> <option value="Canada">Canada</option> </select> <input name="country" type="radio" value="Blue"/> <input name="country" type="radio" value="Green"/> <input type="submit" value="OK" /> </form>
| The form id 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". | |
| The form action attribute is configured with the URL that will handle the form submission. The URL should be a configured URL mapping with the "Bind Request Values" enabled. | |
| The form element name attribute is configured with the model variable that form element will be bound to.. |
The user interface in Skyway applications is implemented using JSP which offers a lot of inherent functionality to help web developers build web applications. JSP functionality is fully leveragable for Skyway applications, and Skwyay Builder adds some additional functionality make building user interfaces even easier.
The Skyway Builder tag library emits standard HTML. If you need to figure out to specify the HTML for passing data to the server but you don't want to use the Skyway tag library, you can use the HTML emitted by the web controls defined in the Skyway Builder tag library as a template.
RELATED RECIPES