GUI Builder example

When the examples contained in this section are put together with the correct data beans working behind the scenes, you get a total GUI application.

When you run this example, the first panel that comes up looks like this:

The GUI Builder example main window
The GUI Builder example main window

Notice that this screen allows you to use the dynamic panel manager. You can resize the window to be large or small:

Examples of resizing the window
Resizing the window   Resizing the window

When you use the dynamic panel manager, while the size of the panel and the panel controls changes, the size of the text does not.

The panel allows you to access either a property sheet or wizard. You can either select the one you want to by clicking the appropriate icon on the toolbar or by using the Launch menu. Being able to choose between the toolbar and the menu illustrates linking menu items. The Launch menu looks like this:

Selecting Property Sheet from the Launch menu
Selecting Property Sheet from the Launch menu

If you select Property Sheet, you see a panel like this:

Property Sheet Sample dialog: Tab 1
Property Sheet Sample: Tab 1

You see two other panels when you select the other two tabs:

Property Sheet Sample: Other tabs
Property Sheet Sample: Panel Sample tab   Property Sheet Sample: Table Cell Editor tab

Returning to the beginning, this is the panel you see when you select Wizard from the Launch menu:

Selecting Wizard from the Launch menu
Selecting Wizard from the Launch menu

The first wizard dialog gives you many options:

Selecting Rock in the first wizard dialog
Selecting Rock in the first wizard dialog

Selecting "Rock" and clicking "Next" reveals the following dialog:

The second wizard dialog
The second wizard dialog

Clicking next again gets you to the final dialog:

The final wizard dialog
The final wizard dialog

However, this example has been programmed to have a loop. When the user selects Country:

Selecting country in the first wizard dialog
Selecting country in the first wizard dialog

The second panel looks similar:

The second wizard dialog
The second wizard dialog

But clicking next takes you back to:

Clicking Next returns you to the first wizard dialog
Clicking Next returns you to the first wizard dialog

Instead of the finish screen. In other words, the programmer has determined that nobody should select country as their favorite form of music.

From the original panel, you can also select other functions from the left pane below the toolbar:

The GUI Builder example main window
The GUI Builder example main window

Selecting Panel in the left pane displays the following information in the right pane:

Selecting Panel in the left pane
Selecting Panel in the left pane

This example has been programmed with the option to disable the image. Select Disable Image to display the same screen with the image grayed out:

Selecting Disable Image
Selecting Disable Image

This panel also illustrates the drop-down list box option:

Selecting an item from the Favorite Food list
Selecting an item from the Favorite Food list

Selecting Tabbed Pane in the left pane displays the following information in the right pane:

Selecting Tabbed Pane in the left pane
Selecting Tabbed Pane in the left pane

Selecting the Panel Sample tab:

Selecting the Panel Sample tab
Selecting the Panel Sample tab

Going back to Tab 1, you can deselect the age field by selecting the radio button:

Selecting Disable Age Field on Tab 2
Selecting Disable Age Field on Tab 2

Doing this grays out the age field, rendering it useless in the second tab:

Result of disabling age in the Panel Sample tab
Result of disabling age in the Panel Sample tab

Selecting Table Pane in the left pane illustrates the use of a table panel with a custom renderer and a custom cell editor:

Selecting Table Panel in the left pane
Selecting Table Panel in the left pane