ch3.htm

JAVA Developing Professional JavaApplets

<TR VALIGN=TOP><TD WIDTH=511>
<BLOCKQUOTE>
Button<BR>
Canvas<BR>
Checkbox<BR>
CheckboxGroup<BR>
Choice<BR>
Label<BR>
List<BR>
Scrollbar<BR>
TextComponent<BR>
TextArea (extends TextComponent)<BR>
TextField (extends TextComponent)</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<P>
The Component hierarchy complements these primitive controls with
classes based on the Container class. Containers are used to hold
Component classes and other Containers. Panels, Windows, Dialogs,
and Applets are all notable Container subclasses. The Container
classes are presented in more detail shortly.
<P>
You can use the primitive controls in Table 3.1 to quickly produce
a functional applet. Figure 3.2 shows such an applet; with five
components, it enables the user to choose what to display and
when to display it. A choice between painting nothing, a rectangle,
or text is offered. The class that does the drawing is a custom
subclass of the Canvas Component called DrawCanvas, located in
the middle of the applet. At the bottom of the screen is a Panel
with Button and Choice objects. The Choice menu object lets the
user decide what is to be painted when the Button object is clicked
(or when the applet repaints). A TextField object at the top of
the screen is used to specify which text will be displayed, if
text is used.
<P>
<A HREF="f3-2.gif" ><B>Figure 3.2 </B>: <I>Example with five companents</I></A>
<P>
Listing 3.1 provides the code for this example. Although the applet
is simple, it illustrates a lot of features. The <TT>init()</TT>
portion of the applet class (called <TT>Example1</TT>)
shows how easy it is to create and add classes to the applet display.
The <TT>handleEvent()</TT> method
overrides the default event handler and is used to trap button
clicks. The code checks to see whether the action came from its
button. If so, it forces the DrawCanvas object to repaint. The
user's selection in the Choice box will then be reflected.
<P>
The DrawCanvas class inherits the features of Canvas and adds
its own custom functions to it. When it is drawn with the <TT>paint()</TT>
method, the class queries the applet about the user's selections
and paints accordingly. This <TT>paint()</TT>
method can be issued either when the user clicks the button or
when a certain region of the canvas needs to be redrawn. The <TT>paint()</TT>
method is part of all Component classes. It must be overridden,
as in the DrawCanvas class, if any custom drawing needs to be
done.
<P>
The <TT>paint()</TT> method takes
as its sole parameter an instance of the Graphics class. This
class offers different methods that can be used to set the features
of the area being drawn. For example, the DrawCanvas class uses
the <TT>drawString()</TT> method to
put some text up on the drawing area. The <TT>drawRect()</TT>
and <TT>fillRect()</TT> methods paint
a rectangle that draws a border rectangle and its interior, respectively.
These rectangles are painted a color established by the <TT>setColor()</TT>
method. Since the <TT>paint()</TT>
method and the Graphics class are at the basis of drawing AWT
images, you will see more examples of these throughout the rest
of the book.<BR>
<HR>
<BLOCKQUOTE>
<B>Listing 3.1. An applet with five components.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT>import java.awt.*;<BR>
import java.lang.*;<BR>
import java.io.*;<BR>
import java.applet.*;<BR>
<BR>
// This program illustrates a simple applet with a <BR>
TextField,<BR>
<BR>
// Panel, Button, Choice menu, and Canvas.<BR>
public class Example1 extends Applet&nbsp;&nbsp;{<BR>
TextField tf;<BR>
DrawCanvas c;<BR>
Button drawBtn;<BR>
Choice ch;<BR>
// Add the Components to the screen...<BR>
public void init() {<BR>
<BR>
&nbsp;// Set up display area...<BR>
&nbsp;resize(300,200);<BR>
&nbsp;setLayout(new BorderLayout());<BR>
<BR>
&nbsp;// Add the components...<BR>
&nbsp;// Add the text at the top.<BR>
&nbsp;tf = new TextField();<BR>
&nbsp;add(&quot;North&quot;,tf);<BR>
<BR>
</TT>&nbsp;<TT>// Add the custom Canvas
to the center<BR>
&nbsp;c = new DrawCanvas(this);<BR>
&nbsp;add(&quot;Center&quot;,c);<BR>
<BR>
</TT>&nbsp;<TT>// Create the panel
with button and choices at the <BR>
bottom...<BR>
&nbsp;Panel p = new Panel();<BR>
&nbsp;drawBtn = new Button(&quot;Draw Choice Item&quot;);<BR>
&nbsp;p.add(drawBtn);<BR>
&nbsp;// Create the choice box and add the options...<BR>
&nbsp;ch = new Choice();<BR>
&nbsp;ch.addItem(&quot;Rectangle&quot;);<BR>
&nbsp;ch.addItem(&quot;Empty&quot;);<BR>
&nbsp;ch.addItem(&quot;Text&quot;);<BR>
&nbsp;p.add(ch);<BR>
&nbsp;add(&quot;South&quot;,p);<BR>
}<BR>
<BR>
// Handle events that have occurred<BR>
public boolean handleEvent(Event evt) {<BR>
switch(evt.id) {<BR>
</TT>&nbsp;<TT>// This can be handled
<BR>
&nbsp;case Event.ACTION_EVENT: {<BR>
&nbsp;&nbsp;if(evt.target instanceof Button)&nbsp;&nbsp;&nbsp;&nbsp;{
<BR>
&nbsp;&nbsp;&nbsp;// Repaint canvas to use new choices...<BR>
&nbsp;&nbsp;&nbsp;c.repaint();<BR>
&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;// end if<BR>
&nbsp;&nbsp;&nbsp;return false;<BR>
&nbsp;}<BR>
</TT>&nbsp;<TT>default:<BR>
&nbsp;&nbsp;return false;<BR>
&nbsp;}<BR>
}<BR>
<BR>
// Return the current choice to display...<BR>
public String getChoice() {<BR>
&nbsp;return ch.getSelectedItem();<BR>
}<BR>
<BR>
// Return the text in the list box...<BR>
public String getTextString() {<BR>
&nbsp;return tf.getText();<BR>
}<BR>
}<BR>
<BR>
// This is a custom canvas that is used for drawing<BR>
// text, a rectangle, or nothing...<BR>
class DrawCanvas extends Canvas {<BR>
Example1 e1app;<BR>
&nbsp;// Constructor - store the applet to get drawing <BR>
info...<BR>
&nbsp;public DrawCanvas(Example1 a) {<BR>
&nbsp;&nbsp;e1app = a;<BR>
&nbsp;}<BR>
</TT>&nbsp;<TT>// Draw the image per
the choices in the applet...<BR>
&nbsp;public synchronized void paint (Graphics g) {<BR>
&nbsp;&nbsp;// Get the current size of the display area...<BR>
&nbsp;&nbsp;Dimension dm = size();<BR>
&nbsp;&nbsp;// Draw based on choice...<BR>
&nbsp;&nbsp;String s = e1app.getChoice();<BR>
&nbsp;&nbsp;// Calculate center coordinates...<BR>
&nbsp;&nbsp;int x,y,width,height;<BR>
&nbsp;&nbsp;x = dm.width/4;<BR>
&nbsp;&nbsp;y = dm.height / 4;<BR>
&nbsp;&nbsp;width = dm.width / 2;<BR>
&nbsp;&nbsp;height = dm.height / 2;<BR>
&nbsp;&nbsp;// Paint a rectangle in the center...<BR>
&nbsp;&nbsp;if (s.compareTo(&quot;Rectangle&quot;) == 0) {<BR>
&nbsp;&nbsp;&nbsp;// Draw the rectangle in the center with colors!
<BR>
&nbsp;&nbsp;&nbsp;g.setColor(Color.blue);<BR>
&nbsp;&nbsp;&nbsp;g.drawRect(x,y,width,height);<BR>
&nbsp;&nbsp;&nbsp;g.setColor(Color.yellow);<BR>
&nbsp;&nbsp;&nbsp;g.fillRect(x + 1,y + 1,width - 2,height - 2);
<BR>
&nbsp;&nbsp;} // end if<BR>
&nbsp;&nbsp;// Get the text in the applet and display in the 
<BR>
middle...<BR>
&nbsp;&nbsp;if (s.compareTo(&quot;Text&quot;) == 0) {<BR>
&nbsp;&nbsp;&nbsp;String displayText = e1app.getTextString();
<BR>
&nbsp;&nbsp;&nbsp;g.setColor(Color.red);<BR>
&nbsp;&nbsp;&nbsp;g.drawString(displayText,x,y + (height/2));
<BR>
&nbsp;&nbsp;}<BR>
</TT>&nbsp;<TT>}<BR>
}</TT>
</BLOCKQUOTE>
<HR>
<P>
The other Component in this example is a Panel, which is a subclass
of Container. In the example, the Panel contains the Button and
Choice objects. Containers are good for managing a group of Components
and have a special meaning in AWT regarding how an object is displayed.
Containers function as a broker for how a component within it
is presented. If a component's display coordinates are outside
the region of a container, it is clipped. More importantly, Containers
provide a mechanism for <I>how</I> an object is presented, especially
its size and position. This is closely tied to how Layouts work,
discussed briefly in the following section.
<P>
One interesting aspect of AWT is that the Applet class is derived
from Panel. This may seem unusual at first; however, an Applet
really functions as a Container. Objects that do not fit within
its area are clipped in display, and if the Applet is destroyed,
so are the objects within it. Given this, the Applet class can
be easily understood as simply a Panel with additional functions
that tie it to the workings of the native browser.
<P>
The Window, Frame, and Dialog classes are also Containers that
figure prominently. These are used to create objects that &quot;pop
up&quot; outside the space of the applet, giving a multidimensional
feel to an otherwise &quot;flat&quot; Web page. These classes
will be discussed in more detail in the next chapter.
<H3><A NAME="Layouts">Layouts</A></H3>
<P>
For someone who has not seen Java applet code before, one question
that might immediately come to mind from the previous example
is: How does the program know where to position the Component
objects on the screen? After all, there is no coordinate information
in the code. And what do code expressions like <TT>add(&quot;North&quot;,
tf)</TT> mean?
<P>
The key to understanding the previous code and how AWT displays
components in general is a knowledge of layouts. Containers rely
on layouts to give you a way to determine the size and position
of the components within it. Every container is tied to a single
instance of a layout. The layout that a container uses is either
set by default or through programming. In Listing 3.1, the layout
of the Applet object, Example1, is set to an instance of the BorderLayout
class by the line:
<BLOCKQUOTE>
<TT>setLayout(new BorderLayout());</TT>
</BLOCKQUOTE>
<P>
Since the Panel class is also a container, it too has a layout.
The default class, FlowLayout, is used in the example.
<P>
Layouts are an important part of AWT because they take care of
a major issue in Java: portability. Although the language portion
of Java takes care of software portability concerns, it cannot,
by nature, take care of visual portability issues. Namely, how
can Java guarantee that an applet developed on a specific GUI
(such as Windows 95) and on a specific monitor resolution (such
as VGA) have a proper look and feel on other platforms? The AWT
package was designed to solve this problem. By providing a level
of abstraction above the native GUI, it can hide the specifics
of the underlying environment from the developer. Layouts are
key elements of the visual part of the abstraction mechanism.
By taking control of the sizing and positioning of components,
layouts free the developer from having to worry about how to write
an applet that looks good on the variety of monitor resolutions
in the field. Layouts dynamically calculate how to present a component
by looking at the native display-coordinate system at runtime;
the sizing and positioning of the components is based on this
runtime information.
<P>
All layouts are derived from the LayoutManager interface, which
specifies how a layout needs to function. AWT provides five classes
(described in the following sections) that set up the LayoutManager
interface. This range of layouts allows the developer to choose
the appropriate layout manager for the requirements at hand; if
these choices aren't enough, a new class can be written. In fact,
Java developers have already created several custom layout classes.
Various incarnations of a RelativeLayout class have been created
that lets you state where components go in relation to each other.
By navigating the Java home pages on the Internet, you might find
a layout class that better fits your development needs. Some of
the entry points to Java on the Internet are mentioned in this
book's Introduction.
<H4>Border Layout</H4>
<P>
In Listing 3.1, the applet specifies adding new components through
an unusual scheme that uses such terms as &quot;North&quot; and
&quot;South&quot;. This scheme reflects how the BorderLayout class
works. In the example, BorderLayout is tied to the Example1 applet
class when the <TT>setLayout()</TT>
method is invoked. This method indicates that the Example1 object,
which is an instance of Container, is tied to the BorderLayout
object. When a Container uses BorderLayout, a Component is added
through a command of this form:
<BLOCKQUOTE>
<TT>add(String direction, Component);</TT>
</BLOCKQUOTE>
<P>
Direction is one of the following Strings: <TT>&quot;North&quot;</TT>,
<TT>&quot;South&quot;</TT>, <TT>&quot;East&quot;</TT>,
<TT>&quot;West&quot;</TT>, and <TT>&quot;Center&quot;</TT>.
In short, the BorderLayout class uses a directional scheme to
position a component based on one of the five direction strings.
A component set to the <TT>&quot;North&quot;</TT>
direction is set to the top of the container, one that is set
to <TT>&quot;South&quot;</TT> is positioned
at the bottom, and so forth. The size of the components is determined
by other runtime information, such as the size of the container
(usually set by the <TT>resize()</TT>
method) and the attributes of the displayed component. The default
behavior of BorderLayout gives the component set to the <TT>&quot;Center&quot;</TT>
direction any space not used by the other components. In Listing
3.1, the Example1 applet dimensions are set to 300<FONT FACE="Symbol">&#165;</FONT>200
pixels. The TextField and Panel objects are relatively small and