TweetFollow Us on Twitter

Java Grids
Volume Number:12
Issue Number:11
Column Tag:Getting Started

Two Java Grid Layouts

By Dave Mark

Note: Source code files accompanying article are located on MacTech CD-ROM or source code disks.

Last month, we introduced the Java Layout Manager and saw the power of layouts combined with panels. This month, we’ll look at two important layout classes, GridLayout and GridBagLayout, and present a series of applets that bring these two classes to life.

There is a newly reformatted set of Java API documentation, collectively known as the 1.0.2 API. If you don’t already have this, go get it now. The URL is:

http://java.sun.com/doc/api_documentation.html

There are two Mac download links on this page. Though it’s bigger, you might try the .hqx file (as opposed to the .bin file). I’m not sure why, but when I downloaded the .bin file and dropped it on StuffIt Expander, the final .sea file was corrupted. On the other hand, by the time you read this, the problem most likely will have been corrected.

GridLayout

As its name implies, the GridLayout lays out its components in a grid. GridLayout has two constructors:

public GridLayout( int  rows, int  cols );

This one creates a grid layout with the specified rows and columns. As you’ll see, GridLayout does the best it can to lay the current set of components out in this configuration. But what if you have too few components? Or too many? This month’s sample applets are ideal for experimenting.

The second constructor adds two new parameters:

public GridLayout( int  rows, int  cols,
                   int  hgap, int  vgap );

This version creates a grid layout with the specified rows and columns, but also lets you specify a minimal horizontal and vertical gap to appear between the components.

GridLayout is pretty straightforward. Here’s a sample applet to take it for a spin.

• Launch the CodeWarrior IDE and create a new “Java Applet” project called GridLayout.µ.

• Create a new source code window, type in the following source code, save as GridLayout.Java, and add to it the project.

import java.awt.*;

public class MyGrid extends java.applet.Applet
{
 public MyGrid()
 {
 setLayout( new GridLayout( 4, 4 ) );
 
 add( new Button( “1” ) );
 add( new Button( “2” ) );
 add( new Button( “3” ) );
 add( new Button( “4” ) );
 add( new Button( “5” ) );
 add( new Button( “6” ) );
 add( new Button( “7” ) );
 add( new Button( “8” ) );
 add( new Button( “9” ) );
 add( new Button( “10” ) );
 add( new Button( “11” ) );
 add( new Button( “12” ) );
 add( new Button( “13” ) );
 add( new Button( “14” ) );
 add( new Button( “15” ) );
 add( new Button( “16” ) );
 }
}

• Create a second source code window, type in the following HTML, save as GridLayout.html, and add it to the project as well.

<title>GridLayout</title>
<hr>
<applet codebase=”GridLayout Files” code=”MyGrid.class” width=200 height=200>
</applet>
<hr>
<a href=”GridLayout.java”>The source.</a>

• Remove the two <replace me> files from the project (Apple-click on the files to select them, then hit option-delete).

• Edit the project prefs, specifically, the Java Project pane. Set the Project Type popup to “Class Folder” and type “GridLayout Files” (without the quotes) as the Folder Name.

It’s important that the Class Folder preference exactly match the “codebase” attribute in your HTML file.

• Once all your source is in place, select Make from the Project menu to generate your class file.

• To run your applet, drop the html file onto your Java Applet runner or Java-capable browser. Figure 1 shows my version running in a Netscape window.

Figure 1. The GridLayout applet, running in Netscape.

The GridLayout Source Code

Here’s how the source code works. First comes the normal opening stuff, the import statement and class definition. The setLayout() statement creates a new GridLayout object with 4 rows and 4 columns, and makes it the current layout.

import java.awt.*;

public class MyGrid extends java.applet.Applet
{
 public MyGrid()
 {
 setLayout( new GridLayout( 4, 4 ) );

Next, we create a series of 16 buttons and add them to the current frame.

 add( new Button( “1” ) );
 add( new Button( “2” ) );
 add( new Button( “3” ) );
 add( new Button( “4” ) );
 add( new Button( “5” ) );
 add( new Button( “6” ) );
 add( new Button( “7” ) );
 add( new Button( “8” ) );
 add( new Button( “9” ) );
 add( new Button( “10” ) );
 add( new Button( “11” ) );
 add( new Button( “12” ) );
 add( new Button( “13” ) );
 add( new Button( “14” ) );
 add( new Button( “15” ) );
 add( new Button( “16” ) );
 }
}

