<HTML>
<HEAD>

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

The <a href="http://java.sun.com:80/products/JDK/CurrentRelease/api/java.awt.FlowLayout.html">FlowLayout</a> arranges Component objects left-to-right until no more objects fit on that line. Any further objects you add will wrap to the next line. Each line of Component objects is centered in the Container. FlowLayout is the default behavior of Panel and, therefore, of Applet.

<p>
The applet invocation in HTML is:
<tt><pre>
&ltapplet code=FlowLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/"
width=150 height=35>
&lt/applet>
</pre></tt>

<p>
results in applet:
<p>
<center>
<hr>
<applet code=FlowLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/" width=150 height=35></applet>
<hr>
</center>

<p>
The same applet can be invoked with a different geometry--the layout manager takes care of placing the elements within the region:
<tt><pre>
&ltapplet code=FlowLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/"
width=50 height=90>
&lt/applet>
</pre></tt>

<p>
results in applet:
<p>
<center>
<hr>
<applet code=FlowLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/" width=50 height=90></applet>
<hr>
</center>

<p>
Corresponding source code:

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

public class FlowLayoutTest extends Applet {
    public void init() {
        setLayout(new FlowLayout()); // default
        add(new Button("B1"));
        add(new Button("B2"));
        add(new Button("B3"));
    }
}
</pre></tt>

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

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