Making Your Own Card File

In this example, a simple standalone card file application is designed. Ultimately, the card file will contain: When all the components have been added to the layout, your card file should look like this:

Select the Right Container

Since the application being built is meant to run outside of a browser, the main container should be a frame instead of a panel.

To change container type from Panel (the default) to Frame:

  1. Choose GUI -> Set Window Type.
  2. In the Main Container dialog box, select the untitled panel and click Frame.
  3. Click OK to establish the change.

Modify the Gridbag

The gridbag layout panel should have a 6 (rows) by 4 (columns) grid.

To add a row, click on a corner square and press the Up Arrow or Down Arrow key.

To delete a column, click on a corner square and press the Delete key.

For detailed information on changing the grid, see Create a Layout Grid.

Add the Components

You will need to add the following components:

To add a component:

  1. Click on a component in the GUI builder palette.
  2. Click on a cell in the gridbag.

For details on adding, modifying, and deleting components from the gridbag, see Add Components to the Layout Grid.

Once all the components have been added, save the file.

Label Text Fields and Buttons

The next step in creating the card file is to label the text fields and buttons.

To add labels to the buttons:

  1. Select a button component.
  2. Open the attribute editor by clicking on its button in the main toolbar.
  3. Apply the label for the button by typing its name in the text box.

Although Gui builder provides a unique name for each component added to the layout, the names are generic and indistinguishable (for example, button1, button2, ...). You should assign unique IDs to the components to ensure that behavior is added to the correct component. For example, the following component IDs were made for the card file:

Replaced the textfield1 ID with nameTextfield.
Replaced the textfield2 ID with phoneTextfield.
Replaced the textfield3 ID with emailTextfield.
Replaced the button1 ID with addButton.
Replaced the button2 ID with findButton.
Replaced the list1 ID with namesList.
Replaced the button3 ID with deleteButton.

You will see these component IDs in the Adding Behavior to the Card File section.

Preview the Card File

Preview the card file GUI by choosing Preview from the Mode list. The Mode list is located to the right of the palette.

Generate Java Code

Once the card file layout is complete, you need to generate the Java source file for the layout:
  1. Select the frame by clicking in the area around the GUI layout in the layout window.
  2. Choose GUI -> Save Generate GUI File.
  3. Check your project directory for a .gui file.
Now you are ready to add behavior to the components.

See also:

Adding Behavior to the Card File
Adding a Third Party Component
Laying Out the Interface
Modifying Components in the Grid
Positioning Components in Cells
Resizing the Window