That’s it! When you run the applet, your 16 buttons will appear in a 4 by 4 grid. The width and height of the buttons is determined by the width and height attributes in your HTML’s applet tag. Make the applet frame wider, the buttons will each be made wider. Make the frame taller, the buttons will each be made taller.

You can also affect the results by changing the parameters you pass to the GridLayout constructor. Experiment.

GridLayout, Version 2

Here’s another GridLayout applet. This one uses all four constructor parameters, and includes a nifty little trick you’ll want to remember. First, here’s the code:

import java.awt.*;

public class MyGrid extends java.applet.Applet
{
 int    numButtons;
 String att;
 
 public void init()
 {
 att = getParameter( “NUMBUTTONS” );
 numButtons = Integer.valueOf(att).intValue();
 
 setLayout( new GridLayout( 2, 20, 5, 20 ) );
 
 for ( int i=1; i<=numButtons; i++ )
 add( new Button( “”+i ) );
 }
}

Next, here’s the HTML:

<title>GridLayout</title>
<hr>
<applet codebase=”GridLayout Files” code=”MyGrid.class” width=400 height=200>
<param name=”NUMBUTTONS” value=”16”>
</applet>
<hr>
<a href=”GridLayout.java”>The source.</a>

Figure 2 shows the applet in action, running under Netscape. Let’s take a look at this source.

Figure 2. Another GridLayout applet using all 4 parameters.

GridLayout 2 Source Code

This version of GridLayout.Java starts off in the same way, but does its creating in init() instead of in MyGrid(). This gives us access to the HTML parameters. I’m not sure why getParameter() doesn’t work from within MyGrid(), but I’ll look into it.

import java.awt.*;

public class MyGrid extends java.applet.Applet
{
 int    numButtons;
 String att;

If you look back at the HTML, you’ll see that we stuck in a parameter with the name “NUMBUTTONS” and a value of “16”. We call getParameter() to pick up the parameter and Integer.valueOf(att).intValue() to convert the returned string to a number. Next, we create a new GridLayout using all 4 parameters and make it the current layout. Note that we’ve specified 2 rows and 20 columns, with 5 pixels horizontally and 20 pixels vertically between components. The Layout Manager uses the row value first for GridLayouts, so the fact that you’ve specified 20 columns really has no affect. Try using 0 for a column value.

 public void init()
 {
 att = getParameter( “NUMBUTTONS” );
 numButtons = Integer.valueOf(att).intValue();
 
 setLayout( new GridLayout( 2, 20, 5, 20 ) );

Now for the cool trick. In our earlier example, we explicitly specified the name of each button using Strings like “1”, “2”, etc. In this case, we add the loop counter, i, to the null string to produce a string representation of the loop counter. Basically, we’ve forced Java to do the typecasting from number to String for us, since the + operator is expecting a String on both sides. Pretty cool, eh?

 for ( int i=1; i<=numButtons; i++ )
 add( new Button( “”+i ) );
 }
}

The GridBagLayout

The GridLayout works pretty well if all your components are the same size. But, suppose you are working with all sorts of elements; some tall, some wide, whatever. In this case, the GridLayout won’t work particularly well (it’ll waste a lot of screen real estate). Fortunately, there is a complex, grid-based class designed to handle variable sized components.

GridBagLayout and its sister class, GridBagConstraints, allow you to customize a layout that allows components to span multiple grid cells. The GridBagConstraints class features a number of variables, each designed to constrain any components added to the current GridBagLayout. Take a look at the GridBagConstraints class declaration:

public  class  Java.awt.GridBagConstraints
    extends  Java.lang.Object
    implements Java.lang.Cloneable
{
        // Fields
    public int anchor;
    public int fill;
    public int gridheight;
    public int gridwidth;
    public int gridx;
    public int gridy;
    public Insets insets;
    public int ipadx;
    public int ipady;
    public double weightx;
    public double weighty;

        // the anchor field has one of the following values     
    public final static int CENTER;
    public final static int EAST;
    public final static int NORTH;
    public final static int NORTHEAST;
    public final static int NORTHWEST;
    public final static int SOUTH;
    public final static int SOUTHEAST;
    public final static int SOUTHWEST;
    public final static int WEST;

        // the fill field has one of the following values       
    public final static int BOTH;
    public final static int HORIZONTAL;
    public final static int NONE;
    public final static int VERTICAL;

        // default value for gridheight, gridwidth
    public final static int REMAINDER;

        // default value for gridx, gridy
    public final static int RELATIVE;

        // Constructors
    public GridBagConstraints();

        // Methods
    public Object clone();
}

