Apache Click

  • Posted on: 3 February 2017
  • By: vinodkumartiwari

Apache Click is a modern and open source Java/J2EE and html page based component oriented web application framework. The framework is built on top of the Java Servlet API. For details on apache click framework and APIs visit on Apache Click .

RIA with Apache Click

We are here to develop Rich Internet Applications by extending the Apache Click capabilities and integration of Java/J2EE, JavaScript, jQuery, CSS, AJAX and other UI to for developing User Interfaces.

ImageRadio Control - Radio Group with Image

Apache Click ImageRadio is an extended form of Radio class. The new class ImageRadio provides a new control for Apache Click by extending the org.apache.click.control.Radio. The control will be similar implementation as Radio with the org.apache.click.control.RadioGroup instead of label you have to provide the image source and the source will be rendered as an image on user interface. The implementation logic has been shared in the below discussions:


package com.components; import org.apache.click.Context; import org.apache.commons.lang.StringUtils; import org.apache.click.control.Radio; import org.apache.click.util.HtmlStringBuffer; public class ImageRadio extends Radio{ private static final long serialVersionUID = 1L; // ----------------------------------------------------- Instance Variables protected String src; protected int x = -1; protected int y = -1; // ----------------------------------------------------- Constructors public ImageRadio(String name) { super(name); } public ImageRadio(String name, String src) { super(name); setSrc(src); } public ImageRadio() { super(); } // ----------------------------------------------------- Methods public String getSrc() { return src; } public void setSrc(String src) { this.src = src; } public int getX() { return x; } public int getY() { return y; } @Override public void bindRequestValue() { Context context = getContext(); String xValue = context.getRequestParameter(getName() + ".x"); if (xValue != null) { this.checked = true; try { this.x = Integer.parseInt(xValue); } catch (NumberFormatException nfe) { nfe.printStackTrace(); } String yValue = context.getRequestParameter(getName() + ".y"); try { this.y = Integer.parseInt(yValue); } catch (NumberFormatException nfe) { nfe.printStackTrace(); } } } @Override public boolean onProcess() { if (isDisabled()) { Context context = getContext(); if (context.hasRequestParameter(getName() + ".x")) { setDisabled(false); } else { return true; } } bindRequestValue(); if (isChecked()) { dispatchActionEvent(); } return true; } @Override public void render(HtmlStringBuffer buffer) { // ----------------------------------------------------- Radio Button buffer.elementStart(getTag()); buffer.appendAttribute("type", "radio"); buffer.appendAttribute("name", getName()); buffer.appendAttribute("id", getId()); buffer.appendAttribute("title", getTitle()); if (getTabIndex() > 0) { buffer.appendAttribute("tabindex", getTabIndex()); } appendAttributes(buffer); if (isDisabled()) { buffer.appendAttributeDisabled(); } buffer.elementEnd(); // ----------------------------------------------------- Image Button buffer.elementStart(getTag()); buffer.appendAttribute("type", "image"); buffer.appendAttribute("id","i"+ getId()); buffer.appendAttributeDisabled(); if (getTabIndex() > 0) { buffer.appendAttribute("tabindex", getTabIndex()); } String src = getSrc(); if (StringUtils.isNotBlank(src)) { if (src.charAt(0) == '/') { src = getContext().getRequest().getContextPath() + src; } buffer.appendAttribute("src", src); } appendAttributes(buffer); if (isDisabled()) { buffer.appendAttributeDisabled(); } buffer.elementEnd(); } }
The above class is extending the org.apache.click.control.Radio class and during the render(HtmlStringBuffer buffer) method there are two radio controls has been added without label and the second radio attribute has been changes to image. Below we are using this custom class into the new component.
package com.component.page; import org.apache.click.control.Form; import org.apache.click.control.RadioGroup; import com.components.ImageRadio; public class HomePage extends BorderPage { private Form form = new Form("form"); private RadioGroup radioGroup = new RadioGroup("Select Card Type:"); public HomePage() { addControl(form); radioGroup.add(new ImageRadio("VISA", "/images/VisaCardLogo.gif")); radioGroup.add(new ImageRadio("MC", "/images/MCLogo.gif")); radioGroup.add(new ImageRadio("DIS", "/images/DiscoverLogo.gif")); radioGroup.setValue("VISA"); radioGroup.setVerticalLayout(true); form.add(radioGroup); } }
After the Java component code now we need to use it on the home.htm page. Below is the code on htm to render the form on user interface:
<html> <head><title>Home Page</title> </head> <body> $form </body> </html>
HTML User Interface
Finally you can see the output of the above code. Here are the attached image below:


Click API Checkbox Customization

This customization is required to provide the labels to the right. Current available API is designed in this package org.apache.click.control.Checkbox which is providing label to the left only and if we want to use the checkbox with label on right then we have to override the current org.apache.click.control.Checkbox class and make the changes into this. Current available checkbox is available in the following options only:
Let's have a look on how we can customize the existing feature of the apache click org.apache.click.control.Checkbox control class.
package com.components.ui.click.control;

import java.text.MessageFormat;
import org.apache.click.Context;
import org.apache.click.control.Checkbox;
import org.apache.click.control.Label;
import org.apache.click.util.HtmlStringBuffer;

public class RightCheckBox extends Checkbox {

    private static final long serialVersionUID = 1L;

    // -------------------------------------------------------------- Constants
    private String rightLabel;
    protected final static String VALIDATE_CHECKBOX_FUNCTION =
        "function validate_{0}() '{'\n"
        + "   var msg = validateCheckbox(''{0}'',{1}, [''{2}'']);\n"
        + "   if (msg) '{'\n"
        + "      return msg + ''|{0}'';\n"
        + "   '}' else '{'\n"
        + "      return null;\n"
        + "   '}'\n"
        + "'}'\n";

    /** The field checked value. */
    protected boolean checked;

    // ----------------------------------------------------------- Constructors

    public RightCheckBox(String name) {

    public RightCheckBox(String name, String label) {
        super(name, label);

    public RightCheckBox(String name, boolean required) {

    public RightCheckBox() {

    // ------------------------------------------------------ Public Attributes
    public String getTag() {
        return "input";

    public boolean isChecked() {
        return checked;

    public void setChecked(boolean value) {
        checked = value;

    public String getType() {
        return "checkbox";

    public String getValue() {
        return String.valueOf(checked);

    public void setValue(String value) {
        checked = Boolean.valueOf(value);

   public void setRightLabel(String label){
    public String getRightLabel(){
      return rightLabel;
    public Object getValueObject() {
        if (checked) {
            return Boolean.TRUE;

        } else {
            return Boolean.FALSE;

    public void setValueObject(Object object) {
        if (object != null && object instanceof Boolean) {
            checked = (Boolean) object;

    public String getValidationJavaScript() {
        if (isRequired()) {
            Object[] args = new Object[3];
            args[0] = getId();
            args[1] = String.valueOf(isRequired());
            args[2] = getMessage("not-checked-error", getErrorLabel());

            return MessageFormat.format(VALIDATE_CHECKBOX_FUNCTION, args);

        } else {
            return null;

    // --------------------------------------------------------- Public Methods
    public void bindRequestValue() {
        setChecked(getContext().getRequestParameter(getName()) != null);

    public boolean onProcess() {
        if (isDisabled()) {
            Context context = getContext();

            // Switch off disabled property if control has incoming request
            // parameter. Normally this means the field was enabled via JS
            if (context.hasRequestParameter(getName())) {
            } else {
                // If field is disabled skip process event
                return true;

        // In Html an unchecked Checkbox does not submit it's name/value so we
        // always validate and dispatch registered events

        if (getValidate()) {


        return true;
    public void render(HtmlStringBuffer buffer) {

"); } @Override public void validate() { setError(null); if (isRequired() && !isChecked()) { setErrorMessage("not-checked-error"); } } }
After customization and overriding the methods the new class com.components.ui.click.control.RightCheckBox will have the backward compatibility and we have the option to use both either right or left label using RightCheckBox class. After overrriding the current class and overriding the methods we will be able to make Checkbox in the following options:
How to use RightCheckBox Class To use RightCheckBox class we need to create a demo java class let's assume RightCheckboxDemo is the name of the demo class which will use the above class to show the desired user interface: RightCheckboxDemo.java
package com.demo.page;

import org.apache.click.control.Form;

public class RightCheckboxDemo extends BorderPage{
 private Form form = new Form("form");
 private RightCheckBox checkbox1=new RightCheckBox("checkbox1");
 private RightCheckBox checkbox2=new RightCheckBox("checkbox2");
 private RightCheckBox checkbox3=new RightCheckBox("checkbox3");
 private RightCheckBox checkbox4=new RightCheckBox("checkbox4");
 private RightCheckBox checkbox5=new RightCheckBox("checkbox5");
 public RightCheckboxDemo(){
   //Using setLabel we can set the default label and lable will be on left side
  checkbox1.setLabel("Item 1");

 //Using setRightLabel we can set the custom label and lable will be on right side
  checkbox2.setRightLabel("Item 2");
  checkbox3.setRightLabel("Item 3");
  checkbox4.setRightLabel("Item 4");
  checkbox5.setRightLabel("Item 5");

By using the addControl(form) we have provided the form to the htm page. Now we have to right one htm page to render the user interface: RightCheckboxDemo.htm
<head><title>Demo Page</title>
Finally the user interface is ready to render and we can see how is this looks like:
Please share your comments or suggestion. You can visit our website and leave you comment over there. To visit our website visit on:
VaaCom : A Blog on Technology