MokaByte Numero 01 - Ottobre 1996
The California Connection

 

di
Marie Alm 
 

 

La nostra collaboratrice dalla California ci invia questo mese un articolo introduttivo che ci spiega come disporre gli oggetti grafici in una finestra Java
Whizbang programs in Java or any other language are all well and good but without a friendly and responsive user interface, that program is about as useful to the average user as so much burnt coffee grounds. If it is also attractive, so much the better! To help the programmer build a better user interface, Java provides five "layout managers" that dictate where each component (they used to be called a "widget") is placed on the container. The layout manager is specified for each container (often a Panel) in the "init" or "constructor" method.

FlowLayout is the default if no other is specified. This layout simply places components one after the other sequentially, left to right. GridLayout lets you place components in rows and columns, left to right, top to bottom, with each cell of the grid being the same size. BorderLayout is still simple but offers more placement control. It provides four cells around the edges (North, South, East, and West) plus a Center. Scrollbars can be placed at the edges with other components in the center. CardLayout is like a deck of tabbed cards where only one card shows at a time. Lastly, GridBagLayout provides a great deal of control over component placement and size. The theory is that when using GridBagLayout, you can place a component anywhere you so desire. Nice theory but not easy to actually accomplish.

GridBagLayout is the most flexible Layout Manager but it will also most likely give you the most headaches. Still, once you master it, or at least make an uneasy truce with it, you will find there is no substitute. GridBagLayout uses the basic concept of GridLayout (rows and columns) but with each cell in a column the same size. In addition, it lets you tell it in which cell to place the component, using xy coordinates, and how many cells the component should cover. Thus, it places components according to your specific directions. You provide these directions by setting the GridBagConstraints (java.awt.GridBagConstraints class). It is usually very useful to place the setting of these constraints into a method with the parameters being the public instance variables of the Constraints class, or at least those you are using most often. If you do not provide specific constraints, the layout manager doesn't know what to do so the components will be lumped all together in the middle of the panel! Probably not what you want. If you are not careful in setting the Constraints, components will be overlapped or seem to not be there at all. Drawing a picture on grid paper of what you want can be helpful.

There are eleven public instance variables you can set for each component placed on the Panel. Here are the 11: 

anchor: where the component is placed inside a cell (a geographical direction, e.g. NORTHWEST)

fill: how a component should grow when window resized (HORIZONTAL, VERTICAL, BOTH, NONE) (default: NONE)

gridheight: height of the component in number of cells

gridwidth: width of the component in number of cells (use REMAINDER for the last component)

gridx: grid position of the component, x coordinate

gridy: grid position of the component, y coordinate (RELATIVE: component to right or below of last component)

insets: margins around the cell

ipadx: margins inside the cell, around the component

ipady: margins inside the cell, around the component (internal padding)

weightx: how *much* a component should grow when window resized weighty: how *much* a component should grow when window resized (0: no growth, 1: all extra space)

gridx and gridy are perhaps most commonly set for each component after initialization of all the constraints. These two tell the layout manager where the component is to be placed on the panel. The next two most used constraints are probably gridheight and gridwidth which say how many cells you want the component to cover. Note that if the "fill" constraint is not set, the component will not grow despite what you may set for gridwidth and gridheight. Setting the "fill" constraint once for all components gives a uniform look to the components but you may prefer to set it for each component individually or for small groups of components. 

Once the constraint values are set for a particular component, the method setConstraints must be called with that component as the first parameter and the constraints variable as the second.Then the component is added to the container. After all components have been constrained and added, the method setConstraints must be called once more, this time with the container holding all those components as the first parameter (and still the constraints variable as the second). Finally, the container itself is added and the whole thing is validated. 

Here is an example applet of several buttons for you to try. Play with the numbers in the calls to setPosConstraints to see what happens. In this way, you will get a better understanding of how the GridBagLayout and its constraints work. 

////This is the HTML code 

<CENTER> 

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=3> 

<tr> 

<th COLSPAN=3><font size="6"> MokaByte Examples </font></th>

</tr> <tr> <td align="right"> October </td> 

<td> 

<APPLET CODEBASE="./" <!_ change this to your location _> 

CODE="gblExample.class" WIDTH=300 HEIGHT=200> 

</APPLET> 

</td>

</tr> 

</TABLE> 

</CENTER>
 

// the Java example: gridBagLayout usage

 import java.awt.*; 

 import java.applet.*;



public class gblExample extends java.applet.Applet{ 

         public static final String fontNameTR = "TimesRoman"; 

         public static final int fontSize = 14; 

