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

Uploading and showing image file from absolute server path -Orace ADF

This is another post about file handling in ADF. Previous post was about uploading and downloading any type of file from absolute server path
See-
Uploading and downloading files from absolute server path in Oracle ADF (12.1.3)

This post is specifically about handling image files, uploading an image file to server path and immediately show it on page using af:image component
So here i am using Jdev 12C (12.1.3) , see step by step implementation

• Create a fusion web application and a page in viewController






• Now drop af:inputFile (to browse and select file), af:image (to show uploaded image) and a button to upload file





• Bind af:inputFile value to managed bean variable, this variable is further used to read or write or process  file





    //To Store Value of selected file
    private UploadedFile imageFile;

    public void setImageFile(UploadedFile imageFile) {
        this.imageFile = imageFile;
    }

    public UploadedFile getImageFile() {
        return imageFile;
    }





• Now see Managed Bean method to upload image file to absolute server path

Bean Method to Upload File-




    //To Store path of uploaded Image file
    String imagePath = null;

    public void setImagePath(String imagePath) {
        this.imagePath = imagePath;
    }

    public String getImagePath() {
        return imagePath;
    }

    /**Method to upload image file to absolute server path*/
    private String uploadImage(UploadedFile file) {

        UploadedFile myfile = file;

        if (myfile == null) {

        } else {
            if (myfile.getContentType().equalsIgnoreCase("image/jpeg") ||
                myfile.getContentType().equalsIgnoreCase("image/png") ||
                myfile.getContentType().equalsIgnoreCase("image/bmp") ||
                myfile.getContentType().equalsIgnoreCase("image/gif")) {

                //Path of folder on drive
                String path = "D://ADF//";
                String type = "PNG";
                String TypeVal = ".png";
                if (myfile.getContentType().equalsIgnoreCase("image/jpeg")) {
                    type = "JPEG";
                    TypeVal = ".jpeg";
                } else if (myfile.getContentType().equalsIgnoreCase("image/png")) {
                    type = "PNG";
                    TypeVal = ".png";
                } else if (myfile.getContentType().equalsIgnoreCase("image/bmp")) {
                    type = "PNG";
                    TypeVal = ".png";
                } else if (myfile.getContentType().equalsIgnoreCase("image/gif")) {
                    type = "GIF";
                    TypeVal = ".gif";
                }

                InputStream inputStream = null;
                try {
                    //Generate a unique name for uploaded image with date time
                    DateFormat dateFormat = new SimpleDateFormat("yyMMdd_HHmmss");
                    Date date = new Date();
                    String dtTime = dateFormat.format(date);
                    dtTime = dtTime.replace(" ", "_");

                    String name = "IMG" + "_" + dtTime;
                    System.out.println("File name is-" + name);
                    inputStream = myfile.getInputStream();
                    BufferedImage input = ImageIO.read(inputStream);

                    //Writing file to path
                    File outputFile = new File(path + name + TypeVal);
                    ImageIO.write(input, type, outputFile);
                    imagePath = outputFile.getAbsolutePath();


                } catch (Exception ex) {
                    // handle exception
                    ex.printStackTrace();
                } finally {
                    try {
                        inputStream.close();
                    } catch (IOException e) {
                    }
                }
            } else {
                imagePath = "NO";
            }
        }
        setImageFile(null);
        return imagePath;
    }





ActionListener of Upload Button-




    /**Action Listener to Upload image File
     * @param actionEvent
     */
    public void uploadImageFileAction(ActionEvent actionEvent) {
        File directory = new File("D://ADF//");
        //get all the files from a directory
        File[] fList = directory.listFiles();
        for (File file : fList) {
            //Delete all previously uploaded files
            if (!"NoImage.png".equalsIgnoreCase(file.getName())) {
                file.delete();
            }

        }
        //Upload Currently Selected File
        String flag = uploadImage(imageFile);

        if ("NO".equalsIgnoreCase(flag)) {
            FacesMessage msg =
                new FacesMessage("This is not an Image file, Please upload supported file type (.jpg,.png etc)");
            msg.setSeverity(FacesMessage.SEVERITY_ERROR);
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    }



• set usesUpload to true for af:form component on page to support file upload





• Now upload part is complete , next is to show uploaded image on page. So to do this create a servlet (this will process image file into bytes and then show using af:image component)








• See Servlet code and how it is mapped with af:image component



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 javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ViewImageServlet 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 or file is not an image
        if (path.equalsIgnoreCase("No")) {
            path = "D:\\ADF\\NoImage.png";
        }
        if (request.getParameter("path") == "") {
            path = "D:\\ADF\\NoImage.png";
        }
        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 run this application and check this (All uploaded files will be stored in D://ADF path)

Select an image and click upload (Image is immediately reflected on page)

Check in D://ADF folder, image file is uploaded there with a new name

Again upload another image-

Check that previous file is deleted from folder and current one is there-

Happy Learning :)

Download-Sample ADF Application

Image zoom (power zoomer) effect using Jquery in ADF Faces

Jquery is most popular javascript library ,it is used to provide better ui design, animations and client side events
This is another post about using jquery in ADF Faces, see previous post
Using JQuery in Oracle ADF

In this post i am using a jquery script to zoom (enlarge) image on hover , you have seen this in many e-commerce websites as they provide power zoom feature to enlarge product image for better customer experience



I have taken this jquery script from Dynamic Drive, see the documentation
To implement this in ADF Application follow these steps

• Create a Fusion Web Application and a page in viewController project (Jdev 12.1.3)





• Downloaded jquery script file from above link -ddpowerzoomer.js, add this jquery file to viewController project





• Now add jquery library reference in page in order to use jquery functions



<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
            <af:resource type="javascript" source="js/ddpowerzoomer.js"/>



• Next step is to add an image to page , so added an af:image to page and set path of image to display





• Now i have to execute jquery function that will add power zoom feature to this image (See jquery code that will be executed on pageload)



jQuery(document).ready(function($){
 $('#i1').addpowerzoom({
  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) 
})


here i1 is the id of image, default zoom power and magnifier size is configured here

• So to execute this jquery function on pageload , added a clientListenr to pagelike this



<af:clientListener type="load"
                               method="jQuery(document).ready(function($){   $('#i1').addpowerzoom({  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) })"/>



• Now run this application and check it, magnifier is on deer :)





• Now i am increasing size and power of magnifier - Power is 3 and size is 200x200

Thanks, Happy Learning :)
Download Sample ADF Application

