Create a tab in tabPanel programmatically

[nohacks9]

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

[ilya_shaikovsky]

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

[nohacks9]

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("content.xhtml");

Thanks

Phil

[nohacks9]

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

[ilya_shaikovsky]

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

[nohacks9]

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

[nohacks9]

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>

[nohacks9]

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/

[ilya_shaikovsky]

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?