To use a GridBagLayout, you’ll create a GridBagLayout object along with a corresponding GridBagConstraints object, then make the GridBagLayout the current object. Next, you’ll set your GridBagConstraints fields to the settings you prefer. Now you are ready to start adding components to the current frame. All the added components will be formatted according to the current GridBagConstraints settings. Change the constraints settings and add some more components. The changed constraints only affect future components, not the components that were already added.

anchor determines where, within a cell, the component is placed. fill determines if the component is reissued to fill its cell and, if so, how. gridheight specifies the number of cells in a column. gridwidth specifies the number of cells in a row. REMAINDER is used to mark a component as the last in its row or column. RELATIVE is used to mark a component as next to last.

gridx and gridy allow you to specify where to place the component in the grid. A value of (0,0) will put the next component in the upper left corner. A value of RELATIVE will put the component either at the end of a row (in the case of gridx) or column (in the case of gridy).

insets specifies the number of pixels of padding on any side of a cell. ipadx and ipady allow you to specify the padding in pixels within a cell.

Finally, weightx and weighty allow you to specify how much horizontal and vertical space this component should consume when the available extra display area is divvied up between all the components in a row or column.

A GridBagLayout Example

There is really no way to truly appreciate the GridBagLayout without playing with an example. The following is one of the standard Sun applets, stripped down to make it as small as possible. Take some time to play with this applet. Change the constraints, experiment with all the fields and settings to see what they do.

Here’s the source code:

import java.awt.*;

public class MyGridBag extends java.applet.Applet
{
 public MyGridBag()
 {
 GridBagLayout   gridBag = new GridBagLayout();
 GridBagConstraintsconstraints =
                new GridBagConstraints();
 
 setLayout( gridBag );
 
 constraints.fill  =  constraints.BOTH;
 constraints.weightx  =  1.0;

 ConstrainedButton(“Button1”,  gridBag,  constraints );
 ConstrainedButton(“Button2”,  gridBag,  constraints );
 ConstrainedButton(“Button3”,  gridBag,  constraints );

 constraints.gridwidth  =  constraints.REMAINDER;  

 ConstrainedButton(“Button4”,  gridBag,  constraints );

 constraints.weightx  =  0.0;

 ConstrainedButton(“Button5”,  gridBag,  constraints );
 
 constraints.gridwidth  =  constraints.RELATIVE;
 
 ConstrainedButton(“Button6”,  gridBag,  constraints );
 
 constraints.gridwidth  =  constraints.REMAINDER;
 
 ConstrainedButton(“Button7”,  gridBag,  constraints );
 
 constraints.gridwidth  =  1;
 constraints.gridheight  =  2;
 constraints.weighty  =  1.0;
 
 ConstrainedButton(“Button8”,  gridBag,  constraints );
 
 constraints.weighty  =  0.0;
 constraints.gridwidth  =  constraints.REMAINDER;  
 constraints.gridheight  =  1;
 
 ConstrainedButton(“Button9”,  gridBag,  constraints );
 ConstrainedButton(“Button10”,  gridBag,  constraints );
 }
 
 void ConstrainedButton( String title,
 GridBagLayout layout, GridBagConstraints constraints )
 {
 Button button = new Button( title );
 layout.setConstraints( button, constraints );
 add( button );
 }
}

Here’s the HTML:

<title>GridBagLayout</title>
<hr>
<applet codebase=”GridBagLayout Files” code=”MyGridBag.class” width=400 
height=100>
</applet>
<hr>
<a href=”GridBagLayout.java”>The source.</a>

Figure 3 shows the results of this applet, when run in Netscape.

Figure 3. The classic GridBagLayout applet from Sun.

Till Next Month...

As you go through the GridBagLayout source, pay attention to the use of REMAINDER and RELATIVE. Remember, you are marking a component as 2nd to last and last in its row or column. For example, Button4 should be the last in its row. Button6 should be RELATIVE (2nd to last) while Button7 should be REMAINDER (last). All the buttons should use a gridheight of 1 except for Button8, which will use a gridheight of 2. You get the idea.

