Show Indian Currency Format in ADF using currencyFormatter jQuery

 Previously I have posted about Change af:converNumber format according to Locale but there is no option to show Indian currency format directly using locale so Here I am writing about showing Indian Currency format in ADF components using the currencyFormatter jQuery library.

From the docs

CurrencyFormatter.js allows you to format numbers as currencies. It contains 155 currency definitions and 715 locale definitions out of the box. It handles unusually formatted currencies, such as the INR.

Indian currency format is a bit unusual as it uses variable-width grouping, See the below image to understand how numbers are grouped in INR.

Let's see how to use the currencyFormatter jQuery library in our ADF application. Created an ADF Application and dropped an input text component on the page to enter the amount

Added jQuery library using resource tag under af:document

1. <af:resource type="javascript"
2. source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
4. <af:resource type="javascript"
5. source="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.js"/>

Here goes the javascript function that formats the amount

1. <af:resource type="javascript">
2. function changeFormatInd(evt) {
3. var val = $('input[name="it2"]').val();
4. val.replace(/\,/g, "");
5. var str2 = val.replace(/\,/g, "");
6. //alert(str2);
7. $('input[name="it2"]').val(OSREC.CurrencyFormatter.format(str2,
8. {
9. currency : 'INR', symbol : ''
10. }))
11. }
12. </af:resource>

Called this function on value change event of input text using client listener

1. <af:inputText label="Amount" id="it2"
2. contentStyle="width:300px;padding:8px;font-weight:bold;color:#006394;font-size:30px;">
3. <af:clientListener method="changeFormatInd" type="valueChange"/>
4. </af:inputText>

Now run application and check

Cheers 🙂 Happy Learning

Styling Input components inside af:query using ADF Skin

This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job

Navigate to another page on value change event of ADF input component

Recently I have seen a thread on OTN forum in that user want to navigate from one page to another on valueChangeListener of input component.

First Method-
This is a simple piece of code to perform navigation to specific page , Use it in ValueChangeListener directly

 FacesContext facesContext = FacesContext.getCurrentInstance();
 facesContext.getApplication().getNavigationHandler().handleNavigation(facesContext, null, "controlFlowName");

Second Method-
ValueChangeListener fires when value of input component changes but it is not meant for navigation, For navigation we use buttons and links with Action property
But for this requirement we have to be a bit tricky, We can queue button Action on value change listener of inputText to navigate to another page
Now first value change listener will be executed and then it'll queue button action to execute and as final outcome user will be able to navigate

Apply ValueChangeListener to programmatically created ADF Faces components

Again a post in series of  Working with ADF Faces Components programmatically
Previously i have posted about Getting value , Applying Action Listener , Applying Client/Server Listener, Creating and applying client Attributes, Setting value expression , Applying Validation to programmatically created component
Now this post post is about applying Value Change Listener to a component that is created at run time
See how to do this (Jdev 12.1.3)-

• First created a FusionWebApplication and a page in viewController project
• Dropped a button on page , on this button action i will create an inputText programmatically and assign Value Change Listener method reference to it
• To create new inputText i have added following code (described in previous post)

Apply Validator to programmatically created ADF Faces components

Again a post in series of  Working with ADF Faces Components programmatically
Previously i have posted about Getting value , Applying Action Listener , Applying Client/Server Listener, Creating and applying client Attributes, Setting value expression  to programmatically created component
Now this post post is about applying Validator to a component that is created at run time
See how to do this (Jdev 12.1.3)-

• First created a FusionWebApplication and a page in viewController project
• Dropped a button on page , on this button action i will create an inputText programmatically and assign validator method reference to it
• To create new inputText i have added following code (described in previous post)

Set EL expression in value (properties) of programmatically created ADF Faces component

When we are working with ADF Faces components programmatically then we  create , set styles,set value of that component from managed bean
This post is about setting an expression as component value that will be resolved at run time and return desired value

Set ADF Faces Component properties using custom javascript

This post is about using JavaScript in ADF Faces to change default properties , sometimes using JavaScript can make task easier and all scenarios covered in this post are based on very common requirement. One important point is - set clientComponent property of component to true when using JavaScript on that
Why this is important ? (Check what docs say)

whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary

Read more about clientComponent property - Understanding ADF Faces clientComponent attribute

Set panel group layout properties-

Use this JavaScript function to set panel group layout's layout and other properties

 <!--Function to set panelGroupLayout properties-->
              function changeGroupLayout(evt) {
                  var pgl = AdfPage.PAGE.findComponent('pgl1');
                  pgl.setProperty("layout", "vertical");
                  pgl.setProperty("inlineStyle", "background-color:red");
              }

