Create the layout

---

1. From the 'Layouts' page on the Object Palette, choose 'Border' and click once in the Empty Space in the Working Model.
2. Select LeftSide from the 'Extended Layouts' page, and click once in the North of the Border Layout. A leftside layout will appear in the 'North' section.
3. Select Flow from the 'Layouts' page, and click once in the empty space of the leftside layout.
4. From the 'Swing' page, choose 'Button' (JButton). Click four times in the Flow layout to place four JButtons into it.
5. Select Matrix from the 'Extended Layouts' page, and click once in the empty space in the leftside layout.

A Matrix Layout is very useful for creating standard forms with textfields and labels. It allows you to place components in a grid with each column or row taking the smallest 'preferred' size.

Before adding items to the Matrix, we will edit its properties.

6. The properties for the Matrix should be displayed in the Composer.
7. Change the vertical gap to 0.
8. Change the number of columns to 4.

Now we will add items to the Matrix.

9. From the 'Swing' page, choose 'Label' (JLabel).
10. Click once in each of the upper four spaces of the Matrix to place a JLabel in each space.
11. From the 'Swing' page, choose 'TextField' (JTextField).
12. Click once in each of the lower four spaces of the Matrix to place a JTextField in each space.
13. Choose "Hide all empty panels" from the parts menu. This will hide the empty spaces in the layouts.

We will now set up some of the properties for the parts which we have just added.

14. Click once on the first button.
15. Change the Object name of the button to "connect".
16. Change the JButton text of the button to "Connect".
17. Click once on the second button.
18. Change the Object name of the button to "showAvailable".
19. Change the JButton text of the button to "Show available items".
20. Click once on the third button.
21. Change the Object name of the button to "previous".
22. Change the JButton text of the button to "Previous".
23. Click once on the fourth button.
24. Change the Object name of the button to "next".
25. Change the JButton text of the button to "Next".

Next we will change the labels in the Matrix display.

26. Click once on the first label (in the upper left-hand corner of the Matrix).
27. Change the JLabel text of the label to "Product number".
28. Click once on the second label.
29. Change its JLabel text to "Description".
30. Click once on the third label.
31. Change its JLabel text to "Quantity on hand".
32. Click once on the fourth label.
33. Change its JLabel text to "Purchase cost".

Now we will change the names of the TextFields in the Matrix.

34. Click once on the first TextField (in the bottom left-hand corner of the Matrix).
35. Change the Object name of the TextField to "productNumber".
36. Click once on the second TextField.
37. Change its Object name to "description".
38. Set the number of columns to 20. This will give more room to dispay the descriptions.
39. Click once on the third TextField.
40. Change its Object name to "quantityOnHand".
41. Click once on the fourth TextField.
42. Change its Object name to "purchaseCost".

You have now set up the user interface for the first stage of your database program. To check that the names are correct, take a moment to confirm that your buttons read, from left to right, "Connect", "Show available items", "Previous" and "Next". Your labels should read, from left to right, "Product Number", "Description", "Quantity on Hand", and "Purchase Cost". Your TextFields should have Object names of "productNumber", "description", "quantityOnHand", and "purchaseCost".