Use Font Awesome 5 Icons in Oracle ADF Application

Font Awesome is a standard icon package that has a collection of lots of beautiful customizable icons. In this post, I'll describe how to use Font Awesome 5 Icons in the Oracle ADF Application.

You can check these posts to use Font Awesome's older version 4 in ADF

Font Awesome with ADF

Leveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your app

I suggest you try the latest version 5 as the new version is written from scratch and has many new icons pack support.

Let's start the process to use Font Awesome 5 Icons in Oracle ADF

• Create an ADF Application and a page under view controller project

• Now add Font Awesome CSS file reference in the page using resource tag like this

1. <af:resource type="css" source="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>

• Drop af:icon on the page and search for the desired icon here, click on the icon and copy icon class name and put in style class property of af:icon. See in the below image icon class name is highlighted
  
  and it is used in ADF page like this (here I have added 4 icons for example)
  
  
  
  
  

and it is used in ADF page like this (here I have added 4 icons for example)

1. <af:form id="f1">
2. <af:spacer width="10" height="70" id="s1"/>
3. <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple"/>
4. <af:spacer width="10" height="10" id="s2"/>
5. <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android"/>
6. <af:spacer width="10" height="10" id="s3"/>
7. <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen"/>
8. <af:spacer width="10" height="10" id="s4"/>
9. <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car"/>
10. </af:form>

• Now run and check the application, In the below image, you can see that icons are smaller in size
  
  
  
  
  
• To increase icon size append fa-5x in style class of icon, Here you can change 5x to any value like 1x,2x etc.
  
  
  
  
  
• And to change color of the icon just put CSS in the inline style property of af:icon like this

1. <af:form id="f1">
2. <af:spacer width="10" height="150" id="s1"/>
3. <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple fa-10x"/>
4. <af:spacer width="10" height="10" id="s2"/>
5. <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android fa-10x" inlineStyle="color:green;"/>
6. <af:spacer width="10" height="10" id="s3"/>
7. <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen fa-10x" inlineStyle="color:Tomato;"/>
8. <af:spacer width="10" height="10" id="s4"/>
9. <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car fa-10x" inlineStyle="color: Dodgerblue;"/>
10. </af:form>

and icons look like this now

All done :) You can see that Font Awesome icons look much better than png images and reduce the page load time.

Sample ADF Application - Download

Cheers  Happy Learning

Reinitialise taskFlow in dynamic region and set focus to default activity

Hello All

We all use bounded task flows in ADF application development and to switch between multiple task flows we use concept of dynamic region

Recently I came across a problem about dynamic region and bounded task flows, Scenario is like this

I have dropped a BTF in dynamic region and there is a link on page to open that task flow and those who have used dynamic region would be familiar with this piece of code

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

Create shortcut of page on a button click in Oracle ADF using JShortcut library (For windows)

This post is about a small trick to create shortcut file from ADF application
Actually this type of requirement doesn't come in picture when you are working in web application , for web application bookmarks replaces desktop shortcut
Still if you want to do this then you can follow approach mentioned in this post

Creating shortcut programmatically requires access of operating system but you need not to worry about that
There is a java library to do this for you - JShortcut
Download jar files from here..

1. Now first step is to create a fusion web application and add this jar to viewController project

2. Create a page (independent runnable like jspx or jsf not fragments) and drop a button in that
3. Create a managed bean to handle button's action
    Here we will make use of JShellLink class of this library

See what docs says about this -

Provide access to shortcuts (shell links) from Java. The native library (jshortcut.dll) is loaded when JShellLink is first loaded. By default, JShellLink first looks for the native library in the PATH, using System.loadLibrary. If the native library is not found in the PATH, JShellLink then looks through each directory in the CLASSPATH (as determined by the value of the system property java.class.path). If an entry in the CLASSPATH is a jar file, then JShellLink looks for the native library in the directory containing that jar file. The application can override this behavior and force JShellLink to look for the native library in a specific directory by setting the system property JSHORTCUT_HOME to point to that directory. This property must be set before the JShellLink class is loaded. This makes it possible to use this library from a self-extracting jar file. 



4. Get the url of current page
 How to get url of current page in ADF Application?
 (See button action listener code for this )
5. Check code written in managed bean-

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

import javax.servlet.http.HttpServletRequest;

import net.jimmc.jshortcut.JShellLink;

