Using af:poll to refresh and push data in page and databound table in ADF

Poll component delivers poll event to server at fixed intervals, we use poll in adf as an alternative of ADS (Active Data Service), this is very simple example of pushing data to page at some fix interval.
Basically af:poll component push data to UI from server.

• This example contains a page with an af:table binded to Department VO, and I have used a poll component to refresh table periodically.

• and defined pollListener on af:poll component that sends request to server in every 4 sec, and table get refreshed

• Other approach to actively push data is ADS, but af:poll is still in use , to refresh table i have written in poll listener



        AppModuleAMImpl am = (AppModuleAMImpl)resolvElDC("AppModuleAMDataControl");

        ViewObject vo = am.getDepartment1();
        vo.executeQuery();
        i = i + 1;
        this.refreshInfo = "Data Reloaded-" + i+"  Total Row-->"+vo.getRowCount();
        AdfFacesContext.getCurrentInstance().addPartialTarget(refrshMsgBind);



• See the jspx page source code-



<?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:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="activePushing.jspx" id="d1">
            <af:messages id="m1"/>
            <af:form id="f1">
                <af:panelBox id="pb1" showDisclosure="false" text="Active Data Pushing">
                    <f:facet name="toolbar">
                        <af:activeOutputText value="#{ActiveDataPushing.refreshInfo}" id="aot1"
                                             inlineStyle="font-weight:bold;color:red;"
                                             binding="#{ActiveDataPushing.refrshMsgBind}"/>
                    </f:facet>
                    <af:table value="#{bindings.Department1.collectionModel}" var="row"
                              rows="#{bindings.Department1.rangeSize}"
                              emptyText="#{bindings.Department1.viewable ? 'No data to display.' : 'Access Denied.'}"
                              fetchSize="#{bindings.Department1.rangeSize}" rowBandingInterval="1"
                              selectedRowKeys="#{bindings.Department1.collectionModel.selectedRow}"
                              selectionListener="#{bindings.Department1.collectionModel.makeCurrent}"
                              rowSelection="single" id="t1" styleClass="AFStretchWidth" contentDelivery="immediate">
                        <af:column sortProperty="#{bindings.Department1.hints.DepartmentId.name}" sortable="true"
                                   headerText="#{bindings.Department1.hints.DepartmentId.label}" id="c1" width="103">
                            <af:inputText value="#{row.bindings.DepartmentId.inputValue}"
                                          label="#{bindings.Department1.hints.DepartmentId.label}"
                                          required="#{bindings.Department1.hints.DepartmentId.mandatory}"
                                          columns="#{bindings.Department1.hints.DepartmentId.displayWidth}"
                                          maximumLength="#{bindings.Department1.hints.DepartmentId.precision}"
                                          shortDesc="#{bindings.Department1.hints.DepartmentId.tooltip}" id="it1"
                                          readOnly="true">
                                <f:validator binding="#{row.bindings.DepartmentId.validator}"/>
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Department1.hints.DepartmentId.format}"/>
                            </af:inputText>
                        </af:column>
                        <af:column sortProperty="#{bindings.Department1.hints.DepartmentName.name}" sortable="true"
                                   headerText="#{bindings.Department1.hints.DepartmentName.label}" id="c2" width="107">
                            <af:inputText value="#{row.bindings.DepartmentName.inputValue}"
                                          label="#{bindings.Department1.hints.DepartmentName.label}"
                                          required="#{bindings.Department1.hints.DepartmentName.mandatory}"
                                          columns="#{bindings.Department1.hints.DepartmentName.displayWidth}"
                                          maximumLength="#{bindings.Department1.hints.DepartmentName.precision}"
                                          shortDesc="#{bindings.Department1.hints.DepartmentName.tooltip}" id="it2"
                                          readOnly="true">
                                <f:validator binding="#{row.bindings.DepartmentName.validator}"/>
                            </af:inputText>
                        </af:column>
                        <af:column sortProperty="#{bindings.Department1.hints.ManagerId.name}" sortable="true"
                                   headerText="#{bindings.Department1.hints.ManagerId.label}" id="c3" width="105">
                            <af:inputText value="#{row.bindings.ManagerId.inputValue}"
                                          label="#{bindings.Department1.hints.ManagerId.label}"
                                          required="#{bindings.Department1.hints.ManagerId.mandatory}"
                                          columns="#{bindings.Department1.hints.ManagerId.displayWidth}"
                                          maximumLength="#{bindings.Department1.hints.ManagerId.precision}"
                                          shortDesc="#{bindings.Department1.hints.ManagerId.tooltip}" id="it3"
                                          readOnly="true">
                                <f:validator binding="#{row.bindings.ManagerId.validator}"/>
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Department1.hints.ManagerId.format}"/>
                            </af:inputText>
                        </af:column>
                        <af:column sortProperty="#{bindings.Department1.hints.LocationId.name}" sortable="true"
                                   headerText="#{bindings.Department1.hints.LocationId.label}" id="c4" width="105">
                            <af:inputText value="#{row.bindings.LocationId.inputValue}"
                                          label="#{bindings.Department1.hints.LocationId.label}"
                                          required="#{bindings.Department1.hints.LocationId.mandatory}"
                                          columns="#{bindings.Department1.hints.LocationId.displayWidth}"
                                          maximumLength="#{bindings.Department1.hints.LocationId.precision}"
                                          shortDesc="#{bindings.Department1.hints.LocationId.tooltip}" id="it4"
                                          readOnly="true">
                                <f:validator binding="#{row.bindings.LocationId.validator}"/>
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Department1.hints.LocationId.format}"/>
                            </af:inputText>
                        </af:column>
                    </af:table>
                    <af:poll id="p1" pollListener="#{ActiveDataPushing.pollListenerActive}" interval="4000"
                             timeout="5000"/>
                </af:panelBox>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>



