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

Adobe Premiere Pro CC 2015 9.0.1 - Digit...
Premiere Pro CC 2015 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Premiere Pro customer). Premiere Pro CS6 is still available for... Read more
Adobe After Effects CC 2015 13.5.1 - Cre...
After Effects CC 2015 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous After Effects customer). After Effects CS6 is still available... Read more
Adobe Creative Cloud 2.2.0.129 - Access...
Adobe Creative Cloud costs $49.99/month (or less if you're a previous Creative Suite customer). Creative Suite 6 is still available for purchase (without a monthly plan) if you prefer. Introducing... Read more
Tower 2.2.3 - Version control with Git m...
Tower is a powerful Git client for OS X that makes using Git easy and more efficient. Users benefit from its elegant and comprehensive interface and a feature set that lets them enjoy the full power... Read more
Apple Java 2015-001 - For OS X 10.7, 10....
Apple Java for OS X 2015-001 installs the legacy Java 6 runtime for OS X 10.11 El Capitan, OS X 10.10 Yosemite, OS X 10.9 Mavericks, OS X 10.8 Mountain Lion, and OS X 10.7 Lion. This package is... Read more
Adobe Muse CC 2015 2015.0.1 - Design and...
Muse CC 2015 is available as part of Adobe Creative Cloud for as little as $14.99/month (or $9.99/month if you're a previous Muse customer). Muse CS6 is still available for purchase (without a... Read more
Adobe Illustrator CC 2015 19.1.0 - Profe...
Illustrator CC 2015 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Illustrator customer). Illustrator CS6 is still available for... Read more
Corel Painter 14.1.0.1105 - Digital art...
Corel Painter helps you create astonishing art in a variety of media. Paint with vivid oil paints, fluid water colors, and earthy charcoals. Corel Painter flawlessly recreates the tones and textures... Read more
Pacifist 3.5.4 - Install individual file...
Pacifist opens up .pkg installer packages, .dmg disk images, .zip, .tar. tar.gz, .tar.bz2, .pax, and .xar archives and more, and lets you extract or install individual files out of them. This is... Read more
Dropbox 3.8.4 - Cloud backup and synchro...
Dropbox is an application that creates a special Finder folder that automatically syncs online and between your computers. It allows you to both backup files and keep them up-to-date between systems... Read more

Mazes of Karradash (Games)
Mazes of Karradash 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: The city of Karradash is under attack: the monsters of the Shadow Realms are emerging from the depths.No adventurer is... | Read more »
Battle Golf is the Newest Game from the...
Wrassling was a pretty weird - and equally great - little wressling game. Now the developers, Folmer Kelly and Colin Lane, have turned their attention to a different sport: golfing. This is gonna be weird. [Read more] | Read more »
Qbert Rebooted has the App Store Going...
The weird little orange... whatever... is back, mostly thanks to that movie which shall remain nameless (you know the one). But anyway it's been "rebooted" and now you can play the fancy-looking Qbert Rebooted on iOS devices. [Read more] | Read more »
Giant Monsters Run Amok in The Sandbox...
So The Sandbox has just hit version number 1.99987 (seriously), and it's added a lot more stuff. Just like every other update, really. [Read more] | Read more »
Fish Pond Park (Games)
Fish Pond Park 1.0.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0.0 (iTunes) Description: Nurture an idyllic slice of tourist's heaven into the top nature spot of the nation, furnishing it with a variety of... | Read more »
Look after Baby Buddy on your Apple Watc...
Parigami Gold is the new premium version of the match three puzzler that includes Apple Watch support and all new content. You won't simply be sliding tiles around on your wrist, the Apple Watch companion app is an all new mini-game in itself. You'... | Read more »
Swallow all of your opponents as the big...
Eat all of the opposition and become the largest ball in Battle of Balls now available in the App Store and Google Play. Battle of Balls pits you against other opponents in real time and challenges you to eat more balls and grow larger than all of... | Read more »
PAC-MAN Championship Edition DX (Games)
PAC-MAN Championship Edition DX 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: It’s Your World. EAT IT! Get ready for more ghost chain gobbling and frantic action in PAC-MAN® CE-DX! The... | Read more »
incurve (Games)
incurve 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: Get ready for 2 different gravities Goal is to hit as many white dots on your way up.When you're touching the screen, the dots have a... | Read more »
Crossy Road has its Own Merch Store Now....
Do you like Crossy Road? I mean do you really like Crossy Road? Well then you're in luck! Hipster Whale has opened up a Crossy Road store, so you can show off your fandom via official T-shirts. [Read more] | Read more »

Price Scanner via MacPrices.net

Sale! 13″ 1.6GHz/256GB MacBook Air for $1099,...
B&H Photo has the 13″ 1.6GHz/256GB MacBook Air on sale for $1099 including free shipping plus NY tax only. Their price is $100 off MSRP, and it’s the lowest price available for this model. Read more
iPad mini 4 To Be Upgraded To iPad Air 2 Spec...
There’s a certain inevitability about making Apple product predictions this time of year. Come September, we can pretty reliably count on the release of refreshed iPhones, along with the iOS 9... Read more
Apple restocks refurbished Mac minis for up t...
The Apple Store has restocked Apple Certified Refurbished 2014 Mac minis, with models available starting at $419. Apple’s one-year warranty is included with each mini, and shipping is free: - 1.4GHz... Read more
13-inch 2.5GHz MacBook Pro on sale for $899,...
Best Buy has the 13″ 2.5GHz MacBook Pro available for $899.99 on their online store. Choose free shipping or free instant local store pickup (if available). Their price is $200 off MSRP. Price is... Read more
21-inch 2.9GHz iMac on sale for $1299, save $...
Best Buy has the 21″ 2.9GHz iMac on sale today for $1299.99 on their online store. Choose free shipping or free local store pickup (if available). Their price is $200 off MSRP, and it’s the lowest... Read more
Free Image Sizer 1.3 for iOS Offers Photo Edi...
Xi’An, China based G-Power has announced the release of Image Sizer 1.3 for the iPhone, iPad, and iPod touch, an important update to their free photo editing app. Image Sizer’s collection of easy to... Read more
Sale! 13″ 1.6GHz/128GB MacBook Air for $899,...
B&H Photo has the 13″ 1.6GHz/128GB MacBook Air on sale for $899 including free shipping plus NY tax only. Their price is $100 off MSRP, and it’s the lowest price available for this model. Read more
13-inch Retina MacBook Pros on sale for $100...
Best Buy has 13-inch Retina MacBook Pros on sale for $100 off MSRP on their online store. Choose free shipping or free local store pickup (if available). Prices are for online orders only, in-store... Read more
Will BMW’s i3 Electric Vehicle Be The Automo...
The German-language business journal Manager Magazin’s Michael Freitag reports that Apple and the German performance/luxury automaker Bayerishe Motoren Werke (BMW) are back at far-reaching... Read more
Sale! $250 off 15-inch Retina MacBook Pro, $2...
B&H Photo has lowered their price for the 15″ 2.2GHz Retina MacBook Pro to $1749, or $250 off MSRP. Shipping is free, and B&H charges NY sales tax only. They have the 27″ 3.3GHz 5K iMac on... Read more

Jobs Board

*Apple* Customer Experience (ACE) Leader - A...
…management to deliver on business objectives Training partner store staff on Apple products, services, and merchandising guidelines Coaching partner store staff on Read more
Project Manager - *Apple* Pay Security - Ap...
**Job Summary** The Apple Pay Security team is seeking a highly organized, results-driven Project Manager to drive the development of Apple Pay Security. If you are Read more
*Apple* TV Product Design Internship (Spring...
…the mechanical design effort associated with creating world-class products with the Apple TV PD Group. Responsibilities will include working closely with manufacturing, Read more
*Apple* Watch SW Application Project Manager...
**Job Summary** The Apple Watch software team is looking for an Application Engineering Project Manager to work on new projects for Apple . The successful candidate 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
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.