Scroll to particular component using af:scrollComponentIntoViewBehavior tag in ADF Faces

You all must have seen HTML Anchor links, this is actually called link within page and used to navigate between page sections
Same as HTML anchor tag ADF Faces has <af:scrollComponentIntoViewBehavior> tag that allows user to jump to a particular component on page

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

Insert and show whitespace in ADF Faces Components (panelBox, showDetailItem etc)

This post is about a small trick
How to show whitespace in ADF Faces component properly ?
Recently i found a question on OTN about this
 How can I and spaces in the text property of a showDetailItem?
so thought to document it here for future reference

There is one more post about showing whitespace , check it
Showing white-spaces properly in ADF table column- 11g & 12c

Sometimes we need to insert some whitespace in between of some text as panelBox name, tab name in showDetailItem etc
In this case space appears in page editor but it doesn't appear on page and you can not put spacer at these points because there is only one component



Suppose you have a panelBox and requirement is to show Oracle    ADF as it's header text . In this case providing space in propertyInspector doesn't work , HTML entity for space &nbsp; also doesn't work because of no DOCTYPE declaration

See here i added normal spaces in property of panelBox

 But is doesn't work :(

Now what to do ?
After lots of hit and tries finally i found that it work with equivalent entity number for &nbsp;
and this magic number is  - &#160;
So tried this -

 <af:panelBox text="Oracle&#160;&#160;&#160;&#160;&#160;&#160;&#160;ADF" id="pb1">
                    <f:facet name="toolbar"/>
                </af:panelBox>

and output is

This is the small trick , sometimes you may need this :)
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

Update page component in between of event processing in ADF Faces using JavaScript

This post is not about any specific topic of framework, recently i was working in an application, requirement was like this
There is a button on page that uploads a large file to server and it takes some time . So as soon as user press this button it's text should be changed to 'Processing..' and after upload is complete it should be 'Done'




In this post i am sharing same - How to update page component while an event is processing ?
First i have tried it using java means in same button action listener but in this case button text was changed only after event processing is complete
So for this purpose i have used some javascript function, this is quite simple (see the implementation)

• Drop a button on page and create a ActionListener , it will change button text to 'Done' after event processing (used Thread.sleep() for some long processing)



    private RichButton buttonBind;

    /**Method to process Action Event
     * @param actionEvent
     */
    public void processValueAction(ActionEvent actionEvent) {
        // Sleep for some time (Event Processing time)
        try {
            Thread.sleep(10000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //After processing set button text to 'Done'
        buttonBind.setText("Done");
        AdfFacesContext.getCurrentInstance().addPartialTarget(buttonBind);
    }

    public void setButtonBind(RichButton buttonBind) {
        this.buttonBind = buttonBind;
    }

    public RichButton getButtonBind() {
        return buttonBind;
    }



• Now question is how to change button text to 'Processing..' immediately after clicking button. So for this purpose i am using javascript



function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }



• Calling this javascript function using af:clientListener in button like this (See XML source of page)



 <af:document title="UpdatePageComponent.jspx" id="d1">
            <af:resource type="javascript">
              function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }
            </af:resource>
            <af:form id="f1">
                <af:spacer width="10" height="10" id="s1"/>
                <af:panelGroupLayout id="pgl1" layout="horizontal" halign="center">
                    <af:panelBox id="pb1" showDisclosure="false">
                        <f:facet name="toolbar"/>
                        <af:button text="Click to process" id="b1"
                                   actionListener="#{viewScope.UpdatePageComponent.processValueAction}"
                                   clientComponent="true" binding="#{viewScope.UpdatePageComponent.buttonBind}"
                                   inlineStyle="width:250px;text-align:center;padding:5px;font-weight:bold;">
                            <af:clientListener method="changeButtonText" type="action"/>
                        </af:button>
                    </af:panelBox>
                </af:panelGroupLayout>
            </af:form>
        </af:document>



• As soon as button is clicked this javascript function will be invoked and set new text in button and after event processing button text is again set by managed bean actionListener.




After Clicking button (Event is processing)-



Processing complete-

Thanks, Happy Learning :)

Overriding default query listener ,field validation of af:query- Oracle ADF

Hello All,

this post talks about a common requirement - can we apply custom validation in af:query fields ? yes , we can do that by overriding default query listener of af:query component

What af:query is ?

see- Oracle Docs-af:query

"The query component provides the user the ability to perform a query based on a saved search or personalize saved searches. The component displays a search panel with various elements, each of which help the user to accomplish various tasks."

Follow steps to apply validation on af:query-

• Here i am taking example of Departments table of HR Schema
• First create business components for Departments table

• then create  bind variables and a view-criteria in departments view object
  
  
  
  
  
• See the view criteria is applied for LocationId, ManagerId and Department Name

• Now create a page and drop criteria with table on page- it will look like this

• Next is to select af:query on page and go to property inspector and copy text of default query listener

