The Grid container organizes content in rows. Rows are stored in the sequence in which they are created. The current implementation does not allow the deveoper to store rows in a custom index.

JavaFX Composer allows you to create a Grid, set the desired number of cells and drag and drop components from the palette to a selected Grid cell. JavaFX Composer also provides some properties that are only used to design the application but are not reflected in runtime. These properties are not supported in the current, preview implementation of Grid. Other properties work as with any container.

In this section you create a Grid, add UI components to the Grid's cells, and rearrange the cells in the Grid.

To create a simple Grid:

1. Create a JavaFX Desktop Business Application. Name it SimpleGrid.
2. Drag a Grid component from the Controls section of the Palette and drop it into the Design area.

   A Grid template is also available. This is a template that includes a Grid container.

3. In the Navigator window, select the Grid. Now in the Properties window, add 5 design columns and 5 design rows.
   

   The Design Rows/Columns properties are provided only to simplify work in design time. These properties are not reflected in runtime because they are not supported by the preview implementation of Grid. However, when you populate a cell with a UI component, it appears in runtime. Only empty cells added with the Design Rows/Columns properties are excluded from runtime. Note that the Design Rows/Colums properties can be changed either in the Properties window or by the plus (+) and minus (-) signs on the edge of the grid representation in the Design view.

1. Drag a label from the Palette to the upper left cell in the Grid.
   
2. The Label's properties open in the Properties window. In the Properties window, change the Text property to "First Name:".
3. Drag a Text Box from the palette to the second cell in the top row, next to the First Name label.
   
4. In the second and third rows, add Labels and Text Boxes for Surname and Address. Format the same as for the First Name.
   
5. In the fourth row, add 2 labels, one for City and one for State/Provence. Add 2 matching Text Boxes. Put these elements in the first 4 cells.
   

The layout would be better if the First Name, Surname, and Street text boxes took up more horizontal space. You can select one of those text boxes and make it wider, but this widens the entire column of cells. Instead, you can set a UI component to span mutiple cells horizontally.

1. Select the Text Box next to First Name. In the Properties window, click the Layout Info icon in the toolbar. The Layout Info properties display. Change the Grid Horizontal Span property to 4. The text box now spans 4 cells.
   
2. Increase the horizontal spans of the Surname and Street text boxes to 4 cells.

You can either select the UI component and drag and drop it, or you can change the component's Grid X and Grid Y Layout Info properties.

1. In the 5th row, add a label and a text field for the zip/postal code. This leaves a lot of room in the row. Meanwhile, the City text box could use more room. So move the State/province label and text box to the 5th row, in front of the Zip label.
   
   
2. Lastly, add an OK and a Cancel button. You need to add a new row for this. You can add a new row in the Design Rows property, or by dragging the UI component to the border of the Grid where you want it. Try dragging a Button component from the Palette to the bottom border of the 3rd column.
   

3. Relese the mouse button, and the Button component appears in the correct cell in a new row.

   
4. Add another button and change the button texts to OK and Cancel, and the form is complete.
   

You have now designed a UI form using the Grid container. You've seen how to create rows and columns in the grid, how to add UI components to cells, how to size components, and how to move components between cells.

For more information about using NetBeans IDE to develop JavaFX applications, see the following resources: