template.xhtml

Agregamos al template funciones java script que actualizaran los componentes.

En este caso colocamos el ultimo mensaje

Actualizamos las etiquetas e invocamos el <:remotecommand>

      <script type="text/javascript">
            function socketListener(message, channel, event) {

                document.getElementById("websocketidTopText").innerHTML = message;
                document.getElementById("websocketidTopText2").innerHTML = message;

                myFormRC();
                waitForLoad();
                
             
                
            }
        </script>  

        <script name="jquery/jquery.js" library="primefaces" target="head" ></script>

Agregamos un <h:form> con el componente Websocket

<h:form>
    <f:websocket channel="clock" onmessage="socketListener" />        
</h:form>

Código completo

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:jmoordbjsf="http://jmoordbjsf.com/taglib">
    <h:head>
        <f:facet name="first">
            <f:view locale="#{jmoordbLanguajes.locale !=null?jmoordbLanguajes.locale:'es'}"></f:view>
            <f:loadBundle basename="com.properties.messages" var="msg" />
            <f:loadBundle basename="com.jmoordbutils.properties.application" var="app" />

        </f:facet>
        <title>#{msg['application.shorttitle']}</title>
        <meta name="author" content="Aristides Villarreal" />
        <meta name="description" content="BootsFaces, a powerful JSF framework that takes the best from Bootstrap and jQuery UI to let develop well-designed state-of-the-art next-gen Front-end Enterprise Applications fast and easy supporting HTML5." />
        <meta name="KEYWORDS" content="jsf, bootstrap, framework, java, enterprise, server, faces, jquery, usability, next-gen, web, html5, easy, modern, well-designed, website, state-of-the-art" />
        <meta name="robots" content="index, follow" />


        <jmoordbjsf:metatemplate/>
        <jmoordbjsf:csstemplate/>
        <style>.tooltip-inner {
                max-width: 350px;
                /* If max-width does not work, try using width instead */
                width: 350px; 
            }</style>

        <script type="text/javascript">
            function socketListener(message, channel, event) {

                document.getElementById("websocketid_topText").innerHTML = message;
                document.getElementById("websocketid_topText2").innerHTML = message;
             
            }
        </script>  
    </h:head>
    <h:body style="padding-top: 85px;padding-bottom: 85px;" >

        <jmoordbjsf:jstemplate/>
        <h:form>
            <f:websocket channel="clock" onmessage="socketListener" />        
        </h:form>

        <ui:insert name="nbtop">

            <ui:include src="/layout/top.xhtml"/>
        </ui:insert>

        <b:container >
            <ui:insert name="content"/>
        </b:container>

        <ui:insert name="nbtop">
            <ui:include src="/layout/footer.xhtml"/>
        </ui:insert>

    </h:body>
</html>

Previoustop.xhtml Nextweb.xml

Last updated 6 years ago

Was this helpful?

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:b="http://bootsfaces.net/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:jmoordbjsf="http://jmoordbjsf.com/taglib"> <h:head> <f:facet name="first"> <f:view locale="#{jmoordbLanguajes.locale !=null?jmoordbLanguajes.locale:'es'}"></f:view> <f:loadBundle basename="com.properties.messages" var="msg" /> <f:loadBundle basename="com.jmoordbutils.properties.application" var="app" /> </f:facet> <title>#{msg['application.shorttitle']}</title> <meta name="author" content="Aristides Villarreal" /> <meta name="description" content="BootsFaces, a powerful JSF framework that takes the best from Bootstrap and jQuery UI to let develop well-designed state-of-the-art next-gen Front-end Enterprise Applications fast and easy supporting HTML5." /> <meta name="KEYWORDS" content="jsf, bootstrap, framework, java, enterprise, server, faces, jquery, usability, next-gen, web, html5, easy, modern, well-designed, website, state-of-the-art" /> <meta name="robots" content="index, follow" /> <jmoordbjsf:metatemplate/> <jmoordbjsf:csstemplate/> <style>.tooltip-inner { max-width: 350px; /* If max-width does not work, try using width instead */ width: 350px; }</style> <script type="text/javascript"> function socketListener(message, channel, event) { document.getElementById("websocketid_topText").innerHTML = message; document.getElementById("websocketid_topText2").innerHTML = message; } </script> </h:head> <h:body style="padding-top: 85px;padding-bottom: 85px;" > <jmoordbjsf:jstemplate/> <h:form> <f:websocket channel="clock" onmessage="socketListener" /> </h:form> <ui:insert name="nbtop"> <ui:include src="/layout/top.xhtml"/> </ui:insert> <b:container > <ui:insert name="content"/> </b:container> <ui:insert name="nbtop"> <ui:include src="/layout/footer.xhtml"/> </ui:insert> </h:body> </html>