import oracle.adf.controller.ControllerContext;

    JShellLink link;
    String filePath;

    /**Button action listener to create shortcurt of current page on desktop
     * @param actionEvent
     */
    public void createSortcutonDpAction(ActionEvent actionEvent) {
        try {
            //Get url of current ViewPort
            String viewId = ControllerContext.getInstance().getCurrentViewPort().getViewId();
            String viewUrl = ControllerContext.getInstance().getGlobalViewActivityURL(viewId);

            //Get Server Name and Port
            FacesContext fctx = FacesContext.getCurrentInstance();
            HttpServletRequest hsrequest = (HttpServletRequest) fctx.getExternalContext().getRequest();

            String serverName = hsrequest.getServerName();
            int serverPort = hsrequest.getServerPort();

            String runnableUrl = "http://" + serverName + ":" + serverPort + viewUrl;

            //Create Object of shortcurt link
            link = new JShellLink();
            filePath = JShellLink.getDirectory("") + runnableUrl;
            //Set Where you want to create shortcut
            link.setFolder(JShellLink.getDirectory("desktop"));
            //Set shortcut file name
            link.setName("Programmatically Created Shortcut");
            //Use ico file to use as shortcut icon
            link.setIconLocation("C://Users//Admin//Desktop//Jdev_Logo.ico");
            link.setPath(filePath);
            link.save();

        } catch (Exception ex) {
            ex.printStackTrace();
        }

    }

6.  All done :) , run and check application
Click on button and check on desktop

Same code can be used to create shortcut from pure java application
Cheers :) Happy Learning

Create taskFlow and region binding at run-time , show n numbers of regions using multiTaskFlow- Oracle ADF

This is very specific development requirement to create taskFlow and region binding at run-time to show n numbers of region in page
In this case initially you don't know how much regions required in page as it depends on user activity .

you can see in http://irctc.co.in/ (Indian Railways) site
when user search for a train and check berth availability then a tab is generated at run-time with berth and fare details and it continues for each action , every time a new tab with new information is generated (n- number of tab and taskFlow)

A very good article is published in Oracle Magazine (July – August 2014) by Frank Nimphius on this requirement , article contains very good description of each and every step and a sample application with whole functionality
I found it very interesting and good so giving a quick overview of TaskFlow on Fly

this functionality is implemented using multiTaskFlow element that uses taskFlow binding from managed bean , taskFlow bindings in managed bean created using TaskFlowBindingAttributes
this class is used to set all properties of taskFlow binding at runtime



See Oracle docs (TaskFlowBindingAttributes)-
Set of attributes that define a TaskFlowBinding object. The taskFlowList attribute of the multiTaskFlow element of the page definition uses a list of object of this type to describe each taskflowBinding that the multiTaskflow binding contains. The order of this list defines the order of the region objects in the multiTaskflow binding. 

So in this post i am using Departments and Employees table of HR Schema(Oracle) to create business components for Model part

Create viewCriteria in both viewObjects (Departments and Employees) to filter data using DepartmentId

Applied viewCriteria to viewObject at AM level (Edit Vo instance and shuttle viewCriteria to selected side)
After this created methods in AMImpl class to set value in both viewCriteria's bind variables

    /**Method to filter Department ViewObject
     * @param deptId
     */
    public void filterDepartmentData(Integer deptId) {
        this.getDepartments1().setNamedWhereClauseParam("BindDeptId", deptId);
        this.getDepartments1().executeQuery();

    }

    /**Method to filter Employees Data
     * @param deptId
     */
    public void filterEmployeesData(Integer deptId) {
        this.getEmployees1().setNamedWhereClauseParam("BindDeptId", deptId);
        this.getEmployees1().executeQuery();

    }

Expose both methods to use in clientInterface

Now viewController part-

Created two bounded taskFlow with one input parameter for DepartmentId (this id will be used to filter Departments and Employess viewObject)
One for Departments and Second for Employees-

First taskFlow has a .jsff (facelets) page that has Departments viewObject as a form , just to show date with navigation buttons

filterDepartmentData method of AMImpl is used as Default Activity of this taskFlow

to filter data before entering in page

Second taskFlow has a .jsff (facelets) page that has Employees viewObject as a table

filterEmployeesData method of AMImpl is used as Default Activity of this taskFlow

to filter data before entering in page

Now basic configuration is complete, model is ready and bounded taskFlows are ready
then create a jsf page and manged bean (pageFlowScope) in adfc-config.xml, this page will make use of these two bounded taskFlows  and managed bean is responsible to generate taskFlow binding at runtime

Next Step is to prepare manged bean to hold taskFlowBinding-
Create a List of type TaskFlowBindingAttributes and it's accessors

import oracle.adf.controller.binding.TaskFlowBindingAttributes;    
private List<TaskFlowBindingAttributes> taskFlowBinding = new ArrayList<TaskFlowBindingAttributes>(5);

    public void setTaskFlowBinding(List<TaskFlowBindingAttributes> taskFlowBinding) {
        this.taskFlowBinding = taskFlowBinding;
    }

    public List<TaskFlowBindingAttributes> getTaskFlowBinding() {
        return taskFlowBinding;
    }

Create multiTaskFlow binding in executables of pgae-

• Open jsf page, click on bindings tab of page editor
• click on green plus icon of executables section
• Select ADF TaskFlow Bindings in category and select multiTaskFlow





• click on ok and provide an unique value for id attribute and reference of List created in managed bean as value for taskFlowList attribute





