11 Grafiske standardkomponenter

getMultipleMode()

11.2.8 Canvas

Et tegne-område. Canvas er en anelse besværlig, idet man skal nedarve fra klassen og implementere paint(Graphics g) for at kunne tegne noget.

En lettere (men ikke nødvendigvis altid smartere) måde er som sagt at definere paint()-metoden direkte i appletten/vinduet, som vi har gjort tidligere.

11.3 Eksempel

Herunder et eksempel (genereret med JBuilder), der viser komponenterne omtalt i forrige afsnit.

På billedet ses det resulterende skærmbillede under Windows (sidst i kapitlet ses, hvordan det ser ud under Linux).

public class VisGrafiskeKomponenter
{
  public static void main(String[] arg)
  {
    GrafiskeKomponenter vindue = new GrafiskeKomponenter();
    vindue.setSize(700,300);
    vindue.setVisible(true);
  }
}

import java.awt.*;

public class GrafiskeKomponenter extends Frame
{
  // opret alle komponenterne og husk dem i nogle objektvariabler
  Button button1 = new Button();
  Checkbox checkbox1 = new Checkbox();
  Checkbox checkbox2 = new Checkbox();
  Checkbox checkbox3 = new Checkbox();
  Checkbox checkbox4 = new Checkbox();
  Checkbox checkbox5 = new Checkbox();
  CheckboxGroup checkboxGroup1 = new CheckboxGroup();
  Choice choice1 = new Choice();
  TextField textField1 = new TextField();
  TextArea textArea1 = new TextArea();
  List list1 = new List();
  Label label1 = new Label();

  FlowLayout flowLayout1 = new FlowLayout(); // layout-manager (se senere)

  public GrafiskeKomponenter() {
    try {
      jbInit();
    }
    catch(Exception e) {
      e.printStackTrace();
    }
  }

  private void jbInit() throws Exception {
    button1.setLabel("OK");

    checkbox1.setLabel("En");     // Sæt afkrydsningsfelternes navne
    checkbox2.setLabel("To");
    checkbox3.setLabel("Tre");

    checkbox4.setLabel("Radio1"); // Sæt radioknappernes navne og
    checkbox5.setLabel("Radio2");
    checkbox4.setCheckboxGroup(checkboxGroup1); // gruppen de tilhører
    checkbox5.setCheckboxGroup(checkboxGroup1);
    checkboxGroup1.setSelectedCheckbox(checkbox4);

    choice1.add("Choice Rød");
    choice1.add("Choice Grøn");
    choice1.add("Choice Blå");

    textField1.setColumns(10);
    textField1.setText("Et TextField");

    textArea1.setColumns(15);
    textArea1.setRows(5);
    textArea1.setText("Et TextArea");

    label1.setText("En Label");

    list1.add("List Rød");
    list1.add("List Grøn");
    list1.add("List Blå");

    this.setLayout(flowLayout1);// sæt layout-manager (se senere)

    this.add(button1, null);    // til sidst skal komponenterne føjes
    this.add(checkbox1, null);  // til containeren (se senere)
    this.add(checkbox2, null);
    this.add(checkbox3, null);
    this.add(checkbox4, null);
    this.add(checkbox5, null);
    this.add(choice1, null);
    this.add(textArea1, null);
    this.add(textField1, null);
    this.add(label1, null);
    this.add(list1, null);
  }
}

11.4 Containere

En container er beregnet til at indeholde komponenter. De arver alle fra Container-klassen og har alle en såkaldt layout-manager tilknyttet, der bestemmer, hvor og med hvilken størrelse komponenterne skal vises i containeren.

For at en komponent bliver vist, skal den tilføjes en container. I eksemplet ovenfor er vinduet den container, komponenterne bliver tilføjet og derfor står der sidst i initialiseringen:

    this.add(button1, null);

11.4.1 Panel

Et panel er den simpleste og oftest brugte container. Den indeholder simpelt hen komponenterne (i henhold til layout-manageren).

11.4.2 Applet

En applet er et udvidet panel, der er beregnet til at blive vist i en netlæser. Læs kapitel 10, Appletter for mere information om denne klasse.

11.4.3 Window

Window repræsenterer et bart vindue uden en titellinje eller lukkeknap øverst. Det bruges meget sjældent direkte. Man bruger i stedet arvingerne Frame og Dialog.

11.4.4 Frame

En Frame er den simpleste og oftest brugte måde at definere et "normalt" vindue med en titel. Læs kapitel 9, Grafiske programmer for mere information om denne klasse.

11.4.5 Dialog

Dialog bruges til dialog-bokse, vinduer, der dukker op med et eller andet spørgsmål, som skal besvares, før man kan gå videre. Egenskaben modal angiver, om dialog-boksen er modal, dvs. om man skal lukke den, før man kan få adgang til ejer-vinduet. Den sættes med setModal(boolean m) og aflæses med isModal(). Er vinduet modalt vil et kald til setVisible(true) vente, indtil brugeren har udfyldt og lukket dialog-boksen igen.

11.5 Relationer mellem klasserne

