<HTML>
<HEAD>

<!-- Change the Title please -->
<TITLE>AWT SHORT COURSE: BorderLayout</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="FlowLayout.html"><img border=0 src="/developer/images/magelang/previous.gif" hspace=10 alt="Previous" width=64 height=20></a>
</td>
<td>
<a href="CardLayout.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="BorderLayout">
<font size=+1><B>BorderLayout</B></font><P>
</a>

The <a href="http://java.sun.com:80/products/JDK/CurrentRelease/api/java.awt.BorderLayout.html">BorderLayout</a> manager has “North”, “East”, “South”, “West”, and “Center” positions where you can place components. The “North”, “East”, “South”, “West” components are placed around the border, and the “Center” component takes up the leftover space in the middle. The components are automatically resized when the area of the layout is changed.  For example, here is an applet with two buttons, a Label, a TextField, and a TextArea:

<p>
<center>
<hr>
<applet code=BorderLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/" width=200 height=150></applet>
<hr>
</center>

<p>
You can invoke the same applet within a smaller region without changing the applet:

<p>
<center>
<hr>
<applet code=BorderLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/" width=150 height=130></applet>
<hr>
</center>

<p>
Corrsponding source code:

<tt><pre>
import java.awt.*;
import java.applet.Applet;
public class BorderLayoutTest extends Applet {
    public void init() {
        setLayout(new BorderLayout());
        add("North", new Label("A Header Maybe"));
        add("South",new TextField("Type some text here"));
        add("West",new Button("QUIT"));
        add("East", new Button("HELP"));
        add("Center",new TextArea("Some random text\nin a TextArea"));
    }
}
</pre></tt>

<p>
See also <a href="http://java.sun.com:80/books/Series/Tutorial/ui/layout/border.html">How to Use BorderLayout</a>.

<p>
Related exercise(s):
<ul>
<LI><A HREF="../Exercise/BorderLayoutTest/index.html"> BorderLayoutTest</A>
<LI><A HREF="../Exercise/LabeledTextFieldTest/index.html"> LabeledTextFieldTest</A>
<LI><A HREF="../Exercise/CommentBoxTest/index.html"> CommentBoxTest</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>
