# Making Your Own Card File

In this example, a simple standalone card file application is designed. Ultimately, the card file will contain:

- Three text boxes with labels: Name, Phone, and Email
- An Add button to add the information in the text boxes to the scrolling list
- A Find button to display the name specified in the Name text field
- A labeled scrolling list text box to display names and phone numbers
- A Delete button to remove the selected name from the card file

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:

- Text Label (3)
- Single-line TextField (3)
- Text Button (3)
- List (1)

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