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

calibre 3.1.1 - Complete e-book library...
Calibre is a complete e-book library manager. Organize your collection, convert your books to multiple formats, and sync with all of your devices. Let Calibre be your multi-tasking digital librarian... Read more
Sparkle Pro 2.2 - $79.99
Sparkle Pro will change your mind if you thought building websites wasn't for you. Sparkle is the intuitive site builder that lets you create sites for your online portfolio, team or band pages, or... Read more
Spotify 1.0.57.474. - Stream music, crea...
Spotify is a streaming music service that gives you on-demand access to millions of songs. Whether you like driving rock, silky R&B, or grandiose classical music, Spotify's massive catalogue puts... Read more
beaTunes 5.0.1 - Organize your music col...
beaTunes is a full-featured music player and organizational tool for music collections. How well organized is your music library? Are your artists always spelled the same way? Any R.E.M. vs REM?... Read more
LibreOffice 5.3.4.2 - Free, open-source...
LibreOffice is an office suite (word processor, spreadsheet, presentations, drawing tool) compatible with other major office suites. The Document Foundation is coordinating development and... Read more
VOX 2.8.26 - Music player that supports...
VOX just sounds better! The beauty is in its simplicity, yet behind the minimal exterior lies a powerful music player with a ton of features and support for all audio formats you should ever need.... Read more
iFFmpeg 6.4.0 - Convert multimedia files...
iFFmpeg is a comprehensive media tool to convert movie, audio and media files between formats. The FFmpeg command line instructions can be very hard to master/understand, so iFFmpeg does all the hard... Read more
Beamer 3.3 - Stream any movie file from...
Beamer streams to your Apple TV.... Plays any movie file - Just like the popular desktop movie players, Beamer accepts all common formats, codecs and resolutions. AVI, MKV, MOV, MP4, WMV, FLV. To... Read more
jAlbum Pro 14.0 - Organize your digital...
jAlbum Pro has all the features you love in jAlbum, but comes with a commercial license. You can create gorgeous custom photo galleries for the Web without writing a line of code! Beginner-friendly... Read more
Apple Remote Desktop Client 3.9.3 - Clie...
Apple Remote Desktop Client is the best way to manage the Mac computers on your network. Distribute software, provide real-time online help to end users, create detailed software and hardware reports... Read more

Latest Forum Discussions

See All

