Pagination In ADF

Pagination is one common requirement in many projects. But in ADF 11g we have only scrollable facility available. So it becomes quiet tedious job to handle huge data.

First create one Fusion Web Application.

And create the ADF Business Components (I have used Employees Table of HR schema (Oracle XE))

Now create your page. For saving time I have created One ADF Read Only Table by dragging EmployeesView1 from data control to the page.

Now create <af:iterator> where <af:table> tag was present . remove all the table related tags

The complete code is below.

The iterator code is like below:

<af:iterator id="i1"

                               value="#{bindings.EmployeesView1.collectionModel}"

                               var="row"

                               binding="#{pageFlowScope.testPageBean.myIterator}">

Now create one managed bean (TestPagebean.java here). I have created the bean in page flow scope.

create the value change listener and action listener.

The valuechange listener code will be like this :

UIXIterator valueIterator = getMyIterator();

        if (!valueChangeEvent.getNewValue().equals(valueChangeEvent.getOldValue())) {

            int newPage =

                Integer.parseInt(valueChangeEvent.getNewValue().toString());

            int pageStart = (newPage) * valueIterator.getRows();

            valueIterator.setFirst(pageStart);

            AdfFacesContext.getCurrentInstance().addPartialTarget(valueIterator);

Now run the page you will get desired output.

The complete code is below.

Please add in comments for queries..............

Executing Particular Method Before Page Loads

Sometimes It is needed to Execute Some methods before page loads or component loads.

These can be done in many ways like:

1> Using an ADF/JSF Page Phase Listener (oracle.adf.controller.v2.lifecycle.PagePhaseListener/javax.faces.event.PhaseListener)

2> Using a page backing bean superclass which provides an onLoad( ) method

3> Using a custom Page Controller (oracle.adf.controller.v2.lifecycle.PageController)

4> Using managed bean for page 

5> Using Page Def for particular page

6> Using Task Flow 

and may be many more .. :) 

First start with simplest one : Using managed bean 

First Create one Test Fusion Application then create the testPage.jspx

I have created the backing bean (managed bean) at page creation time to save time for creating bindings needed. It does not matter if create managed bean and do not expose all the page components.

I have written my test method which should be executed before components load. 

 I want that the method should be executed before document loads and form loads.

So I have called the method in both the components getter method.

Now if we run the page it will be executed before the document and form loads.

I will be updating the other ways also in my blog  in future.

There may be specific scenarios where other ways should be followed (like: even before the page is hit some methods should be executed).

Please comment for queries. 

Using jQuery in ADF Pages

JQuery is one rich AJAX library. Which is very handy and very popular library used in modern web applications.

It gives a very rich look and feel also. For detail study of JQuery you can refer the site
JQuery.

We can easily use JQuery in ADF pages also. But there is one problem regarding this is that for many ADF components we can't use components id to be used in JQuery as the ids are rendered like <id provided>::content and JQuery would not allow ":" like special characters in $("#id") statement.

So I have taken a different approach here.

First create one Fusion Web Project. In the Webcontent create one folder to put the jquery javscripts in the folder.You can download the jquery javascripts from JQuery website.

Now create one web page where to use the JQuery

Add resource tag in the page <af:resource type="javascript" source="/<directory name>/jquery-1.x.min.js"/>

Now switch to the Source view instead of design view.

and add your javascript code like below:


 <af:resource type="javascript">
        function showInput() {
            if ($("input[name=it1]").val() != null) {
                if (($("input[name=it1]").val().length &gt; 3) && ($("input[name=it1]").val().length &lt; 6)) {
                    $("input[name=it1]").css("color", "red");
                }
                else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length &lt; 9 )){
                  $("input[name=it1]").css("color", "blue");
                }
                else {
                  $("input[name=it1]").css("color", "green");
                }
            }
        }
      </af:resource>

Here in the above code if the length is below 4 or greater than or equal 9 then the text color will be green otherwise it will show red or blue according to condition.

The complete code is here

