2 Replies Latest reply on Sep 13, 2010 10:02 AM by dolos

    Multiple JSF's in TabPanel

    dolos
    dolos Sep 9, 2010 1:35 PM

      Hi everybody.

       

      I've been doing some pages to edit tables from a database. The structure of that pages is very simple, a dataTable with the records from the DB and actionlinks to edit, view and delete each record. Also I have a button to add a new record. The edit, delete, view and add operations uses a modal panel to show some data and, if needed, capture something. So my pages follow a "template" like this:

       

      <f:view>
      <html>
      <head>
      </head>
                   <body>
      <rich:panel header="Administración de Dependencias">
      <h:form>
      <a4j:commandLink>
      <h:graphicImage style="border: 0px" value="/resources/Iconos/add.png"/>
      </a4j:commandLink>
      <rich:dataTable>
      </rich:dataTable>
      </h:form>
      </rich:panel>
      <a4j:keepAlive beanName="Bean"/>
      <rich:modalPanel autosized="true" id="modalDelete" minWidth="250">
      <h:form>
      </h:form>
      </rich:modalPanel>
      <rich:modalPanel autosized="true" id="modalEdit">
      <h:form>
      </h:form>
      </rich:modalPanel>
      <rich:modalPanel autosized="true" id="modalView" minWidth="250">
      <h:form>
      </h:form>
      </rich:modalPanel>
      </body>
      </html>
      </f:view>

       

      <f:view>
    <html>
        <head>
         Some tags...     
        </head>
        <body>
            <rich:panel header="Panel">
                <h:form>
                    <a4j:commandLink>
                  <h:graphicImage style="border: 0px" value="/resources/Iconos/add.png"/>
                  </a4j:commandLink>
              <rich:dataTable>
                        Data Columns and Action column with actionlinks to edit, view and delete
              </rich:dataTable>
                </h:form>
         </rich:panel>
            <a4j:keepAlive beanName="Bean"/>
         <rich:modalPanel autosized="true" id="modalDelete" minWidth="250">
             <h:form>
                    Confirm message to delete and action links (OK or NO)
             </h:form>
            </rich:modalPanel>
         <rich:modalPanel autosized="true" id="modalEdit">
          <h:form>
                    Fields to edit data...
          </h:form>
            </rich:modalPanel>
         <rich:modalPanel autosized="true" id="modalView" minWidth="250">
          <h:form>
                    Fields to show data...
          </h:form>
         </rich:modalPanel>
        </body>
    </html>
</f:view>

       

      Everything works great! But now I want to do something a little more complex. I need to edit a table with relationships to other tables, and edit that relationships too, so I have a Tab panel with a tab to general data from the main table, and tabs to edit each other tables. I'm tryng to edit 6 diferent tables so I think a single JSF will be too big, so I do a JSF for each secondary table and a JSF with the tabpanel and the fields needed to the main table. The problem is I don't know how to organize the forms in this pages. Now I have a form that contains all the tabpanel  in the main page, and in the secondary pages i have changed the above template to use a4j:form instead of h:form but I'm not sure it is the best way to do it. It works in FireFox and Chrome, but I get errors in Internet Explorer so my question is What is the best way to organize the forms in this case? Can I have multiple forms in a TabPanel?

        • 1. Re: Multiple JSF's in TabPanel
          ilya_shaikovsky
          ilya_shaikovsky Sep 10, 2010 4:44 AM (in response to dolos)

          JSF not supports nested forms. No matter a4j: or h: form used - you will still have nested HTML form elements.

          1 of 1 people found this helpful
            • Actions
          • 2. Re: Multiple JSF's in TabPanel
            dolos
            dolos Sep 13, 2010 10:02 AM (in response to ilya_shaikovsky)

            Ok, thank's for that info =) So the correct way would be to have forms separated in each jsf? I have tried that but have some problems... First I need to check the value of a rich:inputNumberSpinner in javascript, searchign around I have found this way to do it:

             

            document.getElementsByName(idSpinner)[0].value;

             

            but I get undefined in IE, not in chrome or FireFox... There's a way to get that value working in all the browsers?

             

            Second, there's a h:selectOneMenu in modal panels that shows a validation error saying couldn't assign null to the variable in the backing bean (a int) but I don't understand why it's trying to do that, the list is always with data and always one selected... do you have any idea? Thanks in advance =)

              • Actions