Tutorial Beginning Step 2

Step 1: Nested Layouts

Create the UI project

Close all existing projects and create a new UI application project with the Application Wizard.

  1. Choose File|New, and select the Application Wizard icon.
  2. Since no projects are open, the Project Wizard displays first to create one. In the File field, you'll see a default path similar to the one below:

    Change the package and project to \NestedLayouts\NestedLayouts.jpr. Change any other defaults you want in the other fields, then press Finish. The Application Wizard starts.

  3. Make sure "Use only core JDK and Swing classes" is unchecked on Step 1, then press the Next button.
  4. On Step 2, check "Center frame on screen" and Press the Finish button to complete the Application Wizard.

    When the AppBrowser appears with your new project, you'll see four files in the Navigation pane: the project file (NestedLayouts.jpr), Application1.java, and Frame1.java (the UI container), and an HTML file (for project information).

    nlstep01b.gif

  5. Select the file Frame1.java in the Navigation pane, then click the Design tab on the Content pane to open the visual design tools.

    Notice the structure of your UI design now in the Component Tree, as created by the Application Wizard.

    What you have is an outer frame called "this (BorderLayout)" which contains a panel called "bevelPanel1 (XYLayout)".

  6. If you want a larger work surface, you can resize the frame to a larger size by dragging one of its nibs with the mouse. You want it to be large enough for buttons to expand inside the panels when you add text to them. If you want more room than the UI Designer permits at its default size, maximize the AppBrowser, or both the AppBrowser and the Main window, before you drag the frame to a larger size. If you want even more space, close the curtain on the AppBrowser (Alt+Z). However, closing the curtain hides the Component Tree which is in the Structure pane, so you'll have to toggle the curtain every time you want to see the Tree if you do this.

    What you are actually resizing is the main container frame for your UI which is a Borland component called DecoratedFrame. Since the main design panel currently is XYLayout, if you run your program now, it will be the same size it is in the designer. However, keep in mind that the actual screen size of a UI container at runtime is not necessarily determined by the size you make it in the UI Designer. Initial runtime screen size is determined by the container's layout manager, which determines the size based on the following:

    The user can manually change the size of the UI frame by resizing it at runtime.

Add the panels

Now you're ready to start adding panels and components to create your UI design. For this tutorial, the only type of panel we'll use will be the Borland BevelPanel, since it is easier to see at design time than the AWT Panel. To make the tutorial simpler to read, we'll refer to these panels by the generic term "panel" (for example, Panel 1, Panel 2). What you will actually see in the Component Tree is bevelPanel1, bevelPanel2, and so on.

When you add a new BevelPanel to the UI design, it will behave as a FlowLayout. Initially, you'll change the panel to XYLayout, then after you have all the panels and other components in place in your UI, you'll set it to its final layout.

Tips for drawing panels

As you draw a BevelPanel in the UI Designer, you will see an outline as you drag the mouse. You can modify the size of the panel using the sizing handles which are visible around the edges of the selected panel. To move the panel, click anywhere inside it and drag it with the mouse.

Draw three panels and change them to XYLayout

Draw three new panels (Panels 2, 3, and 4) on the design panel (Panel 1) as shown in the example below:

Remember that as you add each new panel in this tutorial, you need to change it to XYLayout.

  1. Select the BevelPanel button on the JBCL Containers tab of the Component Palette.
  2. Click where you want the top left corner of Panel 2 to be, then drag the panel to the desired size.
    This panel will be the container for the toolbar and ChoiceControl components at the top of the application. Draw it to fill the top inch of the frame and the full width of the frame. (Notice that Panel 2 appears in the Component Tree as bevelPanel2.
  3. With the new panel selected, double-click the layout property in the Inspector.
  4. Click the drop-down arrow that appears to the right of the layout property and choose XYLayout.
  5. Now, using the same technique, add Panel 3 and change it's layout to XYLayout. This panel will be the container for a label, a text field, and a TextArea control. Draw it to fill most of the rest of the frame, leaving an area at the bottom of the design for Panel 4.
  6. Add the Panel 4 across the bottom of Panel 1. This will become the status bar. (Don't forget to change it to XYLayout.)
Now notice the structure of your UI design in the Component Tree:

Change the panel colors

To make prototyping with nested panels easier, you can change the background color of the panels as we did to make them easier to distinguish in the UI designer. The examples in this tutorial will use alternating shades of gray to make our illustrations easier to understand. It is your choice whether to take the time to do this or not. Since we are using BevelPanel (which has distinguishable edges) instead of the AWT Panel, you may choose not to do this. (An AWT Panel has no borders or visible edges, so giving it a different color than its container allows you to see where to click when you add components to it.)

If you do use different panel colors for this tutorial, you will get a chance to change all the panels to one color again in one easy step at the end of the tutorial.

To change the background color of a panel,

  1. Select the panel, either in the UI Designer, or on the Component Tree.
  2. On the Properties page of the Inspector, select the background property and click the ellipsis button at the end of the edit field. This brings up the Color Property Editor.
  3. In the Color Property Editor, change the color to whatever you want by sliding the thumbs on the color controls, or by typing in new red, green, and blue values. The colors we used were two contrasting colors of gray. Their R, G, B values are: dark gray (102,102,102) and light gray (192, 192, 192).
  4. Choose File|Save All to save the project file and all the rest of the files listed in the Navigation pane.


Tutorial Beginning Step 2