Show saved file (pdf/text/html/xml/image) content on page from database (BLOB) in ADF Application

Hello All

Previously I have posted about uploading and saving files in database blob column now this post is about showing saved file content on page using ADF Faces inline frame component

In this post I am extending same previous application, Now see how we can implement this
There are few more steps to go , See the additional steps to show file content on page-

Uploading and downloading files from database (BLOB) in Oracle ADF (12.1.3)

Hello all

This post is about a very simple requirement -file handling (uploading and downloading various types of file) in ADF and it is needed very often to store file in absolute server path (actual path) and download from there and I have posted about that previously

Uploading and downloading files from absolute server path

Now this post is about uploading and saving file in database BLOB column and downloading from there
See step by step implementation -

Apply sorting to POJO based af:table programmatically , Using custom sort listener in ADF

Again a post about POJO based table , previously i have posted about-

1.Populating and adding records in POJO based table
Populate af:table programmatically from managead bean using POJO
2. Gettting selected rows from POJO based table
Get selected row (single/multiple) from POJO based table in ADF

This post is about applying sorting to POJO based table , when we drop a viewObject as af:table on page then framework provides sorting and filtering features declaratively, but when populating table from managed bean using List(POJO) then it is not there so we have to do it manually

To understand this post completely , go through previous posts and check attached application there
I have used a PersonBean java bean class to contain columns of table or you can say there is a List of PersonBean type that populates data in af:table. (This is the basic information about application)

Now what to do , see step by step implementation-

• Select table on page editor and create a sortListener in managed bean to handle sortEvent





• Now what we have do in sort listener ?
  1.Get active sort criteria using sortEvent
  2.Remove that sort criteria
  3.Sort List Data Structure that is used to populate af:table
  4.Apply sort criteria again on af:table
  See code written in managed bean-



    //List to store sort criteria
    private List<SortCriterion> sortedTableList = new ArrayList<SortCriterion>();

    public void setSortedTableList(List<SortCriterion> sortedTableList) {
        this.sortedTableList = sortedTableList;
    }

    public List<SortCriterion> getSortedTableList() {
        return sortedTableList;
    }

    /**Custom Sort Listener for POJO based af:table
     * @param sortEvent
     */
    public void tableSortListener(SortEvent sortEvent) {
        //Get active sortCriteria on table
        List<SortCriterion> activeSortCriteria = sortEvent.getSortCriteria();
        SortCriterion sc = activeSortCriteria.get(0);
        // Remove active criteria from table
        this.removeSortCriteria(sc);
        //Sort List that populates table using Comparator interface
        applySortAsPerColumn(sc.getProperty());

        // Add the current criteria to the list
        this.sortedTableList.add(0, sc);
        // Apply sort criteria to table
        RichTable richTable = (RichTable) sortEvent.getComponent();
        richTable.setSortCriteria(sortedTableList);

    }

    /**Removes sort criteria*/
    private boolean removeSortCriteria(SortCriterion sortCriterion) {
        //Checks that if any sortCirteria is present in list , if yes then remove it
        if (sortedTableList != null && sortedTableList.size() > 0) {
            for (SortCriterion sc : sortedTableList) {
                if (sc.getProperty().equals(sc.getProperty())) {
                    sortedTableList.remove(sc);
                    return true;
                }
            }
        }
        return false;
    }


Now logic to apply programmatic sort starts from here , we have to sort List using Java Comparator interface
To Read more - How to sort ArrayList using Comparator?     Comparator interface



    private void applySortAsPerColumn(String criteria) {
        //Get List that populates table
        List<PersonBean> list = getPersonList();
        //Check which column's sorting is triggered from UI
        //and then sort list on basis of that attribute
        //Sorting of collection makes use of Comparator interface, Read about it
        if ("name".equalsIgnoreCase(criteria)) {
            Collections.sort(list, new ProgTableBean.PersName());
        } else if ("mobNo".equalsIgnoreCase(criteria)) {
            Collections.sort(list, new ProgTableBean.MobNo());
        } else if ("salary".equalsIgnoreCase(criteria)) {
            Collections.sort(list, new ProgTableBean.Salary());
        }
    }
    // Comparator for all attributes to sort List according to different attributes

    public static class PersName implements Comparator<PersonBean> {
        private int flag = 1;

        @Override
        public int compare(PersonBean o1, PersonBean o2) {
            return flag * o1.getName().compareTo(o2.getName());
        }
    }


    public static class MobNo implements Comparator<PersonBean> {
        private int flag = 1;

        @Override
        public int compare(PersonBean o1, PersonBean o2) {
            System.out.println("In 2**");
            return flag * o1.getMobNo().compareTo(o2.getMobNo());

        }
    }


    public static class Salary implements Comparator<PersonBean> {
        private int flag = 1;

        @Override
        public int compare(PersonBean o1, PersonBean o2) {
            return flag * o1.getSalary().compareTo(o2.getSalary());
        }
    }




