11 Replies Latest reply on Apr 10, 2007 3:16 PM by Nick Belaevski

    Howto make a tabpanel function as a HTML frame?

    Thai Dang Vu Apprentice

      What I mean is if I have a form in a tabpanel, when I submit that form, only the content of that tabpanel changes. So if I have 2 tabpanels, each of which has a form. Then I can go to the tabpanel 1, fill the form, leave it there, then go to tabpanel 2, fill & submit the form and return to tabpanel 1. The data I filled in the form in the tabpanel 1 must be still there.

      Is this doable?

        • 1. Re: Howto make a tabpanel function as a HTML frame?
          Alex Newbie

          Hi,
          Don't you could use one button for the two tabs and decide what you "want to do" with the action-tag within the button?

          <h:form id="userProfileForm">
           <rich:tabPanel switchType="ajax" id="userProfileTabPanel" height="30%" width="75%">
           <rich:tab id="userProfileTab" label="User Data">
           ...
           </rich:tab>
           <rich:tab id="userContactData" label="Other Data">
           </h:panelGrid>
           </rich:tab>
           ...
           </rich:tabPanel>
          
           <a4j:commandButton action="#{callA.beanMethod}" reRender="content" id="userPButton" value="Ok"/>
          </h:form>
          


          Cu
          Alex

          • 2. Re: Howto make a tabpanel function as a HTML frame?
            Ilya Shaikovsky Master

            If there will some problems in creation your case - please post your code to explain in more details your problem. Then we'll look for the concrete answer

            • 3. Re: Howto make a tabpanel function as a HTML frame?
              Thai Dang Vu Apprentice

              First, thanks Alex and Ilya for your willingness to help.

              I have to confess that I'm a newbie in the JSF & AJAX fields. When I looked at Alex's answer, I don't know what a4j:commandButton is. So I went to Ajax4jsf online demo (http://labs.jboss.com/portal/jbossajax4jsf/demo/index.html) and notice that a4j-include example (http://livedemo.exadel.com/a4j-include/) is what I need (there's a little bit different from what I want - I want 2 data entry wizards in 2 tab panels).

              I think I'll look at all the demos and if I still have questions about this problem, I'll come back to you guys.

              Thanks so much.

              By the way, I left RichFaces for ICEfaces for a couple of hours because RichFaces doesn't have Calendar (the most important to me), Menu, Upload and Progress Bar components. But when I read "Interview with Max Katz" (http://www.jsfcentral.com/articles/katz-06-16-06.html) and looked at ICEfaces, I realized that ICEfaces uses their own components (i.e. if we want to use a component, we have to write sth like ice:component). Now I'll stick with Ajax4jsf and RichFaces because I can still use JSF components

              • 4. Re: Howto make a tabpanel function as a HTML frame?
                Ilya Shaikovsky Master

                B.t.w. Calendar and menu now under progress of development. And some more other components to expand RF functionality. :)

                • 5. Re: Howto make a tabpanel function as a HTML frame?
                  Thai Dang Vu Apprentice

                  Hi Alex, Ilya and others,

                  I am in a real problem now.

                  This is my application structure:


                  This is the faces-config.xml (I don't have the FaceletViewHandler in the faces-config.xml file because of http://labs.jboss.com/file-access/default/members/jbossajax4jsf/freezone/docs/devguide/index.html)

                  <managed-bean>
                   <managed-bean-name>user</managed-bean-name>
                   <managed-bean-class>com.momentumsystems.acegiex.model.User</managed-bean-class>
                   <managed-bean-scope>session</managed-bean-scope>
                   <managed-property>
                   <property-name>username</property-name>
                   <value/>
                   </managed-property>
                   <managed-property>
                   <property-name>password</property-name>
                   <value/>
                   </managed-property>
                  </managed-bean>
                  
                  <navigation-rule>
                   <from-view-id>/user-role/pieces/role-step1.xhtml</from-view-id>
                   <navigation-case>
                   <from-outcome>next</from-outcome>
                   <to-view-id>/user-role/pieces/role-step2.xhtml</to-view-id>
                   </navigation-case>
                  </navigation-rule>
                  
                  <navigation-rule>
                   <from-view-id>/user-role/pieces/role-step2.xhtml</from-view-id>
                   <navigation-case>
                   <from-outcome>next</from-outcome>
                   <to-view-id>/user-role/pieces/role-step3.xhtml</to-view-id>
                   </navigation-case>
                   <navigation-case>
                   <from-outcome>back</from-outcome>
                   <to-view-id>/user-role/pieces/role-step1.xhtml</to-view-id>
                   </navigation-case>
                  </navigation-rule>
                  
                  <navigation-rule>
                   <from-view-id>/user-role/pieces/role-step3.xhtml</from-view-id>
                   <navigation-case>
                   <from-outcome>next</from-outcome>
                   <to-view-id>/user-role/pieces/role-step1.xhtml</to-view-id>
                   </navigation-case>
                   <navigation-case>
                   <from-outcome>back</from-outcome>
                   <to-view-id>/user-role/pieces/role-step2.xhtml</to-view-id>
                   </navigation-case>
                  </navigation-rule>
                  


                  This is my user-role-template.xhtml
                  <!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:a4j="https://ajax4jsf.dev.java.net/ajax">
                  <head>
                   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
                   <title>Facelets: User & Role Management</title>
                   <link rel="stylesheet" type="text/css"
                   href="#{facesContext.externalContext.requestContextPath}/css/stylesheet.css"/>
                  </head>
                  <body>
                  <ui:insert name="header">
                   <ui:include src="/user-role/pieces/header.xhtml"/>
                  </ui:insert>
                  <ui:insert name="body">Default Body</ui:insert>
                  </body>
                  </html>
                  


                  The header.xhtml and stylesheet.css have nothing special inside and they are displayed correctly, so I don't post them here.

                  This is the user-role.xhtml
                  <?xml version="1.0" encoding="UTF-8"?>
                  <!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:rich="http://richfaces.ajax4jsf.org/rich"
                   xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                   xml:lang="en" lang="en">
                  <body>
                  <ui:composition template="/WEB-INF/jsf-template/user-role-template.xhtml">
                   <ui:define name="body">
                   <rich:tabPanel headerAlignment="left" switchType="client">
                   <rich:tab id="userTab" label="User Management">
                   <a4j:include viewId="pieces/user-step1.xhtml"/>
                   </rich:tab>
                   <rich:tab id="roleTab" label="Role Management">
                   <a4j:include viewId="pieces/role-step1.xhtml"/>
                   </rich:tab>
                   </rich:tabPanel>
                   </ui:define>
                  </ui:composition>
                  </body>
                  </html>
                  


                  This is user-step1.xhtml
                  <h:form xmlns="http://www.w3.org/1999/xhtml"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                   xmlns:rich="http://richfaces.ajax4jsf.org/rich">
                   <h:outputText value="User Management - Step 1" />
                   <h:panelGrid columns="1" border="0" width="100%" columnClasses="align-right">
                   <a4j:commandLink reRender="userTab" action="next" value="Next >"/>
                   </h:panelGrid>
                  </h:form>
                  


                  This is user-step2.xhtml
                  <h:form xmlns="http://www.w3.org/1999/xhtml"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                   xmlns:rich="http://richfaces.ajax4jsf.org/rich">
                   <h:outputText value="User Management - Step 2"/>
                   <br/>
                   <h:panelGrid columns="2" border="0" width="100%" columnClasses="align-left, align-right">
                   <a4j:commandLink reRender="userTab" action="back" value="< Back" immediate="true"/>
                   <a4j:commandLink reRender="userTab" action="next" value="Next >"/>
                   </h:panelGrid>
                  </h:form>
                  


                  I don't post the User.java file here because I don't use it in the xhtml files.
                  I'm using ajax4jsf 1.1.0, RichFaces 3.0.1 SNAPSHOT, facelets built from the facelets svn, JSF 1.2_04 RI and tomcat 6.

                  What I want to do can be described in this picture


                  When I access user-role.jsf I can see the upper window in the picture. I want to see the lower window when I click Next and when I click Back in the lower window, I want to get back to the upper window (this application is somewhat like the a4j-include demo, but the demo use h:panelGroup while I use rich:tab). Unfortunately, if I set switchType to client, the User Management tab becomes blank when I click Next. If I set switchType to ajax or server, nothing happens when I click Next.

                  So, do you know what my problem is?

                  Thanks for any of your idea.

                  • 6. Re: Howto make a tabpanel function as a HTML frame?
                    Ilya Shaikovsky Master

                    hm.. Seems I'm able to reproduce you problems.. Seems like a problem while reRendering particular tab. I solve it by wrapping include inside tab into an outputPanel and poiting reRender to this panel.

                    • 7. Re: Howto make a tabpanel function as a HTML frame?
                      Thai Dang Vu Apprentice

                      Thanks Ilya for a good work-around (I didn't think of it). But I think the rich:tab should be fixed or I'll have to group everything in a panel :( Right?

                      • 8. Re: Howto make a tabpanel function as a HTML frame?
                        Ilya Shaikovsky Master

                        Sorry, I missed something from the beggining.. :) It isn't a bug at all, because of the tabPanel structure. "tab" component - isn't a wrapper component for the content inside..
                        It's only renders tab controls. The tab Panel renders the panels.
                        So you can't use "tab" reRendering because only tab header will be reRendered in this case.

                        So this workaround is the only possible solution in this architecture if you use client mode. Or in other modes - you can reRender whole tabPanel - only current tab will be reRendered.

                        • 9. Re: Howto make a tabpanel function as a HTML frame?
                          Thai Dang Vu Apprentice

                          Ah, now I understand what you said (perhaps after 2 weeks working with ajax4jsf and RichFaces). From what you said (I haven't checked it practically), a tab component doesn't produce a tag, so there's no way to replace the content inside a tab. Am I right?

                          • 10. Re: Howto make a tabpanel function as a HTML frame?
                            Ilya Shaikovsky Master

                            The way to replace the content of the particular tab as I've already mentioned is:

                            Ajax and Server modes: reRender the whole tabPanel as it consist only from one tab after every request.

                            client mode - (all tabs at client side) create wrapper inside a tab needed to be reRendered and reRender it. You'll able to reRender concrete tab content.

                            tab in general - only header link to switch states.

                            • 11. Re: Howto make a tabpanel function as a HTML frame?
                              Nick Belaevski Master

                              Here is the RFC http://jira.jboss.com/jira/browse/RF-89 planned to 3.0.2 version. Its resolution will allow to re-render any particular tab.