• Now create a managed bean and create a custom query listener for af:query
  
  
  
   
• In this custom query listener , in this example i am checking for negative Location Id and Manager Id, if there is any negative values ,custom method will show a message otherwise default queryListener will be executed
• We can get af:query's components value using 2 methods
  First One  - Using Bind Variable (getNamedWhereClauseParam)
  Second One - Using QueryDescriptor and ConjunctionCriterion
• I'm going to explain both methods - see code of custom query listener using first method, two generic methods will be used in this process to invoke expression language and to get BindingContainer of current context



    /**Method to invoke EL Expression
     * @param el
     * @param paramTypes
     * @param params
     * @return
     */
    public static Object invokeEL(String el, Class[] paramTypes, Object[] params) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory = facesContext.getApplication().getExpressionFactory();
        MethodExpression exp = expressionFactory.createMethodExpression(elContext, el, Object.class, paramTypes);

        return exp.invoke(elContext, params);
    }

    /**Method to get Binding Container of current page
     * @return
     */
    public BindingContainer getBindings() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }



• See the first method to get af:query components value and validate that



    /**Custome Query Listener- Using getNamedWhereClauseParam
     * @param queryEvent
     */
    public void customQueryListener(QueryEvent queryEvent) {
        String deptName = null;
        Integer locId = null;
        Integer mgrId = null;

        /**Get Iterator of Table*/
        DCIteratorBinding iter = (DCIteratorBinding)getBindings().get("DepartmentsView1Iterator");

        /**Get ViewObject from Iterator*/
        ViewObjectImpl vo = (ViewObjectImpl)iter.getViewObject();

        /**Get Bind Variable's Value*/
        if (vo.getNamedWhereClauseParam("LocIdBind") != null) {
            locId = Integer.parseInt(vo.getNamedWhereClauseParam("LocIdBind").toString());
        }
        if (vo.getNamedWhereClauseParam("MgrIdBind") != null) {
            mgrId = Integer.parseInt(vo.getNamedWhereClauseParam("MgrIdBind").toString());
        }
        if (vo.getNamedWhereClauseParam("DeptNmBind") != null) {
            deptName = vo.getNamedWhereClauseParam("DeptNmBind").toString();
        }

        /**Check for Negative values*/
        if ((locId != null && locId < 0) || (mgrId != null && mgrId < 0)) {
            FacesMessage msg = new FacesMessage("Id Value can not be negative");
            msg.setSeverity(FacesMessage.SEVERITY_ERROR);
            FacesContext.getCurrentInstance().addMessage(null, msg);
        } else {
            /**Execute default query listener with help of invokeEL method*/

            invokeEL("#{bindings.DepartmentsViewCriteriaQuery.processQuery}", new Class[] { QueryEvent.class },
                     new Object[] { queryEvent });
        }
    }



• And Second Method using QueryDescriptor is-



    /**Custom Query Listener-Using QueryDescriptor
     * @param queryEvent
     */
    public void customqueryProcess(QueryEvent queryEvent) {
        String deptName = null;
        Integer locId = null;
        Integer mgrId = null;

        /**Reference-Frank Nimphius Example- ADF Code Corner
       * http://www.oracle.com/technetwork/developer-tools/adf/learnmore/85-querycomponent-fieldvalidation-427197.pdf
       * */
        QueryDescriptor qd = queryEvent.getDescriptor();

        ConjunctionCriterion conCrit = qd.getConjunctionCriterion();
        //access the list of search fields
        List<Criterion> criterionList = conCrit.getCriterionList();
        //iterate over the attributes to find FromDate and ToDate
        for (Criterion criterion : criterionList) {
            AttributeDescriptor attrDescriptor = ((AttributeCriterion)criterion).getAttribute();

            if (attrDescriptor.getName().equalsIgnoreCase("DepartmentName")) {
                deptName = (String)((AttributeCriterion)criterion).getValues().get(0);

            } else {
                if (attrDescriptor.getName().equalsIgnoreCase("LocationId")) {
                    locId = (Integer)((AttributeCriterion)criterion).getValues().get(0);

                }
            }
            if (attrDescriptor.getName().equalsIgnoreCase("ManagerId")) {
                mgrId = (Integer)((AttributeCriterion)criterion).getValues().get(0);

            }
        }
        if ((locId != null && locId < 0) || (mgrId != null && mgrId < 0)) {
            FacesMessage msg = new FacesMessage("Id Value can not be negative");
            msg.setSeverity(FacesMessage.SEVERITY_ERROR);
            FacesContext.getCurrentInstance().addMessage(null, msg);
        } else {
            /**Process default query listener*/
            invokeEL("#{bindings.DepartmentsViewCriteriaQuery.processQuery}", new Class[] { QueryEvent.class },
                     new Object[] { queryEvent });
        }

    }



• Now Run your application and check it for negative values

Cheers- Download Sample App Happy Learning :-)