Populate af:table programmatically from managead bean using POJO

This post is about a common question
How can we populate an af:table programmatically ?

It means that data in af:table is not populated through model layer (Using ViewObject) using binding layer. lets say I have some values in our managed bean and have to show records in tabular format on page

So what we have to do -

• First you should know the number and data type of columns in table, suppose i have to populate a table for person details (name, mobile number and salary). to get and set value of columns i have created a java bean class , it has 3 variable for 3 columns





// Java Class to set and get value for table column
public class PersonBean {

    public PersonBean(String name, String moNo, Integer salary) {
        this.Name = name;
        this.mobNo = moNo;
        this.salary = salary;
    }
    private String Name;
    private String mobNo;
    private Integer salary;

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

    public String getName() {
        return Name;
    }

    public void setMobNo(String mobNo) {
        this.mobNo = mobNo;
    }

    public String getMobNo() {
        return mobNo;
    }

    public void setSalary(Integer salary) {
        this.salary = salary;
    }

    public Integer getSalary() {
        return salary;
    }
}



• Next step is to create a managed bean for referencing af:table , this managed bean makes use of person java bean class to add data in same format for all table rows. A List data structure is used to pass all values in af:table. See code of managed bean 



//ArrayList to poplate data in af:table
    List<PersonBean> personList = new ArrayList();

    //To Populate default row in table (Code in Constructor)

    public ProgTableBean() {
        personList.add(new PersonBean("Ashish Awasthi", "xxxxxxxxxx", 50000));
    }

    public void setPersonList(List<PersonBean> personList) {
        this.personList = personList;
    }

    public List<PersonBean> getPersonList() {
        return personList;
    }



• Now just drop an af:table on page and set it's properties like value, column header and text values in columns



 As i have to show only 3 columns so deleted extra ones



 Set properties -
 value- from where table collection is populated
 columns values- take the var reference of table and refer variable name in List (here 'row' is table var and second is variable name in person bean class)




 See the XML source of af:table-



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



• Now run this application and see there will be one row in table as code is added in constructor of managed to populate one row





• I have added a form and button in page to add new records in table , see the form source code



<af:panelFormLayout id="pfl1">
                    <f:facet name="footer"/>
                    <af:inputText label="Name :" id="it1" binding="#{viewScope.ProgTableBean.nameBind}"/>
                    <af:inputText label="Mobile Number :" id="it2" binding="#{viewScope.ProgTableBean.mobNumBind}"/>
                    <af:inputText label="Salary :" id="it3" binding="#{viewScope.ProgTableBean.salaryBind}">
                        <af:convertNumber/>
                    </af:inputText>
                    <af:button text="Add Record" id="b1" actionListener="#{viewScope.ProgTableBean.addNewRcord}"/>
                </af:panelFormLayout> 


Code in managed bean for button action-

    /**Method to add new record in table
     * @param actionEvent
     */
    public void addNewRcord(ActionEvent actionEvent) {
        //Get all values using compoenet binding as mobNumBind
        if (mobNumBind.getValue() != null && nameBind.getValue() != null &&
            salaryBind.getValue() !=
            null) {
            // Add new Record in List
            personList.add(new PersonBean(nameBind.getValue().toString(), mobNumBind.getValue().toString(),
                                          Integer.parseInt(salaryBind.getValue().toString())));
        }
    }



• now run and check application- 

 More posts on POJO Based table -

Get selected row (single/multiple) from POJO based table in ADF
Apply sorting to POJO based af:table programmatically , Using custom sort listener in ADF

Thanks , Happy Learning :)
Download-Sample ADF Application