Pink JSP Tag Reference

To use a Pink JSP tag, add this line to your JSP page.

<%@ taglib uri="http://mobiarch" prefix="p" %>

The <p:form> Tag

The form tag creates an HTML form element. It uses these attributes:

  • action – Indicates the controller bean and the method that will handle the form submission. It is of the format BEAN_NAME/METHOD_NAME/PARAM1/PARAM2… Out of this, only the bean name is mandatory. If method name is not present then “index” is used as the method name. You can supply URL parameters in the path.
  • method – HTTP method – get or post. Optional. By default “post” is used.
  • You can set any arbitrary attribute and they will be preserved.

Example:

@Named("customers") 
@RequestScoped 
public class CustomerController extends Controller {
    public String register() {...}
}

The following form will be handled by the register() method of the customers bean.

<p:form action="customers/register">
...
</p:form>

You can set any attribute:

<p:form action="customers/register" id="myForm" onclick="return validate();">
...
</p:form>

 

The <p:input> Tag

This tag outputs an HTML <input> tag and has almost the same usage. It uses these attributes.

  • name – The name of the property of the controller bean that is bound to this input element. Mandatory. When the form is rendered, the value of the input element is retrieved from the property. When the form is submitted, the value is set to the property. Pink performs conversion from the data type of the property to string and back.
  • type – The input type, such as “text”, “checkbox”, “radio” and so on. Optional. Defaults to “text”. You can use anything as the type. That means, HTML5 input types like “email”, “color” and “date” can be used. Only the value “checkbox” and “radio” affects the behavior of the tag.
  • value – Should be set only for “checkbox” and “radio”. If this value matches the value of the bound property then the input element is checked. For all other input types, this attribute is ignored and Pink sets the value from the bound property.
  • id – Sets the id of the input element if provided. Optional.
  • label – Used only for checkbox and radio to create a <label> element for this input. Optional.
  • You can set any arbitrary attribute and they will be preserved.

Example:

@RequestScoped
public class CustomerController extends Controller {
    Customer customer = new Customer(); //Must create child beans
    public Customer getCustomer(){ 
        return customer;
    }
    public String add() {
        //...
    }
}

public class Customer {
    private String fullName;
    private float salary;
    private String level = "G"; //"G" – Gold, "S" – Silver, "B" – Bronze, etc.
    private boolean active = false;
    private String residenceState;
    //Getters and setters...
}

Corresponding form to add a customer:

<p:form action="customerController/add">
Name: <p:input type="text" name="customer.fullName" size="35"/><br/>
Salary: <p:input type="text" name="customer.salary" size="35"/><br/>
Level: <p:input type="radio" name="customer.level" value="G" label="Gold"/> 
<p:input type="radio" name="customer.level" value="S" label="Silver"/>
<p:input type="radio" name="customer.level" value="B" label="Bronze"/>
<br/>
<p:input type="checkbox" name="customer.active" value="true" 
    label="Has shopped in last 6 months"/><br/>
<p:input type="checkbox" name="customer.residenceState" value="NY" 
    label="New York Resident"/><br/>


<input type="submit" value="Add Customer"/>
</p:form>

image

Note:

  1. To bind a nested property, the child bean object must exist. In this example, the Customer object must be created in the code. Pink will not create children beans.
  2. In the name attribute, do not repeat the name of the controller bean. Pink will automatically get the controller bean’s name from the action attribute of the form.
  3. For checkbox and radio, if the value attribute matches the current value of the bound property, then the element is checked. In this example, Gold radio button will be selected by default. The “Has shopped in last 6 months” checkbox will be uncheked since the value of the active property is false by default.
  4. A checkbox input doesn’t have to be bound to a boolean property. Here, the “New York Resident” check box will be checked only if the customer’s state of residence happens to be “NY”. If user checks this check box and submits the form, the residenceState property will be set to “NY”.
  5. HTTP is notorious for not sending the URL parameter of an unchecked checkbox input. The default value of the property must indicate the value represented by an unchecked checkbox. For example, the active property is set to false by default. If the corresponding checkbox is left unchekced and the form is submitted, a new Customer object will be created with correct value for the active field. Only if the checkbox is checked and the form is submitted, the property will be set to true by Pink.

The <p:select> Tag

This tag creates an HTML <select> element. It uses these attributes:

  • name – The name of the controller bean’s property bound to this select element. The property may be a scalar simple type, like String or integer. It can also be an array of a simple type. For multiple selection list, you will most likely use an array. If the value of an <option> matches the value of the property or any element of the property array, then the option is selected. Note: List property type is currently not supported.
  • items – A property of the controller bean that represents the available <option> elements. The property can be any iterable collection, such as array and List. Each object in the collection represents an <option> child element. These objects must be complex JavaBeans capable of holding the value and display text of an <option>.
  • itemValue – The property of an object in the items collection that will be set as value of an <option>.
  • itemLabel – The property of an object in the items collection that will be used as the body text of an <option>.
  • You can set any arbitrary attribute and they will be preserved.

Example of a single selection select:

//This JavaBean represents an <option>
public class CarModel {
    int id;
    String modelName;
    
    public CarModel(int id, String name) {
        this.id = id;
        this.modelName = name;
    }
    
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getModelName() {
        return modelName;
    }
    public void setModelName(String name) {
        this.modelName = name;
    }
}
@Named("cars")
@RequestScoped
public class CarController extends Controller {
    ArrayList<CarModel> availableModels;
    int selectedModel;
    
    @PostConstruct
    public void init() {
        availableModels = new ArrayList<CarModel>();
        availableModels.add(new CarModel(1, "Honda Civic"));
        availableModels.add(new CarModel(2, "Toyota Camry"));
        availableModels.add(new CarModel(3, "GLK 350"));
    }

public ArrayList<CarModel> getAvailableModels() {
return availableModels;
}

public int getSelectedModel() {
return selectedModel;
}

public void setSelectedModel(int selectedModel) {
this.selectedModel = selectedModel;
}
public String index() {
return “index”;
}
public String makeSelection() {
System.out.println(“Selected model: ” + selectedModel);

return “index”;
}
}

The form below lets users select a single car model.

<p:form action="cars/makeSelection">
<p:select name="selectedModel" items="availableModels" itemValue="id" 
    itemLabel="modelName" size="5"/><br/>
<input type="submit" value="Select Model"/>
</p:form>

image

To allow multiple selection, just set the bound property to be an array.

@Named("cars")
@RequestScoped
public class CarController extends Controller {
	ArrayList availableModels;
	int selectedModel[];
	
	@PostConstruct
	public void init() {
		availableModels = new ArrayList();
		availableModels.add(new CarModel(1, "Honda Civic"));
		availableModels.add(new CarModel(2, "Toyota Camry"));
		availableModels.add(new CarModel(3, "GLK 350"));
	}

	public ArrayList getAvailableModels() {
		return availableModels;
	}

	public int[] getSelectedModel() {
		return selectedModel;
	}

	public void setSelectedModel(int[] selectedModel) {
		this.selectedModel = selectedModel;
	}
	public String index() {
		return "index";
	}
	public String makeSelection() {
		for (int id : selectedModel) {
			System.out.println("Selected model: " + id);
		}
		
		return "index";
	}
}

Switch on multiple selection:

<p:form action="cars/makeSelection">
<p:select name="selectedModel" items="availableModels" 
    itemValue="id" itemLabel="modelName" size="5"
    multiple="multiple"/><br/>
<input type="submit" value="Select Model"/>
</p:form>

The <p:option> Tag

In the discussion for the <p:select> tag, we rendered the <option> elements using the items collection property. That approach is useful when the <option> elements are dynamic, perhaps loaded from database. In other situations, the <option> elements are static, such as a list of countries. They can be hard coded in the form using the <p:option> tag. This tag automatically selects an <option> element, if its value matches the value of the property bound to its parent <p:select> tag. Example:

@Named("select")
@RequestScoped
public class SelectTest extends Controller {
    private String singleSelectedValue = "TH";
    //Getters and setters
}

<p:select size="5" name="singleSelectedValue">
    <p:option value="ON">One</p:option>
    <p:option value="TW">Two</p:option>
    <p:option value="TH">Three</p:option>
    <p:option value="FO">Four</p:option>
</p:select>

This will select option Three by default.

The <p:errors> Tag

Displays all error messages in a <ul> list. It doesn’t use any specific attributes. You can supply any attribute and it will be preserved. Example:

<p:errors style="color: red">
<p:form action="...">
...
</p:form>

You can also display error with a specific property.

<p:input type="text" name="customer.email"/> 
    <p:errors property="email" style="color:red"/><br/>

Note, the property attribute of <p:errors> doesn’t quite match the name attribute of the associated <p:input> for nested properties. The property attribute takes the name of the actual property that has invalid value.

The <p:textarea> Tag

Represents an HTML <textarea>. It uses these attributes:

  • name – The name of the property of the controller bean that is bound to this input element. Mandatory.
  • You can set any arbitrary attribute and they will be preserved.

Example:

<p:textarea name="comments" rows="25" cols="35"/>

The <p:a> Tag

This tag simplifies creation of HTML <a> element for a Pink action handler. Normally, such a link will be created as follows:

<a href=”/<web context root>/<pink servlet path>/<bean name>/<action method path>”>Some text</a>

With the <p:a> tag, this becomes:

<p:a href=”<bean name>/<action method path>”>Some text</a>

For example:

<p:a href="customers/list">Customer List</p:a>

It uses these attributes:

  • href– Indicates the controller bean and the method that will handle the link request. It is of the format BEAN_NAME/METHOD_NAME/PARAM1/PARAM2… Out of this, only the bean name is mandatory. If method name is not present then “index” is used as the method name. You can supply URL parameters in the path.
  • You can set any arbitrary attribute and they will be preserved.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s