Activity 6.5 - Constructing a user interface to demonstrate fonts

Topic

In this activity we create a User Interface, using a variety of visual components.

Task

You are asked to develop a User Interface for a program that will demonstrate fonts. When the application runs, the window should look like this:

The interface consists of:

• A menu bar, containing a single menu "Help", which has a single item "About".
• An upper panel, with flow layout, containing the following elements:
• A label "Font family".
• A drop down list with items "SansSerif", "Serif", "Monospaced".
• A label "Size".
• A text field, three characters wide, initialised to "12".
• A label "Style".
• Two checkboxes "Bold" and "Italic".
• A button "Show font". When this button is pressed, the font combination specified by the controls above will be displayed in the lower panel.
• A lower panel, with border layout, containing a scrollable text area, initialised to "The cat sat on the mat". The user can edit the contents. Note that the picture above displays no scrollbars because the current extent of the text makes them unnecessary. If enough text is inserted scrollbars will appear automatically.

With the exception of the labels, all these types of element were used in Activity 6.4.

The enclosing frame has title "Font demo" and dimensions 400 by 240. It uses a 2 by 1 grid layout.

In this activity we are only developing the interface and the program will not be capable of actually displaying the chosen font. We will continue this example in Unit 7.

Instructions

1. Create a new project called MyEx6_5 in the Unit 6 folder. In the New Java Application wizard name the Main Class myex6_5.FontDemoTest.
2. Add a new class FontDemo that implements the interface shown above. You are not expected to write a hierarchy of classes as was done in Exercise 6.4. Instead you should add all the interface elements in the same class.
3. Complete the main class FontDemoTest to create an instance of FontDemo and display it. Compile and run your program.
4. Our sample code appears in the Solution file.