JSF WebSocket with OmniFaces in Oracle ADF

Hi,

In previous post I shared another example of usage of WebSocket technology within Oracle ADF 12cR2.


ADF 12cR2: Using WebSockets for warning Task Flow Concurrency 

As part of my presentation in NLOUG 2018 I compared JSF 2.3 declarative way of doing WebSocket vs Oracle ADF (JSF 2.2) way.

I started being using OmniFaces as a very good Faces utility for my JSF projects and seen <o:socket...> which functionality is "the same" as <f:websocket...> for the implementation of WebScoket in JSF in a declarative way.

By using OmniFaces you can extend the possibilities of Oracle ADF 12cR2 with some useful components and libraries.

The example can be found in my GitHub of ADF Demos: https://github.com/DanielMerchan/adf

In this simple example I made use of the <o:socket...> for WebSocket implementation.
But, you can think in more complex scenarios where:
  • You want to communicate with a certain set of users
  • You can do Client - Server and viceversa communication through the WebSocket.
OmniFaces-Socket Documentation
How can I use OmniFaces in Oracle ADF 12cR2? Easy.
  • Add to your Maven the latest OmniFaces 2.x dependency. Remember that Oracle ADF 12cR2 works over JSF 2.2 and OmniFaces 3.x is compatible with JSF 2.3!

    
            org.omnifaces
            omnifaces
            2.7
            jar
            compile
  • Start using API or its tags.

    <?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:o="http://omnifaces.org/ui">
    <af:document title="testOmniWebSocket.jsf" id="d1">
        <af:form id="f1">
            <af:panelHeader text="Usage of OmniFaces WebSocket as ADF (JSF 2.2) cannot use JSF 2.3 WebSocket" id="ph1">
                <o:socket channel="gooseChannel" onmessage="gooseListener"/>
            </af:panelHeader>
            <af:button text="Test Omni Socket Push" actionListener="#{socketBean.sendMessage()}" id="b1"/>
            <af:resource type="javascript">
                function gooseListener(message, channel, event) {
                    $.notify("Message: " + message,{position:"top center",className:"warn"});
                }
            </af:resource>
        </af:form>
        <f:facet name="metaContainer">
            <af:resource type="javascript" source="/resources/js/jquery-3.3.1.min.js"/>
            <af:resource type="javascript" source="/resources/js/notify.min.js"/>
         </f:facet>
    </af:document>
</f:view>
  • Push the notification from Server Side by using the PushContext of OmniFaces

    package com.magicpigeon.poc.view;

import java.time.LocalDateTime;

import java.util.ArrayList;
import java.util.List;

import javax.enterprise.context.RequestScoped;

import javax.inject.Inject;
import javax.inject.Named;

import org.omnifaces.cdi.Push;
import org.omnifaces.cdi.PushContext;

/**
 * Demo Purpose Managed Bean for illustrating the PushContext WebSocket using OmniFaces
 * @author Daniel Merchan Garcia
 */
@RequestScoped
@Named("socketBean")
public class SocketBean {
    
    @Inject @Push(channel="gooseChannel")
    private PushContext gooseChannel;

    /**
     * Default Constructor
     */
    public SocketBean() {
        super();
        System.out.println("aksjhdiahsdaiu");
    }
    
    public void sendMessage() {
        gooseChannel.send("Hello " + " at " + LocalDateTime.now());
    }
}

Comments

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