I have called this function using client listener on a image that is inside my panel group layout

<af:panelGroupLayout id="pgl1" layout="horizontal" clientComponent="true">
                    <af:image source="#{resource['images:5-10.jpg']}" id="i1" inlineStyle="width:250px;height:200px;"/>
                    <af:image source="#{resource['images:13.jpg']}" id="i2" inlineStyle="width:250px;height:200px;">
                        <af:clientListener method="changeGroupLayout" type="dblClick"/>
                    </af:image>
                    <af:image source="#{resource['images:1.jpg']}" id="i3" inlineStyle="width:250px;height:200px;"/>
                </af:panelGroupLayout>

Initially group layout is horizontal-

After executing JavaScript on double click on second image-

Set input component property (inlineStyle, contentStyle, value etc)-

This function is same as previous one , this function sets value in input text , changes it's contentStyle

<!--Function to set af:inputText properties-->
              function changeInputText(evt) {
                  var iText = AdfPage.PAGE.findComponent('it1');
                  iText.setProperty("value", "Ashish Awasthi");
                  iText.setProperty("contentStyle", "background-color:red;color:white;font-weight:bold;");

              }

Called this function on double click event in inputText-

<af:inputText label="Label 1" id="it1" clientComponent="true" unsecure="disabled">
                        <af:clientListener method="changeInputText" type="dblClick"/>
              
                    </af:inputText>

Output is like this-

 on double click inside inputText

In same way we can set disabled property of component . It is a secure property of component , that should not be changed from a client side event normally but if this is a requirement then we have to set disabled in unsecure property of input component. Only disable property is supported as of now
Read more about this property -<af:inputText>

Set panelSplitter width according to browser window width-

This JavaScript function divides af:panelSplitter in equal parts to fit in browser

 <!--Function to set panel Splitter position-->
              function changePanelSpliterPosition(evt) {
                  var width = window.innerWidth;
                  var ps = AdfPage.PAGE.findComponent('ps1');
                  ps.setProperty("splitterPosition", width / 2);
              }

In same way try setting other properties of different components. Soon i will update this post with some more JavaScript functions and examples

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

Get Value from programmatically created components , Iterate over parent component to get child values in ADF Faces

Sometimes we need to create and add ADF Faces components at runtime , we can do it programmatically
I have posted about this before
Creating dynamic layout (form and UI Component) using ADF Faces

Now this post talks about getting value from programmatically created component, means when user enters value in those component then how to access that value in managed bean

Here i am using Jdev 12.1.3 , Let's see the implementation part

Created a page and added two buttons , one to create component at run time and second one to get values from those components
See page XML source code -

<af:document title="ProgComponent.jspx" id="d1">
            <af:form id="f1">
                <af:spacer width="10" height="10" id="s3"/>
                <af:button text="Create Components " id="b1"
                           actionListener="#{viewScope.GetValueProgCompBean.createComponentsAction}"/>
                <af:spacer width="10" height="10" id="s1"/>
                <af:button text="Get Value" id="b2"
                           actionListener="#{viewScope.GetValueProgCompBean.getValueOfCompAction}"/>
                <af:panelGroupLayout id="pgl1" layout="vertical"
                                     binding="#{viewScope.GetValueProgCompBean.parentGroupBind}">
                    <af:spacer width="10" height="10" id="s2"/>
                </af:panelGroupLayout>
            </af:form>
        </af:document>

To create components at run time i have used same approach described in above blog post
Check the code written on Create Components button

import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;

import oracle.adf.view.rich.component.rich.input.RichInputText;
import oracle.adf.view.rich.component.rich.layout.RichPanelGroupLayout;
import oracle.adf.view.rich.context.AdfFacesContext;

    //Binding of panel group layout , it will be parent of prog. created components
    private RichPanelGroupLayout parentGroupBind;

    public void setParentGroupBind(RichPanelGroupLayout parentGroupBind) {
        this.parentGroupBind = parentGroupBind;
    }

    public RichPanelGroupLayout getParentGroupBind() {
        return parentGroupBind;
    }

    /**Method to add child components to parent
     * @param parentUIComponent
     * @param childUIComponent
     */
    public void addComponent(UIComponent parentUIComponent, UIComponent childUIComponent) {
        parentUIComponent.getChildren().add(childUIComponent);
        AdfFacesContext.getCurrentInstance().addPartialTarget(parentUIComponent);
    }

    /**Method to create Input text at run time
     * @param actionEvent
     */
    public void createComponentsAction(ActionEvent actionEvent) {
        //Create an Object of desired UI Component
        RichInputText ui = new RichInputText();
        //Set properties
        ui.setId("rit1");
        ui.setLabel("Input text 1");
        ui.setContentStyle("font-weight:bold;color:red");
        //Now add this component to any parent component
        addComponent(getParentGroupBind(), ui);

        RichInputText ui1 = new RichInputText();
        ui1.setId("rit2");
        ui1.setLabel("Input text 2");
        ui1.setContentStyle("font-weight:bold;color:red");
        addComponent(getParentGroupBind(), ui1);
    }

