TweetFollow Us on Twitter

Java Layouts
Volume Number:12
Issue Number:10
Column Tag:Getting Started

Java Layouts and Panels

By Dave Mark

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

Last month, we explored Peter Lewis’ CWBlink rewrite, which introduced a host of new Java concepts. This month, we’ll start exploring those concepts, starting off with Java Layouts and Panels.

Layouts

In our first few applets, when we wanted to add elements to our main applet frame, we simply added each element directly to the frame, trusting the default applet setup to place things in the applet window in a way that makes sense. This is fine if all you want to do is slap together an interface and you don’t particularly care how it looks.

Being Mac programmers, though, we are all used to a certain way of laying out an interface. You use ResEdit, or Resorcerer, or even a direct toolbox call, and specify the exact pixel location for each interface element. Unfortunately, the Windows and Unix worlds look very different from the Mac world. While all Macs feature square pixels, and a window looks the same no matter what Mac it’s displayed on, Windows and Unix boxes don’t share this consistency.

Since Java is a cross-platform language, Sun needed to come up with a way to represent the interface elements so they would look decent, no matter what machine they appeared on. The solution was a series of layout classes. You use the setLayout() call to attach a layout to a container. The elements in the container are added to the layout depending on the nature of each layout class. This series of example applets should make the value of layouts clear.

Example One: NoLayout.µ

Create a new Java applet project called noLayout.µ. Create a new source file named noLayout.java and add it to the project:

import java.awt.*;

public class noLayout extends java.applet.Applet
{
 public noLayout()
 {
 add( new Label( “Enter your name:” ) );
 add( new TextField( “<Your name here>”, 30 ) );
 add( new Button( “Eeny” ) );
 add( new Button( “Meeny” ) );
 add( new Button( “Miney-Moe” ) );
 }
}

Next, create a second source file called noLayout.html and add it to the project:

<title>No Layout</title>
<hr>
<applet 
 codebase=”noLayout ƒ” 
 code=”noLayout.class” 
 width=530 height=100>
</applet>
<hr>
<a href=”noLayout.java”>The source.</a>

Make the project; then drag the .html file onto the Applet runner (if you are using CodeWarrior, the applet runner is called Metrowerks Java). Figure 1 shows the noLayout applet as it first appears. Notice that all the elements appear in a single row, in the order in which they were added to the default container.

Figure 1. The noLayout applet before resizing

Figure 2 shows what happens when we shrink the window slightly. Notice that the interface elements have “wrapped” to fit comfortably in the new, resized window. Though it is not at all obvious, you are seeing the default layout at work. This default layout is called FlowLayout (see java.awt.FlowLayout.html). You don’t need to create a FlowLayout object for your containing frame. One is created for you. When you call add(), you are adding to a FlowLayout.

Figure 2. The noLayout applet after resizing

FlowLayout treats your elements like words in a word processor. FlowLayout features three constructors. FlowLayout() with no parameters centers all its elements. FlowLayout( int ) takes a single parameter, one of CENTER, LEFT, or RIGHT, which specifies how this FlowLayout should align its elements. Finally, FlowLayout( int align, int hgap, int vgap ) takes three parameters. The first is either CENTER, LEFT, or RIGHT, the second specifies the horizontal minimum gap between elements, and the third specifies the vertical minimum gap between elements.

For the moment, just remember that FlowLayout is the default layout.

Example Two: LayoutNoPanel.µ

Our second example creates a simple, though not particularly useful, layout. Create a new Java applet project called layoutNoPanel.µ. Create a new source file named layoutNoPanel.java and add it to the project:

import java.awt.*;

public class layoutNoPanel extends java.applet.Applet
{
 public layoutNoPanel()
 {
 setLayout( new BorderLayout() );
 
 add( “North”, new Label( “Enter your name:” ) );
 add( “Center”, 
 new TextField(“<Your name here>”, 30) );
 add( “South”, new Button( “Eeny” ) );
 add( “East”, new Button( “Meeny” ) );
 add( “West”, new Button( “Miney-Moe” ) );
 }
}

Next, create a second source file called layoutNoPanel.html and add it to the project:

<title>Layout, No Panel</title>
<hr>
<applet 
 codebase=”layoutNoPanel ƒ” 
 code=”layoutNoPanel.class” 
 width=530 height=100>
</applet>
<hr>
<a href=”layoutNoPanel.java”>The source.</a>

