8 Replies Latest reply on Aug 18, 2010 4:30 AM by Ilya Shaikovsky

    Create a tab in tabPanel programmatically

    phil Wilson Newbie

      Hi Guys,

       

      I would like to create or add a rich:tab to a rich:tabPanel programmatically.

       

      I have looked around for a while and found several examples but none show how to create a tab on the fly. I have seen the following examples.

       

      http://in.relation.to/11633.lace

      http://community.jboss.org/message/56559#56559

      http://community.jboss.org/message/22984

      http://mkblog.exadel.com/ria/dynamically-creating-richfaces-tabs/

       

      These are great examples but I would like to create and delete tabs from a dropdown menu selection.

       

      It is not ok to have the tabs created just rendered=false, then change the state to rendered=true/false when that tab is selected. Some of the tabs will contain a lot of data and I dont want to pull this all down at once.

       

      How do I truly add tabs with content on the fly??

       

       

      Thanks

      Phil

        • 1. Re: Create a tab in tabPanel programmatically
          Ilya Shaikovsky Master

          http://in.relation.to/11633.lace - not uses rendered but removes the tabs from dynamically generated collection. any problems with that solution?

          • 2. Re: Create a tab in tabPanel programmatically
            phil Wilson Newbie

            Thanks for you reply. !!

             

            That is a great example. I dont know if it will not work for me because of the following reasons.

            it uses

             

            <c:forEach items="#{capitalsBean.foundCapitals}" var="cap"> 

            to loop thru a bean and reRender the <a4j:outputPanel id="output">

            <a4j:jsFunction action="#{capitalsBean.remove}" name="myFunc"
                 ajaxSingle="true" reRender="output">

            We will have the tabs in a rich:tabPanel and do not wish to reRender them. The tabs
            will contain data and the state should be saved. The tab will be created or deleted without any
            concern of previous tabs.

            Here is what I would like to do but add content(via ui:include) to the new tab.

            HtmlTab tab = (HtmlTab)application.createComponent(HtmlTab.COMPONENT_TYPE);
            tab.setLabel("NewTab");
            tab.setName("name");
            tabPanel.getChildren().add(tab);
            panelGrid.getChildren().add(tabPanel);

            add this to new tab <ui:include src="content.xhtml"></ui:include>

             

            Include includeTag = new Include();
            includeTag.setId("content1");
            includeTag.setViewId("c
            ontent.xhtml");

            Thanks

            Phil

            • 3. Re: findComponent  not working -- Re: Create a tab in tabPanel programmatically
              phil Wilson Newbie

              Hi,


              I can create the TabPanel and tabs fine. I am having trouble accessing it after I create tabPanel.

               

                  public void createRichTabPanel(TabItem tabItem){       
                          TabsBean tabsBean = (TabsBean) FacesUtil.getManagedObject(ctx, TABS_BEAN);
                          Application application = ctx.getApplication();
                          HtmlTabPanel tabPanel = (HtmlTabPanel)application.createComponent(HtmlTabPanel.COMPONENT_TYPE);
                          tabPanel.setSwitchType("ajax");

               

                              HtmlTab tab = (HtmlTab)application.createComponent(HtmlTab.COMPONENT_TYPE);
                              tab.setLabel(tabItem.getTabLabel());
                              tab.setName(tabItem.getTabLabel());
                              tabPanel.getChildren().add(tab);
                              tabPanel.setId("commonTab");
                              tabsBean.getPanelGrid().getChildren().clear();
                              tabsBean.getPanelGrid().getChildren().add(tabPanel);
                              FacesUtil.setManagedObject(ctx, FacesUtil.REQUEST_SCOPE, TABS_BEAN,tabsBean);               
                         }

               

              I see the tabPanel on the browser ok. I can't reference the tabPanel with the following.

               

              HtmlTabPanel tabPanel = (HtmlTabPanel) ctx.getViewRoot().findComponent("commonTabForm:commonTab");

              or

              HtmlTabPanel tabPanel = null;

              UITabPanel panel = (UITabPanel) ctx.getViewRoot().findComponent("commonTabForm:commonTab");
              tabPanel = (HtmlTabPanel) panel;

               

               

              Is there a problem with the findComponent ??


              Thanks

              Phil

              • 4. Re: findComponent  not working -- Re: Create a tab in tabPanel programmatically
                Ilya Shaikovsky Master

                maybe there are other naming containers around your tabs? like subviews or includes? in that case -  commonTabForm:commonTab - is not valid clientId

                • 5. Re: findComponent  not working -- Re: Create a tab in tabPanel programmatically
                  phil Wilson Newbie

                  Thanks for your reply. This is my xhtml

                   

                  <ui:composition 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:rich="http://richfaces.org/rich"
                      xmlns:t="http://myfaces.apache.org/tomahawk"
                      xmlns:fn="http://java.sun.com/jsp/jstl/functions">

                   

                  <h:form id="commonTabForm">

                  <h:panelGrid id="tabsPanelGrid" binding="#{tabsBean.panelGrid}"></h:panelGrid>
                  </h:form>
                  </ui:composition>

                   

                  This is the view source from browser

                   

                  <td><script type="text/javascript">RichFaces.tabPanel['commonTabForm:commonTab']={'id':'commonTabForm:commonTab','ontabchange':''} ;
                  </script><table border="0" cellpadding="0" cellspacing="0" class="rich-tabpanel " id="commonTabForm:commonTab" style="width:">

                   

                   

                  Thanks

                  Phil

                  • 6. Re: findComponent  not working -- Re: Create a tab in tabPanel programmatically
                    phil Wilson Newbie

                    Hey,

                     

                    I could not get the findComponent to work so I did it this way..FYI

                     

                    <ui:composition 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:rich="http://richfaces.org/rich"
                        xmlns:t="http://myfaces.apache.org/tomahawk"
                        xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                        xmlns:c="http://java.sun.com/jstl/core"
                        >

                     

                    <h:form id="commonTabForm">
                    <h:panelGrid id="tabsPanelGrid" binding="#{tabsBean.panelGrid}"></h:panelGrid>

                     

                        <a4j:outputPanel id="output">
                            <rich:tabPanel id="tabPanel" width="1000" height="500">
                            <c:forEach items="#{usersTabList}" var="tab" >
                             <rich:tab label="#{tab.tabLabel}" >
                                  test
                             </rich:tab>
                            </c:forEach>
                       </rich:tabPanel>   
                       </a4j:outputPanel>

                     

                    </h:form>
                    </ui:composition>

                    • 7. Re: findComponent  not working -- Re: Create a tab in tabPanel programmatically
                      phil Wilson Newbie

                      Ok.

                       

                      I am back with this issue. The orginal tabs are being created ok.

                       

                      Now I need to add one dynamically.

                       

                      component,component2,tabPanel,tabPanel2 are all returning null.

                       

                      public void createTabs(String includedPage4Tab){
                                 logger.info("Creating tabs");
                                 Application application = ctx.getApplication();
                                
                                 UIViewRoot root = FacesContext.getCurrentInstance().getViewRoot();
                                 UIComponent component = root.findComponent("tabPanelForm:tabPanelRich");
                                 UIComponent component2 = root.findComponent("tabPanelRich");          
                                
                                 tabPanel = (HtmlTabPanel)ctx.getViewRoot().findComponent("tabPanelForm:tabPanelRich");
                                 tabPanel2 = (HtmlTabPanel)ctx.getViewRoot().findComponent("tabPanelRich");  

                                 // findComponent always returns null

                       

                       

                      Here is the HTML source code.

                      <tr>
                      <td><form id="tabPanelForm" name="tabPanelForm" method="post"
                      action="/smores/faces/pages/commontab/content.xhtml">
                      <span id="tabPanelForm:output"><script type="text/javascript">
                      RichFaces.tabPanel['tabPanelForm:tabPanelRich']={'ontabchange':'','id':'tabPanelForm:tabPanelRich'} ;
                      </script><table border="0" cellpadding="0" cellspacing="0" class="rich-tabpanel "

                      id="tabPanelForm:tabPanelRich"


                      Any help would be great.

                      Thanks
                      Phil



                      http://thepeninsulasedge.com/blog/?p=136
                      http://www.java2s.com/Open-Source/Java-Document/JBoss/jboss-forums/org/jboss/portlet/forums/ui/JSFUtil.java.htm
                      http://www.jsfcentral.com/articles/trinidad_2.html
                      http://mkblog.exadel.com/tag/richfaces-howto/page/7/





                      • 8. Re: findComponent  not working -- Re: Create a tab in tabPanel programmatically
                        Ilya Shaikovsky Master

                        I prefer to work with the with the lsit which iterated by c:forEach rather then create components getting their instances http://in.relation.to/11633.lace

                         

                        Why you just can't add new items to usersTabList?