<HTML>
<HEAD>

<!-- Change the Title please -->
<TITLE>AWT SHORT COURSE: NestedPanels</TITLE>
</HEAD>

<!-- BODY-TEMPLATE -->

<!-- NAVBAR-PULLQUOTE-TEMPLATE -->
<TR VALIGN=TOP>
<td width=178>

<BR clear=LEFT>
<TABLE ALIGN=LEFT>
<TR VALIGN=TOP>
<td width=60>
<a href="../TOC.html"><img border=0 src="/developer/images/magelang/contents.gif" alt="contents" WIDTH=147 HEIGHT=23></a>
</td>
</tr>
<tr>
<td>
<a href="RatioLayout.html"><img border=0 src="/developer/images/magelang/previous.gif" hspace=10 alt="Previous" width=64 height=20></a>
</td>
<td>
<a href="NestedEvent.html"><img border=0 src="/developer/images/magelang/next.gif" alt="Next" width=43 height=20></a>
</td>
</tr>
</table>

</TR>
</TABLE>

<!-- PAGETOP-TEMPLATE -->
<TR>
<TD WIDTH=452 ALIGN=RIGHT>
<img src=images/ShortCourse.gif>
</TD>
</TR>
<TR>
<TD WIDTH=452 COLSPAN=2 ALIGN=right>
<!--breadcrumb trail; change to reflect the current URL-->
<!-- Please change to reflect where _exactly_ you are in the site
<!-- Add more subcategories as needed  -->

<!-- Please Change these.  The Links are SubCat#, and titled SubCategory# -->
</TD>
</TR>

<!--- Please put everything you want here to the right of the navbar.
	<TR>
	<TD>
	This is the MAIN TABLE.  Put data HERE unless you need a table that
 	REQUIRES the full screen width, i.e. an event schedule table.
	Add a new table row for the data.

	If the text needs to be in two columns, use this <TR> structure:
	Make the width=452
	<TR>
	<TD WIDTH=226>
	</TD>
	<TD WIDTH=226>
	</TD>
	</TR>

	</TD>
	</TR>
--->

<TR>
<TD width=452>
<p>
<a name="Nested Panels">
<font size=+1><b>Nested Panels</b></font><P>
</a>

<p>
Even simple graphical interfaces often require more than one layout manager.  That is, portions of the visible applet region need be laid out differently from other portions.  Further, you may want to create <a name="compound components">compound components</a>, such as a LabeledTextField, that contains both a Label and a TextField.  In this section, we describe how multiple components can be combined into a single Container and treated like an ordinary Component for layout and encapsulation purposes. 

<p>
How would you build a telephone key pad object? You could easily set the applet layout manager to GridLayout and then add the keys, however, your whole applet would be a keypad.  If you needed the key pad as only a portion of the applet, this simple approach would not work.  The solution is to place all the keys in their own Container--that way you can treat the whole key pad like a single Component.  Class Panel is normally used to produce compound Component objects as illustrated in the following KeyPad class:

<p>
<tt><pre>
class KeyPad extends Panel {
    String[] keys = { "1","2","3",
                      "4","5","6",
                      "7","8","9",
                      "*","0","#" };
    Button[] b = new Button[keys.length];
    public KeyPad() {
        setLayout(new GridLayout(4,3));
        for (int i=0; i&ltkeys.length; i++) {
            b[i] = new Button(String.valueOf(keys[i]));
            add(b[i]);
        }
    }
}
</pre></tt>

<p>
An applet can then instantiate and display KeyPad objects easily:

<p>
<center>
<hr>
<applet code=NestedTest CODEBASE="/applets/magelang/AWT-Training/Examples/" width=150 height=100>
</applet>
<hr>
</center>

<p>
Corresponding source code:

<tt><pre>
import java.awt.*;
import java.applet.Applet;

public class NestedTest extends Applet {
    public void init() {
        KeyPad k1 = new KeyPad();
        KeyPad k2 = new KeyPad();
        add(k1);
        add(k2);
    }
}
</pre></tt>

<p>
The containment hierarchy diagram for NestedTest reflects the fact that the main applet contains only two elements--KeyPad containers, which in turn each contain 12 keys:

<center>
<img src=./images/keypad.gif>
</center>

<p>
What do you do if you want the key pad to be bigger? The applet's default FlowLayout manager uses the preferred size of each Component when laying them out.  The preferred size of the KeyPad will be the combined preferred size of the keys because the KeyPad size is not specified and FlowLayout does not try to stretch its components.  To make a bigger key pad, we must set the preferred size of the Keypad Container, which the applet FlowLayout will use to set the size of the KeyPad.  We define preferredSize in class KeyPad to return 100x100 so that the applet will stretch the keypad to 100x100 pixels:

<p>
<tt><pre>
public Dimension preferredSize() {
    return new Dimension(100,100);
}
</pre></tt>

<p>
The applet then looks like:

<p>
<center>
<hr>
<applet code=NestedTestFat CODEBASE="/applets/magelang/AWT-Training/Examples/" width=250 height=115>
</applet>
<hr>
</center>

<p>
It is normally not a good idea to specify the size of components, because different systems have different font and widget sizes, but this example demonstrates how nested containers are used.

<p>
Related exercises:
<ul>
<LI><A HREF="../Exercise/ContactInfoFormTest/index.html"> ContactInfoFormTest</A>
<LI><A HREF="../Exercise/LabeledTextFieldTest/index.html"> LabeledTextFieldTest</A>
<LI><A HREF="../Exercise/JobTitleListTest/index.html"> JobTitleListTest</A>
</ul>

<p>
This section has the following subsection:

<ul>
<li><a href="NestedEvent.html">Nested Containers and The Event Chain</a>
</ul>
</TD>
</TR>
</TABLE>

<!--
        This table is for everything that goes under the 
        navbar, it is a full screen table. Use this table 
        ONLY for full screen width tables like an event 
        hourly schedule.
-->

<br clear=left>
<TABLE ALIGN=left>

<tr>
<td WIDTH=600 align=right>

<!--Last Modified and copyright message

    Please modify the date whenever significant changes are made to 
    a page; leave the copyright alone
-->

</td>
</tr>
</TABLE>

</BODY>
</HTML>