Make the project, then drag the .html file onto the Applet runner. Figure 3 shows the layoutNoPanel applet as it first appears. If you take a look at the source code, you’ll see that a new BorderLayout object is created and made the current layout using setLayout(). The BorderLayout lets you assign items to the top, bottom, left, right, and center using the add() parameters “North”, “South”, “West”, “East”, and “Center”. To learn more about the BorderLayout class and the various constructors you can use to build one, check out java.awt.BorderLayout.html.

Figure 3. The layoutNoPanel applet before resizing

Figure 4 shows what happens when we shrink the window slightly. Notice that the interface elements have all shrunk accordingly. As I said, this wasn’t particularly useful, but it shows an important concept - how to use a layout in your applet code.

Figure 4. The layoutNoPanel applet after resizing

Before proceeding to the last example, see if you can figure out a way to use the FlowLayout and BorderLayout to organize these components into a more useful form Here’s a hint. You’ll want to take advantage of Panels.

Example Three: LayoutWithPanel.µ

Our third example introduces the concept of Panels. Before you examine the code, take a look at java.awt.Panel.html. Think of a Panel as a visual grouping mechanism. The default layout for a Panel is the FlowLayout. We’re going to create a pair of Panels, one to hold the Label and TextField, and the other to hold the three buttons.

Create a new Java applet project called layoutWithPanel.µ. Create a new source file named layoutWithPanel.java and add it to the project:

import java.awt.*;

public class layoutWithPanel 
 extends java.applet.Applet
{
 public layoutWithPanel()
 {
 setLayout( new BorderLayout() );
 
 Panel  top = new Panel();
 Panel  bottom = new Panel();
 
 top.setLayout( new FlowLayout() );
 
 top.add( new Label( “Enter your name:” ) );
 top.add( new TextField( “<Your name here>”, 30 ) );
 
 bottom.setLayout( new FlowLayout() );
 
 bottom.add( new Button( “Eeny” ) );
 bottom.add( new Button( “Meeny” ) );
 bottom.add( new Button( “Miney-Moe” ) );
 
 add( “Center”, top );
 add( “South”, bottom );  
 }
}

Next, create a second source file called layoutWithPanel.html and add it to the project:

<title>Layout, No Panel</title>
<hr>
<applet 
 codebase=”layoutWithPanel ƒ” 
 code=”layoutWithPanel.class” 
 width=530 height=100>
</applet>
<hr>
<a href=”layoutWithPanel.java”>The source.</a>

Make the project, then drag the .html file onto the Applet runner. Figure 5 shows the layoutWithPanel applet as it first appears. Notice that the Label and TextField stick together, and the three buttons stick together.

The source code starts off by creating a BorderLayout. We then create two Panels and add one to the layout as “Center” (the Label and TextField) and one to the layout as “South” (the three buttons).

Figure 5. The layoutWithPanel applet before resizing

Figure 6 shows what happens when we shrink the window slightly. Notice that the TextField wraps to the next line without affecting the three buttons. This is the value of combining Panels with Layouts.

Figure 6. The layoutWithPanel applet after resizing

Till Next Month...

So far, you’ve seen two Layouts - the FlowLayout and the BorderLayout. In next month’s column, we’ll take a look at the remaining Layout classes: GridLayout, GridBagLayout, and CardLayout.

Before we go, I’d like to address a question I get asked all the time: What is the best Java book to buy? Tough question. There’s no simple answer, but I’ll take a shot at it.

I’ve read most of the major Java books. In general, there’s something to like and dislike about every one. Some books offer a really nice writing style, but suffer from buggy or inaccurate code. A good solution is to buy at least two Java books, so you can do a reality check when one book skimps on a topic or contains a bug that perhaps is properly presented in the other.

Though I usually avoid pushing my own books, I would be doing Barry Boone a disservice if I didn’t mention Learn Java on the Macintosh. Though my name tags along on the cover of the book, this is definitely Barry’s baby, and a good introduction to Java. It is also the only Java book that comes with CodeWarrior Lite for Java. I also like Teach Yourself Java In 21 Days by Lemay and Perkins, Java in a Nutshell by Flanagan, and Java Programming Language Handbook by Friedel and Potts.

You could probably get good results with any of these books. Once you get your brain around Java, you should check out The Java Series from Addison-Wesley and Sun. The Java Programming Language is from Ken Arnold and James Gosling. Ken Arnold is a well known C author and, of course, James Gosling created Java. To me, this is sort of like having Kernighan and Ritchie (or, to be more up-to-date, Harbison and Steele) on your C bookshelf.

