Set current date in af:inputDate on double click using javascript in ADF

This post is about a question that is asked on the OTN forum. In this post, I'll show you how we can set the current date in af:inputDate component with a double click of the mouse. For this, we need to use a simple javascript function.

Here we have an inputDate component on the page and added javascript function as a resource in the page. See page XML source

1. <?xml version='1.0' encoding='UTF-8'?>
2. <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
3. xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
4. <jsp:directive.page contentType="text/html;charset=UTF-8"/>
5. <f:view>
6. <af:document title="SetCurrentDate.jspx" id="d1">
7. <af:resource type="javascript">
8. function setDate(evt) {
9. var comp = evt.getSource()
10. comp.setValue(new Date());
12. }
13. </af:resource>
14. <af:form id="f1">
15. <af:inputDate label="Label 1" id="id1">
16. <af:clientListener method="setDate" type="dblClick"/>
17. </af:inputDate>
18. </af:form>
19. </af:document>
20. </f:view>
21. </jsp:root>

All done, as you can see that the javascript function is called using clientListener on double click event of input date component.

Cheers  Happy Learning

ADF Basics: Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Hello All,
Again a post about ADF Basics for beginners
I have seen lots of thread on OTN about changing basic styles of component . for example,

How to change font size of inputText ?
How to change color of inputText/outputText ?
How to change color of link or button ?

and everyone starts creating a css/skin for these minor changes but there is no need of that
Skin should be used for complex styles or you have apply same style to all components of your application

If you will read API docs then you will know this, See what docs says about inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.

Difference between contentStyle and inlineStyle -

contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about whole component and also available in output (outputText) or collection (table, tree etc) component's property where contentStyle is not there. This can be use to set width, height ,border or color of output components etc.

So this is enough about theory , no one likes theory ;) , Everyone is looking for some code that is ready to use
Let's see some practical usage of both properties -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Used this in contentStyle property of components
width:150px;color:white;font-weight:bold;font-size:small;background-color:red;padding:5px;
and check the output

you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this -
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components , color of link/button -

Output components doesn't have contentStyle property as there is not content part in component , here we make use of inlineStyle property
See what happens on applying same style in outputText and link using inlineStyle

It looks good :) , but same style doesn't work for button because button has multiple root element (we can only change width, color of text and font of button but background color and other styling can not be changed using inlineStyle property)
For more detail about button skinning check - Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width -

just write in inlineStyle property like this
width:600px;height:200px;background-color:lightyellow;color:red;
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table's height using inlineStyle ensure that autoHeightRows should be set to -1

In same way we can change color of columns too, see i have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this

Now it's your turn , try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin , when framework provides these wonderful properties

Cheers :) Happy Learning

Showing highlighted holiday calendar in af:inputDate date picker (ADF 12.1.3)

Hello All
This post is about showing highlighted days for holidays in af:inputDate and user must not be able to select these dates
here i am using Jdeveloper 12.1.3
you can do this using af:calendar
https://blogs.oracle.com/adf/entry/display_holiday_name_in_af
but i have a requirement to show holidays while user selects date using af:inputDate

so for this requirement first step is easy to do and there is lots of post about disabling specific days in calendar of af:inputDate

Step 1. Disable specific days -

• you can see there is property in af:inputDate for setting disabled days, this filed takes a value of type List supported by DateListProvider interface







• for this purpose i have created a bean that implements methods of DateListProvider , in Overridden method i have defined a list that contains dates of holidays that i want to disable in af:inputDate



package holiday.view.bean;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;

import javax.faces.context.FacesContext;

import org.apache.myfaces.trinidad.model.DateListProvider;

public class HolidayBean implements DateListProvider {
    public HolidayBean() {
    }

    @Override
    public List<Date> getDateList(FacesContext facesContext, Calendar calendar, Date date, Date date2) {
        List<java.util.Date> holiDay = new ArrayList();
        holiDay.add(new Date("27-July-2014"));
        holiDay.add(new Date("29-July-2014"));
        holiDay.add(new Date("10-Aug-2014"));
        holiDay.add(new Date("25-Dec-2014"));
        holiDay.add(new Date("01-Jan-2015"));
        holiDay.add(new Date("22-Oct-2014"));
        holiDay.add(new Date("23-Oct-2014"));
        holiDay.add(new Date("24-Oct-2014"));

        return holiDay;
        //return Collections.emptyList();
    }
}



• attached this bean to disabledDays property of af:inputDate





• now first part is done we can see all holidays as disabled in calendar of af:inputDate

Step 2. Highlight disabled holidays -

• but it is not easy to find holidays as all are in grey, so i have to highlight all disabled days , so for this requirement , create a skin in viewController project and write this



af|chooseDate::regular-day:disabled{
    background-color: red;
    color: ButtonFace;
}



• af:chooseDate is used because internally af:inputDate opens af:chooseDate as date picker so i have to change property of af:chooseDate, now run your application

Happy Learning :)

ADF Basics : Selecting and showing time-stamp in ADF Faces using af:inputDate & af:convertDateTime

Hello All
This post is about a very common & basic requirement of developers ,
how to show & select time with date in ADF Faces ?
We use af:inputDate to show and select Date & Timestamp type of attributes, by default it looks like this

ADF provides a default converter (af:convertDateTime) to format date & timestamp field, we can define a pattern to change it's format & to show time selector in calendar box



Suppose pattern is- dd-MMM-yyy HH:mm:ss , now see there is a hour/minute/second selector appears in calendar box

you can change this pattern as per your format , suppose you want to show AM or PM after time just use dd-MMM-yyy HH:mm:ss a

see xml source of af:inputDate-

<af:inputDate label="Label 1" id="id1" contentStyle="width:250px;padding:5px;">
                        <af:convertDateTime pattern="dd-MMM-yyy HH:mm:ss a"/>
                    </af:inputDate>

this is how we can change format of Date & Timestamp - Cheers :-)

Disabling keyboard input in af:inputDate, restrict user to use calendar only - Oracle ADF

hello all,
this tutorial is about a requirement of restricting user to enter date through calendar only in ADF application
this trick was posted by Frank Nimphius (ADF Code Corner)

• Drop a af:inputDate component on page from component pallete








• Now set its background color so that it looks like disabled field

• Now to make it's input field disable, we have to write a small javascript function, copy this function and paste in your page source (XML)



<af:resource type="javascript">
          function enableCalendarOnly(evt) {
              evt.cancel();
          }
        </af:resource>



• Now drop a af:clientListener under af:inputDate component to invoke javascript

• Now set properties in af:clientListener as Method & Type

•  Now run your page and see that input field is disabled for date component , now value can be selected using calendar only
  
  
  

 Cheers - Happy Learning :-)