Complex forms? Simple and easy!

   In this post I'll show you how to make form with such layout simply and easy. The idea is to use trinidad table in which inputs will stretch the entire width of a cell.

   Let's make skin with styles for inputs inside trinidad table (file name TrinidadTable.css in folder css) and file trinidad-skins.xml in WEB-INF directory:

   In trininad-skins add this code: set this skin TrinidadTable as application's skin by editing trinidad-config.xml: and add this code to TrinidadTable.css:    
   Now we have prepared application to make the layout. At first we need to define a number of columns are needed in the table. To find out this number let's draw vertical lines at each edge of input:

In this case 9 columns are required. As you see width of each cell I've calculated.
 
   To make JDeveloper show Trinidad components in the component palette we should add two JSP tag library to the project:

Drop onto the page fragment tableLayout and set the value of styleClass equal "StretchInputs":

add to table one table row with 9 cells inside and set width for each as in the picture:    Then add two rows: one for label and one for inputs. There is one label in the row, so we can stretch single cell the entire width of table. To do this set colSpan of cellLayout equal 9. Drop outputLabel into the cell. In the second row add three cells with colSpan=5 in first cell and colSpan=3 in third. Drop outputText into the first cell and selectOneChoice into third. You should have code like this: If all was done properly page shoud be like on the picture below:

Now we can add remaining rows with cells: Result:

To make gap between table and window edges let's add custom class for table to the skin file: and add this class name to table's styleClass: and add row with cell for form caption: this row should be second it the table, row with empty cells and sizes should always be first in order to make browser be able to calculate correctly width of table. As you see a set styleClass FormCaption, let's implement it in the skin file: Now let's look at the page in different browsers (IE <7 is not a browser =)):

   To make your life easier you can add context-params into web.xml file in the ViewController: Conclusion: with trinidad tables I can easily create layouts such this.

Yes, this is the face of adf application our company develops. You can download application here.

See the part 2.