That being said, there are so many Java books coming out all the time that you should really go down to the bookstore and flip through some of the newer titles and see if any of them strike your fancy. In the meantime, be sure to check out the various Java tutorials on the Web.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

GraphicConverter 10.5.1 - $39.95
GraphicConverter is an all-purpose image-editing program that can import 200 different graphic-based formats, edit the image, and export it to any of 80 available file formats. The high-end editing... Read more
Delicious Library 3.7 - Import, browse a...
Delicious Library allows you to import, browse, and share all your books, movies, music, and video games with Delicious Library. Run your very own library from your home or office using our... Read more
Adobe Animate CC 2017 18.0.0.107 - Anima...
Animate CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Flash Professional customer). Animate CC 2018 (was Flash CC) lets you... Read more
Adobe After Effects CC 2018 15.0 - Creat...
After Effects CC 2018 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). The new, more connected After Effects CC... Read more
Adobe Premiere Pro CC 2018 12.0.0 - Digi...
Premiere Pro CC 2018 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). Adobe Premiere Pro CC 2018 lets you edit... Read more
Alarm Clock Pro 10.3 - $19.95
Alarm Clock Pro isn't just an ordinary alarm clock. Use it to wake you up in the morning, send and compose e-mails, remind you of appointments, randomize the iTunes selection, control an internet... Read more
Adobe Lightroom 20170919-1412-ccb76bd] -...
Adobe Lightroom is available as part of Adobe Creative Cloud for as little as $9.99/month bundled with Photoshop CC as part of the photography package. Lightroom 6 is also available for purchase as a... Read more
Adobe Illustrator CC 2018 22.0.0 - Profe...
Illustrator CC 2018 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). Adobe Illustrator CC 2018 is the industry... Read more
Hopper Disassembler 4.3.0- - Binary disa...
Hopper Disassembler is a binary disassembler, decompiler, and debugger for 32- and 64-bit executables. It will let you disassemble any binary you want, and provide you all the information about its... Read more
Adobe InDesign CC 2018 13.0.0.125 - Prof...
InDesign CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous InDesign customer). Adobe InDesign CC 2018 is part of Creative Cloud.... Read more

ICEY (Games)
ICEY 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: ICEY is a 2D side-scrolling action game. As you follow the narrator's omnipresent voice, you will see through ICEY's eyes and learn the... | Read more »
The best new games we played this week -...
We've made it, folks. Another weekend is upon us. It's time to sit back and relax with the best new releases of the week. Puzzles, strategy RPGs, and arcade games abound this week. There's a lot of quality stuff to unpack this week, so let's hop... | Read more »
Wheels of Aurelia (Games)
Wheels of Aurelia 1.0.1 Device: iOS Universal Category: Games Price: $3.99, Version: 1.0.1 (iTunes) Description: | Read more »
Halcyon 6: Starbase Commander guide - ti...
Halcyon 6 is a well-loved indie RPG with stellar tactical combat and some pretty good writing, too. It's now landed on the App Store, so mobile fans, if you're itching for a good intergalactic adventure, here's your game. Being a strategy RPG, the... | Read more »
Game of Thrones: Conquest guide - how to...
Fans of base building games might be excited to know that yet another entry in the genre has materialized - Game of Thrones: Conquest. Yes, you can now join the many kingdoms of the famed book series, or create your own, as you try to conquer... | Read more »
Halcyon 6: Starbase Commander (Games)
Halcyon 6: Starbase Commander 1.4.2.0 Device: iOS Universal Category: Games Price: $6.99, Version: 1.4.2.0 (iTunes) Description: An epic space strategy RPG with base building, deep tactical combat, crew management, alien diplomacy,... | Read more »
Legacy of Discord celebrates its 1 year...
It’s been a thrilling first year for fans of Legacy of Discord, the stunning PvP dungeon-crawling ARPG from YOOZOO Games, and now it’s time to celebrate the game’s first anniversary. The developers are amping up the festivities with some exciting... | Read more »
3 reasons to play Thunder Armada - the n...
The bygone days of the Battleship board game might have past, but naval combat simulators still find an audience on mobile. Thunder Armada is Chinese developer Chyogames latest entry into the genre, drawing inspiration from the explosive exchanges... | Read more »
Experience a full 3D fantasy MMORPG, as...
Those hoping to sink their teeth into a meaty hack and slash RPG that encourages you to fight with others might want to check out EZFun’s new Eternity Guardians. Available to download for iOS and Android, Eternity Guardians is an MMORPG that lets... | Read more »
Warhammer Quest 2 (Games)
Warhammer Quest 2 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: Dungeon adventures in the Warhammer World are back! | Read more »