Next month, we’ll take a look at double-buffered animation, something that Java makes fairly easy to do. Till then, have a Happy Thanksgiving and save me a wishbone...

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

OmniGraffle Pro 6.1.4 - Create diagrams,...
OmniGraffle Pro helps you draw beautiful diagrams, family trees, flow charts, org charts, layouts, and (mathematically speaking) any other directed or non-directed graphs. We've had people use... Read more
OmniGraffle 6.1.4 - Create diagrams, flo...
OmniGraffle helps you draw beautiful diagrams, family trees, flow charts, org charts, layouts, and (mathematically speaking) any other directed or non-directed graphs. We've had people use Graffle to... Read more
MegaSeg 5.9.5 - Professional MP3 DJ appl...
MegaSeg is a complete solution for pro audio/video DJ mixing, radio automation, and music scheduling with rock-solid performance and an easy-to-use design. Mix with visual waveforms and Magic... Read more
MarsEdit 3.6.8 - Quick and convenient bl...
MarsEdit is a blog editor for OS X that makes editing your blog like writing email, with spell-checking, drafts, multiple windows, and even AppleScript support. It works with with most blog services... Read more
BBEdit 11.0.3 - Powerful text and HTML e...
BBEdit is the leading professional HTML and text editor for the Mac. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides a... Read more
Microsoft Office Preview 15.8 - Popular...
Welcome to the new and modern Microsoft Office for Mac. You will receive regular updates automatically until the official release in the second half of 2015. With the redesigned Ribbon and your... Read more
Yosemite Cache Cleaner 9.0.5 - Clear cac...
Yosemite Cache Cleaner is an award-winning general purpose tool for OS X. YCC makes system maintenance simple with an easy point-and-click interface to many OS X functions. Novice and expert users... Read more
ExpanDrive 4.3.2 - Access cloud storage...
ExpanDrive builds cloud storage in every application, acts just like a USB drive plugged into your Mac. With ExpanDrive, you can securely access any remote file server directly from the Finder or... Read more
RapidWeaver 6.0.8 - Create template-base...
RapidWeaver is a next-generation Web design application to help you easily create professional-looking Web sites in minutes. No knowledge of complex code is required, RapidWeaver will take care of... Read more
Artlantis Studio 5.1.2.7 - 3D rendering...
Artlantis Studio is a unique and ideal tool for performing very high resolution rendering easily and in real time. The new FastRadiosity engine now lets you compute images in radiosity-even in... Read more

