Using Images for Form submissions

All along, you have submitted HTML forms with the grey lackluster buttons . Life requires a bit more color and these days most of the web sites use images for Form submission. The images add aesthetic feeling to the page well. Struts provides < html:image > tag for Image based Form submission. Although the ImageTag belongs to the HTML Tag library, it requires an in-depth treatment and deserves a section by itself. Let us look at the ImageTag and how it fits into the scheme of things. Consider an HtmlTag used in a JSP as follows :

 <html:image src=images/createButton.gif                     property=createButton /> 

This gets translated to:

 <input type=image    name=createButton              src=images/createButton.gif />. 

When the Form is submitted by clicking on the image, the name is added to the X and Y coordinates and sent to the server. In this case, two request parameters createButton.x and createButton.y are sent. Suppose that the HTML form has two or more images each with a different name. How do you capture this information in the ActionForm and convey it to the Action? The answer to this is ImageButtonBean in org.apache.struts.util package.

The ImageButtonBean has five methods ‚ getX() , setX() , getY() , setY() and isSelected() . All you have to do is add JavaBeans property of type ImageButtonBean to the ActionForm (Listing 6.6). For instance, if the JSP has image buttons named and createButton and updateButton , you have to add two ImageButtonBean properties to the ActionForm with the same name. When the createButton image is clicked, two request parameters createButton.x and createButton.y are sent to the server. Struts interprets the dot separated names as nested JavaBeans properties. For example, the property reference:

 <.. property=address.city/> 

is translated into

 getAddress().getCity() 

while getting the property. The setters are called for setting the property as follows:

 getAddress().  setCity()  

Listing 6.6: CustomerForm using ImageButtonBean

 public class CustomerForm extends ActionForm {    private String firstName;    ..    ..    private ImageButtonBean createButton;    private ImageButtonBean updateButton;    public CustomerForm() {        firstName = "";        lastName = "";        createButton = new ImageButtonBean();        updateButton = new ImageButtonBean();    }    public ImageButtonBean getCreateButton() {        return createButton;    }    public void setCreateButton(ImageButtonBean imgButton) {        this.createButton = imgButton;    }    public ImageButtonBean getUpdateButton() {        return updateButton;    }    public void setUpdateButton(ImageButtonBean imgButton) {        this.updateButton = imgButton;    } } 

 

For createButton.x and createButton.y , Struts invokes getCreateButton() on the ActionForm and then setX() and setY() on createButton . Since createButton is an ImageButtonBean , its x and y are set to non-null values, when the button is clicked. The isSelected() method returns true if at least one of x or y is non-null.

Listing 6.6 shows the ActionForm with createButton and updateButton . It is pretty straightforward. In the Action instance, you can find which of the buttons is pressed by using the isSelected() method as follows:

 public ActionForward execute(ActionMapping mapping,                  ActionForm form, HttpServletRequest request,                  HttpServletResponse response) throws Exception   {     CustomerForm custForm = (CustomerForm) form;     if (custForm.getCreateButton().isSelected()) {       System.out.prinitln("Create Image Button is pressed");     } else if (custForm.getUpdateButton().isSelected()) {       System.out.prinitln("Update Image Button is pressed");     }   } 

Compare this with the Action using grey buttons. It would look like: custForm.getCreateButton().equals(‚“Create ‚½) . Obviously, changing the grey button to image button on the JSP is not gone unnoticed in the Action. The Action class has changed accordingly . The ActionForm has changed too. Previously a String held on to the submit button ‚ s name. Now an ImageButtonBean has taken its place. You might be wondering if it is possible to eliminate this coupling between the Action and the JSP? The good news is that this can be achieved quite easily. Listing 6.7 shows HtmlButton that extends the ImageButtonBean , but overrides the isSelected() method. ImageButtonBean has basically taken care of handling the image button in isSelected() method. The extra functionality in HtmlButton takes care of grey button submission. The attribute called name is the name of the grey button submitting the form. The isSelected() method now checks if the name is not null in addition to invoking the super.isSelected() . Now you can use the HtmlButton for whatever mode of JSP submission ‚ grey button or image button. The ActionForm will use HtmlButton in both cases and never change when the JSP changes. Neither does the Action change. Decoupling Nirvana indeed!

Listing 6.7: HtmlButton

 public class HtmlButton extends ImageButtonBean {   private String name;        public String getName() {     return name;   }   public void setName(String aName) {     this.name = aName;   }      public boolean isSelected() {     boolean returnValue = super.isSelected();     if (returnValue == false) {       returnValue = (name != null && name.trim().length() > 0);     }     return returnValue;   } } 

 

The Image button in JSP will look like:

 <html:image property=createButton                      src=images/createButton.gif /> 

If grey button were used in the JSP, it would look like:

 <html:submit property=createButton.name>            <bean:message key=button.create.name />         <html:submit> 

Notice that the grey button is called ‚“ createButton.name ‚½. The dot separated naming is essential to maintain the ActionForm and Action unchanged. Moreover, the suffix of the property ‚ ‚“ .name ‚½ is fixed since the HtmlButton has the JavaBeans property called name (Listing 6.7).

Large projects need a simple and systematic way of handling Form submissions and deciding on the back end. Minor innovations like HtmlButton go a long way in making your application cleaner and better.

The alt text and the image source for ImageTag can also be externalized into the Message Resource Bundle much like the ImgTag . As it turns out the names of the attribute for externalizing these are also the same. < html:image > has srcKey to externalize the name of the image src and altKey to externalize the alternate text ( alt ). In Chapter 10, we will develop a DispatchAction-like capability for HtmlButton by exploiting the Struts customization facility.

In Chapter 4, you looked at the goodies offered by DispatchAction and LookDispatchAction . In particular with LookupDispatchAction , you were able to assign methods in Action instance based on the button names in a locale independent manner. The only pre-requisite was that, all the form submission buttons have the same name. With the HtmlButton (or ImageButtonBean for that matter), we started with different names for different buttons from the outset. For this reason, DispatchAction and LookupDispatchAction cannot be used in conjunction with image based form submissions. They can be however used with html links using images.

ImageButton and JavaScript

ImageButton is all cool and dandy as long as you don ‚ t have to execute JavaScript and support multiple browser versions. Microsoft Internet Explorer 4 (and above) and Netscape 6 (and above) provide support for JavaScript event handlers in the < input type= ‚½image ‚½ >. If the JavaScript execution is critical to the application logic, you might want to switch between the image buttons and grey buttons depending on the browser version. This is another instance where HtmlButton saves the say. Irrespective of whether the front end uses Image button or grey button, the presentation logic in the ActionForm and Action doesn ‚ t change.