JAVA^TM GUI TUTORIAL

Bevezetés

JAVA^TM-ban a grafikus felület kinézetét, az egyes grafikus elemek elrendezését a különböző Layout osztályok segítségével állthatjuk be. Ezek az osztályok a java.lang.Object-ből származnak és implementálják a java.awt.LayoutManager és java.io.Serializable interfészeket. Az egyes Layout objektumokat önmagukban is használhatjuk egyszerűbb felületeknél, de általában többféle elrendezés kombinációjaként jön létre a kívánt elrendezés. Most egyenként kerülnek bemutatásra a leggyakrabban használt Layout osztályok. Ha a Layout osztályokat kombináljuk, akkor minden egyes ilyen elrendezés-csoporthoz külön konténert kell létrehozni. Az alábbi példában a különböző Layout-ok külön füles panelre kerültek.
A konténereken szereplő grafikus elemek elrendezését a konténerek setLayout() függvényével lehet beállítani.

Layout nélküli pozícionálás

Ha a nem szeretnénk semmilyen előre beállított elrendezést, hanem az egyes grafikus elemeket egyenként szeretnénk pozícionálni, akkor ezt a setLayout(null) függvényhívással érhetjük el. Ez általában jóval több munkával jár, viszont nem kell külön konténer objektumokat létrehozni.

FlowLayout

A java.awt.FlowLayout osztály a grafikus elemeket egymás után rakja, nincs különösebb elrendezés. Megadható azonban, hogy az elemek balra (FlowLayout.LEFT), középre (FlowLayout.CENTER) vagy jobbra (FlowLayout.RIGHT) rendezettek legyenek

    private JPanel flowPanel;
       ...
    flowPanel = new JPanel();
    flowPanel.setLayout(new FlowLayout( FlowLayout.RIGHT ));
    
    flowPanel.add(new JLabel("Label1"));
    flowPanel.add(new JLabel("Label2"));
    flowPanel.add(new JLabel("Label3"));
    flowPanel.add(new JLabel("Label4"));
    flowPanel.add(new JLabel("Label5"));
    flowPanel.add(new JLabel("Label6"));
    

GridLayout

A java.awt.GridLayout osztály táblázatos elrendezést jelent. A konstruktorában meg lehet adni, hogy hány oszlopból és hány sorból álljon a táblázat, valamint azt is, hogy hogy a sorok és oszlopok közötti távolság mennyi legyen. A sorok magassága és az oszlopok szélessége automatikusan lesz beállítva. A cellákat sorfolytonosan kell feltölteni.

    private JPanel gridPanel;
       ...
    gridPanel = new JPanel();
    gridPanel.setLayout(new GridLayout(2,3)); // 2 rows, 3 cols
    
    gridPanel.add(new JLabel("1", JLabel.CENTER));
    gridPanel.add(new JLabel("2", JLabel.CENTER));
    gridPanel.add(new JLabel("3", JLabel.CENTER));
    gridPanel.add(new JLabel("4", JLabel.CENTER));
    gridPanel.add(new JLabel("5", JLabel.CENTER));
    gridPanel.add(new JLabel("6", JLabel.CENTER));
    

BorderLayout

A java.awt.BorderLayout osztály a konténert öt részre osztja, melynek nevei BorderLayout.NORTH, BorderLayout.CENTER, BorderLayout.SOUTH BorderLayout.WEST, BorderLayout.EAST. Ezt az elrendezést leginkább főpaneleken, vagy ablakokban célszerű alkalmazni, mivel jó alapul szolgálhat a grafikus felület összképe számára.

    private JPanel borderPanel;
       ...
    borderPanel = new JPanel();
    borderPanel.setLayout(new BorderLayout());
    
    // labels to identify panels 
    JLabel northLabel = new JLabel( "NORTH" );
    JLabel eastLabel = new JLabel( "EAST" );
    JLabel westLabel = new JLabel( "WEST" );
    JLabel centerLabel = new JLabel( "CENTER" );
    JLabel southLabel = new JLabel( "SOUTH" );
    
    JPanel centerPanel = new JPanel() ;
    JPanel southPanel = new JPanel();
    JPanel northPanel = new JPanel() ;
    JPanel eastPanel = new JPanel();
    JPanel westPanel = new JPanel();
    
    northPanel.add(northLabel);
    southPanel.add(southLabel);
    centerPanel.add(centerLabel);
    westPanel.add(westLabel);
    eastPanel.add(eastLabel);
    
    // repaint panels backgrounds
    centerPanel.setBackground( Color.RED );
    southPanel.setBackground( Color.GREEN );
    northPanel.setBackground( Color.ORANGE );
    eastPanel.setBackground( Color.YELLOW );
    westPanel.setBackground( Color.CYAN );
    
    borderPanel.add(northPanel, BorderLayout.NORTH);
    borderPanel.add(southPanel, BorderLayout.SOUTH);
    borderPanel.add(eastPanel, BorderLayout.EAST);
    borderPanel.add(westPanel, BorderLayout.WEST);
    borderPanel.add(centerPanel, BorderLayout.CENTER);
    

