tabView - common content

[holek]

Hi,

is there any way to share content between tabs in tabView, like this:

Code: Select all

 <p:tabView >
            <p:tab title="Tab 1">
                Tab 1 content
            </p:tab>
            <p:tab title="Tab 2">
                Tab 2 content
            </p:tab>
            <p:tab title="Tab 3">
                Tab 3 content
            </p:tab>
           content rendered on all tabs
        </p:tabView>

I'm doing migration on my projects from ICEfaces 1.8.2a to PrimeFaces 3.*,
this funcionality works on icefaces panelTabset component and I have no idea how to do something similar in primefaces ( i dont want to insert the same content on all p:tab or move shared content outside tabview ).

thanks,

Andrzej

[leventgny]

Did you try with using ui:composition and ui:include ?

[cagatay.civici]

ui:include.

[holek]

thanks for answer,

but it's not so simple

i'm implementing wizard in p:tabView ( i need clickable headers ),
so I'm doing something like this:

Code: Select all

   <script type="text/javascript">
            var rd = false;
            var oldTabIndex = 0;
            var newTabIndex = 0;
        </script>
         <p:remoteCommand name="nextView" update="tvAnkieta,ankieta_id,krokankiety" process="tvAnkieta,krokankiety" oncomplete="if(!args.validationFailed ) {rd = true; tvAnkieta.select(newTabIndex)}"/>
        <p:tabView id="tvAnkieta" dynamic="true" activeIndex="#{bean.selectedIndex}" widgetVar="tvAnkieta" onTabShow="oldTabIndex =  tvAnkieta.getActiveIndex();" onTabChange="newTabIndex = index; if(rd == false) { $('.ui-submit-param').remove();nextView(); return false;} else {rd = false;}">
            <p:ajax event="tabChange" listener="#{bean.onTabChange}" process="tvAnkieta" update="tvAnkieta,:form:wizard_actions,:form:krokankiety"/>
            <p:tab title="Dane podstawowe">
            </p:tab>
            <p:tab title="Szablony">
            </p:tab>
            <p:tab title="Edytor ankiety">
            </p:tab>
            <p:tab title="Opcje">
            </p:tab>
            <p:tab title="Wysylka">
            </p:tab>
        </p:tabView>
        <h:panelGroup id="krokankiety" layout="block">
            <ui:include src="/WEB-INF/pages/wizard/#{bean.wizardPage}.xhtml" />
        </h:panelGroup>

i'm processing current tab and if there is no validationErrors I change tab with javascript,
so i need to process only component with id krokankiety ( current tab ) and i want to put it into tabView so it looks nicely
if I add ui:include in all p:tabs there are multpile IDs .

maybe there is a way to do clickable headers on p:wizard ( i also want to click on every tab ) ?

Andrzej

[holek]

Hi again,

finally i did this and it seems that now its ok for me:

Code: Select all

  <script type="text/javascript">
            var rd = false;
            var oldTabIndex = 0;
            var newTabIndex = 0;
        </script>
         <p:remoteCommand name="nextView" update="tvAnkieta,ankieta_id" process="tvAnkieta" oncomplete="if(!args.validationFailed ) {rd = true; tvAnkieta.select(newTabIndex)}"/>
        <p:tabView id="tvAnkieta" dynamic="true" activeIndex="#{bean.selectedIndex}" widgetVar="tvAnkieta" onTabShow="oldTabIndex =  tvAnkieta.getActiveIndex();" onTabChange="newTabIndex = index; if(rd == false) { $('.ui-submit-param').remove();nextView(); return false;} else {rd = false;}">
            <p:ajax event="tabChange" listener="#{bean.onTabChange}" process="tvAnkieta" update="tvAnkieta,:form:wizard_actions"/>
            <p:tab title="Dane podstawowe">
              <h:panelGroup layout="block" rendered="#{bean.selectedIndex eq 0}">
                  <ui:include src="/WEB-INF/pages/wizard/page1.xhtml" />
              </h:panelGroup>
            </p:tab>
            <p:tab title="Szablony">
               <h:panelGroup layout="block" rendered="#{bean.selectedIndex eq 1}">
                  <ui:include src="/WEB-INF/pages/wizard/page2.xhtml" />
              </h:panelGroup>
            </p:tab>
            <p:tab title="Edytor ankiety">
               <h:panelGroup layout="block" rendered="#{bean.selectedIndex eq 2}">
                  <ui:include src="/WEB-INF/pages/wizard/page3.xhtml" />
              </h:panelGroup>
            </p:tab>
            <p:tab title="Opcje">
               <h:panelGroup layout="block" rendered="#{bean.selectedIndex eq 3}">
                  <ui:include src="/WEB-INF/pages/wizard/page4.xhtml" />
              </h:panelGroup>
            </p:tab>
            <p:tab title="Wysylka">
               <h:panelGroup layout="block" rendered="#{bean.selectedIndex eq 4}">
                  <ui:include src="/WEB-INF/pages/wizard/page5.xhtml" />
              </h:panelGroup>
            </p:tab>
        </p:tabView>

Andrzej