11 Replies Latest reply on Mar 2, 2009 11:26 PM by supremelmfz

    rich:tab content to be generated on load of the tab

    anandsaranath

      I have a requirement where in I have to generate a data table content inside a tab. There will be multiple tabs generated and each tab will contain information similar to what I have mentioned above. I tried using "ontabenter" event for this selected tab. But, this did not work. It works only if I switch to a different tab and come bac to this default selected tab. Is there a way to generate the content of the tab on load?

      If there is no way, what is the alternative way of getting this feature implemented?

        • 1. Re: rich:tab content to be generated on load of the tab
          nbelaevski

          Hello,

          Please clarify whether you need dynamic tab content and have a fixed number of tabs or you need dynamic number of tabs?

          • 2. Re: rich:tab content to be generated on load of the tab
            anandsaranath

            Hi,

            I am generating tabs dynamically using c:forEach along with rich:tab inside rich:tabPanel. After generating these tabs, the content inside these tabs will have to be dynamically generated upon entering the tabs. There has to be a default tab that will have to be shown which means that the content of this tab should also be displayed. I am unable to find an event similar to "onload" which will help me in showing the content of the default tab.

            Regards
            Anand

            • 3. Re: rich:tab content to be generated on load of the tab
              nbelaevski

              How about using AJAX tabs?

              • 4. Re: rich:tab content to be generated on load of the tab
                anandsaranath

                Hi,

                Which component are you referring to? Is there an ajax:tab component?

                Here is the code that I developed.

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:rich="http://richfaces.org/rich">

                <a4j:keepAlive beanName="RunningJobsBean" />
                <rich:tabPanel switchType="ajax" selectedTab="runningJobsTab">
                <rich:tab label="Running Jobs" id="runningJobsTab">
                <a4j:support event="ontabenter" reRender="ij" ajaxSingle="true">
                <a4j:actionparam assignTo="#{RunningJobsBean.serviceId}" value="#{ServicesQueryBean.serviceId}" actionListener="#{RunningJobsBean.queryJobs}"/>
                </a4j:support>
                <h:outputText value="in test tab #{RunningJobsBean.serviceId}" />
                <a4j:outputPanel id="ij">
                <ui:include src="/runningJobs.xhtml" />
                </a4j:outputPanel>
                <a4j:log />
                end
                </rich:tab>
                <rich:tab label="Scheduled Jobs">
                <!-- <ui:include id="scheduledJobsPage" src="/scheduledJobs.xhtml" /> -->
                </rich:tab>
                <c:forEach items="#{Queues.queues}" var="queue">
                <rich:tab label="#{queue}">
                <ui:include src="/queueJobs.xhtml"/>
                </rich:tab>
                </c:forEach>
                </rich:tabPanel>


                The RunningJobsBean scope is set as "request" in faces config.

                The ontabenter event is triggered only after I switch to another tab and come back to the first tab. The runningJobs.xhtml loops through a data structure to display the information. The data structure should be populated by the queryJobs action listener.

                Regards
                Anand

                • 5. Re: rich:tab content to be generated on load of the tab
                  nbelaevski

                  Anand,

                  I meant that you can use tabs with switchType="ajax".

                  • 6. Re: rich:tab content to be generated on load of the tab
                    anandsaranath

                    Hi,

                    As you can see from the code that I have pasted in my question, I am using switchType as 'ajax'. But, still I am not able to show the content of the default tab (tab pointing to by selectedTab). Please let me know if this is possible. Whenever the ontabenter event is triggered, I am able to display the content inside the tab. But, unfortunately, the ontabenter event does not get triggered for the default tab (tab pointed by selectedTab). This is the main problem that I am facing.

                    There can be two solutions.

                    1) Have an onload event on the rich:tab. This will mostly solve my problem
                    2) Trigger ontabenter event for the selected tab.

                    Please let me know how to proceed further.

                    Regards
                    Anand

                    • 7. Re: rich:tab content to be generated on load of the tab
                      anandsaranath

                      Hi,

                      Sorry, I misunderstood your question. I was thinking of switchType as ajax for the tabPanel. I will try the ajax tab and will post the result.

                      Regards
                      Anand

                      • 8. Re: rich:tab content to be generated on load of the tab
                        anandsaranath

                        Hi,

                        I tried ajax tabs. It still did not work. The selectedTab (here, it is the first tab -- Running Jobs tab) does not display the information from the runningJobs.xhtml file immediately. The events do not get triggered on load of the tab. If I tab onto another tab and come back to this tab, I see the contents being displayed.

                        I am attaching the code that I have. please take a look and let me know your ideas.

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
                        l1-transitional.dtd">
                        <html xmlns="http://www.w3.org/1999/xhtml"
                        xmlns:ui="http://java.sun.com/jsf/facelets"
                        xmlns:h="http://java.sun.com/jsf/html"
                        xmlns:f="http://java.sun.com/jsf/core"
                        xmlns:a4j="http://richfaces.org/a4j"
                        xmlns:c="http://java.sun.com/jstl/core"
                        xmlns:rich="http://richfaces.org/rich">

                        <a4j:keepAlive beanName="RunningJobsBean" />
                        <rich:tabPanel switchType="ajax" selectedTab="runningJobsTab">
                        <rich:tab label="Running Jobs" id="runningJobsTab" switchType="ajax">
                        <a4j:support event="oncomplete" reRender="ij" ajaxSingle="true">
                        <a4j:actionparam assignTo="#{RunningJobsBean.serviceId}" value="#{ServicesQueryBean.serviceId}
                        " actionListener="#{RunningJobsBean.queryJobs}"/>
                        </a4j:support>
                        <h:outputText value="in test tab #{RunningJobsBean.serviceId}" />
                        <a4j:outputPanel id="ij">
                        <ui:include src="/runningJobs.xhtml" />
                        </a4j:outputPanel>
                        <a4j:log />
                        end
                        </rich:tab>
                        <rich:tab label="Scheduled Jobs" switchType="ajax">
                        <!-- <ui:include id="scheduledJobsPage" src="/scheduledJobs.xhtml" /> -->
                        </rich:tab>
                        <c:forEach items="#{Queues.queues}" var="queue">
                        <rich:tab label="#{queue}" switchType="ajax">
                        <ui:include src="/queueJobs.xhtml"/>
                        </rich:tab>
                        </c:forEach>
                        </rich:tabPanel>


                        Regards
                        Anand

                        • 9. Re: rich:tab content to be generated on load of the tab
                          nbelaevski

                          Hi Anand,

                          Client handlers are not fired on initial load. I suggest that you change bean logic, so that:

                          1. For the first time the bean is accessed, the contents of default tab is loaded.
                          2. When tabs are switched, action or actionListener is used to track the tab switch in bean.

                          • 10. Re: rich:tab content to be generated on load of the tab
                            anandsaranath

                            Hi,

                            I tried this and it works fine for me.

                            Now, as part of the page that accepts requests, I am querying the back end to get the information necessary for the default tab and displaying it as if it is getting displayed as part of onload. After that, I also have configured ontabenter event to fire the same query to the backend.

                            Thanks for your timely help. I truly appreciate it.

                            Regards
                            Anand

                            • 11. Re: rich:tab content to be generated on load of the tab
                              supremelmfz

                              Is there any reason that you don't bind backing beans into doing so?

                              <rich:tabpanel id="tabpanel" binding="#{bean.tabpanel}">
                              </rich:tabpanel>

                              bean.java

                              .
                              private HtmlTabPanel tabpanel;

                              public HtmlTabPanel getTabPanel()
                              {
                              tabpanel = new HtmlTabPanel();
                              HtmlTab tab = new HtmlTab();
                              /** Add anything here to modify your tab */
                              HtmlDataTable table = new HtmlDataTable();
                              /** Add anything here to modify your table */
                              tab.getChildren().add(table);
                              tabpanel.getChildren().add(tab);
                              }

                              public void setTabPanel(HtmlTabPanel tabpanel)
                              {
                              this.tabpanel = tabpanel;
                              }

                              If you need more than 1 tab, just use a loop like regular java to generate tabs...

                              this worked for me, hope it helps