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-

ADF Basics: Use transient attribute to show description of selected value in case of input and combo Lov

In ADF often We apply LOV on a ID attribute to show it's Description to user, This works good in case of choice list (selectOneChoice) but if we use Input Text with List of Values (<af:inputListOfValues>) or Combo Box with List of Values (<af:inputComboboxListOfValues>) then after selection ID appears on page instead of  Description like this

So to avoid this we apply LOV on a transient attribute that shows Description and sets ID value DB attribute, See how to implement this

Insert and show whitespace in ADF Faces Components (panelBox, showDetailItem etc)

This post is about a small trick
How to show whitespace in ADF Faces component properly ?
Recently i found a question on OTN about this
 How can I and spaces in the text property of a showDetailItem?
so thought to document it here for future reference

There is one more post about showing whitespace , check it
Showing white-spaces properly in ADF table column- 11g & 12c

Sometimes we need to insert some whitespace in between of some text as panelBox name, tab name in showDetailItem etc
In this case space appears in page editor but it doesn't appear on page and you can not put spacer at these points because there is only one component



Suppose you have a panelBox and requirement is to show Oracle    ADF as it's header text . In this case providing space in propertyInspector doesn't work , HTML entity for space &nbsp; also doesn't work because of no DOCTYPE declaration

See here i added normal spaces in property of panelBox

 But is doesn't work :(

Now what to do ?
After lots of hit and tries finally i found that it work with equivalent entity number for &nbsp;
and this magic number is  - &#160;
So tried this -

 <af:panelBox text="Oracle&#160;&#160;&#160;&#160;&#160;&#160;&#160;ADF" id="pb1">
                    <f:facet name="toolbar"/>
                </af:panelBox>

and output is

This is the small trick , sometimes you may need this :)
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 

Better UI -Show jQuery notification message (for error, warning, info) in Oracle ADF

Hello all,
Another post about using jQuery with ADF Faces , this post is about showing a notification message using jQuery in your ADF Application
Normally we use default FacesMesage to show error, warning and info messages in ADF

here i am using jQuery growl library , you can download files from Growl : jQuery Informative Messages Plugin

Let's see how to integrate this library with ADF Faces, you will get two files from above link
one is JavaScript file (jQuery script) and other one is CSS file (style-sheet for notification UI)



Add both files to viewController project under Web Content

now add reference of both files (JS and CSS) in page and also jQuery library to execute growl script

 <af:resource source="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="javascript"/>
            <af:resource source="js/jquery.growl.js" type="javascript"/>
            <af:resource source="style/jquery.growl.css" type="css"/>

Now i have added 3 buttons on page to show different messages on button click and created a managed bean to define action for each button
On button click i have called jQuery script to invoke notification message
see managed bean code-

import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;

public class ShowJqNotification {
    public ShowJqNotification() {
    }

    /**Helper method to execute javascript
     * @param script
     */
    public void calljqHelper(String script) {
        FacesContext context = FacesContext.getCurrentInstance();
        ExtendedRenderKitService erks = Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
        erks.addScript(context, script);
    }
    //Change your message as per requirement 
    /**Method to invoke Error Message
     * @param actionEvent
     */
    public void showErrMessageAction(ActionEvent actionEvent) {
        calljqHelper("$.growl.error({ message: \"Hi this is error message!\" });");

    }

    /**Method to invoke Warnign Message
     * @param actionEvent
     */
    public void showWarningMessageAction(ActionEvent actionEvent) {
        calljqHelper("$.growl.warning({ message: \"Hi this is Warning!\" });");
    }

    /**Method to invoke Info Message
     * @param actionEvent
     */
    public void showNoticeMessageAction(ActionEvent actionEvent) {
        calljqHelper("$.growl.notice({ message: \"Hi this is Notice!\" });");
    }

}

All done, now run application and check - how it looks :)

