PrimeFaces UI Components in Oracle ADF

Hi,

Using some PrimeFaces UI components in combination with ADF Faces UI Components?

This weekend I have been curious about if I can use the PrimeFaces UI components such as p:textEditor or p:growl within Oracle ADF without crashing ADF Faces and viceversa.



At the beginning, I tried to use p:growl is very similar to af:message as it uses the FacesMessage framework underneath.

Obviously, as running within ADF Faces the messages were displayed with the ADF Faces Message style.

However, the PrimeFaces UI components like the ADF UI Faces Components has its own API (Java + JavaScript) which makes easier to invoke them!.

In the example in my GitHub Repository you will find a simple ADF View Controller Project which makes use of Prime Faces with Oracle ADF.

https://github.com/DanielMerchan/adf

Remember that this is not officialy supported by Oracle and it can produce issues as both Faces implementation uses JavaScript on behind which can conflict. In addition, this is just a simple test, maybe a complex scenario can break everything :).

But, at this point of my test looks that the can work together!.

How to add PrimeFaces to Oracle ADF? Easy:
  1. If using Maven Dependency or JDeveloper Library Dependency just add the PrimeFaces JAR

    <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.2</version>
            <type>jar</type>
            <scope>compile</scope>
        </dependency>
  2. Add the PrimeFaces Namespace to your Facelets Page. Use the PrimeFaces Components in combination with the ADF Components and the PF API if needed.

    
    
        
            
            
            
                
            
            
                    
                
            
                function testPFGrowl(evt) {
                    PF('growlWV').renderMessage({"summary":"summary goes here",
                             "detail":"detail goes here",
                             "severity":"warn"})
                }
Note: My recommendation is not to do it, do not mix Faces implementations as you will not have support and also issues can be very complex to debug.

Regards.

Comments

  1. Dakota Buck18 December 2020 at 07:01

    I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here.Same as your blog i found another one Oracle Fusion Financials.Actually I was looking for the same information on internet for Oracle Financials Cloud and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.


    ReplyDelete
  2. Unknown5 July 2021 at 13:26

    Thanks for sharing this blog. The content is beneficial and useful. Very informative post. Visit here to learn more about Data Mining companies and Data analytics Companies.

    ReplyDelete

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag
Read more

OJET: Select All options using only Checkboxset

Image
This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')
Read more