Forráskód

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
import java.applet.*;


public class LayoutExampleApplet extends JApplet {

  private JTabbedPane tabbedPane;
  private JPanel borderPanel;
  private JPanel flowPanel;
  private JPanel gridPanel;
  
  public void buildGui() {
    
    tabbedPane = new JTabbedPane(JTabbedPane.TOP);
    borderPanel = new JPanel();
    gridPanel = new JPanel();
    flowPanel = new JPanel();
    
    this.add(tabbedPane);
    tabbedPane.addTab("FlowLayout", flowPanel);
    tabbedPane.addTab("GridLayout", gridPanel);
    tabbedPane.addTab("BorderLayout", borderPanel);
    
    borderPanel.setLayout(new BorderLayout());
    gridPanel.setLayout(new GridLayout(2,3)); // 2 rows, 3 cols
    flowPanel.setLayout(new FlowLayout( FlowLayout.RIGHT ));
    
    // labels to identify panels
    JLabel northLabel = new JLabel( "NORTH" );
    JLabel eastLabel = new JLabel( "EAST" );
    JLabel westLabel = new JLabel( "WEST" );
    JLabel centerLabel = new JLabel( "CENTER" );
    JLabel southLabel = new JLabel( "SOUTH" );
    
    centerLabel.setAlignmentY( JLabel.CENTER_ALIGNMENT );
    
    // adding componenets to show the layouts
    JPanel centerPanel = new JPanel() ;
    JPanel southPanel = new JPanel();
    JPanel northPanel = new JPanel() ;
    JPanel eastPanel = new JPanel();
    JPanel westPanel = new JPanel();
    
    northPanel.add(northLabel);
    southPanel.add(southLabel);
    centerPanel.add(centerLabel);
    westPanel.add(westLabel);
    eastPanel.add(eastLabel);
    
    // repaint panels backgrounds
    centerPanel.setBackground( Color.RED );
    southPanel.setBackground( Color.GREEN );
    northPanel.setBackground( Color.ORANGE );
    eastPanel.setBackground( Color.YELLOW );
    westPanel.setBackground( Color.CYAN );
    
    borderPanel.add(northPanel, BorderLayout.NORTH);
    borderPanel.add(southPanel, BorderLayout.SOUTH);
    borderPanel.add(eastPanel, BorderLayout.EAST);
    borderPanel.add(westPanel, BorderLayout.WEST);
    borderPanel.add(centerPanel, BorderLayout.CENTER);
    
    gridPanel.add(new JLabel("1", JLabel.CENTER));
    gridPanel.add(new JLabel("2", JLabel.CENTER));
    gridPanel.add(new JLabel("3", JLabel.CENTER));
    gridPanel.add(new JLabel("4", JLabel.CENTER));
    gridPanel.add(new JLabel("5", JLabel.CENTER));
    gridPanel.add(new JLabel("6", JLabel.CENTER));
    
    flowPanel.add(new JLabel("Label1"));
    flowPanel.add(new JLabel("Label2"));
    flowPanel.add(new JLabel("Label3"));
    flowPanel.add(new JLabel("Label4"));
    flowPanel.add(new JLabel("Label5"));
    flowPanel.add(new JLabel("Label6"));
    
  }
  
  public void init( ) {
    buildGui();
    repaint();
  }

}

Letöltés

Fordítás J2SDK 1.4 vagy magasabb verziójával.
# > javac LayoutExampleApplet.java

Applet:	LayoutExampleApplet.java
Stand-alone változat:	LayoutExample.java