Herunder ses klassediagrammet for nogle af komponenterne og containerne.

De hule pile ( ) repræsenterer er-en-relationer (dvs. nedarvning). De andre pile ( ), mellem Container og Component og mellem CheckboxGroup og Checkbox, repræsenterer har-relationer (dvs. at et objekt har en reference til et andet objekt, evt. "ejer" objektet).

Bemærk, at Container selv arver fra Component, så en Container kan i sig selv bruges som en komponent. Det er relevant for Panel og ScrollPane, der er beregnet til at blive placeret inden i andre containere.

11.6 Layout-managere

En layout-manager styrer layoutet af komponenterne på et Panel eller en anden container. Alle containere har egenskaben layout, der kan sættes med metoden setLayout(Layout l).

11.6.1 Ingen styring (null-layout)

I udviklingsfasen er det mest bekvemt at sætte layout-manageren til null, der tillader udvikleren at sætte komponenterne, som han vil på en hvilken som helst (x,y)-position og med en hvilken som helst højde og bredde. Koden ser således ud:

    this.setLayout(null);                              // sæt null-layout
    this.add(button1, null);                           // tilføj knap
    button1.setBounds(new Rectangle(231, 60, 91, 32)); // sæt position/størrelse

null-layout tager slet ikke højde for vinduets størrelse, så hvis vinduet bliver for lille, vil nogle af komponenterne ikke blive vist. Når programmet er ved at være færdigt, bør man derfor ændre programmet til at bruge en layout-manager, der kan styre komponenternes størrelse og indbyrdes placering ud fra deres behov.

11.6.2 FlowLayout

FlowLayout placerer komponenterne ligesom bogstaver: Øverst fra venstre mod højre og på en ny linje nedenunder, når der ikke er mere plads.

Angiver man ikke nogen layout-manager i et panel/applet, vil FlowLayout blive brugt.

I eksemplet GrafiskeKomponenter ovenfor blev FlowLayout brugt:

    this.setLayout(new FlowLayout());
    this.add(button1, null);

11.6.3 BorderLayout

BorderLayout tager højde for vinduets størrelse og tilpasser komponenternes størrelse efter den tilgængelige plads. Komponenterne kan placeres på 5 mulige positioner, nemlig NORTH, SOUTH, EAST, WEST og CENTER.

Den mest almindelige måde at lave det grafiske layout af et skærmbillede er med BorderLayout. I de områder, hvor man ønsker at placere flere komponenter, sætter man først et Panel og komponenterne tilføjes så panelet.

Angiver man ikke nogen layout-manager i et vindue, vil BorderLayout blive brugt (i eksemplet nedenfor kunne de to linjer omkring BorderLayout strengt taget fjernes).

import java.awt.*;

public class VindueMedBorderLayout extends Frame
{
  Button button1 = new Button();
  Button button2 = new Button();
  Button button3 = new Button();
  Button button4 = new Button();
  Button button5 = new Button();

  BorderLayout borderLayout1 = new BorderLayout();

  public VindueMedBorderLayout() {
    try {
      jbInit();
    }
    catch(Exception e) {
      e.printStackTrace();
    }
  }

  private void jbInit() throws Exception {
    button1.setLabel("NORTH");
    button2.setLabel("SOUTH");
    button3.setLabel("EAST");
    button4.setLabel("WEST");
    button5.setLabel("CENTER");

    this.setLayout(borderLayout1);

    this.add(button1, BorderLayout.NORTH);
    this.add(button2, BorderLayout.SOUTH);
    this.add(button3, BorderLayout.EAST);
    this.add(button4, BorderLayout.WEST);
    this.add(button5, BorderLayout.CENTER);
  }
}

Man sætter altså først layoutet ved at kalde setLayout() med et BorderLayout-objekt. Derefter kan add() kaldes med komponenterne og deres placering på borderlayoutet.

Bemærk, at når man bruger en layout-manager, bør man lade den afgøre vinduets størrelse ud fra komponenternes behov, ved at kalde pack() i stedet for setSize() på vinduet. Denne metode pakker komponenterne i vinduet optimalt og sætter vinduesstørrelsen passende.

public class VisVindueMedBorderLayout
{
  public static void main(String[] arg)
  {
    VindueMedBorderLayout vindue = new VindueMedBorderLayout();
    vindue.pack();// sætter en rimelig vinduesstørrelse (i stedet for setSize())
    vindue.setVisible(true);
  }
}

11.6.4 GridBagLayout

En anden måde at lave layout er med GridBagLayout, som lægger komponenterne efter et usynligt gitter. Hver komponent kan fylde en eller flere celler i højden eller bredden.

import java.awt.*;

public class VindueMedGridBagLayout extends Frame
{
  GridBagLayout gridBagLayout1 = new GridBagLayout();
  Button   knap1 = new Button();
  Button   knap2 = new Button();
  Button   knap3 = new Button();
  Button   knap4 = new Button();
  Button   knap5 = new Button();
  Checkbox chkHø = new Checkbox();
  Checkbox chkVe = new Checkbox();
  Checkbox chkCe = new Checkbox();
  TextArea tekst = new TextArea();