• Now on page ,select table and set sortable true for each column and set sortProperty same as column name
  Check af:table source after setting all properties



<af:table var="row" rowBandingInterval="1" id="t1" value="#{viewScope.ProgTableBean.personList}"
                          partialTriggers="::b1" rowSelection="multiple" binding="#{viewScope.ProgTableBean.tableBind}"
                          selectionListener="#{viewScope.ProgTableBean.tableSelection}"
                          sortListener="#{viewScope.ProgTableBean.tableSortListener}">
                    <af:column sortable="true" headerText="Name" id="c1" width="150" sortProperty="name">
                        <af:outputText value="#{row.name}" id="ot1"/>
                    </af:column>
                    <af:column sortable="true" headerText="Mobile Number" id="c2" sortProperty="mobNo">
                        <af:outputText value="#{row.mobNo}" id="ot2"/>
                    </af:column>
                    <af:column sortable="true" headerText="Salary" id="c3" align="right" sortProperty="salary">
                        <af:outputText value="#{row.salary}" id="ot3"/>
                    </af:column>
                </af:table>



• All done :) , Run and check application

Sample ADF Application -Download
Cheers :) Happy Learning

Build selectOneChoice to show hierarchical (tree style) data programmatically in ADF

This post is based on an old article from Frank Nimphius How - to build a select one choice displaying hierarchical selection data

This article is about showing tree structure data in af:selectOneChoice component using ADF BC , it makes use of tree binding and af:forEach
Same concept i have used to populate data from managed bean using List data structure

Let's see the implementation part - how to populate tree style selectOneChoice programatically ?

First we have to design a Java Bean class in such a way that it can hold  master -detail type of data

A class that represents a List for Parent Values
                          ======> A list of same type to hold Child Values

See bean class code-

import java.util.ArrayList;
import java.util.List;

public class Seasons {
    public Seasons(String name) {
        this.name = name; // To Store Header Values (Storing Seasons Name :))
    }
    // Season and Charater Name
    private String name;
    // To Store Detail Values (Storing Season's Charatcers)
    private List<Seasons> characters = new <Seasons>ArrayList();

    public void setCharacters(List<Seasons> empDet) {
        this.characters = empDet;
    }

    public List<Seasons> getCharacters() {
        return characters;
    }


    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
    // This methods directly add characters value in list
    public void addCharaters(Seasons employee) {
        characters.add(employee);
    }
}

Now how to use this bean in managed bean to add records, i have written code in constructor to populate values on class load

    // Master List to populate data in selectOnce choice
    List<Seasons> seasonList = new ArrayList<Seasons>();

    public void setSeasonList(List<Seasons> seasonList) {
        this.seasonList = seasonList;
    }

    public List<Seasons> getSeasonList() {
        return seasonList;
    }
    //Constructor of Managed Bean to populate data on page load (you can move this code )
    public TreeStyleLovBean() {
        super();
        // Creating tree for Seasons and Characters details
        // Adding Master Values (seasons)
        Seasons season1 = new Seasons("Game of Thrones");

        // Adding Detail Values (Child Node-Characters)
        Seasons character = new Seasons("Tywin Lannister");
        season1.addCharaters(character);
        character = new Seasons("Tyrion Lannister");
        season1.addCharaters(character);
        character = new Seasons("Jaime Lannister");
        season1.addCharaters(character);
        character = new Seasons("Cersie Lannister");
        season1.addCharaters(character);
        character = new Seasons("Ned Stark");
        season1.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season2 = new Seasons("Arrow");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Oliver Queen");
        season2.addCharaters(character);
        character = new Seasons("Moira Queen");
        season2.addCharaters(character);
        character = new Seasons("Laurel Lance");
        season2.addCharaters(character);
        character = new Seasons("Sara Lance");
        season2.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season3 = new Seasons("Vikings");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Ragnar Lothrak");
        season3.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season4 = new Seasons("The Flash");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Barry Allen");
        season4.addCharaters(character);
        character = new Seasons("Harisson Wells");
        season4.addCharaters(character);
        character = new Seasons("Iris West");
        season4.addCharaters(character);
        character = new Seasons("Joe");
        season4.addCharaters(character);

        // Adding all list to topList
        seasonList.add(season1);
        seasonList.add(season2);
        seasonList.add(season3);
        seasonList.add(season4);

    }

