3 Replies Latest reply on Sep 9, 2012 4:07 AM by Christian Peter

    Creating individually loaded widgets

    Dave seenam Newbie

      I was wondering if there is a way to use a4j:ajax, a4j:region and a4j:status to create a dashboard screen which has a bunch of widgets that can be loaded up individually. the problem is i have a dashboard page which basically displays widgets (data in a datatable) and the dashboard page currently has about 10 different such widgets. I have it configured to where i can add widgets as i please into a list and the dashboard page essentially iterates thru then and renders eadh of these which are nothing but rich datatables. the way it is now though is that when the dashboard page loads up the widgets (and rows within the widgets) load up one by one and the user sees a page being continously rendered until all 10 widgets are completed loaded.

       

      What I want to happen is that the dashboard page first show just 10 empty panels each with spinning wheels (or any other please wait gif) and as each individual widget is loaded the panel replaces the spinning wheel with the widgets contents.

       

      Is this possible using the richfaces ajax components ?

        • 1. Re: Creating individually loaded widgets
          Brendan Healey Master

          I'm struggling to conceptualise exactly what you are trying to do because of the lack of specificity in your question. It sounds a bit

          like you've got iteration components within iteration components and the scope for performance problems in this scenario are

          significant with JSF. If you can suggest a reduced scope real world version of what you're trying to do I could recommend an

          approach that would work.

           

           

           

          Regards,

          Brendan.

           

           

           


          Freelance Java Enterprise Developer


          JSF Richfaces Ajax Java 6/7 (scjp) EE 6 HTML CSS JavaScript jQuery MySQL JPA Hibernate Eclipselink

          Spring Oracle SQL JPQL Sybase EJB CDI Glassfish Apache JAX-RS Primefaces UNIX Paypal and more..

          • 2. Re: Creating individually loaded widgets
            Dave seenam Newbie

            dashboard.xhtml

             

            <c:forEach items="${widgets}" var="widget">

                 <rich:panel id="widgetPanel">

                      <f:facet name="header">

                           <h:outputText value="${widget.name}"/>

                      </f:facet>

                      <ui:include src="${widget.viewId}"    

                 </rich:panel>

            </c:forEach>

             

            and each widget in the list kind of has content like this

             

            widget.xhtml

             

            <rich:dataTable value="#{items}" var="item">

            ...

            ...

            </rich:dataTable>

             

            I would like for when the dashboard is rendered to first show content of each widget panel (id=widgetPanel) with an please wait gif and and as the content of each widget is completely loaded to replace the please wait with content. And so each panel data is displayed when completely loaded. i have about 10 widgets currently,

            • 3. Re: Creating individually loaded widgets
              Christian Peter Expert

              I think in this scenario I'd try to use a4j:push  or a a4j:poll to check if a widget is fully initialized on the backend and then reRender the part of the page there the content should be. Before that, only a loader animated gif would be visible.

               

              Which version of RF and JSF are you using? Do you use facelets with JSF? In this case the usage of c:if / c:forEach / ui:include with dynamic conditions is legal and they can be rerenderd.

               

              <c:forEach items... var... varStatus="myRowId">

              ...

              <h:panelGroup id="widgetCheck#{myRowId}">

              <c:if test="#{widget.ready}">

              <ui:include ...

              </c:if>

              <c:if test="#{!widget.ready}">

              ... please wait gif-animation ...

              </c:if>

              </h:panelGroup>

               

              ...

              </c:forEach>

               

              the push / poll will check if a widget is ready and then will rerender the corresponding h:panelGroup to do the include.