TutorialBeginning Step 2

Creating a UI with nested layouts

Step 1: Creating the UI project

Using the Project wizard

Before creating your application, you need to create a project for all the applications files.
  1. Choose File|New Project to open the Project wizard.

    Project wizard Step 1

  2. Make the following changes to the project and directory names in Step 1 of the Project wizard.

  3. Accept all other defaults. Note the root path where the project is saved.

    Note: Projects in JBuilder are saved by default to the /[home]/jbproject directory. It is recommended that only advanced users change this default path.

    For more information on projects and how JBuilder constructs paths, see "Creating and managing projects" in Building Applications with JBuilder.

  4. Click Next to go to Step 2 of the Project wizard.

    Project wizard Step 2

  5. Accept the defaults in Step 2 for the project, source, backup, and output paths and the JDK version. Note where the project, class, and source files will be saved. Also note that the option Make Project Notes File is checked. This option creates an HTML file that contains the project information entered in Step 3 of the wizard.

  6. Click Next to go to Step 3 of the wizard.

  7. Enter your name, company name, and a description of your application in the appropriate optional fields. This information is saved in the project HTML file.

  8. Click the Finish button to create the project.

  9. Choose File|New to open the object gallery.

  10. Double-click the Application icon to open the Application wizard.

  11. Note the default package name which is extracted from the project name. Accept the defaults on Step 1 by pressing Next.

  12. Accept the defaults on Step 2 of the Application wizard and press Finish.

    The project appears in the project pane of the AppBrowser. You'll see four files in the project pane: the project file (NestedLayouts.jpr), Application1.java, and Frame1.java (the UI container), and an HTML file for project information and notes.

  13. Select the file Frame1.java in the project pane, then click the Design tab at the bottom of the content pane to open the visual design tools.

    The structure pane now contains a component tree and the content pane contains the UI designer, the Inspector on the right, and the component palette above the designer.

    Notice the structure of your UI design in the component tree as created by the Application wizard. What you have is a frame called this, under which is the contentPane (BorderLayout) placed in the UI folder. It is under this folder and frame that JBuilder will place all the visual UI components as you add them to your design. What you will actually be designing in the UI designer is the contentPane.

  14. Click this in the component tree. Notice that on the Properties page of the Inspector, the value of the title property is "Frame Title". Triple-click Frame Title to highlight it, type Nested Layouts in its place, then press Enter. This will show in the frame's title bar at runtime.

  15. For this tutorial, you may need a larger surface in the UI designer than the default size.

    Select this in the component tree to place black sizing nibs around the frame on the design surface.

    Click the bottom right corner nib with the mouse and drag it diagonally away from the center of the frame to enlarge it in the designer. What you are actually resizing when you do this is the main container frame for your UI (a component called JFrame).

    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:

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

    If you want more room in the UI designer, maximize the AppBrowser before you drag the frame to a larger size. If you want even more space, hide the project and structure panes by selecting View|Toggle Curtain. Note, however, that 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.

Adding the main panels

  1. Select the contentPane in the component tree. Notice that it also becomes selected in the UI designer and the Inspector.

  2. Click the Swing Containers tab on the component palette at the top of the designer and click the JPanel icon. Click contentPane(BorderLayout) in the component tree. This drops the panel into the contentPane.

    Tip: You can also add a component to a container by clicking the intended container in the UI designer. However, when you do it this way, you should check the component tree to verify that the component did actually get placed in the right container. If at any point in your design work you discover that components are in the wrong container, you can always cut and paste them in the component tree to fix them.

    Notice that a new component called jPanel1 was added to the UI folder in the component tree under the contentPane. Notice, also, that jPanel1 completely hides the contentPane in the designer. (You can see black sizing nibs around the edges of the panel showing its size and location.)

    If your panel is not filling the contentPane, you need to explicitly set its constraints property to the correct value. With jPanel1 selected in the component tree, click the Properties tab in the Inspector and look at the constraints value. It should say CENTER. If it doesn't, click the drop-down list and change the value.

  3. If you leave the contentPane in BorderLayout, at some point during the visual design process, you might accidently drag jPanel1 with the mouse to another area of the BorderLayout frame, causing the panel to shrink in height or width and move to one of the edges of the frame (North, South, East, or West). If this happens after you have the UI design populated with lots of components, it might be difficult for you to immediately determine what the problem is.

    To prevent this from happening, select the contentPane in the component tree, then select its layout property on the Properties tab of the Inspector. Click the drop-down arrow and select XYLayout or null from the list. You'll change it back to BorderLayout at the end, after all the other panels are converted to their ultimate layouts.

  4. Now change the layout manager for jPanel1. Click the icon to the left of jPanel1 in the component tree to expand that selection. Under jPanel1, you will see the layout manager it uses, which is FlowLayout. Select jPanel1 and change its layout property in the Inspector to XYLayout or null.

  5. Finally, to make jPanel1 more distinguishable in the designer, select its border property and choose RaisedBevel from the drop-down list.

    While it isn't necessary to use a border on the panels during design, it does make the design work easier when you are nesting multiple panels and components. This is because as soon as you select a component on the palette, then click the panel, the panel's sizing nibs disappear and you can't see if you are still inside the panel when you drag the new component to its desired size.

    For the purpose of demonstration, the images in this tutorial also show the panels in contrasting shades of gray to make it easier to differentiate them. Changing the background color of the panels is another way you could make them visible in the designer if you don't want to use borders.

At this point, it would be a good idea to save the entire project. Choose File|Save All from the main menu.

Now, add three more panels (panel 2, 3, and 4) to the design panel (panel1) shown in the example below. Don't forget to change their layouts to your prototype layout. Also add a border if you want.

  1. Select JPanel on 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 with the mouse. This panel will be the container for the toolbar and JComboBox 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 jPanel2.

  3. Now, using the same technique, add panel 3 and panel 4 to panel 1. Panel 3 will eventually contain a label, a text field, and a text area. Draw panel 3 to fill most of the rest of the frame, leaving a shallow area at the bottom of the design for panel 4 (the status bar).

  4. You can even up the width of these three panels using the designer's pop-up menu. For example, make them all the same width horizontally. First, use the sizing nibs on panel 2 to adjust its width. With panel 2 selected, hold down the Shift key, and click panel 3 and panel 4 (now all three are selected). With the mouse over one of the selected panels, right-click and choose Even Space Horizontal. Panels 3 and 4 will snap to the same width as panel 2. To release the multiple selection, click any component not selected, or click the component tree.

    To drag a whole panel, select the panel and move the mouse to the center black nib in the panel. You'll see a four-headed arrow appear. Click and drag the component to the new location. Be careful not to drag it out of its container and into another container, like the contentPane. If you make a mistake, just choose Edit|Undo and the design will return to its previous state.

  5. Change the layouts for all these panels and give them a border.

  6. Now, save the file. Choose File|Save, or type Ctrl+S.

    Notice the structure of your UI design now in the component tree:


Tutorial Beginning Step 2