how to bind this managed bean to selectOneChoice ? i have used same concept as described in Frank's article using af:forEach

<af:selectOneChoice id="selectBox" label="Choose Character" valuePassThru="true"
                                        styleClass="employeeSelectBox" contentStyle="width:150px;"
                                        binding="#{viewScope.TreeStyleLovBean.selectOneValueBind}">
                        <af:forEach items="#{viewScope.TreeStyleLovBean.seasonList}" var="seasonNm">
                            <af:selectItem label="#{seasonNm.name}" disabled="true" id="si1"/>
                            <af:forEach items="#{seasonNm.characters}" var="characterNm">
                                <af:selectItem label="#{characterNm.name}" value="#{characterNm.name}" id="si2"/>
                            </af:forEach>
                        </af:forEach>
                    </af:selectOneChoice>

you can see here that first forEach is populated from master list and iterates over list of seasons and first selectItem show season's name
the inner forEach makes used of character list that is defined in Java Bean class and stores season wise character's name
Rest is same - a CSS is used to differentiate color and alignment of parent and child records (same as Frank's article)

<f:facet name="metaContainer">
                <af:group>
                    <![CDATA[
<style>
.employeeSelectBox option{text-indent:15px;color:darkgreen;}
.employeeSelectBox option[disabled]{color:red; background-color:#dddddd; 
font-weight: bold; text-indent:0px}
</style>
]]>
                </af:group>
            </f:facet>

Now run this application - see how it appears on page

It looks quite good :) to get selected value in bean just use componentBinding.getValue();

Sample ADF Application-Download (Jdev 12.1.3)
Cheers , Happy Learning 

Searching pivotTable using dvt:pivotFilterBar in Oracle ADF

dvt:pivotTable-

From Oracle docs- The Pivot Table supports the display of multiple nested attributes on a row and column header. In addition, the Pivot Table supports the ability to dynamically change the layout of the attributes displayed in the row or column headers via drag and drop pivoting.

Framework provides  <dvt:pivotFilterBar>component to perform search operation on pivotTable
The PivotFilterBar component is used to filter data based on the selected criterion belonging to the PivotableQueryDescriptor as specified by the value property



In this example i am using Departments and Employees table of HR Schema, Created a query based viewObject using this query (to show Departments and it's Employees)

SELECT A.DEPARTMENT_ID,  
B.EMPLOYEE_ID, 
A.DEPARTMENT_NAME , 
B.FIRST_NAME||' '||B.LAST_NAME AS NAME,  
B.EMAIL,  
B.PHONE_NUMBER, 
B.HIRE_DATE, 
B.JOB_ID, 
B.SALARY, 
B.COMMISSION_PCT 
FROM DEPARTMENTS A, EMPLOYEES B 
WHERE A.DEPARTMENT_ID=B.DEPARTMENT_ID

Add this viewObject to Application Module and drop on page as pivot table from Data Control

Configuration for pivotTable-

Finally it looks like this-

Now i have dropped <dvt:pivotTable> on page and it automatically sets it's properties that are required for filtering pivotTable

<dvt:pivotFilterBar id="pt1pivotFilterBar" value="#{bindings.DeptEmp1.pivotFilterBarModel}"
                                    modelName="pt1Model"/>

Once check that modelName property should be same for both pivotTable and filterbar
Now run this application and drop any column on filterbar that you want to search

Sample ADF Application-Download
Cheers :) Happy Learning

Disable(Override) browser back button functionality in ADF Application using JavaScript

This is another JavaScript trick to disable browser back button functionality
In this example i am using two jspx pages - Page1 and Page2

Added two buttons in both pages to navigate between pages



Source of Page1-

<af:outputText value="Page 1" id="ot1" inlineStyle="font-size:medium;font-weight:bold;"/>
                <af:commandButton text="Go To Second Page" id="cb1" action="forward"/>