Now run application and click on button , you will see two inputText are created

Now to get value of these components follow the steps
1. Get Parent layout
2. Iterate over parent to get all child components
3. Get Value of every child

See the code written on get value button in managed bean

    /**Method to Iterate over parent and get value of all child components
     * @param actionEvent
     */
    public void getValueOfCompAction(ActionEvent actionEvent) {
        RichPanelGroupLayout PF = getParentGroupBind(); // Get Parent Layout
        List<UIComponent> listcomp = PF.getChildren(); // Get all child
        Iterator iter = listcomp.iterator(); // Create an Iteraotr to iterate over childs
        while (iter.hasNext()) {
            UIComponent comp = (UIComponent) iter.next(); // Get next Child Component
            System.out.println("Component is-" + comp + " and value is-" +
                               comp.getAttributes().get("value")); //Get Component detial and it's value
        }
    }

Again check , enter value in both inputText and click on button to get value

Output on console-

Sample ADF Application- Download
Cheers :) Happy Learning

Using captcha with ADF Faces (Integrate Kaptcha project with Oracle ADF)

First of all wishing a very Happy New Year to all of you, learn more n more ADF this year :)

This post is about using captcha challenge in ADF Faces, captcha is used to determine whether user is a human or not
CAPTCHA stands for-Completely Automated Public Turing test to tell Computers and Humans Apart
Frank Nimphius posted about 'captcha with ADF Faces' using "Simple Captcha" project.
You can read complete article- http://www.oracle.com/technetwork/developer-tools/jdev/captcha-099103.html



For this post I am using modern version of simplecaptcha project called Kaptcha, project provides a servlet that is responsible for generating captcha image and there are various configuration parameters to change look n feel of captcha image
See project documentation - https://code.google.com/p/kaptcha/
Download jar file- https://code.google.com/p/kaptcha/downloads/list

Now see the steps to integrate Kaptcha project with Oracle ADF

• Create a FusionWeb Application, attach kaptcha-2.3.2 jar to viewController project, also see How to use "Kaptcha"-https://code.google.com/p/kaptcha/wiki/HowToUse





• Next step is to add kaptcha servlet reference in web.xml file



 <servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptchaimage</url-pattern>
    </servlet-mapping>



• Add an af:image on page to show captcha, image source is referenced from servlet mapping



<af:image id="i1" partialtriggers="l1" shortdesc="Captcha" source="/kaptchaimage">



• Default configuration for captcha image is completed , I have added an af:inputText and button on page to enter captcha result .



<af:panelBox text="Captcha Demo- www.awasthiashish.com" id="pb1" showDisclosure="false"
                                 inlineStyle="width:350px;">
                        <f:facet name="toolbar"/>
                        <af:spacer width="0" height="10" id="s3"/>
                        <af:panelFormLayout id="pfl1">
                            <af:panelGroupLayout id="pgl1" layout="horizontal">
                                <af:image source="/kaptchaimage" id="i1" partialTriggers="l1" shortDesc="Captcha"/>
                                <af:spacer width="10" height="0" id="s4"/>
                                <af:link id="l1" icon="#{resource['images:reload.png']}" shortDesc="Refresh Captcha"/>
                            </af:panelGroupLayout>
                            <af:inputText label="Enter text" id="it1" binding="#{ReadCaptchaBean.entrdCaptchaBind}"
                                          contentStyle="font-weight:bold;"/>
                            <af:button text="Submit" id="b1" actionListener="#{ReadCaptchaBean.readCaptchAction}"/>
                        </af:panelFormLayout>
                    </af:panelBox>



• Run application and see how captcha image is appearing on page