<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1" title="My JQuery Test Page">

      <af:resource type="javascript" source="/js/jquery-1.4.4.min.js"/>

      <af:resource type="javascript"

                   source="/js/jquery-ui-1.8.9.custom.min.js"/>

      <af:resource type="javascript">

        function showInput() {

            if ($("input[name=it1]").val() != null) {

                if (($("input[name=it1]").val().length &gt; 3) && ($("input[name=it1]").val().length &lt; 6)) {

                    $("input[name=it1]").css("color", "red");

                }

                else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length &lt; 9 )){

                  $("input[name=it1]").css("color", "blue");

                }

                else {

                  $("input[name=it1]").css("color", "green");

                }

            }

        }

      </af:resource>

      <af:form id="f1">

        <af:panelStretchLayout id="psl1">

          <f:facet name="top"/>

          <f:facet name="center">

            <!-- id="af_one_column_header_and_footer_scroll"   -->

            <af:panelGroupLayout layout="scroll" id="pgl1">

              <af:inputText label="Input Value" id="it1">

                <af:clientListener method="showInput" type="keyPress"/>

              </af:inputText>

            </af:panelGroupLayout>

          </f:facet>

          <f:facet name="bottom"/>

        </af:panelStretchLayout>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>

Now if you run the page you will see the text color change o entering value ,

like below :

Please add comments for further queries .. :)

Creating ADF Poll

Creating ADF poll is one of the easiest thing in ADF.

Here you have to just mention the poll interval just and it will call the poll in that interval continuously.

To create ADF Poll (af:poll) just create one Fusion Web Application and Create one Fusion Web Project. 

In that project create one managed bean to create the poll listener method.

For me it is CallPollBean.java.

Now create one Poll Listener method,

For me it is :

    public void callPoll(PollEvent pollEvent) {

        // Add event code here...

        System.out.println("Poll Called");

        DateFormat formatter = new SimpleDateFormat("dd/MM/yy HH:mm:SS");

        System.out.println(formatter.format(new Date()));

    }

Now create one JSF page. 

Create af:poll component in the page. 

For me the component is like below:

 <af:poll id="p1" interval="60000" pollListener="#{callPoll.callPoll}" 

                     immediate="true" rendered="true"/>

Now if you run the page you will see that the callPoll method is being called at an interval of 1 minute.

The interval is in milli second format.

In 11.1.1.4 (JDev 11g PS3) release there is one extra property timeout which is set to default 10minutes (timeout="600000 "),


you can change the timeout as per needed for infinite poll use timeout="-1"

Stop Execution Of View Object at First Load of Page

This can be done in many ways.

I am going through one simple way without creating managed bean or using task flow.

First Create the Fusion Web Application.
Then create the ADF Business Components to create Entity Object, View Object and Application Module in  Model project

Now create the page to show the table data. 

Now if you run the page you will see that the VO is executed on First Page Load and it is showing data in table.

To stop that first create the <VOName>ViewObjectImpl class for me it is EmployeesViewObjectImpl.java

in this class override the method


    protected void executeQueryForCollection(Object object, Object[] object2, int i)


use the below code to override.


       @Override
    protected void executeQueryForCollection(Object object, Object[] object2,
                                             int i) {

        if (counter > 0) {
            super.executeQueryForCollection(object, object2, i);
        } else {
            counter = counter + 1;

        }
    }

Now if you run the page you will not be able to see the data. On Execute Button Click the data can be shown.

For further queries you can add comment on this blog.

Favicon Icon In ADF

To create Favicon Icon for Your ADF application without changing context root, you can follow the following steps.

Place the favicon.ico in your Webcontent root.

For me it is like FaviconViewController\public_html

Refresh Your ViewController project it will show favicon.ico in WebContent section as shown in picture.

Now create one jspx page that will use the favicon.ico

Right Click the af:document in structure window and enable the metaContainer facet as shown in the picture.

Inside metaContainer facet create one af:outputText as shown in picture.

Put the value of the outputText
as
<link rel='SHORTCUT ICON' href='#{facesContext.externalContext.requestContextPath}/favicon.ico'/>

set the escape property of the outputText to false.

Now run your page you will be able to see the favicon in supported browsers.

Please comment in comment section for any queries or suggestion.


Favicon can be added in other ways also..