Tutorial: Building an applet
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
.
this
layout to BorderLayout
in the Inspector.
To do this,
this
in the component tree in the structure pane.
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.
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.
"Using layout managers" in Building Applications with JBuilder
Creating a UI with nested layouts in Tutorials
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.
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.
panel1
layout to BorderLayout
in the Inspector.
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.
Panel
component on the component palette. Now you can add multiple panels to panel1.
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.
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.
lower
.
upper
to Orange in the Inspector:
background
property in the Inspector.
lower
to Magenta.
lower
's layout to CardLayout
. The CardLayout
panel will contain 5 panels, each with "Good Evening" in a different language.
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.
lower
panel. Each of these panels will have "Good Evening" in a different language.
BorderLayout
.
layout
property to BorderLayout
in the Inspector. All 5 panels now have BorderLayout
layout.
background
property in the Inspector and use the color sliders to create a color.
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.
Tutorial: Building an applet
Label
and a Choice
component to the top panel in your design, upper
.
Choice
component.
upper
. Use one of the following two methods:
Label
component upper
to the left of the Choice
component. Note that label1
is added to upper
in the component tree.
label1
in the component tree and complete the following steps:
text
property in the Inspector to highlight the existing text. Enter Select a language and press Enter.
font
property to set the font. Click the ellipsis button to open the Font dialog box.
Choice
component.
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:
CardLayout
panel. Each of these labels will have "Good Evening" in a different language.
text
property of the Inspector.
Use these languages for the labels or choose your own:
label2
: Good Evening (English)
label3
: Guten Abend (German)
label4
: Oodgay vening eay (Pig Latin)
label5
: God Kväll (Swedish)
label6
: Gudday, Mate (Australian)
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.
constraints
property in the Inspector to North, South, East, West, or Center as follows.
label2
: North
label3
: South
label4
: East
label5
: West
label6
: Center
BorderLayout
panel. Center fills the entire panel, while North, South, East, and West fill only a portion of the panel.
panel 6
to null
layout. You'll add a button to this panel. In Step 6, you'll add a button event.
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.
Button
component 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.
button1
in the design and drag it to the top center of the design as shown in the image below.