Bored? MyLeisure FreeTime Maximizer Will...
Bored? MyLeisure FreeTime Maximizer Will Take Care of That! Posted by Jessica Fisher on March 5th, 2015 [ permalink ] iPhone App - Designed for the iPhone, compatible with the iPad | Read more »
New Publisher Allstar Games Heads West w...
Allstar Games has announced its first mobile title designed for western audiences, Allstar Heroes. The game will be a massive online battle arena (MOBA) that offers dozens of heroes for you to collect and pit against your opponents. As each hero has... | Read more »
RAD Boarding Review
RAD Boarding Review By Jennifer Allen on March 5th, 2015 Our Rating: :: NEARLY RADUniversal App - Designed for iPhone and iPad RAD Boarding isn’t quite one of the greats, but it has potential.   | Read more »
Presenting the International Mobile Gami...
11th Annual International Mobile Gaming Awards ceremony, hosted by actress Allison Haislip, gathered mobile game developers and publishers from around the world. They chose 13 winners out of the 93 nominations. British studio USTWO won the the Grand... | Read more »
AG Drive Review
AG Drive Review By Tre Lawrence on March 5th, 2015 Our Rating: :: FUTURISTIC STREET RACING.Universal App - Designed for iPhone and iPad Futuristic racing… interstellar style.   | Read more »
GDC 2015 – Nightmare Guardians is an Int...
GDC 2015 – Nightmare Guardians is an Interesting Hybrid of MOBA and Lane Defense Posted by Rob Rich on March 5th, 2015 [ permalink ] I have to say that lane defense (i.e. | Read more »
Overkill 3 Review
Overkill 3 Review By Tre Lawrence on March 5th, 2015 Our Rating: :: WHO'S NEXT?Universal App - Designed for iPhone and iPad Cover system gameplay in the third-person.   Developer: Craneballs Price: Free Version Reviewed: 1.1.6... | Read more »
Warner Bros. Interactive Entertainment A...
Warner Bros. has some exciting games coming down the pipe! | Read more »
GDC 2015 – Star Trek Timelines will Prob...
GDC 2015 – Star Trek Timelines will Probably Make Your Inner Trekkie Squeal With Glee Posted by Rob Rich on March 4th, 2015 [ permalink ] Any popular fictional universe has its fair share of fan fiction – where belo | Read more »
Protect Yourself from an Onslaught of Ca...
Surprise Attack Games has announced a Cat-astrophic new physics puzzler called Fort Meow! In the game, a young girl named Nia finds her grandfather’s journal which triggers an all mighty feline attack! Why do the cats want the journal? Who knows,... | Read more »

Price Scanner via MacPrices.net

Apple restocks refurbished 15-inch Retina Mac...
The Apple Store has restocked Apple Certified Refurbished 2014 15″ Retina MacBook Pros, available for up to $400 off the cost of new models. An Apple one-year warranty is included with each model,... Read more
Roundup of MacBook Air sale prices, models up...
B&H Photo has MacBook Airs on sale for up to $100 off MSRP. Shipping is free, and B&H charges NY sales tax only: - 11″ 128GB MacBook Air: $799 100 off MSRP - 11″ 256GB MacBook Air: $999 $100... Read more
New Firstrade Mobile App Enables On-The-Go Tr...
Firstrade Securities Inc. has announced its new mobile app, which gives investors immediate access to the company’s trading platform on all mobile devices. The app was developed in-house and was... Read more
Sonnet Introduces USB 3.0 + eSATA Thunderbolt...
Sonnet has announced the launch of its new USB 3.0 + eSATA Thunderbolt Adapter for easy connectivity to USB 3.0 devices and eSATA storage, and USB 3.0 + Gigabit Ethernet Thunderbolt Adapter for easy... Read more
Apple restocks refurbished 27-inch 5K iMacs f...
The Apple Store has restocked Apple Certified Refurbished 27″ 3.5GHz 5K iMacs for $2119 including free shipping. Their price is $380 off the cost of new models, and it’s the lowest price available... Read more
Free Clean Reader Mobile App Hides Swear Word...
The new Clean Reader app, now available in the Apple App Store and Google Play, delivers the opportunity of reading any book without being exposed to profanity. By selecting how clean they want their... Read more
Kinsa Launches “Groups” App to Monitor Illnes...
Kinsa, makers of the first FDA approved app-enabled smartphone thermometer thst won the 2013 Cleveland Clinic Medical Innovation Grand Prize and recently appeared in Apple’s “Parenthood” TV... Read more
iPad: A More Positive Outlook – The ‘Book Mys...
It’s good to hear someone saying positive things about the iPad. I’ve been trying to bend my mind around how Apple’s tablet could have gone from zero to bestselling personal computing device on the... Read more
Mac Pros on sale for up to $279 off MSRP
Amazon has Mac Pros in stock and on sale for up to $279 off MSRP. Shipping is free: - 4-Core Mac Pro: $2725.87, $273 off MSRP (9%) - 6-Core Mac Pro: $3719.99, $279 off MSRP (7%) Read more
Sale! 13-inch Retina MacBook Pros for up to $...
B&H Photo has 13″ Retina MacBook Pros on sale for up to $205 off MSRP. Shipping is free, and B&H charges NY sales tax only: - 13″ 2.6GHz/128GB Retina MacBook Pro: $1219.99 save $80 - 13″ 2.... Read more

Jobs Board

*Apple* Solutions Consultant - Retail Sales...
**Job Summary** As an Apple Solutions Consultant (ASC) you are the link between our customers and our products. Your role is to drive the Apple business in a retail Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
*Apple* Solutions Consultant - Retail Sales...
**Job Summary** As an Apple Solutions Consultant (ASC) you are the link between our customers and our products. Your role is to drive the Apple business in a retail Read more
Position Opening at *Apple* - Apple (United...
…Summary** As a Specialist, you help create the energy and excitement around Apple products, providing the right solutions and getting products into customers' hands. You Read more
Position Opening at *Apple* - Apple (United...
**Job Summary** The Apple Store is a retail environment like no other - uniquely focused on delivering amazing customer experiences. As an Expert, you introduce people Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.