Source of Page2-

 <af:outputText value="Page 2" id="ot1" inlineStyle="font-size:medium;font-weight:bold;"/>
                <af:commandButton text="Go To First Page" id="cb1" action="backward"/>

Now see JavaScript function to disable back button functionality, In actual JavaScript doesn't disable back button but override it's default functionality
This function forces browser to navigate forward instead of going back so on click of back button first browser executes it's default back operation but due to this function again navigates to forward and show same page

function preventBackButton() {
                  window.history.forward();
              }

Add this javascript to Page 1 and invoke using af:clientListener tag on pageLoad

<af:clientListener method="preventBackButton" type="load"/>

Now run application and check
Go to second page and the press back button - it returns to page one for a fraction of second but again navigates to Page 2
It means it is working , Cheers :) Happy Learning

Working with af:iterator and af:forEach programmatically (Add and delete records using List)

In previous post Working with af:iterator and af:forEach programmatically (Populate values using POJO from Managed Bean) we saw that how can we populate record from a List to af:iterator and af:forEach (ADF Faces Component)

So this post is about adding and deleting of records from List while List is presented using af:iterator.
here i am extending previous post and using same sample application



Added two fields and button on page to add records 

<af:panelFormLayout id="pfl1" rows="1">
                    <af:inputText label="Name" id="it1" binding="#{viewScope.PopulateIteratorBean.nameBind}"/>
                    <af:inputText label="Department" id="it2" binding="#{viewScope.PopulateIteratorBean.deptNameBind}"/>
                    <af:button text="Add" id="b1"
                               actionListener="#{viewScope.PopulateIteratorBean.addNewRecordAction}"/>
                </af:panelFormLayout>

and on this button action simply added both attributes to List and added partial trigger of button to af:iterator to refresh it

    // Component binding to access inputValue from page
    
    private RichInputText nameBind;
    private RichInputText deptNameBind;
    
    public void setNameBind(RichInputText nameBind) {
        this.nameBind = nameBind;
    }

    public RichInputText getNameBind() {
        return nameBind;
    }

    public void setDeptNameBind(RichInputText deptNameBind) {
        this.deptNameBind = deptNameBind;
    }

    public RichInputText getDeptNameBind() {
        return deptNameBind;
    }

    /**Method to add record in List and show on page using af:iterator and af:forEach
     * @param actionEvent
     */
    public void addNewRecordAction(ActionEvent actionEvent) {
        if (nameBind.getValue() != null && deptNameBind.getValue() != null) {
            EmployeeDet obj = new EmployeeDet(nameBind.getValue().toString(), deptNameBind.getValue().toString());
            employeeDetail.add(obj);
            
        }
    }

On page - add a new record (record added in List and appeared in iterator as well)

So it is quite simple to add records but deletion of record is a bit tricky but not difficult at all :)
Let's see this-
For deleting record i have added a delete link inside iterator so that it should appear for each record as you can see in snap (above)
Here question is that how to know that which record should be deleted  ?

So for this i have added a f:attribute tag to link , this attribute contains the value of current item of iterator

f:attribute derives it's value from var of af:iterator/af:forEach, this var represents each item of List
Now on delete button's action - get the current item and remove it from List

    /**Method to delete selected record
     * @param actionEvent
     */
    public void deleteRecordAction(ActionEvent actionEvent) {
        //Get value from f:attribute (current item)
       Object itemVal= actionEvent.getComponent().getAttributes().get("itemVal");
       //Remove selected item from List
       employeeDetail.remove(itemVal);
    }

After deleting records

Sample ADF Application- Download

Working with af:iterator and af:forEach programmatically (Populate values using POJO from Managed Bean)

This is another post about Working programmatically with ADF (populating af:iterator and af:forEach programmatically )

Previously i have posted about populating af:iterator and af:forEach using ADF BC and binding layer to show master-detail relation
Implementing master/detail tree relation using af:Iterator and af:forEach for better UI designs - Oracle ADF

For this post i am populating employee name and it's department name using List datastructure ,to get and set value of attributes

Created a java bean class , it has 2 variable for both attributes

public class EmployeeDet {
    public EmployeeDet(String name, String deptName) {
        this.name = name;
        this.deptName = deptName;
    }
    //Attribute to display EmployeeName and Department Name
    private String name;
    private String deptName;

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setDeptName(String deptName) {
        this.deptName = deptName;
    }

