To create this app, we'll use the Windows app builder. Close any projects that you might have open in Visual J Plus Plus by choosing Close All from the File menu. Now choose New Project from the File menu. Select apps from the Visual J Plus Plus Projects as we did when creating console apps. This time, however, select Windows app instead of Console app. (Don't confuse this choice with the app Wizard option.) For a project name, enter WindowedApp, as shown in Figure 5-1.

Screenshot-1. The New Project window immediately prior to building the Microsoft Windows version of WindowedApp.

Once your display looks like that shown in Figure 5-1, choose Open. This creates a project with a single .java file. Rather than carrying the default name Class1.java, as with console apps, this project has the default source file name Form1.java. (The reason for this name difference will become obvious shortly.) For now let's leave the name as it is; you'll see how to change it later.

Using the Forms Designer

To open the file for editing, double-click Form1.java in the Project Explorer window. A window similar to that shown in Figure 5-2 will appear. This is the Forms Designer. (You can also open the Forms Designer by selecting Form1.java and choosing Designer from the View menu.)

Screenshot

Screenshot-2. The Forms Designer provides a different view of a Visual J Plus Plus app.

To use the Forms Designer, you'll need two additional windows: the Toolbox and the Properties window. Let's deal with each in turn.

Toolbox

To open the Toolbox, select Toolbox from the View menu. (There is also a Toolbox button on the standard toolbar that you can use.) The Toolbox (in List View) is shown in Figure 5-3. To view the WFC controls, click the WFC tab. Perhaps you're more clever than I am, but it took me a few minutes to figure out that clicking the arrows next to the tabs scrolls the current list of available tools up and down. You can get a more condensed, albeit cryptic, view of the available tools by right-clicking the mouse within the WFC Controls panel and clicking List View to turn it off. This displays the tool icons without their labels.

Screenshot

Screenshot-3. The Toolbox showing some of the available WFC tools.

We'll first use the Toolbox tools to build the file name input area of our windowed app. (If you've forgotten the app we're trying to build or if you skipped over , refer to Figure 4-1.) Click the Label control in the Toolbox. Now click a spot within the Forms Designer. A label is displayed bearing the text "label1", as shown in Figure 5-4.

Screenshot

Screenshot-4. Clicking Label in the Toolbox and then clicking within the Forms Designer creates a Label object.

Properties window

With the label still selected in the Forms Designer window, enter File Name. As soon as you begin to type, the Properties window appears. (If you do like I do and group the various Visual J Plus Plus windows in a tabbed window, the Properties window will immediately cover the Toolbox.) The text you type is displayed within the label in the Forms Designer and the text property value box in the Properties window. See Figure 5-5.

Screenshot

Screenshot-5. The Properties window for the Label object in Categorized order.

Shown in Figure 5-5 along with the text property are the other properties of a Label control. By default, these properties are arranged alphabetically. In Figure 5-5, they have been grouped by clicking the Categorized button at the top of the Properties window. You can show or hide the properties within a group by clicking the plus or minus sign next to the group title. The values of most properties can be changed by clicking the value box and typing. For example, change the name property of the Label object by entering fileNameLabel.

Let's try changing one of the compound properties such as the font property. Click the plus sign to expand the font subproperties. Now select the desired font from the drop-down list under the name property, and then select the font size and weight. I left the font name the same, but changed the size and weight to 14-point boldface to make the label stand out a little better than it would using the default font.

Position properties

There are two more points about the Properties window worth noting. First, if you scroll down to near the bottom of the properties list, you'll see a group of properties collectively known as Position. Under Position, you'll see an anchor property whose default value is Top, Left. The anchor property specifies what side of the form the object is attached to, which in turn determines how the label reacts when the form is resized. Below the anchor property is the dock property. Selecting the arrow in the dock property's value box opens a window much like the one in Figure 4-5, which describes the BorderLayout layout manager. This isn't an accident. The dock property places the object within the form using an approach much like a border layout.

Second, at the bottom of the Position property group under the location and size properties are the x and y coordinates of the Label object within the form and the object's width and height, respectively. Unlike AWT, WFC allows the programmer to place objects absolutely.

NOTE
The ability to place objects using x and y offsets will be familiar to programmers of Microsoft Visual Basic and Microsoft Visual C++.

