6 Replies Latest reply on Sep 9, 2009 10:22 AM by Nick Belaevski

    scoped tabindex,  focus nightmare,  mission impossible?

    Francisco Jose Peredo Noguez Master

      Lets say you have 2 components:

      Component 1

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:s="http://jboss.com/products/seam/taglib">
      
       A <h:inputText value="" tabindex="1" />
       B <h:inputText value="" tabindex="2"/>
      
      </ui:composition>
      


      Component 2
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:s="http://jboss.com/products/seam/taglib">
      
       C <h:inputText value="" tabindex="1" />
       D <h:inputText value="" tabindex="2"/>
      
      </ui:composition>
      


      Used in a page:

      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a="http://richfaces.org/a4j"
       template="layout/template.xhtml">
      <ui:define name="body">
      
      
      <ui:include src="/Componente1.xhtml" />
      
      <br/>
      
      <ui:include src="/Componente2.xhtml" />
      
      </ui:define>
      
      </ui:composition>
      
      


      Is there any trick in richfaces that can make this work so that when I press the tab key it goes A -> B ->C -D instead of A->C->B-D ?


        • 1. Re: scoped tabindex,  focus nightmare,  mission impossible?
          Nick Belaevski Master

          Hi,

          You can reset tabindex using jQuery and then browser will use the desired tab sequence.

          • 2. Re: scoped tabindex,  focus nightmare,  mission impossible?
            Francisco Jose Peredo Noguez Master

            I dont get what you mean, I do not want to have to manually set the tab index, this cases is just a proof of concept example, in reality I have around 50 much more complex components I need to mix in hundreds of different ways... If I were working in Swing I would have total control on how the [focus transverses=>http://gaps-blog.blogspot.com/2008/12/controlling-tabindex-in-java-swing.html] and give preference to controls inside the same container, but this does not work:

            <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:s="http://jboss.com/products/seam/taglib"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:rich="http://richfaces.org/rich"
             xmlns:a="http://richfaces.org/a4j"
             template="layout/template.xhtml">
            <ui:define name="body">
            
            <div tabindex="1">
            <ui:include src="/Componente1.xhtml" />
            </div>
            
            <div tabindex="2">
            <ui:include src="/Componente2.xhtml" />
            </div>
            
            </ui:define>
            
            </ui:composition>
            


            The tabindex in the containig div should "scope" the tabindexes inside it so that it wouldnt "jump" between divs and follow A->B->C->D.But I have been reading XHTML/CSS specs and it sees that there is no support for scoped tabindex...

            Without a way to have scoped tabindex, facelets and JSF 2.0 are useless, there is no way to build reusable components and assemble them I different ways, because the tabindex numbers have to be pre-configured and dependent on whatever is outside the component (too much coupling), and manually resetting all of them using jQuery is not an option, I have pages with 8 or 9 controls with dozens of form controls inside them, that may change anytime... this solution would be incredibly fragile, any change to any control would a have a ripple effect on all other, anywhere they were used!

            Just imagine having to reconfigure the tabindex of something like this (see the "Your company's app" part of the image) and anything around it each time you have to reuse the "new contact" form just because you added a new field.

            • 3. Re: scoped tabindex,  focus nightmare,  mission impossible?
              Nick Belaevski Master

              Yes, HTML specification doesn't allow this and my point was that there's no ready solution for this problem. The only portable one I can name now is dynamically scripting tab indexes for HTML elements - this is something that rich:modalPanel currently does to handle tab navigation.

              • 4. Re: scoped tabindex,  focus nightmare,  mission impossible?
                Francisco Jose Peredo Noguez Master

                Hi!
                Thanks for your answer. Sorry for my previous rant, but I was kind of desperate about this...

                I was hoping you were not going to answer that there is no ready solution for this problem, guess I'll have to forget about reutilization...

                I wonder if RichFaces 4.0 could include some kind of tab scoping container so that if I write:


                <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:s="http://jboss.com/products/seam/taglib"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:a="http://richfaces.org/a4j"
                 template="layout/template.xhtml">
                <ui:define name="body">
                
                <a:tabScope tabindex="1">
                <ui:include src="/Componente1.xhtml" />
                </a:tabScope >
                
                <a:tabScope tabindex="2">
                <ui:include src="/Componente2.xhtml" />
                </a:tabScope >
                
                </ui:define>
                
                </ui:composition>
                
                



                it would alter the tabindexes of the components inside to generate something like:


                
                A <h:inputText value="" tabindex="11" />
                B <h:inputText value="" tabindex="12"/>
                
                C <h:inputText value="" tabindex="21" />
                D <h:inputText value="" tabindex="22"/>
                
                


                It seems simple, it just prefixes the internal tabindexes with the external ones...would it be doable?