This War of Mine gets a new ending and m...
This War of Mine just got a big new update, featuring free DLC that adds a new ending to the game, among other exciting changes. The update is celebrating the game's two-year release anniversary. Apart from the new ending, which will be quite... | Read more »
Summon eight new heroes in Fire Emblem H...
Nintendo keeps coming at us with Fire Emblem Heroes updates, and it doesn't look like that trend is stopping anytime soon. The folks behind the game have just announced the new War of the Clerics Voting Gauntlet, expected to start next Tuesday. [... | Read more »
The best deals on the App Store this wee...
iOS publishers are pulling out all the stops this week -- there's a huge number of seriously great games at discounted prices this week. Let's not waste any time and get right down to business. [Read more] | Read more »
The House of da Vinci (Games)
The House of da Vinci 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: Enter The House of Da Vinci, a new must-try 3D puzzle adventure game. Solve mechanical puzzles, discover hidden... | Read more »
Solve the disappearance of history’s gre...
Blue Brain Games invites you to indulge in an immersive hands-on 3D puzzle adventure in similar vein to The Room series, with its debut release The House of Da Vinci. Set during the historic period of the Italian Renaissance (when Leonardo himself... | Read more »
Age of Rivals (Games)
Age of Rivals 3.3 Device: iOS Universal Category: Games Price: $.99, Version: 3.3 (iTunes) Description: Deep civilization-building strategy in a fast-paced card game! | Read more »
Panthera Frontier (Games)
Panthera Frontier 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: | Read more »
Angry Birds Evolution beginner's gu...
Angry Birds changes things up a fair bit in its latest iteration, Angry Birds Evolution. The familiar sling-shot physics mechanics are still there, but the game now features team-based gameplay, RPG elements, and a new top-down view. With all of... | Read more »
Sega Forever is for the retro game fans
Sega is launching a new retro games service titled Sega Forever, in a move that's sure to delight games enthusiasts with a bit of nostalgia. Sega's releasing five classic games for free. The titles include Sonic the Hedgehog, Phantasy Star II,... | Read more »
The Little Acre (Games)
The Little Acre 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: | Read more »

Price Scanner via MacPrices.net

ABBYY TextGrabber 6 for iOS Implements Instan...
ABBYY has announced the release of TextGrabber 6.0.0, an important feature update to the company’s productivity app developed for iOS and Android devices. TextGrabber 6.0 now offers Real-Time... Read more
vPhone, First Smartphone That Can’t Be Lost,...
Austin, Texas based Hypori has introduced the vPhone, a virtual smartphone that affords every business user the benefits of separate work and personal phones, conveniently delivered on a single... Read more
Save this weekend with 2016 refurbished MacBo...
Apple has dropped prices on Certified Refurbished 2016 15″ and 13″ MacBook Pros by as much as $590 off original MSRP. An Apple one-year warranty is included with each model, and shipping is free: -... Read more
New 27-inch 3.4GHz iMac on sale for $1699, sa...
MacMall has the new 2017 27″ 3.4GHz iMac (MNE92LL/A) in stock and on sale for $1699 including free shipping. Their price is $100 off MSRP. Read more
Clearance 2016 MacBook Pros available for up...
B&H Photo has clearance 2016 13″ and 15″ MacBook Pros in stock today and on sale for up to $400 off original MSRP. Shipping is free, and B&H charges NY & NJ sales tax only: - 15″ 2.7GHz... Read more
Apple Ranks 9th In comScore Top 50 U.S. Digit...
comScore, Inc. has released its monthly ranking of U.S. online activity at the top digital media properties for May 2017 based on data from comScore Media Metrix Multi-Platform. * Entity has... Read more
10.5-inch iPad Pros available for up to $20 o...
B&H Photo has the new 2017 10.5″ iPad Pros available for up to $20 off MSRP including free shipping plus NY & NJ sales tax only: - 64GB iPad Pro WiFi: $649 - 256GB iPad Pro WiFi: $749 - 512GB... Read more
Three Off-The-Beaten-Track iOS Apps That Dese...
One of the great things about using iPads and iPhones is the vast selection of apps available for most anything you want or need to do. The three outlined in this article have been in my core app... Read more
Apple No. 1 Spot In Gartner Top 100 Vendors i...
Gartner, Inc. has unveiled the top global 100 vendors in IT in 2016 based on their revenue across IT (excluding communication services) and component market segments. In the Gartner Global Top 100:... Read more
Clearance iMacs available for up to $300 off...
B&H Photo has clearance 21″ and 27″ Apple iMacs available starting at $949, each including free shipping plus NY & NJ sales tax only: - 27″ 3.3GHz iMac 5K: $1999 $300 off original MSRP - 27″... Read more

Jobs Board

*Apple* News Product Marketing Mgr., Publish...
…organizational consensus on strategy and vision for publisher tools, authoring, and Apple News Format.Carries this strategy and vision across the organization to 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
Security Data Analyst - *Apple* Information...
…data sources need to be collected to allow Information Security to better protect Apple employees and customers from a wide range of threats.Act as the subject matter Read more
Lead *Apple* Solutions Consultant - Apple I...
…integrity, and trust.Success Metrics/Key Performance Indicators:Quantitative* Year over Year growth in Apple Product and Beyond the Box sales in the assigned Point of Read more
*Apple* Solutions Consultant till v%u00E5r...
…ethics, integrity, and trust.Success Metrics/Key Performance Indicators:QuantitativeYear over Year growth in Apple Product and Beyond the Box sales in the assigned Point Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.