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

Yasu 3.0.3 - System maintenance app; per...
Yasu was created with System Administrators who service large groups of workstations in mind, Yasu (Yet Another System Utility) was made to do a specific group of maintenance tasks quickly within a... Read more
MYStuff Pro 2.0.26 - $39.99
MYStuff Pro is the most flexible way to create detail-rich inventories for your home or small business. Add items to MYStuff by dragging and dropping existing information, uploading new images, or... Read more
MarsEdit 3.7.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
Apple iBooks Author 2.5 - Create and pub...
Apple iBooks Author helps you create and publish amazing Multi-Touch books for iPad. Now anyone can create stunning iBooks textbooks, cookbooks, history books, picture books, and more for iPad. All... Read more
TunnelBear 3.0.1 - Subscription-based pr...
TunnelBear is a subscription-based virtual private network (VPN) service and companion app, enabling you to browse the internet privately and securely. Features Browse privately - Secure your data... Read more
ExpanDrive 5.4.0 - 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
Opera 40.0.2308.62 - High-performance We...
Opera is a fast and secure browser trusted by millions of users. With the intuitive interface, Speed Dial and visual bookmarks for organizing favorite sites, news feature with fresh, relevant content... Read more
Apple iOS 10.0.2 - The latest version of...
iOS 10 is the biggest release of iOS ever. A massive update to Messages brings the power of the App Store to your conversations and makes messaging more personal than ever. Find your route with... Read more
Herald 7.0 - Notification plugin for Mai...
Note: Versions 2.1.3 (for OS X 10.7), 3.0.6 (for OS X 10.8), 4.0.8 (for OS X 10.9), 5.0.2 (for OS X 10.10), and 6.0.3 (for OS X 10.11) are no longer supported by the developer. Herald is a... Read more
Postbox 5.0.2 - Powerful and flexible em...
Postbox is a new email application that helps you organize your work life and get stuff done. It has all the elegance and simplicity of Apple Mail, but with more power and flexibility to manage even... Read more

How to build and care for your team in D...
Before you hit the trail and become a dog sledding legend, there’s actually a fair bit of prep work to be done. In Dog Sled Saga, you’re not only racing, you’re also building and caring for a team of furry friends. There’s a lot to consider—... | Read more »
How to win every race in Dog Sled Saga
If I had to guess, I’d say Dog Sled Saga is the most adorable racing game on the App Store right now. It’s a dog sled racing sim full of adorable, loyal puppies. Just look at those fluffy little tails wagging. Behind that cute, pixelated facade is... | Read more »
Let the war games commence in Gunship Ba...
Buzz Lightyear famously said, “This isn’t flying, this is falling – with style!” In the case of Gunship Battle: Second War, though, this really is flying - with style! The flight simulator app from Joycity puts you in control of 20 faithfully... | Read more »
How to get a high score in Fired Up
Fired Up is Noodlecake Games’ high score chasing, firefighting adventure. You take control of a wayward firefighter who propels himself up the side of a highrise with blasts of water. Sound silly? It is. It’s also pretty difficult. You can’t... | Read more »
NBA 2K17 (Games)
NBA 2K17 1.0 Device: iOS iPhone Category: Games Price: $7.99, Version: 1.0 (iTunes) Description: Following the record-breaking launch of NBA 2K16, the NBA 2K franchise continues to stake its claim as the most authentic sports video... | Read more »
Dog Sled Saga (Games)
Dog Sled Saga 1.0.1 Device: iOS Universal Category: Games Price: $3.99, Version: 1.0.1 (iTunes) Description: A game by Dan + Lisa As a rookie musher, foster a dogsledding team whose skills will grow if they're treated right. Week by... | Read more »
60 Seconds! Atomic Adventure (Games)
60 Seconds! Atomic Adventure 1.2 Device: iOS Universal Category: Games Price: $2.99, Version: 1.2 (iTunes) Description: 60 Seconds! is a dark comedy atomic adventure of scavenge and survival. Collect supplies and rescue your family... | Read more »
Tons of Bullets! (Games)
Tons of Bullets! 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Tons of BulletsA retro 2D pixel platformer infused with tons of bullets and tons of features!Fight as Kenji the Ninja and... | Read more »
Sorcery! 4 (Games)
Sorcery! 4 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: *** PLEASE NOTE: Sorcery! 4 requires a minimum of iPad 3 or iPhone 4 *** An epic adventure through a cursed citadel of monsters,... | Read more »
Building the perfect Animation Throwdown...
Animation Throwdown is a casual card game full of plenty of inside jokes from some of your favorite cartoons. It’s accessible as far as card games go, but that’s not to say that it hands your victories to you easily. There’s quite a bit that goes... | Read more »

