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 -

Using external XML file as list resource bundle in ADF Application

Hello All

In this post I am talking about using external XML file as list resource bundle in ADF Application

Using this approach we need not to hard code component's label and messages , all labels and messages will be read from XML file and no need to open application to change any resource , In short we can update resources without compiling and redeploying application

ADF Basics: Duplicate Record Validation Using Model Level Business Rules

Hello All

Hope you all are doing well :)

When we are creating any data entry form , at that time preventing duplicate entries for some of attributes is very basic validation requirement .

Suppose We are creating a form to make new Departments entry and  there should not be two departments with same name so for this type of validation we need not to write single line of code in Oracle ADF as there are predefined business rules for basic validation

ADF UI- Using New DVT Component Picto Chart in ADF 12.2.1.1

Hello All

Couple of weeks ago Oracle released new version of ADF & Jdeveloper i.e. 12.2.1.1
This release comes with many new features and data visualization components, one of them is Picto Chart

DVT Component Picto Chart is used to visualize pictorial presentation of Numbers and it uses a count attribute to present chart portion, If you need to show different types of information in picto chart then more than one count attribute can be used

Drag Drop in same table to reorder rows, Update Attribute value to make it persistent

This post is based on Frank's article on reordering table rows using drag drop functionality of ADF Faces, post uses iterator indexing to change order of rows and it works pretty good

Recently i came across a question on OTN forum asking about making this ordering persistent on base of some attribute value so for that we have to maintain a serial no attribute for each row and when user performs Drag n Drop , serial no. will be swapped and updated ordering of rows will be shown to user and it is persistent as updated attribute's value is saved in database

ADF UI: Using dvt:sunburst to show hierarchical data in ADF

<dvt:sunburst> is one of fancy components to show multi level hierarchical data in form of circular rings in ADF application

It supports drilling up to n-level , consist of dvt:sunburstNode as it's child tag to show level wise detail . Sunburst supports multiple type of animations that makes a better UI
See What docs says -

Sunbursts are used to display hierarchical data across two dimensions, represented by the size and color of the sunburst nodes. The sunburst displays multiple levels of its hierarchy at once, with each ring corresponding to a level of the hierarchy

Consuming a SOAP Web Service quickly using Web Service Data Control (WSDL) in ADF

Creating and Consuming Web Servie is an important part development cycle . In earlier posts i have described about creating SOAP/REST Web Service
Create REST Web Service with Application Module declaratively in ADF 12.2.1
Create SOAP Web Service with Application Module quickly in ADF 12.2.1

Now this post is about consuming a SOAP Web Service. A very simple way to consume Web Service is to create Web Service Data Control (WSDL) for external Web Service URL
Here i am using a Country-Currency Web Service (http://www.webservicex.net/country.asmx) to create WSDL

Get domain information (WHOIS) using Apache Commons Net API- ADF & Java

We can get any domain information using Apache commons net library. It supports various protocols and WHOIS information is one of them

WhoisClient class provides access of domain information
See what docs says -

The WhoisClient class implements the client side of the Internet Whois Protocol defined in RFC 954. To query a host you create a WhoisClient instance, connect to the host, query the host, and finally disconnect from the host. If the whois service you want to query is on a non-standard port, connect to the host at that port.

Download required library or if this link doesn't work then goto API page and download from there

This simple java method will fetch information of domain using Apache library

Stretch ADF Faces Components to fit browser width (Show as row-column layout- inline block )

Recently i have seen a thread in OTN about layout of components (How to use components to show a particular layout)
ADF layout for showing email recipients

Requirement was simple, user want to show components up to maximum available width (browser window width) first and then move to next line and show other components
So i thought to document it here :)

Suppose i have to show 6 images on page (horizontally) , so for that i have used 6 group layout
one for each image and button



See xml source-