Price Scanner via MacPrices.net

12″ iPad Pros on sale for $50 off MSRP, no ta...
Adorama has 12″ iPad Pros on sale today for $50 off MSRP. Shipping is free, and Adorama charges sales tax in NY & NJ only: – 12″ 64GB iPad Pro: $749, save $50 – 12″ 256GB iPad Pro: $899, save $50... Read more
9″ iPads on sale for $30 off, starting at $29...
MacMall has 9″ iPads on sale for $30 off including free shipping: – 9″ 32GB iPad: $299 – 9″ 128GB iPad: $399 Read more
Apple restocks full line of refurbished 13″ M...
Apple has restocked a full line of Apple Certified Refurbished 2017 13″ MacBook Pros for $200-$300 off MSRP. A standard Apple one-year warranty is included with each MacBook, and shipping is free.... Read more
13″ 3.1GHz/256GB MacBook Pro on sale for $167...
Amazon has the 2017 13″ 3.1GHz/256GB Space Gray MacBook Pro on sale today for $121 off MSRP including free shipping: – 13″ 3.1GHz/256GB Space Gray MacBook Pro (MPXV2LL/A): $1678 $121 off MSRP Keep an... Read more
13″ MacBook Pros on sale for up to $120 off M...
B&H Photo has 2017 13″ MacBook Pros in stock today and on sale for up to $120 off MSRP, each including free shipping plus NY & NJ sales tax only: – 13-inch 2.3GHz/128GB Space Gray MacBook... Read more
15″ MacBook Pros on sale for up to $200 off M...
B&H Photo has 15″ MacBook Pros on sale for up to $200 off MSRP. Shipping is free, and B&H charges sales tax in NY & NJ only: – 15″ 2.8GHz MacBook Pro Space Gray (MPTR2LL/A): $2249, $150... Read more
Roundup of Apple Certified Refurbished iMacs,...
Apple has a full line of Certified Refurbished 2017 21″ and 27″ iMacs available starting at $1019 and ranging up to $350 off original MSRP. Apple’s one-year warranty is standard, and shipping is free... Read more
Sale! 27″ 3.8GHz 5K iMac for $2098, save $201...
Amazon has the 27″ 3.8GHz 5K iMac (MNED2LL/A) on sale today for $2098 including free shipping. Their price is $201 off MSRP, and it’s the lowest price available for this model (Apple’s $1949... Read more
Sale! 10″ Apple WiFi iPad Pros for up to $100...
B&H Photo has 10.5″ WiFi iPad Pros in stock today and on sale for $50-$100 off MSRP. Each iPad includes free shipping, and B&H charges sales tax in NY & NJ only: – 10.5″ 64GB iPad Pro: $... Read more
Apple iMacs on sale for up to $130 off MSRP w...
B&H Photo has 21-inch and 27-inch iMacs in stock and on sale for up to $130 off MSRP including free shipping. B&H charges sales tax in NY & NJ only: – 27″ 3.8GHz iMac (MNED2LL/A): $2179 $... Read more

Jobs Board

Engineering Manager, *Apple* Retail Enginee...
# Engineering Manager, Apple Retail Engineering Job Number: 58139948 Santa Clara Valley, California, United States Posted: 20-Oct-2017 Weekly Hours: 40.00 **Job 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
Commerce Engineer, *Apple* Media Products -...
Commerce Engineer, Apple Media Products (New York City) Job Number: 113028813New York City, New York, United StatesPosted: Sep. 20, 2017Weekly Hours: 40.00 Job Read more
US- *Apple* Store Leader Program - Apple (Un...
US- Apple Store Leader Program Job Number: VariousUnited StatesPosted: Oct. 19, 2017Retail Store Job Summary Learn and grow as you explore the art of leadership at Read more
Product Manager - *Apple* Pay on the *Appl...
Job Summary Apple is looking for a talented product manager to drive the expansion of Apple Pay on the Apple Online Store. This position includes a unique Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.