Price Scanner via MacPrices.net

Duplicate Sweeper Free On Mac App Store For O...
To celebrate the launch of Apple’s latest macOS Sierra, Stafford, United Kingdom based Wide Angle Software has announced that its duplicate file finder software, Duplicate Sweeper, is now available... Read more
13-inch Retina MacBook Pros on sale for up to...
B&H Photo has 13″ Retina Apple MacBook Pros on sale for up to $150 off MSRP. Shipping is free, and B&H charges NY tax only: - 13″ 2.7GHz/128GB Retina MacBook Pro: $1174.99 $125 off MSRP - 13... Read more
Evidence Surfaces Pointing To New A10X Chip F...
Citing a job description for a Project Lead position at Apple’s Austin, Texas engineering labs, Motley Fool’s Ashraf Eassa deduces that development is progressing well on Apple’s next-generation in-... Read more
Check Print’R for macOS Allows Anyone to Easi...
Delaware-based Match Software has announced the release and immediate availability of Check Print’R 3.21, an important update to their easy-to-use check printing application for macOS. Check Print’R... Read more
Apple refurbished 11-inch MacBook Airs availa...
Apple has Certified Refurbished 11″ MacBook Airs (the latest models), available for up to $170 off the cost of new models. An Apple one-year warranty is included with each MacBook, and shipping is... Read more
Apple refurbished 15-inch Retina MacBook Pros...
Apple has Certified Refurbished 2015 15″ Retina MacBook Pros available for up to $380 off the cost of new models. An Apple one-year warranty is included with each model, and shipping is free: - 15″ 2... Read more
Major Version 5 Release Of Free myTuner Radio...
AppGeneration Software has announced the release of myTuner Radio 5.0.1, an important update to their live radio app for iOS and Android platforms. With myTuner Radio, you can listen to more than 30,... Read more
TheAppStore Searches And Filters iOS And macO...
Boston based InchWest has announced the official launch of TheAppStore, a free web based service that lets users search iOS and Mac apps on the web without iTunes or the App store. TheAppStore... Read more
2TB Time Capsule on sale for $199, save $100
Amazon has 2TB Apple Time Capsules on sale for $199 including free shipping. Their price is $100 off MSRP. Choose Amazon as the seller when making your purchase, rather than a third party seller. Read more
12-inch 1.2GHz Rose Gold Retina MacBook on sa...
Amazon.com has the 2016 12″ 1.2GHz Rose Gold Retina MacBook on sale for $1254.02 including free shipping. Their price is $345 off MSRP, and it’s the lowest price available for this model from any... Read more

Jobs Board

*Apple* Retail - Multiple Positions- Manhatt...
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
Sr. *Apple* Mac Engineer - Net2Source Inc....
…staffing, training and technology. We have following position open with our client. Sr. Apple Mac Engineer6+ Months CTH Start date : 19th Sept Travelling Job If Read more
*Apple* Retail - Multiple Positions - Apple,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Restaurant Manager (Neighborhood Captain) - A...
…in every aspect of daily operation. WHY YOU'LL LIKE IT: You'll be the Big Apple . You'll solve problems. You'll get to show your ability to handle the stress and Read more
US- *Apple* Store Leader Program - Apple (Un...
…Summary Learn and grow as you explore the art of leadership at the Apple Store. You'll master our retail business inside and out through training, hands-on Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.