Implementation of inputColor component

In one of my project I had a use case of storing selected color value in DB and displaying the same stored color on UI.  For this use case I made use of inputColor component, where the picked color from inputColor component is converted into color code before storing in DB. In this blog, I will explain the steps to achieve this feature.

The inputColor component creates a text field for entering colors and a button for picking colors from a palette.InputColor

Steps:

1. Create Entity Object on top of the DB table where color codes are saved.

2. Create a transient attribute(say awtColor) of type, java.awt.Color in the entity object.

3. Create View Object on top of the Entity Object created in Step#1. Add the transient attribute in the View Object as well.

4. Generate VORowImpl class of the View Object created in Step#3.

5. Override Getter and Setter of awtColor transient attribute as mentioned below. 

Getter:

Convert the color code stored in DB to java.awt.Color using Color.decode method.

    public Color getAwtColour() {
        String colorCode = getColourCode();
        if(colorCode != null)
            return Color.decode(colorCode);
        else
            return null;
    }

Setter:

Whenever a new Color is picked from inputColor component, it has to be converted into corresponding color code as shown. 

    public void setAwtColour(Color col) {
        if (col != null) {
  String color= String.format("#%02X%02X%02X", col.getRed(), col.getGreen(), col.getBlue());
            setColourCode(color);
        } else {
            setColourCode(null);
        }
    }

6. Drag and drop VO collection from Data Control as af:table on jspx page.

7. Convert awtColor column attribute from inputText component to inputColor component. jspx code after this code change is:

<af:column sortable="true" headerText="Color" id="c3" width="200">
        <af:inputColor value="#{row.bindings.AwtColour.inputValue}"
                    autoSubmit="true" id="it3">
        </af:inputColor>
    </af:column>

8.  The UI is displayed as:

How to specify min/max date value for an inputDate component.

Very often in projects, you get a requirement to restrict an user from selecting a date value before today's date and sometimes restrict an user from selecting a date value beyond today's date. In this blog post, I will explain you with simple steps how to achieve this feature using min and max values of an inputDate component.

1. minValue attribute: the minimum value allowed for a date value.
You can use this attribute to disable past dates before today's date by following below steps.

Step1: Drag and drop an inputDate component on a page.

Step2:  Define a managed bean variable minDate and override the getter of this variable as mentioned below. Here we are setting the minDate date variable to current date.

    public Date getMinDate() {
        try {
            Calendar cal = Calendar.getInstance();
            java.util.Date date = cal.getTime();
            DateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
            String currentDate = formatter.format(date);
            maxDate = formatter.parse(currentDate);
            return formatter.parse(currentDate);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

Step3: Go to inputDate component and set the minValue attribute to the managed bean variable created in step 2.

                <af:inputDate label="Min Value" id="id1"
                            value=""
                            minValue="#{pageFlowScope.TestBean.minDate}"
                            autoSubmit="true">
                </af:inputDate>

Run the page and see that all the past dates before today's date(6th Dec, 2016) are disabled.  

2. maxValue attribute: the maximum value allowed for a date value.
You can use this attribute to disable future dates after today's date by following below steps.

Step1: Drag and drop an inputDate component on a page.

Step2:  Define a managed bean variable maxDate and override the getter of this variable as mentioned below. Here we are setting the maxDate date variable to current date.

    public Date getMaxDate() {
        try {
            Calendar cal = Calendar.getInstance();
            java.util.Date date = cal.getTime();
            DateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
            String currentDate = formatter.format(date);
            maxDate = formatter.parse(currentDate);
            return formatter.parse(currentDate);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

Step3: Go to inputDate component and set the maxValue attribute to the managed bean variable created in step 2.

                <af:inputDate label="Min Value" id="id1"
                            value=""
                            maxValue="#{pageFlowScope.TestBean.maxDate}"
                            autoSubmit="true">
                </af:inputDate>

Run the page and see that all the future dates after today's date(6th Dec, 2016) are disabled.