Overview Step 3 Step 5

Tutorial: Building an applet

Step 4: Customizing your applet's user interface

Now that the Applet wizard has generated the applet shell, let's customize it with various components in the following steps.

  1. Click the Design tab at the bottom of the content pane to change GoodEveningApplet.java to design view. The UI designer appears in the content pane with the Inspector on its right. You will use the Inspector to modify properties and add events to your code. The structure pane now contains a component tree with such folders as UI, Menu, and Other.

    UI designer

  2. Change the this layout to BorderLayout in the Inspector.

    To do this,

    1. Select this in the component tree in the structure pane.
    2. Click to the right of the layout property on the Properties page of the Inspector. Select BorderLayout from the drop-down list of layouts.

    BorderLayout arranges a container's components in areas named North, South, East, West, and Center. Use BorderLayout when you want to force components to one or more edges of a container and fill the center of the container with a component. It is also the layout you want to use to cause a single component to completely fill its container.

    Note: JBuilder's UI designer uses a default layout manager for each container, usually the layout of the AWT parent container. In the Java AWT, all panels use FlowLayout by default. To see the layout for each component, click the icon in the component tree of the structure pane to expand the selection. The layout manager displays as an item in the tree just below the parent container.

    See also:
    "Using layout managers" in Building Applications with JBuilder
    Creating a UI with nested layouts in Tutorials

  3. Click the AWT tab on the component palette at the top of the UI designer and select the Panel component to add a panel to your design. You might need to scroll to the right on the component palette to find the AWT tab. AWT components, unlike Swing components, are supported by most browsers.

    Caution: The UI designer always opens with the Swing components on the first page. If you select these Swing components by mistake, your applet won't run in the browsers. Be very careful when placing components to work from the AWT page of the palette.

  4. Click the center of the this frame in the UI designer to drop the component into the center of your design's frame. The Panel component fills the frame and appears in the structure pane as panel1 below this.

    Note: The constraints property in the Inspector should be Center. If not, click the column to the right of the constraints property, and choose Center from the drop-down list.

    panel1 is now selected in your applet design and in the component tree.

  5. Change the panel1 layout to BorderLayout in the Inspector.

  6. Add two panels to panel1. The top panel will contain a drop-down list of languages to select from and a label to identify the list. The bottom panel will contain "Good Evening" in various languages.

    1. Shift+Click the Panel component on the component palette. Now you can add multiple panels to panel1.
    2. Click twice on panel1 in the structure pane. panel2 and panel3 are added below panel1 in the structure pane. You can also drop the components on panel1 in the designer.
    3. Click the Selection Arrow Selection Arrow on the left side of the component palette to disable the component selection.

      Note: If you drop the component in the wrong location, select it in the component tree and press Delete. Then add it again.

    4. Check the constraints for the panels. The top panel in your design should be North and the bottom panel should be Center.
    5. Rename the top panel to upper. Select the component in the component tree and double-click the column to the right of the name property in the Inspector and enter upper.
    6. Rename the bottom panel to lower.

  7. Change the background color of upper to Orange in the Inspector:

    1. Click the column to the right of the background property in the Inspector.
    2. Click the Down arrow to open the color drop-down list and select Orange from the list.

  8. Change the background color of lower to Magenta.

  9. Change lower's layout to CardLayout. The CardLayout panel will contain 5 panels, each with "Good Evening" in a different language.

    Note: CardLayout places components (usually panels) on top of each other in a stack like a deck of cards. You see only one at a time, and you can flip through the panels by using another control to select which panel comes to the top. CardLayout is usually associated with a controlling component, such as a check box or a list. The state of the controlling component determines which component the CardLayout displays. The user makes the choice by selecting something on the UI.

  10. Add 5 panels (panels 2 through 6) to the lower panel. Each of these panels will have "Good Evening" in a different language.

  11. Change the layout for panels 2 through 6 to BorderLayout.
  12. Change each of these 5 panels to a different color.

    Tip: Click the ellipsis button to the right of the background property in the Inspector and use the color sliders to create a color.

  13. Save the file and the project.

  14. Right-click GoodEveningApplet.html and select Run. When the applet runs, you will only see upper and the top panel on the CardLayout. The other language panels will display later after we add the drop-down list and add the events to the list selections.

  15. Exit the applet.

  16. Close the message pane by right-clicking the GoodEveningApplet tab and selecting Remove "GoodEveningApplet" tab.


Step 1 Step 4 Step 6

Tutorial: Building an applet

Step 5: Adding AWT components to your applet

Now you'll use the component palette to add a Label and a Choice component to the top panel in your design, upper.

  1. Select the AWT tab on the component palette and click the Choice component.  

  2. Drop the component into your design's top orange panel, upper. Use one of the following two methods:

  3. Select the Label component Label on the palette and place it on upper to the left of the Choice component. Note that label1 is added to upper in the component tree.

  4. Select label1 in the component tree and complete the following steps:

    1. Double-click the column to the right of the text property in the Inspector to highlight the existing text. Enter Select a language and press Enter.
    2. Click the column to the right of the font property to set the font. Click the ellipsis button to open the Font dialog box.
    3. Choose Serif from the list of fonts and check Bold. Enter 20 in the Size box, then click OK. "Select a language" now appears in the label next to the Choice component.
    4. Click the column to the right of the foreground property in the Inspector to set the text color. Click the Down arrow and select Blue from the drop-down list of colors.

    Your design should look similar to this:

  5. Add a label to each panel (panels 2 through 6) on the CardLayout panel. Each of these labels will have "Good Evening" in a different language.

  6. Change each label to "Good Evening" in a different language. First, select the label under each panel in the component tree and enter "Good Evening" in the appropriate language in the text property of the Inspector. Use these languages for the labels or choose your own:

  7. Select label2 through label6 using Ctrl+Click and change the font properties for all the labels to Bold and the font size to 24. Click a component in the component tree or in the UI designer to deselect the labels.

  8. Change the position of each label by changing the constraints property in the Inspector to North, South, East, West, or Center as follows.

    Note: Notice the position of the label in its BorderLayout panel. Center fills the entire panel, while North, South, East, and West fill only a portion of the panel.

  9. Change panel 6 to null layout. You'll add a button to this panel. In Step 6, you'll add a button event.

    Important: Use null layout to prototype your design when laying out multiple components. Because null layout does not use a layout manager, you can place components exactly where you want them. Later, you can switch to an appropriate portable layout for your design. We recommend never leaving a container in null for deployment, because components do not adjust when you resize the parent container.

  10. Select the "Gudday, Mate" label in the design. Reduce the label height and width by dragging the black nibs. Drag the label to the lower center of the design.

  11. Click the Button component AWT Button on the AWT tab of the component palette and drop it on either panel6 in the component tree or on the panel in your design. If you drop it in the designer, it is positioned where you drop it. button1 is added below panel6 in the component tree.

  12. Select button1 in the design and drag it to the top center of the design as shown in the image below.

  13. Choose File|Save All to save the project.

Overview Step 4 Step 6