![]() |
![]() |
![]() |
![]() |
Create the layout
- From the 'Layouts' page on the Object Palette, choose 'Border' and click once in the Empty Space in the Working Model.
- Select LeftSide from the 'Layouts' page, and click once in the North of the Border Layout. A leftside layout will appear in the "North" section.
- Select Flow from the 'Layouts' page, and click once in the empty space of the leftside layout.
- From the 'Basic' page, choose 'Button'. Click four times in the Flow layout to place four buttons into it.
- Select Grid from the 'Layouts' page, and click once in the empty space in the leftside layout.
Before adding items to the Grid, we will edit its properties.
- Go to the composer page for the Grid.
- Change the vertical gap to 0.
- Change the number of columns to 4.
Now we will add items to the grid.
- From the 'Basic' page, choose 'Label'.
- Click once in each of the top four spaces of the grid to place a label in each space.
- Select TextField from the 'Basic' page, and click once in each of the bottom four spaces of the grid to place TextFields there.
- 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.
- Click once on the first button.
- Change the Object name of the button to "connect".
- Change the Button text of the button to "connect".
- Click once on the second button.
- Change the Object name of the button to "showAvailable".
- Change the Button text of the button to "show available items".
- Click once on the third button.
- Change the Object name of the button to "previous".
- Change the Button text of the button to "previous".
- Click once on the fourth button.
- Change the Object name of the button to "next".
- Change the Button text of the button to "next".
Next we will change the labels in the grid display.
- Click once on the first label (in the upper left-hand corner of the grid).
- Change the Label text of the label to "Product number".
- Click once on the second label.
- Change its Label text to "Description".
- Click once on the third label.
- Change its Label text to "Quantity on Hand".
- Click once on the fourth label.
- Change its Label text to "Purchase Cost".
Now we will change the names of the TextFields in the grid.
- Click once on the first TextField (in the bottom left-hand corner of the grid).
- Change the Object name of the TextField to "productNumber".
- Set the number of columns to 20.
- Click once on the second TextField.
- Change its Object name to "description".
- Click once on the third TextField.
- Change its Object name to "quantityOnHand".
- Click once on the fourth TextField.
- Change its Object name to "purchaseCost".
You have now set up the user interface for 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".
You have now set up the user interface for your database program.
Data Representations, Inc. http://www.datarepresentations.com support@datarepresentations.com sales@datarepresentations.com |
![]() |
![]() |
![]() |
![]() |