• Configuration of  multiTaskFlow for this page is complete and now time to design page to render multiple regions. For this purpose add af:ForEach and a region inside it, forEach is responsible to add regions at run-time. here a little change i am using panelTabbed  to create tab at runtime and inside tab there will be region 
• See this xml code- here nothing simple panelTabbed and forEach iterates over to list to identify number of items and varStatus of forEach is used to create id of showDetailItem at runtime as id must be unique. regionModel is referenced from var attributes of forEach as part of taskFlowBinding 



 <af:panelTabbed position="above" id="pt1" partialTriggers="b1">
            <af:forEach items="#{bindings.mtf1.taskFlowBindingList}" var="multiTF" varStatus="vs">
               <af:showDetailItem id="Tab#{vs.index+1}" text="#{multiTF.name}" partialTriggers="b1">
                  <af:region value="#{multiTF.regionModel}" id="r1#{vs.index}" partialTriggers="::b1"/>
               </af:showDetailItem>
            </af:forEach>
         </af:panelTabbed>



• Now page is ready to show unknown (n) number of regions, here i am using two list and a button on page First List is of all departments and second one is static list to select information type (if user want to see Only Departments or Departments Wise Employees) and button to execute and add taskFlow from managed bean as per selected Department and 
• Again a map is created in managed bean to store input parameters for taskFlow and it will used while setting and creating taskFlowBinding



    HashMap<String, Object> tfParam = new HashMap<String, Object>();
    public void setTfParam(HashMap<String, Object> tfParam) {
        this.tfParam = tfParam;
    }

    public HashMap<String, Object> getTfParam() {
        return tfParam;
    }



• finally we will create taskFlow binding and set properties on button click (actionEvent of button), See this code-



    /**Method to create and set properties in TaskFlowBinding
     * @param actionEvent
     */
    public void displayDepartmentAction(ActionEvent actionEvent) {
        //Clear List to show newly created regions only
        taskFlowBinding.clear();
        System.out.println("List Cleared -Size>" + taskFlowBinding.size());
        //Check that user selects value in both List (Uses component binding to check)
        if (deptIdBindVal.getValue() != null && showTypeBind.getValue() != null) {
            //Put value in TaskFLow Parameter map, deptIdBindVal is binding of list of departments on page
            tfParam.put("DeptIdParam", deptIdBindVal.getValue());

            //Only Shows Departments taskFlow, if user selectes "Only Departments"
            if ("Only Departments".equalsIgnoreCase(showTypeBind.getValue().toString())) {
                //Setting taskFlow properties
                TaskFlowBindingAttributes tfAttr = new TaskFlowBindingAttributes();
                //Creating Unique Id
                tfAttr.setId("Department_" + deptIdBindVal.getValue());
                //See bounded taskFlow name in WEB-INF and use here
                tfAttr.setTaskFlowId(new TaskFlowId("/WEB-INF/DepartmentsBTF.xml", "DepartmentsBTF"));
                //This EL refers parameter map created in this managedBean
                tfAttr.setParametersMap("#{pageFlowScope.MultiTaskFlowBean.tfParam}");
                //Finally add taskFlow to List
                taskFlowBinding.add(tfAttr);
            } else { // Show both Departments and Employees
                //Creating Departments TaskFlow binding
                TaskFlowBindingAttributes tfAttr = new TaskFlowBindingAttributes();
                tfAttr.setId("Department_" + deptIdBindVal.getValue());
                tfAttr.setTaskFlowId(new TaskFlowId("/WEB-INF/DepartmentsBTF.xml", "DepartmentsBTF"));
                tfAttr.setParametersMap("#{pageFlowScope.MultiTaskFlowBean.tfParam}");
                taskFlowBinding.add(tfAttr);
                //Creating Employee TaskFlow biniding
                tfAttr = new TaskFlowBindingAttributes();
                tfAttr.setId("Employees_" + deptIdBindVal.getValue());
                tfAttr.setTaskFlowId(new TaskFlowId("/WEB-INF/EmployeesBTF.xml", "EmployeesBTF"));
                tfAttr.setParametersMap("#{pageFlowScope.MultiTaskFlowBean.tfParam}");
                taskFlowBinding.add(tfAttr);
            }
        }
    }



• So Application with multiTaskFlow is ready , in this post i have used these two bounded taskFlow to show in two tabs at run-time, in same way you can call multiple TFs or a single taskFlow multiple time. Now runt application and see how it works

Initial page with two lists

Select Department and show type -click on button

Select Department and show type -click on button

• Refer this post Region Extreme: Multi-Task-Flow Binding to learn more about multiTaskFlow binding. In this Frank also told about how to use dynamic viewObject instance to show different data at run-time, because if we use same instance of viewObject in multiple taskFlow at same time then it will not maintain state for each region to it is necessary to use dynamic instance and it's binding in pageDef
• Read more about regions and taskFlows- Using Task Flows as Regions

Thanks - Happy Learning :) Sample ADF Application