ch3.htm

JAVA Developing Professional JavaApplets

so are set comfortably at the top and bottom of the applet. The
remaining display is then used for the <TT>&quot;Center&quot;</TT>
component, the DrawCanvas object. This object takes up the bulk
of the applet display area.
<P>
That the BorderLayout class can display up to only five components
(corresponding to the five directions) might concern users; however,
this is not really a problem. Recall that since containers can
hold other containers, this limitation does not really exist.
Consequently, an applet can contain Panel objects, which in turn
can contain other containers, and so forth.
<P>
In the example, the Panel class is used to align the button and
choice box on the same row. The Panel class can be used as a kind
of &quot;toolbar,&quot; displaying components along the top or
bottom of the screen. It exemplifies this behavior because its
default layout is the FlowLayout class (see the following section).
<H4>Flow Layout</H4>
<P>
The FlowLayout class is good for displaying components horizontally
across the container. It is the default layout for Panels, which
can be set to function like a toolbar or to contain related Components,
such as OK and Cancel buttons. In most cases, the FlowLayout class
will present components across a single row. However, if the components
do not fit on one row, a new row is started.
<P>
Figure 3.3 illustrates a modification of Listing 3.1, which adds
another Choice menu to the left of the button (whose text has
been modified). The canvas uses this new Choice object to pick
the color used to paint the object chosen in the other Choice
menu. Since the order of when a component is added to a container
is important in determining the layout display, the color Choice
object is added before the button.
<P>
<A HREF="f3-3.gif" ><B>Figure 3.3 </B>: <I>Second version, illustrating FlawLayout</I></A><I>.</I>
<P>
The following code modifies the <TT>init()</TT>
method in Listing 3.1 to build the Panel object shown in Figure
3.4. It is inserted in the source code after the DrawCanvas object
is created, but before the Button is made.
<BLOCKQUOTE>
<TT>// Create the panel with button and choices
at <BR>
bottom...<BR>
Panel p = new Panel();<BR>
// Explicitly set to flow layout...<BR>
p.setLayout(new FlowLayout());<BR>
// Add color choice to left of button...<BR>
colorChoice = new Choice();<BR>
colorChoice.addItem(&quot;Yellow&quot;);<BR>
colorChoice.addItem(&quot;Red&quot;);<BR>
colorChoice.addItem(&quot;Blue&quot;);<BR>
p.add(colorChoice);<BR>
// Add button...</TT>
</BLOCKQUOTE>
<P>
The code explicitly creates a new FlowLayout object for the Panel
to use. This is unnecessary, but it illustrates how a FlowLayout
object could be set up for Container objects in general.
<P>
To use the color Choice menu in the DrawCanvas code, add a method
to the Example1 class to return the color selection:
<BLOCKQUOTE>
<TT>// Get the color to be displayed....
<BR>
// Convert the String to a Color object<BR>
Color getColor() {<BR>
 String s = colorChoice.getSelectedItem();<BR>
 if (s.compareTo(&quot;Yellow&quot;) == 0)<BR>
&nbsp;&nbsp;return Color.yellow;<BR>
 if (s.compareTo(&quot;Red&quot;) == 0)<BR>
&nbsp;&nbsp;return Color.red;<BR>
 return Color.blue;<BR>
}</TT>
</BLOCKQUOTE>
<P>
The DrawCanvas class modifies its color code to get the color
choice from the applet class:
<BLOCKQUOTE>
<TT>g.setColor(e1app.getColor());</TT>
</BLOCKQUOTE>
<P>
You can specify other features of FlowLayout to customize its
appearance. By default, components within a container using FlowLayout
are aligned along the center. However, alternative FlowLayout
constructors can be used to align the components to the left or
the right. Figure 3.4 shows how the Panel in the example would
look if it were right-aligned. The following code line is all
you need to add to modify how the layout is established:
<BLOCKQUOTE>
<TT>p.setLayout(new FlowLayout(FlowLayout.RIGHT));</TT>
</BLOCKQUOTE>
<P>
You can specify the number of pixels between the components in
a container using FlowLayout in an alternative constructor. This
difference in the spacing between the components is known as the
<I>gap value</I>. Both the horizontal and vertical gap values
can be set in FlowLayout. Most of the LayoutManager classes support
setting gaps. The discussion of the next layout, GridLayout, will
illustrate how to use gap values.
<P>
<A HREF="f3-4.gif" ><B>Figure 3.4 </B>: <I>The FlawLayout panel is right-justified.</I></A>
<H4>GridLayout</H4>
<P>
The GridLayout class is used to set a matrix of components along
a number of rows and columns. Since the size of each row and column
is the same, each component in the grid has the same size. Each
new component added to the container using GridLayout is positioned
to the next index in the grid. If the row is not full, it is added
to the next column; if it is, a new row is started and the component
is added to the new column.
<P>
Figure 3.5 illustrates an applet set to use GridLayout. It is
a 5<FONT FACE="Symbol">&#165;</FONT>5 matrix of Buttons. Listing
3.2 shows the code used to create this applet and illustrates
the use of gap values. In this case, a horizontal gap of 10 and
a vertical gap of 20 is specified in the constructor.
<HR>
<BLOCKQUOTE>
<B>Listing 3.2. Creating an example using GridLayout</B>.<BR>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT>import java.awt.*;<BR>
import java.lang.*;<BR>
import java.applet.*;<BR>
<BR>
// Class used for illustrating Grid Layouts...<BR>
public class GridLayoutExample extends Applet&nbsp;&nbsp;{<BR>
&nbsp;// Set up a matrix of numbers to be displayed in a <BR>
grid...<BR>
&nbsp;public void init() {<BR>
&nbsp;&nbsp;// Set up display area...<BR>
&nbsp;&nbsp;resize(300,200);<BR>
&nbsp;&nbsp;// Set the layout to a 5 by 5 grid with<BR>
&nbsp;&nbsp;// a horizontal gap of 10 and a vertical gap of 20
<BR>
&nbsp;&nbsp;int rowsAcross = 5;<BR>
&nbsp;&nbsp;int rowsDown = 5;<BR>
&nbsp;&nbsp;setLayout(new GridLayout(rowsAcross,rowsDown,10,20));
<BR>
&nbsp;&nbsp;// Fill the grid with buttons filled with numbers...
<BR>
&nbsp;&nbsp;int matrixSize = rowsAcross *rowsDown;<BR>
&nbsp;&nbsp;for (int i = 0; i &lt; matrixSize; ++i) {<BR>
&nbsp;&nbsp;&nbsp;// Make a label set to the current number...
<BR>
&nbsp;&nbsp;&nbsp;// Add it to the grid...<BR>
&nbsp;&nbsp;&nbsp;add(new Button(Integer.toString(i)) );<BR>
&nbsp;&nbsp;}<BR>
</TT>&nbsp;<TT>}<BR>
}</TT>
</BLOCKQUOTE>
<HR>
<P>
<A HREF="f3-5.gif" ><B>Figure 3.5 </B>: <I>An example using GridLayout.</I></A>
<P>
The code ends with a <TT>for</TT>
loop that adds Buttons to the grid. As the number increases, each
Button is added across and down the applet display area. The code
that creates the numeric name of the Button is interesting because
it illustrates a static method of the type wrapper class, Integer,
that can be used to convert an integer to a String without creating
a new object.
<P>
An alternative constructor enables you to create a GridLayout
without horizontal and vertical gaps.
<H4>GridBagLayout</H4>
<P>
The most complex layout class provided with the Java API is GridBagLayout.
While it is superficially similar to the GridLayout class, it
differs significantly by not requiring the components in the grid
to be the same size. GridBagLayout uses a helper class called
GridBagConstraints to specify how the component is displayed in
relation to the container's other components. GridBagLayout can
guarantee a logical display of components because it replaces
the use of hard-code coordinates with a relative structure of
how the components should visually interrelate.
<P>
Figure 3.6 and Listing 3.3 show an example of using GridBagLayout.
As the code illustrates, this class is much more complex than
the other layouts. The key to using GridBagLayout is understanding
its interaction with the GridBagConstraints helper. To describe
it in high-level terms, GridBagLayout and GridBagConstraints use
a system of weighting and relative flags to determine how things
will be positioned and sized. To see how this works, look at some
of the GridBagConstraints variables summarized in Table 3.1. The
variables starting with &quot;grid&quot; specify positioning in
relation to the other components in the row or column. The GridBagConstraints
constant <TT>REMAINDER</TT> means
that the object should be the last item in the row or column.
A value of <TT>1</TT>, on the other
hand, indicates that it should be positioned normally. The <TT>weightx</TT>
and <TT>weighty</TT> variables determine
space distribution of the components in relation to each other.
A weight of <TT>1</TT> indicates that
the item should be positioned evenly with other items of weight
<TT>1</TT>. On the other hand, a weight
of <TT>0</TT> will give a component
a lower priority in sizing. If the weight variables are not set
to a nonzero value, the default distribution will be moved toward
the center of the container.
<P>
<A HREF="f3-6.gif" ><B>Figure 3.6 </B>: <I>An example using GridBagLayout.</I></A>
<HR>
<BLOCKQUOTE>
<B>Listing 3.3. Creating an example using GridBagLayout.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT>import java.awt.*;<BR>
import java.lang.*;<BR>
import java.applet.*;<BR>
<BR>
// Class used for illustrating GridBagLayouts...<BR>
public class GridBagLayoutExample extends Applet&nbsp;&nbsp;{
<BR>
<BR>
</TT>&nbsp;<TT>// A complex set of
buttons<BR>
&nbsp;public void init() {<BR>
&nbsp;&nbsp;// Just reuse these over &amp; over...<BR>
&nbsp;&nbsp;Button b;<BR>
&nbsp;&nbsp;Label l;<BR>
&nbsp;&nbsp;// Set up display area...<BR>
&nbsp;&nbsp;resize(300,200);<BR>
&nbsp;&nbsp;// Create the GridBagLayout and its helper...<BR>
&nbsp;&nbsp;GridBagLayout g = new GridBagLayout();<BR>
&nbsp;&nbsp;setLayout(g);<BR>
&nbsp;&nbsp;GridBagConstraints gbc = new GridBagConstraints();
<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;// Put up a row of three equal size buttons...<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;// This tells the layout to use the full horizontal
<BR>
&nbsp;&nbsp;// and vertical height if the display area is not
<BR>
filled...<BR>
</TT>&nbsp;<TT>&nbsp;gbc.fill = GridBagConstraints.BOTH;
<BR>
&nbsp;&nbsp;// Distribute horizontal space evenly between buttons
<BR>
&nbsp;&nbsp;gbc.weightx = 1.0;<BR>
&nbsp;&nbsp;// Create and add the three buttons...<BR>
&nbsp;&nbsp;b = new Button(&quot;Number 1&quot;);<BR>
&nbsp;&nbsp;g.setConstraints(b,gbc);<BR>
&nbsp;&nbsp;add(b);<BR>
&nbsp;&nbsp;b = new Button(&quot;Number 2&quot;);<BR>
&nbsp;&nbsp;g.setConstraints(b,gbc);<BR>
&nbsp;&nbsp;add(b);<BR>
&nbsp;&nbsp;b = new Button(&quot;Number 3&quot;);<BR>
&nbsp;&nbsp;gbc.gridwidth = GridBagConstraints.REMAINDER; // Fill
<BR>
up the row...<BR>
</TT>&nbsp;<TT>&nbsp;g.setConstraints(b,gbc);
<BR>
&nbsp;&nbsp;add(b);<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;// Put up a button, a label, and a button<BR>
&nbsp;&nbsp;// that uses the remaining height area...<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;b = new Button(&quot;Number 4&quot;);<BR>
&nbsp;&nbsp;gbc.gridwidth = 1;&nbsp;&nbsp;// Reset to normal...
<BR>
&nbsp;&nbsp;gbc.weighty = 1.0;&nbsp;&nbsp;// Force it to use remaining
<BR>
height...<BR>
&nbsp;&nbsp;g.setConstraints(b,gbc);<BR>
&nbsp;&nbsp;add(b);<BR>
&nbsp;&nbsp;l = new Label(&quot;Number 5&quot;);<BR>
&nbsp;&nbsp;g.setConstraints(l,gbc);<BR>
&nbsp;&nbsp;add(l);<BR>
&nbsp;&nbsp;b = new Button(&quot;Number 6&quot;);<BR>
&nbsp;&nbsp;gbc.gridwidth = GridBagConstraints.REMAINDER; // Fill
<BR>
up the row...<BR>
</TT>&nbsp;<TT>&nbsp;g.setConstraints(b,gbc);
<BR>
&nbsp;&nbsp;add(b);<BR>
</TT>&nbsp;<TT>&nbsp;// *************************************
<BR>
&nbsp;&nbsp;// Make a normal height button with insets...<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;gbc.weighty = 0.0; // Normal height;<BR>
&nbsp;&nbsp;gbc.gridheight = 1;<BR>
&nbsp;&nbsp;gbc.weightx = 0.0;&nbsp;&nbsp;// Use up the row...
<BR>
&nbsp;&nbsp;gbc.insets.left = 20;<BR>
&nbsp;&nbsp;gbc.insets.right = 20;<BR>
&nbsp;&nbsp;b = new Button(&quot;Number 7&quot;);<BR>
&nbsp;&nbsp;g.setConstraints(b,gbc);<BR>
&nbsp;&nbsp;add(b);<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;// Finally add a text field across the bottom...<BR>
&nbsp;&nbsp;// *************************************<BR>
&nbsp;&nbsp;gbc.insets.left = 0;&nbsp;&nbsp;&nbsp;// Reset these...
<BR>
&nbsp;&nbsp;gbc.insets.right = 0;<BR>
&nbsp;&nbsp;TextField t = new TextField(&quot;Number 8&quot;);
<BR>
&nbsp;&nbsp;g.setConstraints(t,gbc);<BR>
&nbsp;&nbsp;add(t);<BR>
&nbsp;}<BR>
<BR>
}</TT>
</BLOCKQUOTE>
<HR>
<P>
<CENTER><B>Table 3.1. The GridBagConstraints variables.</B></CENTER>
<P><CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR VALIGN=TOP><TD WIDTH=163><I>Variables</I></TD><TD WIDTH=427><I>Description</I>