Search code examples
jsfprimefacesmanaged-beanasynchronous

How to pass bean object/value to a jsf(xhtml) page?


I using Tomcat and PrimeFaces in the current available versions.

I'm facing the problem, that I'm not able to send a value from a managed bean to its xhtml page asynchronously.
This is a code fragment from my xhtml page:

<p:inputTextarea id="transcriptionResult" rows="4" cols="120"
                    value="#{transcriptionTabView.currentTranscritpion}" />

This is the method which is called asynchronously to re-/set the object/value within the managedbean "transcriptionTabView". Which contains an object called Transcription currentTranscription.

@Override
public void trascriptionReady(Transcription t) {
  this.currentTranscription = t;
}

I thought this would be enough to reset the view, but nothing happened.


Solution

  • I solved the problem with the Push functionality of PrimeFaces. With the hint of BalusC, I read the UserGuide of PrimeFaces Chapter 9. PrimeFaces Push PDF and watched this video tutorial. These are the steps I have done to solve the problem.

    Step 1: I added the following method within my TranscriptionTabView-Bean:

    public void pushMessage() {
        EventBus eventBus = EventBusFactory.getDefault().eventBus();
        eventBus.publish("/resultreceiver", result);
        System.out.println("Message Sent at " + new Date());
    }
    

    Step 2. I created a Receiver-Bean to receive my pushed messages:

     @PushEndpoint(value = "/resultreceiver")
     public class TranscriptionResultReceiver {
    
        @OnMessage(encoders = { JSONEncoder.class })
        public String onMessage(String message) {
           return message;
        }
     }
    

    Step 3. I added a <p:inputTextarea>component to my JSF to display the message: <p:inputTextarea rows="6" cols="60" id="transcriptionResult" value="#{transcriptionTabView.result}"> </p:inputTextarea>

    Step 4. Add a socket to the jsf which waits for the incoming messages: <p:socket channel="/resultreceiver" onMessage="handleMessage"></p:socket>

    Make sure the channel is the same as in the Receiver-Bean mentioned @PushEndpoint annotation.

    Step 5. Add following javascript method to your JSF which is called by the socket tag, when a message is pushed by the TranscriptionTabView-Bean.

        <script type="text/javascript">
          function
            handleMessage(data){
                document.getElementById(<GENERATED_ID OF INPUTTEXTAREA>).value=data; 
            }
    
        </script>  
    

    As I understood by reading the userguide and watching the youtube video, the method pushMessage in TranscriptionTabView opens a channel to the JSF and send the message using eventBus.publish("/resultreceiver", message); On the client side the socket tag waits for a incoming message on the given channel and if the onMessageevent occurs, the javascript method handleMessage is called to do something with the incoming data.

    Please correct me if I'm wrong. I'm new to this.