    public String getDeptName() {
        return deptName;
    }
}

Next step is to create a managed bean to populate data in af:iterator and af:forEach , this managed bean makes use of

EmployeeDet 

java bean class to add data in same format for all items of iterator and forEach. A List data structure is used to pass all values to iterator. See code of managed bean 

    //Constructor-populate default records
    public PopulateIteratorBean() {

        EmployeeDet obj = new EmployeeDet("Ashish Awasthi", "Oracle ADF");
        employeeDetail.add(obj);
        obj = new EmployeeDet("Alex Smith", "Java");
        employeeDetail.add(obj);
        obj = new EmployeeDet("James S", "PHP");
        employeeDetail.add(obj);
    }
    //ArrayList to poplate data in af:iterator and af:forEach
    private List<EmployeeDet> employeeDetail = new ArrayList();

    public void setEmployeeDetail(List<EmployeeDet> employeeDetail) {
        this.employeeDetail = employeeDetail;
    }

    public List<EmployeeDet> getEmployeeDetail() {

        return employeeDetail;
    }

Now drop af:iterator on page and set it's properties like value, var etc

using var reference of iterator , set value in output text to show Employee Name and DepartmentName , see XML source of af:iterator

<af:panelGroupLayout id="pgl1" layout="horizontal">
                        <af:iterator id="i1" value="#{viewScope.PopulateIteratorBean.employeeDetail}" var="item">
                            <af:panelBox id="pb2" showDisclosure="false">
                                <f:facet name="toolbar"/>
                                <af:panelGroupLayout id="pgl3" layout="horizontal">
                                    <af:outputText value="#{item.name}" id="ot1"
                                                   inlineStyle="font-weight:bold; font-size:medium; color:#0572ce;;"/>
                                    <af:spacer width="2" height="0" id="s1"/>
                                    <af:outputText value="(#{item.deptName})" id="ot2"
                                                   inlineStyle="font-weight:bold;font-size:small;color:red;"/>
                                </af:panelGroupLayout>
                            </af:panelBox>
                        </af:iterator>
                    </af:panelGroupLayout>  

on running it looks like this-

do same for af:forEach

<af:panelGroupLayout id="pgl2" layout="horizontal">
                        <af:forEach items="#{viewScope.PopulateIteratorBean.employeeDetail}" var="feach">
                            <af:showDetailHeader text="#{feach.deptName}" disclosed="true" id="sdh1">
                                <af:outputText value="#{feach.name}" id="ot3"
                                               inlineStyle="font-weight:bold; font-size:medium; color:#0572ce;;"/>
                            </af:showDetailHeader>
                        </af:forEach>
                    </af:panelGroupLayout>

on running it looks like this-

 Sample ADF Application-Download
Thanks, Happy Learning :)

ADF Basics: Set multiple LOV's on attribute and conditionally switch using LOV Switcher

This post is about a very basic and common use case
Suppose we have to show different values in our List depending on some condition but all values must be stored in same attribute so for this type of requirement ADF BC framework provides concept of LOV Switcher
Framework allows us to define multiple LOV on same attribute, I hope you all know about defining LOV(List of Values) so move ahead and see how to use lov switcher

 See the implementation part-

• Created a Fusion Web Application and a viewObject to show LOV on viewport (Used dual to create view object for this example , you can use use your own)








• Created 2 more viewObject to apply LOV on first viewObject's attribute, One ViewObject is for Departments and other one is for Employees






• Open dual viewObject select LovAppl attribute and goto ListOfValues tab and add both LOV
  For Department - DepartmentId is List Attribute and DepartmentName will be shown on UI




For Employees- EmployeeId is List Attribute and FirstName,LastName will be shown on UI






• Now click on green plus icon of List Of Values Switcher and add a transient attribute , this will be further used to switch lov on base of some condition





• So created LovSwitcher attribute , and remember this switcher attribute value should be one of the LOV Name that are applied on attribute.
  Here i am using a condition - if LovType attribute of Dual viewObject is 'D' the LovAppl should show Departments Lov and if it is 'E' then LovAppl should show Employees Lov
  For this i have written expression for lov switcher attribute
  LovType=='D' ? 'LOV_LovAppl' : LovType=='E' ? 'LOV_LovAppl1' : null





• Now run Application Module and check it

Thanks , Happy Learning :)