• Run your application, and do changes from Database and see updated UI at every 4 sec. :-)

 Reloading- 26th times-

 Reloading- 33th times-

 Reloading- 40th times-

• Sample ADF Application - Download

Using JQuery in Oracle ADF

JQuery is advance javascript library to support client side scripting of HTML, it is free and Opensource software licensed under MIT.
Jquery is designed to make it easier to create animations, enhance look feel of component, smooth navigation.
Read about Jquery- http://jquery.com/ , https://jquery.org/
here i am showing you, how to add Jquery in oracle ADF application.

• First add Jquery library to your fusion web application, download library file Download
• Add this file to javascript resources, see image
  
• Now create a javascript(Jquery) file to change color of af:inputText, here is javascript code is given






function changeColor() {
    if ($("input[name=it1]").val() != null) {
       if (($("input[name=it1]").val().length > 0) && ($("input[name=it1]").val().length < 3)) {
            $("input[name=it1]").css("color", "magenta");
        }
      else if (($("input[name=it1]").val().length > 3) && ($("input[name=it1]").val().length < 6)) {
            $("input[name=it1]").css("color", "red");
        }
        else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length < 9)) {
            $("input[name=it1]").css("color", "yellow");
        }
         else if (($("input[name=it1]").val().length >= 9) && ($("input[name=it1]").val().length < 12)) {
            $("input[name=it1]").css("color", "maroon");
        }
         else if (($("input[name=it1]").val().length >= 12) && ($("input[name=it1]").val().length < 15)) {
            $("input[name=it1]").css("color", "teal");
        }
         else if (($("input[name=it1]").val().length >= 15) && ($("input[name=it1]").val().length < 18)) {
            $("input[name=it1]").css("color", "blue");
        }
        else {
            $("input[name=it1]").css("color", "green");
        }
    }
}



• Now create a jspx page , and call this JS file as a resource in jspx page, and also add Jquery Lib to jspx page as Resource
  
  
  
  
• Now add a input text in page, and call javascript resource using af:clientListener
  


• See the code of jspx page-



<?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:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="JqueryADF.jspx" id="d1">
         <af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
         <af:resource type="javascript" source="/resources/js/inputText.js"/>
            <af:form id="f1">
            <af:inputText label="Chck JQ" id="it1" contentStyle="font-weight:bold;">
                        <af:clientListener type="keyDown" method="changeColor"/>
                    </af:inputText>
            
            </af:form>
        </af:document>
    </f:view>
</jsp:root>



• Now Run this application and enter value in input text field and see how color is changing with length
  
  
  
  
  
  
  
  
  
  
  
  
  
• You can use this , with your password field, for any kind of alert, to make 'Find and Enter' games
• One more thing , it is difficult to use Jquery with pagefragments because in page fragments component id's are like :t1:cb1, r1:t1:it2. and jquery does not support ':' so you can easily use this with .jspx page
• Sample ADF application -Download

Beauty of ADF- Taskflow, Difference b/w Facelets and JSP XML fragments in bounded taskflow

Oracle ADF framework support modular architecture for enterprize application development. Multiple small module can be bound together to form a large module .
The greatest advantage of ADF controller over core JSF navigation model is that it splits a single bulky module to multiple reusable and interconnected modules known as Taskflows.

i am not going deeper in Taskflows as every ADF developer know about it ,so the important part is page fragment.

• When  we create taskflow as bounded taskflow , and check it to create fragment in taskflow.

• Now when we create pagefragment in bounded taskflow, there is 2 option for creating fragment

Create fragment as Facelets
Create fragment as JSP XML 

Facelets- is default and official view handler for JSF pages, priviously JSP was used to view JSF pages but it didn't support all component so Facelets comes in picture under APACHE open source license. It supprts all UI component used by JSF (Java Server Faces).
Facelets was developed by Jacob Hookom in 2005.
If you create Facelets fragment in bounded taskflow, then taskflow must be dropped in a JSF page (parent page) not in .jspx (JSP XML ) page.
if you try to drop it into JSP XML page-

JSP XML- jspx is XML variant of JSP(Java Server Pages) to support XML document . JSP XML fragments are used in ADF inorder to support XML document and more powerful page validation techniques.
If you create jsp xml fragments in bounded taskflow, then taskflow must be dropped in a JSP XML(.jspx) page(parent page) not in JSF page.

ADF Basics: .jspx and .jsff page in Oracle ADF

.jspx-

.jspx page is JSP/XML representation, it is standalone page means it can run without any supporting or base page.

Jdeveloper 11g Release1 supports .jspx page but  Release2 supports both jspx and Facelets

.jsff page-

.jsff (JSF fragments) page is fragment of JSF(Java Server Faces) page, sometimes pages become to much complex and large and it is not easy to edit those pages, in that case it should be devided in some fragments.
JSF page can be broken in some smaller page fragments to avoid difficulties in editing and maintaining
page fragments can't run independently, it requires a base of .jsf(JSF page) or .jspx (JSP/XML)
page.

Facelets-

Java Server pages(JSP) technology previously used as view declaration for Java Server Faces (JSF) but it doesn't support all the feature of JSF available in JDK1.6 (Java 6), Facelets is introduced under Apche license and default view declaration technology for Java Server Faces.

Facelets supports all the new features introduced in JSF technology, Facelets requires XML document to work

• Facelets supports HTML and XHTML for designing
• Fasetr execution than JSP
• Supports Facelets tab library with JSF and JSTL tag lib

JSP and JSPX-

The main difference I know is that JSP supports HTML and JSPX is XML variant of JSP. .jspx supports more component than jsp page and also compatible with JSF page fragments.