Adding Watermarks to ADF Components in JDev 11.1.2.4

Reference: https://blogs.oracle.com/groundside/entry/placeholder_watermarks_with_adf_11

Note: This will work only for JSF page NOT for JSPX  page.

1. Create a Tag Library 
• In ViewController project  > Right Click > New > JSF/Facelets > Facelets Tag Library.
• In the Create Facelets Tag Library wizard - Step1 > Select Project based >
• Step 2 >  Enter File name as adfglitz.taglib.xml and NameSpace as  http://xmlns.oracle.com/adf/faces/glitz. and Finsh.
• An entry will be created in the web.xml file.
• Make sure to check whether facelet library has been added to the project by going to project properties > Facelets Tag Libraries 

   2. Create placeholder/Watermark Tag in the Tag Library

• Add a new Tag name - setWatermarkBehaviour 
• Select the behavior radio button and enter Id - oracle.demo.adfglitz.watermark
• Add a new attribute - value
• value attribute type will be java.lang.String and Required will be True

3. Create a Java Class

• Create a Java class named - SetWatermarkBehavior
• Code can be copy pasted from https://blogs.oracle.com/groundside/resource/2012-05-16/SetWatermarkBehavior.java  

         4. Create a JavaScript class

• Create a JavaScript class named - addWatermarkBehavior.js

• Code:

                              function addWatermarkBehavior(componentId, type, text){

                                        var sourceInput = AdfPage.PAGE.findComponent(componentId);

                                        var domElemement = AdfAgent.AGENT.getElementById(sourceInput.getClientId());

                                        var targetArray = domElemement.getElementsByTagName(type);

                                        targetArray[0].placeholder = text;

                              }

        5. Create a JSF page (Tried with JSPX but did not work)

• NameSpace -  xmlns:afg="http://xmlns.oracle.com/adf/faces/glitz"  is added to the view.
• Javascript addWatermarkBehavior.js is referenced inside the document tag.
• The placeholder component <afg:setWatermarkBehaviour value="Please enter your first name here"/> is added inside the inputText component.

      6. Done. Run your page and Test the Result