• It looks good :-), now see the managed bean code written in submit button's action. This code checks actual captcha value with entered value



    //Binding of inputText to get entered value
    private RichInputText entrdCaptchaBind;

    public void setEntrdCaptchaBind(RichInputText entrdCaptchaBind) {
        this.entrdCaptchaBind = entrdCaptchaBind;
    }

    public RichInputText getEntrdCaptchaBind() {
        return entrdCaptchaBind;
    }
    
    /**Method to check whether entered value is correct or not
     * @param actionEvent
     */
    public void readCaptchaAction(ActionEvent actionEvent) {
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = fctx.getExternalContext();
        HttpServletRequest request = (HttpServletRequest) ectx.getRequest();
        //KAPTCHA_SESSION_KEY- The value for the kaptcha is generated and is put into the HttpSession. This is the key value for that item in the session.
        String kaptchaExpected =
            (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        //Get entered value of captcha using inputText binding
        String kaptchaReceived = entrdCaptchaBind.getValue().toString();
        System.out.println("Entered Value-" + kaptchaReceived + " Expected Value-" + kaptchaExpected);
        if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)) {
            FacesMessage errMsg = new FacesMessage("Invalid Value");
            errMsg.setDetail("Incorrect captcha value- Not Human");
            errMsg.setSeverity(FacesMessage.SEVERITY_ERROR);
            fctx.addMessage(entrdCaptchaBind.getClientId(), errMsg);
        } else {
            FacesMessage errMsg = new FacesMessage("Correct Value");
            errMsg.setDetail("Hello this is the right guess");
            errMsg.setSeverity(FacesMessage.SEVERITY_INFO);
            fctx.addMessage(entrdCaptchaBind.getClientId(), errMsg);
        }
    }



• Again run this application and enter value for captcha








• So it is working , now to change captcha image added a link with partialSubmit=false and set partial trigger property on af:image.





• Kaptcha integration with Oracle ADF is complete and it is working properly  now if you want to modify captcha look n feel then add some init-param (configuration parameter) in web.xml file.
  See complete list of configuration parameters- https://code.google.com/p/kaptcha/wiki/ConfigParameters
  I have changed some parameters value in web.xml , see changed source of web.xml and captcha output



<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>yes</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.border.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.border.thickness</param-name>
            <param-value>1</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>250</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>60</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>35</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.background.clear.from</param-name>
            <param-value>orange</param-value>
        </init-param>
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>7</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptchaimage</url-pattern>
    </servlet-mapping>


again run this application and check output


Thanks, Happy Learning :)
Download-Sample ADF Application

Invoke button action (ActionEvent) and value change listener using JavaScript- Oracle ADF

This is another post about using JavaScript in ADF Faces, So again nothing complicated just simple things but needed often
In this post i am covering two simple requirements , using Jdeveloper 11.1.2.4 (11g Release2)

1. How to call button action (ActionEvent) using JavaScript
2. How to call valueChangeListener of a component using JavaScript

 

Call button action using JavaScript-

So for this just drop a commandButton and an inputText on page and create a ActionListener in managed bean for button

Code in managed bean for ActionEvent-

    /**Action Listener for Button
     * @param actionEvent
     */
    public void buttonAction(ActionEvent actionEvent) {
        FacesMessage msg = new FacesMessage("Button Action called");
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, msg);
    }

Now requirement is to call this button action on double click event of mouse in inputText
To handle ActionEvent in JavaScript, framework provides a class AdfActionEvent , it has a method to queue ActionEvent from a component. So here i use same method to call ActionEvent

See JavaScript function-

function callButtonAction() {
                  //Method to get component using id (here button is top container)
                  var button = AdfPage.PAGE.findComponentByAbsoluteId('cb1');
                  //Method to queue ActionEvent from component
                  AdfActionEvent.queue(button, button.getPartialSubmit());
              }

and call it using af:clientListener under af:inputText-

Run page and check on double click of mouse in inputText-

Call ValueChangeListener using JavaScript-

This is also same as pervious one, created a valueChangeListener in managed bean for input text and requirement is to call this listener on mouse hover of button

Code in managed bean for ValueChangeListener-

    /**ValueChangeListener for inputText
     * @param valueChangeEvent
     */
    public void inputTextVCE(ValueChangeEvent valueChangeEvent) {
        FacesMessage msg = new FacesMessage("Value Change Lestener called");
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, msg);
    }

There is a class to handle valueChange event using JavaScript - AdfValueChangeEvent
So this class also has a queue method , the difference is this queue method takes 4 parameters and also requires a value change event on component
So first step is to change (set) value of field using JavaScript and then queue valueChangeEvent

See JavaScript function-

 function callValueChangeEvent(evt) {
                  //Method to get component using id (here inputText is top container)
                  var field = AdfPage.PAGE.findComponentByAbsoluteId('it1');
                  //Change(set) field's value
                  field.setValue('I am JavaScript text');
                  //Get New changed value
                  var newVal = field.getValue();
                  //Queue ValueChangeEvent (component,oldValue,newValue,autoSubmit)
                  AdfValueChangeEvent.queue(field, null, newVal, false);

              }

make sure that clientComponent and autoSubmit property of inputText set to true
call this javascript fucntion from button using af:clientListener

Run page and check it-

Thanks, Happy Learning