<HTML>
<HEAD>

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

<p>
The layout managers provided with the AWT cover most GUI designs that you are likely to build. However, there may be situations where you would like to specify the position of widgets as ratios of the Container width and height.
For example, you might want a set of TextField objects with their left edges lined up down the middle of the Container.  Further, you might want to specify that the TextFields extend to the right edge of the Container.  In this section, we describe a simple layout manager that is not part of the JDK, but which handles this situation well.  The RatioLayout manager is described in the Java In-Depth article <a href="javaInDepth/layout-mgrs-10-96.html">How to Build a Layout Manager</a>; which we use in some of the exercises.  Here is our TextField column using RatioLayout:

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

<p>
Corresponding source code:

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

public class RatioLayoutTest2 extends java.applet.Applet {
    public void init() {
        setLayout(new RatioLayout());
        TextField tf1 = new TextField("field 1");
        TextField tf2 = new TextField("field 2");
        TextField tf3 = new TextField("field 3");
        // place half way across at top, 50% width and 20% height
        add(".5,0;.5,.20", tf1);
        // place half way across, 30% down, 50% width and 20% height
        add(".5,.3;.5,.20", tf2);
        // place half way across, 60% down, 50% width and 20% height
        add(".5,.6;.5,.20", tf3);
    }
}</pre></tt>

Components added to a Container managed by a RatioLayout must specify a modifier, in the form of a String, that indicates the position and size as ratios of the Container width and height. This implies that the Container must have a
size; that is, if you create a Panel, you must call resize on it,  to use RatioLayout (else ratios will be computed with a width,height of 0,0). 
If you want to use the preferred size of the Component, the modifier is as follows: 

<tt><pre>
// example: ".25, .5" is 25% over and 50% down
"xratio, yratio"
</pre></tt>

<p>



If you want to specify the size of the Component: 

<tt><pre>
// example: "0,0;.5,.5" is upper left quadrant"xratio, yratio; widthRatio, heightRatio"
</pre></tt>

<p>


<p>
Consider another example where you would like a TextArea that consumes the top 75% of a Container area, leaving room for a Button that consumes the bottom 25%.

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

<p>
Corresponding source code:

<tt><pre>
import java.awt.*;
import java.applet.Applet;
public class RatioLayoutTest extends Applet {
    public void init() {
        setLayout(new RatioLayout());
        TextArea ta = new TextArea();
        ta.setText("A TextArea");
        Button ok = new Button("OK");
        add("0,0;1,.75", ta);
        add("0,.75;1,.25", ok);
    }
}
</pre></tt>

<p>
Note that a BorderLayout could handle this except that you could not specify the ratios.

<p>
RatioLayout has another feature that is often useful--position ratios can be replaced with "c", indicating that the Component is to be centered in that direction.  Consider centering a Label above a TextField without stretching the components (via BorderLayout or GridLayout):

<p>
<center>
<hr>
<applet code=RatioLayoutTest3 CODEBASE="/applets/magelang/AWT-Training/Examples/" width=300 height=55>
</applet>
<hr>
</center>

<p>
Corresponding source code:

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

public class RatioLayoutTest3 extends Applet {
    public void init() {
        setLayout(new RatioLayout());
        add("c,.1", new Label("A Centered Title"));
        add("c,.5",
            new TextField("A non-stretched TextField"));
    }
}
</pre></tt>

<p>
Related exercises:
<ul>
<LI><A HREF="../Exercise/RatioLayoutTest/index.html"> RatioLayoutTest</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>