  public VindueMedGridBagLayout() {
    try {
      jbInit();
    }
    catch(Exception e) {
      e.printStackTrace();
    }
  }

  private void jbInit() throws Exception {
    knap1.setLabel("knap1 (på 3x1 celler)");
    knap2.setLabel("knap2 (1x2)");
    knap3.setLabel("knap3 (på 1x1 celle)");
    knap4.setLabel("knap4 (1x1)");
    knap5.setLabel("knap5 (1x1)");
    chkHø.setLabel("Højre");
    chkVe.setLabel("Venstre");
    chkCe.setLabel("Centreret");
    tekst.setColumns(15);
    tekst.setRows(2);
    tekst.setText("Tekstfelt (3x3 celler)");

    this.setLayout(gridBagLayout1);

    // til sidst skal komponenterne føjes til containeren
    this.add(knap1, new GridBagConstraints(0, 0, 3, 1, 0.0, 0.0, 
    GridBagConstraints.CENTER,GridBagConstraints.BOTH,new Insets(0,0,0,0),0,0));
    this.add(knap2, new GridBagConstraints(3, 0, 1, 2, 0.0, 0.0,
    GridBagConstraints.CENTER,GridBagConstraints.BOTH,new Insets(0,0,0,0),0,0));
    this.add(knap3, new GridBagConstraints(0, 1, 1, 1, 0.0, 0.0,
    GridBagConstraints.CENTER,GridBagConstraints.BOTH,new Insets(0,0,0,0),0,0));
    this.add(knap4, new GridBagConstraints(1, 1, 1, 1, 0.0, 0.0,
    GridBagConstraints.CENTER,GridBagConstraints.BOTH,new Insets(0,0,0,0),0,0));
    this.add(knap5, new GridBagConstraints(2, 1, 1, 1, 0.0, 0.0,
    GridBagConstraints.CENTER,GridBagConstraints.BOTH,new Insets(0,0,0,0),0,0));
    this.add(chkHø, new GridBagConstraints(0, 2, 1, 1, 0.0, 0.0,
    GridBagConstraints.EAST,  GridBagConstraints.NONE,new Insets(0,0,0,0),0,0));
    this.add(chkVe, new GridBagConstraints(0, 3, 1, 1, 0.0, 0.0,
    GridBagConstraints.WEST,  GridBagConstraints.NONE,new Insets(0,0,0,0),0,0));
    this.add(chkCe, new GridBagConstraints(0, 4, 1, 1, 0.0, 0.0,
    GridBagConstraints.CENTER,GridBagConstraints.NONE,new Insets(0,0,0,0),0,0));
    this.add(tekst, new GridBagConstraints(1, 2, 3, 3, 0.0, 0.0,
    GridBagConstraints.CENTER,GridBagConstraints.BOTH,new Insets(0,0,0,0),0,0));
  }
}

Når en komponent tilføjes, angives i et GridBagConstraints-objekt:

• Komponentens position (cellekolonne og -række)

• Komponentens spændvidde i højde og bredde

• Vægt i højde og bredde (komponenter med størst værdi får mest af eventuel overskydende plads)

• Justering i tilfælde af overskydende plads (CENTER, EAST, WEST, NORTHEAST, ...)

• Om komponenten skal strækkes til at fylde overskydende plads (BOTH, NONE, HORIZONTAL, VERTICAL)

• Til sidst nogle parametre til indsættelse af ekstra plads.

Her er koden, der viser vinduet.

public class VisVindueMedGridBagLayout
{
  public static void main(String[] arg)
  {
    VindueMedGridBagLayout vindue = new VindueMedGridBagLayout();
    vindue.pack();
    vindue.setVisible(true);
  }
}

11.7 Menuer

Menuer med rullegardiner er relativt enkle at lave. Herunder ses brudstykkerne af den kode, der skal til, for at lave menuerne vist på figuren til højre.

  MenuBar menuBar1 = new MenuBar();

  Menu     menuFil         = new Menu();
  MenuItem menuItemÅbn     = new MenuItem();
  MenuItem menuItemAfslut  = new MenuItem();

  Menu     menuHjælp       = new Menu();

  ... i f.eks jbInit() kunne der stå:

    this.setMenuBar(menuBar1);

    menuFil.setLabel("Fil");
    menuItemÅbn.setLabel("Åbn");
    menuItemAfslut.setLabel("Afslut");
    menuFil.add(menuItemÅbn);
    menuFil.add(menuItemAfslut);
    menuBar1.add(menuFil);

    menuHjælp.setLabel("Hjælp");
    menuBar1.add(menuHjælp);

For at fange, når brugeren vælger et menupunkt, skal man lytte efter actionPerformed, ligesom med Button-klassen (det blev diskuteret i afsnit 11.1.1).

11.8 Test dig selv

11.9 Resumé

11.10 Avanceret

11.10.1 AWT-komponenter på andre platforme

11.10.2 Swing-komponenter