<af:panelGroupLayout id="pgl1" layout="horizontal">
                    <af:panelGroupLayout id="pgl2" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:a_hobbit_house-wallpaper-1280x800.jpg']}"
                                  shortDesc="Hobbit House" id="i1" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b1"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl3" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:beach_at_sunset_3-wallpaper-1440x900.jpg']}"
                                  shortDesc="Sunset at Beach" id="i2" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b2"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl4" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:icelands_ring_road-wide.jpg']}" shortDesc="Ring Road"
                                  id="i3" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b3"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl5" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:road_to_mount_cook-wallpaper-1280x800.jpg']}"
                                  shortDesc="Road To Mount Cook" id="i4" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b4"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl6" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:skyscrapers_reflections-wallpaper-1280x800.jpg']}"
                                  shortDesc="Skycrappers " id="i5" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b5"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl7" layout="vertical" halign="center" inlineStyle="padding:2px;">
                        <af:image source="#{resource['images:tufandisli_1387241118_57.jpg']}" shortDesc="Tufan"
                                  id="i6" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b6"/>
                    </af:panelGroupLayout>
                </af:panelGroupLayout>

 and how it looks on page-

You can see here last image is not appearing properly because total width of all images has crossed maximum available width of browser window
Now i want to show last image on next line
So to do this set parent panel group layout to default layout and set display:inline-block for all child panel group layout

<af:panelGroupLayout id="pgl1">
                    <af:panelGroupLayout id="pgl2" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:a_hobbit_house-wallpaper-1280x800.jpg']}"
                                  shortDesc="Hobbit House" id="i1" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b1"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl3" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:beach_at_sunset_3-wallpaper-1440x900.jpg']}"
                                  shortDesc="Sunset at Beach" id="i2" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b2"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl4" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:icelands_ring_road-wide.jpg']}" shortDesc="Ring Road"
                                  id="i3" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b3"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl5" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:road_to_mount_cook-wallpaper-1280x800.jpg']}"
                                  shortDesc="Road To Mount Cook" id="i4" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b4"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl6" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:skyscrapers_reflections-wallpaper-1280x800.jpg']}"
                                  shortDesc="Skycrappers " id="i5" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b5"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout id="pgl7" layout="vertical" halign="center"
                                         inlineStyle="padding:2px;display:inline-block;">
                        <af:image source="#{resource['images:tufandisli_1387241118_57.jpg']}" shortDesc="Tufan"
                                  id="i6" inlineStyle="width:250px;height:200px; "/>
                        <af:button text="View" id="b6"/>
                    </af:panelGroupLayout>
                </af:panelGroupLayout>

Now it appears like this -

now again test it by increasing and decreasing browser window width , images and group layout are adjusted as per screen size automatically like a grid view (row and columns)

Thanks , Happy Learning :)
Sample ADF Application- Download

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

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 :)

Custom selection listener for af:listView, Invoke selectionListener programmatically

In the last post (Better UI for data collection using af:listView, Enable selection in ADF Faces List component ) about af:listView, we saw that how can we present data collection in a better way using af:listView and enable selection using EL (same as used for af:table)

Now in this post i will describe about defining custom selection listener for af:listView
Suppose you have to do some task on selection of an item in list other than making it current row, for this you have to override default selection listener and define own custom selection listener in managed bean
So next step is to define a method in managed bean for handling selection event of af:list view

• Select af:listView, goto properties and click on edit menu of selectionListener property and create a method in managed bean








• now see what we have to do in custom selection listener, first invoke default selection listener EL (#{bindings.Departments1.collectionModel.makeCurrent}) to make selected row as current and then get current row from iterator as selected row is now current row
  See the managed bean code -



//Import these packages

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.el.ValueExpression;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import oracle.jbo.Row;

import org.apache.myfaces.trinidad.event.SelectionEvent;   


 /**
     * Programmatic invocation of a method that an EL evaluates to.
     *
     * @param el EL of the method to invoke
     * @param paramTypes Array of Class defining the types of the parameters
     * @param params Array of Object defining the values of the parametrs
     * @return Object that the method returns
     */
    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);
    }

    /**
     * Programmatic evaluation of EL.
     *
     * @param el EL to evaluate
     * @return Result of the evaluation
     */
    public static Object evaluateEL(String el) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory = facesContext.getApplication().getExpressionFactory();
        ValueExpression exp = expressionFactory.createValueExpression(elContext, el, Object.class);

        return exp.getValue(elContext);
    }

    /**Custome Selection Listener for af:listView
     * @param selectionEvent
     */
    public void listSelectionListener(SelectionEvent selectionEvent) {
        //invoke this EL to set selected row as current row, if it is not invoked then first row will be current row
        invokeEL("#{bindings.Departments1.collectionModel.makeCurrent}", new Class[] { SelectionEvent.class }, new Object[] {
                 selectionEvent });
        // get the selected row , by this you can get any attribute of that row
        Row selectedRow = (Row) evaluateEL("#{bindings.Departments1Iterator.currentRow}");
        FacesMessage msg = new FacesMessage(selectedRow.getAttribute("DepartmentName").toString());
        msg.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }



• Now run application and check

Download Sample ADF Application here
Thanks , Happy Learning :)

Show uploaded file (pdf/text/html/xml/image) content on page -Oracle ADF

Hello all
In previous post
Uploading and downloading files from absolute server path in Oracle ADF (12.1.3)
we saw that how can we upload any file to absolute server path and download same from there.
Uploading part is done using simple java code to write file to specified folder and downloading part is done using <af:fileDownloadActionListener>

Now in this post i am going to show that how can we display a file on page directly without downloading it.
So for this i am using same sample application that i have used in previous post , you can download it from here



See the additional steps to show file content on page-

• Create a servlet to parse file into output stream , this output stream will be used to show file content further.
  To create servlet right click on viewController project select New--->From Gallery-->Web Tier-->Servlet











• See servlet source code to parse file into outputStream



import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.*;
import javax.servlet.http.*;

public class PreviewFileServlet extends HttpServlet {
    private static final String CONTENT_TYPE = "text/html; charset=UTF-8";

    public void init(ServletConfig config) throws ServletException {
        super.init(config);
    }

    /**
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path = (request.getParameter("path"));

        OutputStream os = response.getOutputStream();
        //If path is null
        if (path.equalsIgnoreCase("No")) {
            path = "D:\\Document\\ItemImage\\Item.jpg";
        }
        if (request.getParameter("path") == "") {
            path = "D:\\Document\\ItemImage\\Item.jpg";
        }
        InputStream inputStream = null;

        try {
            File outputFile = new File(path);
            inputStream = new FileInputStream(outputFile);
            BufferedInputStream in = new BufferedInputStream(inputStream);
            int b;
            byte[] buffer = new byte[10240];
            while ((b = in.read(buffer, 0, 10240)) != -1) {
                os.write(buffer, 0, b);
            }

        } catch (Exception e) {

            System.out.println(e);
        } finally {
            if (os != null) {
                os.close();
            }
            if (inputStream != null) {
                inputStream.close();
            }

        }
    }
}



• Now open page in editor and drop an af:inlineFrame from component palette . inlineFrame is used to create a frame to show any external page or document just like as HTML iframe , it is loaded from source attribute
  So here i am using servlet as source attribute for this inlineFrame



<af:inlineFrame id="if2"
                                                    source="/previewfileservlet?path=#{bindings.Path.inputValue == null ? 'No' : bindings.Path.inputValue}"
                                                    inlineStyle="height:350px;width:800px;" sizing="preferred"/>


here path of document is added to pageDef bindings that is passed to servelt as parameter


• Now run this application and check it
  
  View Text File-

          View PDF File-

Thanks, Happy Learning :)

Post Related to file handling in Oracle ADF- 

Show saved file (pdf/text/html/xml/image) content on page from database (BLOB) in ADF Application
Uploading and showing image file from absolute server path -Orace ADF
Exporting viewObject data in text file using af:fileDownloadActionListener in Oracle ADF (12.1.3)
Creating pdf file using Apache PDFBox API in ADF Faces and opening it in new window -Oracle ADF
Download file from url using Oracle ADF & Java- Download Manager
Reading html source of a webpage (url) using Oracle ADF (af:richTextEditor) & Java