this is default look of script , you can customize it , just change some parameters in both JS and CSS files
I have changed some parameters in both files and see how it looks now

Cheers, Happy Learning :)
Sample ADF Application- Download

Read more about - Jquery and ADF Working together

Image zoom (power zoomer) effect using Jquery in ADF Faces
Show animated Image Caption using jQuery in ADF Faces
Using JQuery in Oracle ADF

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

Show animated Image Caption using jQuery in ADF Faces

This is another post about using jQuery in ADF Faces, see previous posts on jQuery

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

This post talks about - how to add mouse hover caption to images? Caption means a brief explanation of picture/image. Normally 'alt' attribute of HTML page is used as Image Caption
But in ADF Faces af:image doesn't has 'alt' property , there is a property called 'shortdesc' and this property is used as 'alt' attribute for image when jsf page is loaded at client browser
you can check this in html source of your page in browser (inspect element)

<af:image shortDesc="Black Horse running or flying" id="FirstImage"
                                  inlineStyle="height:300px;width:500px;"
                                  source="#{resource['images:Best-Wild-Animal-Photos-of-2012-307-black-horse-running.jpg']}"/>

JSF page is converted to html for client side presentation, see in HTML source 'shortdesc' is used as 'alt' property

jQuery is used for client side scripting of HTML so jQuery script makes use of this 'alt' attribute to show animated caption for image
There are lots of jQuery and JavaScript available for showing different types of captions , here i am using jQuery Capty - A Caption Plugin (Download jQuery script and respective css file from link)

Now follow steps to use this jQuery plugin with ADF Faces

• Create Fusion Web Application and a page in viewController, added jQuery script and css in viewController project (Jdev 12.1.3)





• Add jQuery library and script file reference to page, also add css file reference to page



 //jQuery library reference
            <af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
            //jQuery file reference that will be used to show caption
            <af:resource type="javascript" source="js/jquery.capty.js"/>
            <af:resource type="javascript" source="js/jquery.capty.min.js"/>
            //CSS file to style Caption
            <af:resource type="css" source="css/jquery.capty.css"/>



• Next step is to execute jQuery function on pageload to show caption



//Function to show default sliding caption

$('#ImageId').capty();

//Change default fucntion to change animation type , speed and height of caption

$('#ImageId').capty({
animation: 'fade',
speed:     1000
}) 



• So here i am using both function for two different images (for first image animation type is slide (default) and for second it is fade), add clientListener to document tag and set it's type to 'load' (to execute jQuery function on pageload)



 <af:clientListener method="jQuery(document).ready(function($){ $('#FirstImage').capty(); $('#SecondImage').capty({animation: 'fade',   speed:     1000}) })" type="load"/>



• Run application and see magic of jQuery

Image Caption (animation:slide)-


Image Caption (animation:fade)-



• you can change style (color,font etc) of caption box by modifying css sheet and size can be increased or decreased from jQuery function. for example i have changed color, font and size of caption box. see this



@CHARSET "UTF-8";

div.capty-caption {
 background-color: red;
 color: #FFF;
 font: bold 11px cursive;
 padding-left: 10px;
 padding-top: 7px;
 text-shadow: 1px 1px 0 #222;
}

div.capty-caption a {
 color: #318DAD;
 font: bold 11px verdana;
 text-decoration: none;
 text-shadow: none;
}


jQuery function to increase size-



jQuery(document).ready(function($){ $('#FirstImage').capty(); $('#SecondImage').capty({animation: 'fade',   speed:1000,height:50}) })


See output-

Thanks, Happy Learning :)
Download Sample ADF Application

Show message (Invoke FacesMessage) using JavaScript in ADF Faces

Hello all

This post is about use of JavaScript in ADF Faces to show a simple message notification , it may be error/warning/information/critical error message

so this is simple, as we have to just invoke default FacesMessage using JavaScript

So for this i have used an af:inputText on page and use case is that this field should only take characters

How to validate characters (alphabet) only  using javascript ?

So for this i have taken a simple regular expression that check that entered value is alphabetic or not
see this JavaScript function that is added to page, here it1 is the id of inputText for that FacesMessage is invoked, i am using Jspx page so i use actual id of component, if you try this in region,dynamic region or inside pageTemplate then check and change the id of component .
It will be something like r1:0:it1 or pt1:0:it1, because that is nested page structure.
you can get this id using componentBinding.getClientId();

 <af:resource type="javascript">
              function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();

                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problem
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }
            </af:resource>

Added a clientListener to inputText that executes this JavaScript function on keyPress event

Run page and see how it works-
Here you see that 2 is not a character so it showing error message as FacesMessage is defined for TYPE_ERROR

So it's done but now problem is - when user input a wrong value a error message is displayed and after this validation alert if user keeps entering wrong values then every time a new FacesMessage is created and added to page, It appears on page like this (duplicate messages - really weird)

To remove additional messages , i have added one more line in JavaScript to clear previous validation message

JavaScript to clear validation message-

 // Clear all validation message 
              AdfPage.PAGE.clearAllMessages();

now JavaScript function is like this

function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();
                  // Clear all validation message 
                  AdfPage.PAGE.clearAllMessages();
                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problme
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }

and yes you can change type of message, use TYPE_ERROR, TYPE_INFO, TYPE_WARNING, TYPE_FATAL to change message type

see different output-
Warning Message (TYPE_WARNING)-

Informational Message (TYPE_INFO)-

Fatal Error Message (TYPE_FATAL)-

Thanks Happy Learning :)

How to change default icons (info, Error, Warning) of FacesMessage and af:messages in Oracle ADF

Hello all
this post is about customizing or changing default icons of FacesMessage , it is very basic but sometimes it's hard to do easy things
if we need to use alternate icons in af:messages or in programmatic FacesMessage, so to do this just create a small ,simple CSS file (ADF Skin) in viewController project and use this code

Change url as per your icon image path, you can also define same for Fatal Error and Confirmation icon also

af|messages::info-icon
{
  content: url("../../information.png"); 
}

af|messages::warning-icon
{
  content: url("../../warning.png"); 
}
af|messages::error-icon
{
  content: url("../../error.png"); 
}

apply this skin to project and run your application to see changes

Default Icon	Changed Icon

Happy Learning :)

Show current Date and Time on Page in Oracle ADF (refresh Date/time Programmatically)

Hello All,
in this tutorial i am going to explain that how to show current date and time on your ADF application page
Follow Steps-

• Create a fusion web application and a page in it (i have used .jspx page)
• Now drag an output text from component palette and drop it on page

• Now select the output text and go to its property inspector then select value from Expression Builder as shown in image

• Now in Expression Builder ,create a Managed Bean of type java.util.Date and assign its value to output text

•  Now run your page and see current date is there

• Now to format Date and Time , drag and drop af:convertDateTime  under output text from component palette

•  Select convertDateTime and go to property inspector and change its pattern and run your page

•  Now you have done basic configuration for Date/Time, if you want to refresh time (second and minute part) on page periodically then drop a poll component in page and create a poll listener in managed bean

• Now write this simple code in your managed bean to invoke poll listener



    /**Binding of Output text*/
    private RichOutputText dateBind;

    public void setDateBind(RichOutputText dateBind) {
        this.dateBind = dateBind;
    }

    public RichOutputText getDateBind() {
        return dateBind;
    }


    /**Poll Listener Method ,handles Poll Event
     * @param pollEvent
     */
    public void refreshTime(PollEvent pollEvent) {
        AdfFacesContext.getCurrentInstance().addPartialTarget(dateBind);

    }


And don't forget to set clientComponent property of outputText to true

• Now Run your application , see in this video clip how your page get refreshed... Cheers ..!

Cheers :) Happy Learning