Although you can set the location and size of a control from the Properties window, it's generally easier to set location and size properties graphically. To set the location, point at the control, press down the mouse button, and drag the control to position it. To set the size, individually drag the sizing handles on the perimeter of the selected control. Make the Label control as small as you can while still being able to see the label text.

Finishing the WindowedApp Interface

Once you finish editing the properties of the fileNameLabel label, you'll need to add an Edit control to contain the file name. Drag an Edit control from the Toolbox and place it beside the fileNameLabel object. Drag the right side of the Edit control until it just about meets the right side of the form.

Now right-click the Edit control and select Properties from the shortcut menu. This is another way to select the Properties window. Since we don't want the Edit object to contain the default phrase edit1 as the initial value, delete this text in the object's text property. Notice that the text also disappears from the control in the Forms Designer. Set the anchor property of the Edit object to Top, Left, Right. This will ensure that the Edit control resizes horizontally to match the size of the window.

Create another label, and position it below the fileNameLabel object. Change this new label's text property value to Text. Set its font, font size, and font weight to match the font properties of the fileNameLabel object.

Add another Edit control immediately below the text label. Before attempting to resize this control object, you must set its multiline property to true. Only then will you be allowed to resize the control vertically as well as horizontally. Resize this second Edit control so that it takes up most of the remaining room within the form, but leave enough space for two buttons at the bottom. (Don't worry, you can always resize the form after the buttons are in place.) Set this Edit object's anchor property to Top, Left, Bottom, Right. Clear the default value from the text property.

Finally, add the two buttons. Drag a Button control to below the second Edit control, and set the Button object's text property to Submit. Set the anchor property to Left, Bottom. Repeat the process for the Cancel button, except set its anchor property to Bottom, Right.

When you finish, your Forms Designer window should look as shown in Figure 5-6. Continue to adjust the fields until they look right to you, and then click the Save All toolbar button.

Screenshot

Screenshot-6. The completed WindowedApp interface, shown in the Forms Designer.

What Did This Do (and What Did This Not Do)?

To those readers accustomed to earlier versions of Visual C++, the Forms Designer isn't a great surprise. Even Visual J Plus Plus 1.0 had some limited form design capability. The main difference between those tools and the Visual J Plus Plus Forms Designer lies in the way the Forms Designer works. The output from Visual J Plus Plus form design tools went into a file called a Resource file, which had to be compiled by the resource compiler and included in the project. The output from the Forms Designer is instead contained in the Form1.java file.

To see the code you've generated by creating the form for the WindowedApp project, you'll first need to make sure that your design handiwork has been saved to disk. To do so, choose Save All from the File menu (or click the Save All toolbar button). Now choose Code from the View menu, or click the View Code toolbar button on the Project Explorer window.

The first thing you'll notice is that Form1.java already contains a fair amount of code. Much of this code was generated by the Windows app builder when it first created the file. As you scroll through the code, however, you'll notice that the method initForm() is shaded and carries the admonition not to edit it directly. This is the code generated by the Formit directly. This is the code generated by the Forms Designer as a result of your design work.

To prove that this code was generated by the Forms Designer, you might want to conduct the following experiment. Scroll the Text editor display down until you reach the section of Java code that sets up the multiline Edit object. The name of this object is edit2, unless you changed it during the design process. In any case, this is the only object that calls the setMultiline() method. Within this section of code, find the call to the edit2.setSize() method. Now position the Text editor so that the call to setSize() is still visible even when the Forms Designer window has the focus. Resize the edit2 object in the Forms Designer. The source code won't change immediately. However, as soon as you save the form, the size specified in the setSize() call in the Text editor changes to match the new size in the Forms Designer.

Building the app

There is one last property to set: the form's title. To do this, select the form and change its text property in the Properties window.

Now you are ready to build the WindowedApp app. Choose Save All from the File menu again, and then build the project. The program should compile into a Windows .EXE file without complaint. Executing WindowedApp.exe generates the output shown in Figure 5-7.

Compare the output of your project with the planned output shown in Figure 4-1. If your output doesn't match, you still have some editing to do in the Forms Designer.

Screenshot

Screenshot-7. The appearance of our initial WindowedApp app.