2 Replies Latest reply on Sep 13, 2010 10:02 AM by Osvaldo González

    Multiple JSF's in TabPanel

    Osvaldo González Newbie

      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 Master

          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
          • 2. Re: Multiple JSF's in TabPanel
            Osvaldo González Newbie

            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 =)