         public static final int fontStyleP = Font.PLAIN;

         GridBagLayout gbLyt = new GridBagLayout();

         GridBagConstraints c = new GridBagConstraints(); 

         Panel aPnl = new Panel();

         Button joButn = new Button("JavaOne"); 

         Button fmButn = new Button("FortMason"); 

         Button tfbButn = new Button("Top Floor Bar"); 

         Button lcButn = new Button("Lost Car"); 

         Button hoButn = new Button("Handouts");

         Button rxButn = new Button("Rex"); 

         Button sfButn = new Button("SanFrancisco");



         // Method: init 

         public void init() { 

                 Font f = new Font(fontNameTR, fontStyleP, fontSize); 

                 setFont(f);

                 aPnl.setLayout(gbLyt); 

                 setBaseConstraints(aPnl, c); 



         // set Positional Constraints:  

         /*setPosConstraints parameters  (container, component, 

                                           constraints, gridx, 

                                           gridy, gridwidth, gridheight, 

                                           weightx, weighty)

*/

         joButn.setFont(new Font(fontNameTR, fontStyle B,fontSize+2)); 

         // x y w h weight 

         setPosConstraints(aPnl, joButn, c, 0, 0,1, 1, 0, 0); 

         setPosConstraints(aPnl, lcButn, c, 1, 0, GridBagConstraints.REMAINDER,1, 1, 1); 

         setPosConstraints(aPnl, sfButn, c, 0, 1, 2, 1, 1, 1); 

         setPosConstraints(aPnl,rxButn, c, 2, 1, 1, 2, 1, 1); 

         setPosConstraints(aPnl, fmButn, c, 0, 2,1, 2, 1, 1); 

         setPosConstraints(aPnl, hoButn, c, 1, 2, 1, 1, 1, 1); 

         setPosConstraints(aPnl,tfbButn, c, 1, 3, 2, 1, 1, 1);



         // finish up 

         add(aPnl); 

         validate(); 

 } // end init 



 // Method: setPosConstraints  set positional constraints for given panel 

 public void setPosConstraints(Container cntnr, Component widget,

         GridBagConstraints c, int gx, int gy, int gwd,int ght, int wtx, int wty) { 

         c.gridx = gx; 

         c.gridy = gy; 

         c.gridwidth =gwd; 

         c.gridheight = ght; 

         c.weightx = wtx; 

         c.weighty = wty; 

         gbLyt.setConstraints(widget,c); 

         cntnr.add(widget); 

 } // end setPosConstraints 



 // Method: setBaseConstraints

 // set basic constraints for given panel 

 public void setBaseConstraints(Panel pnl, GridBagConstraints c) { 

         c.fill = GridBagConstraints.BOTH; 

         c.ipadx= 1; 

         c.ipady = 1; 

         c.insets = new Insets(2, 2, 2, 2); 

         c.anchor = GridBagConstraints.NORTHWEST;

         gbLyt.setConstraints(pnl, c); 

 } // end setBaseConstraints



 // Method: insets make spacing between items 

 public Insets insets() { 

         return new Insets(2,2, 2, 2); 

 }

} // end gblExample



Well, that's a start with GridBagLayout. Gaining experience with the various constraints settings and their interactions will help you to set up really killer web pages. Mail me any comments you may have about this or with suggestions for future topics (aalm@bayarea.net). 

In the words of Scott McNealy: Go Java! 

Ecco qui di seguito il risultato che si ottiene con l'applet descritto da Marie


 
MokaByte Examples
October
Alm Marie lavora come Programmatrice presso una azienda produttrice di software. Ecco una sua autopresentazione: 

La mia vita (un po'):

I work as a software engineer in Silicon Valley, California, near San Francisco (USA), for a high tech company. Now I use SGI and Sun workstations. Currently, I am helping to design an intranet that will use Netscape and will be written in Java and HTML. The prototype was a big success. Before starting with Java in February, I had been helping to write large applications (like image processing (mostly medical), GUI, and cross-platform timers) in C and Motif under Unix on Sun workstations for about 7 years. Before that, I was a cardiology Intensive Care nurse (for many years) working several places in the world. Some other interests are snow skiing, cats, Tae Kwon Do, reading (science fiction and fantasy), and traveling. I have visited Bella Italia many times and can't wait to visit there again!

Può essere contattata tramite la redazione o direttamente all'indirizzo aalm@bayarea.net

 
 

MokaByte rivista web su Java

MokaByte ricerca nuovi collaboratori
Chi volesse mettersi in contatto con noi può farlo scrivendo a mokainfo@mokabyte.it