<HTML>
<HEAD>
<!-- Change the Title please -->
<TITLE>AWT SHORT COURSE: FlowLayout</TITLE>
</HEAD>
<!-- Start Body Insert-->
<BODY BGCOLOR="#ffffff">
<!-- End Body Insert-->
<!-- Start NavBar Insert -->
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=134 ALIGN=LEFT>
<TR>
<TD WIDTH=600 VALIGN=TOP ALIGN=RIGHT>
<A HREF="/developer/techSupport/"><IMG WIDTH=134 HEIGHT=84 SRC="/images/menuts.gif" ALT="Technical Support" BORDER=0></A><BR>
<A HREF="/developer/discussForum/"><IMG WIDTH=134 HEIGHT=20 SRC="/images/menudf.gif" ALT="Discussion Forum" BORDER=0></A><BR>
<A HREF="/developer/onlineTraining/"><IMG WIDTH=134 HEIGHT=26 SRC="/images/menuot.gif" ALT="Online Training" BORDER=0></A><BR>
<A HREF="/developer/readAboutJava/"><IMG WIDTH=134 HEIGHT=27 SRC="/images/menuraj.gif" ALT="Read About Java" BORDER=0></A><BR>
<A HREF="/developer/javaInDepth/"><IMG WIDTH=134 HEIGHT=26 SRC="/images/menujid.gif" ALT="Java In-Depth" BORDER=0></A><BR>
<A HREF="/developer/productDiscount/"><IMG WIDTH=134 HEIGHT=24 SRC="/images/menupd.gif" ALT="Product Discounts" BORDER=0></A><BR>
<A HREF="/developer/memberInfo/"><IMG WIDTH=134 HEIGHT=25 SRC="/images/menumi.gif" ALT="Membership Information" BORDER=0></A>
<P>
<CENTER>
<A HREF="http://java.sun.com/"><IMG WIDTH=31 HEIGHT=54 SRC="/images/cuplogo.gif" ALT="Java Cup Logo" BORDER=0></A>
</CENTER>
</P>
<p>
<CENTER><font size=-1>
<a href="/developer/jdchome.html">JDC Home Page</a>
</font>
</CENTER>
</P>
</TD>
</TR>
<!-- End NavBar Insert -->
<TR VALIGN=TOP>
<td width=124>
<BR clear=LEFT>
<TABLE ALIGN=LEFT>
<TR VALIGN=TOP>
<td width=60>
<a href="../TOC.html"><img border=0 src="/images/magelang/top.66x19.gif" ALT="Top" WIDTH=66 HEIGHT=19></a>
</td>
</tr>
<tr>
<td>
<a href="Layout.html"><img border=0 src="/images/magelang/back.66x19.gif" ALT="Back" WIDTH=66 HEIGHT=19></A><BR>
<a href="BorderLayout.html"><img border=0 src="/images/magelang/next.66x19.gif" ALT="Next" WIDTH=66 HEIGHT=19></a>
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
<!-- Start PageTop Insert -->
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=466>
<TR>
<TD ALIGN="LEFT" VALIGN="TOP">
<IMG SRC="/images/banner.onlinetraining.465x80.gif" ALT="Online Training" WIDTH=465 HEIGHT=80 BORDER=0><BR>
<DIV ALIGN=RIGHT><IMG SRC="/images/shdw.gif" ALT="shadow" WIDTH=291 HEIGHT=22><A HREF="/developer/techDocs/knowledgebase.html"><IMG SRC="/images/search.gif" ALT="Search" WIDTH=59 HEIGHT=22 BORDER=0></A><A HREF="/developer/faq/index.html"><IMG SRC="/images/faq.gif" ALT="FAQ" WIDTH=34 HEIGHT=22 BORDER=0></A><A HREF="/developer/feedback.html"><IMG SRC="/images/feedbk.gif" ALT="Feedback" WIDTH=82 HEIGHT=22 BORDER=0></A></DIV>
</TD>
</TR>
<TR>
<TD HEIGHT=25>
<!-- spacer -->
<BR>
</TD>
</TR>
<!-- End PageTop Insert -->
<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><STRONG>FlowLayout</STRONG></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>
<applet code=FlowLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/"
width=150 height=35>
</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>
<applet code=FlowLayoutTest.class CODEBASE="/applets/magelang/AWT-Training/Examples/"
width=50 height=90>
</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>