6 Replies Latest reply on Dec 24, 2011 12:17 PM by apostle

    RichFaces4 popupPanel tabulation

    apostle

      Hello Dear Community,

       

      I have a question related to popupPanel component.

       

      I tried to navigate cursor with 'tab' button on modal popupPanel . When the popup appeared focus was in the first input. When I pushed tab button first time the address line of a browser got the focus. The second time the entire page which is not available because the modal panel was rendered got focus the third time cursor moved to the first input on the popupPanel. This scenario is going to repeat when I push tab button next time.

       

      Is it possible to make navigation with the 'tab' button for the popupPanel?

       

      Thanks.

       

      Message was edited by: Pavel Mart reason: misprints

        • 1. Re: RichFaces4 popupPanel tabulation
          apostle

          Hey guys, any comments?

          Is it possible to navigate between inputs in a popupPanel without mouse use? It really inconvenient if a user has to use mouse every time s/he wants to navigate to the next component on a popupPanel.

           

          I found that the problem with tabulation appears only with modal popupPanels. So, if I set modal="false" for a popupPanel, tabulation work just fine. Once I set modal attribute to "true" it is not possible to navigate between components with 'tab' button.

           

          Any thoughts or comments would be gratefully appreciated

          • 2. Re: RichFaces4 popupPanel tabulation
            ilya_shaikovsky

            Seems you using some older version or the problem is browser-specific. I tried http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=dataTableEdit&skin=blueSky at Chrome and it works for me. After page rendered I'm clicking edit link - popup opened and nothing in focus. Than pressing tab I'm getting to first input and pressing again to next ones.

            • 3. Re: RichFaces4 popupPanel tabulation
              apostle

              Hi Ilya,

              thank you very much for your comment, but it looks like the things a little bit trickier here.

              I guess I found why it works for you. The thing is 2.0.3-b03 mojarra libs(jsf-api and jsf-impl) version are used in the richfaces-showcases application. This libs have rendering problems in IE9. So if you try the link which you sent me in the previous post in IE9, you find that the page is not rendered after you modified an item. As Nick suggested earlier here on the forum(http://community.jboss.org/message/616974#616974) it could be fixed with newer version of the libs. I tried libs with version 2.1.2 and it really fixed the problem with page rendering in IE9, but it looks like it brings problem with tabulation on popupPanel.

               

              Is there any workaround here? Thanks

              • 4. Re: RichFaces4 popupPanel tabulation
                apostle

                Hi guys.

                 

                I really got stuck here. I cannot make it work. To understand what I'm doing wrong I decided to use maven archetype to create richfaces 4 application. I did it as described in the developer guide here

                http://docs.jboss.org/richfaces/latest_4_0_X/Developer_Guide/en-US/html/chap-Developer_Guide-Getting_started_with_RichFaces.html#sect-Component_Reference-Using_RichFaces_with_Maven-Using_the_RichFaces_project_archetype

                 

                After that to add a popupPanel to the page I changed the index.xhtml as shown below:

                 

                <!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:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"

                    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"

                        xmlns:rich="http://richfaces.org/rich"

                >

                 

                <body>

                <ui:composition template="/templates/template.xhtml">

                 

                    <ui:define name="title">RichFaces Sample</ui:define>

                 

                    <ui:define name="body">

                        <h:form prependId="false">

                            <h:outputLabel value="Name:" for="nameInput" />

                            <h:inputText id="nameInput" value="#{richBean.name}">

                                <a4j:ajax event="keyup" render="output" />

                            </h:inputText>

                            <h:panelGroup id="output">

                                <h:outputText value="Hello #{richBean.name}!"

                                    rendered="#{not empty richBean.name}" />

                            </h:panelGroup>

                            <a4j:commandButton value="TEST" execute="@this" oncomplete="#{rich:component('editPane')}.show()"

                                               render="test"/>

                            <rich:popupPanel header="Test popup panel" id="editPane" width="400" height="170">

                                <h:panelGrid columns="3" id="editGrid">

                                    <h:outputText value="Name"/>

                                    <h:inputText value="#{richBean.name}">

                                    </h:inputText>

                                </h:panelGrid>

                                <a4j:commandButton value="Close" onclick="#{rich:component('editPane')}.hide(); return false;"/>

                            </rich:popupPanel>

                        </h:form>

                 

                    </ui:define>

                </ui:composition>

                </body>

                </html>

                 

                 

                I tried to deploy the application on tomcat 6/7 and glassfish3.1/3.1.1 AS. Tabulation in popupPanel works only with chrome browser. It does not work for IE9 and FF6(7).I also tried using different RichFaces versions including the latest snapshot. Still does not work. The RichFaces versions I tried are enumerated below

                 

                    <!--<org.richfaces.bom.version>4.0.0.Final</org.richfaces.bom.version>-->
                    <!--<org.richfaces.bom.version>4.0.1-SNAPSHOT</org.richfaces.bom.version>-->
                    <!--<org.richfaces.bom.version>4.1.0.20110805-M1</org.richfaces.bom.version>-->
                    <org.richfaces.bom.version>4.1.0.20110910-M2</org.richfaces.bom.version>

                 

                Could anyone please tell me how I can make tabulation work for all browsers?

                I also put modified project files here http://dl.dropbox.com/u/3418042/new_project.zip. As I noticed earlier the only change I did is I added a popupPanel to index.xhtml file.

                Any help would be gratefully appreciated.

                • 5. Re: RichFaces4 popupPanel tabulation
                  maze_fr

                  I had the same problem with my popupPanels.

                  I fond this link :

                  https://issues.jboss.org/browse/RF-10758

                  and this link :

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

                  Now it works

                  • 6. Re: RichFaces4 popupPanel tabulation
                    apostle

                    Maze_fr, Thank you for your post and sorry for the so delayed reply.

                     

                    I found a shorter way to fix my trouble. Just used a popup from PrimeFaces framework. It is easy to add to a project with no need to chage web.xml in my case. And the main advantage to me is that it can work with RichFaces.

                     

                    Probably the issue with tabulation has been addressed in a new version of RichFaces, but I do not know for sure.