Komponenter och
layout i Java
• Innehåll
– Grafiska komponenter
– Klassen Container
– Layouthantering
• FlowLayout
• Gridlayout
• BorderLayout
– Klassen Panel
JavaC - 1
Grafiska
användargränssnitt
JavaC - 2
• I Java byggs det grafiska användargränssnittet upp med hjälpmedel för bl.a :
– Grafiska komponenter
• Presenterar ett användargränssnitt
med knappar, fönster, listboxar etc
– Layouthantering
• Organiserar och placerar ut
komponenter på lämpligt sätt i ett
fönster
– Händelsehantering
• Fångar och hanterar händelser som
musklick eller tangentbordsnedtryckningar som användaren
genererar
– Grafik
• Ritar enkla figurer, hanterar bilder
och ljud
1
AWT (Abstract
Window Toolkit)
Grafiska komponenter, JavaC - 4
klasstruktur
JavaC - 3
• I Java API finns ett paket java.awt som som
innehåller en mängd klasser för att utveckla
grafiska användargränssnitt
– AWT är plattformsoberoende men
applikationerna antar den exekverande
plattformens ”look and feel”
• Klasserna i AWT är huvudsakligen organiserade i
en arvshierarki med klassen Component i toppen
– En komponent representerar ett färdigt
gränssnittselement (t.ex en knapp) som kan
presenteras och positioneras
• En container är en speciell komponent i form av
en skärmyta (t.ex Applet eller Frame) på vilken
andra komponenter kan placeras
Panel
Container
ScrollPane
Dialog
Button
Window
FileDialog
Checkbox
Frame
Component
Choice
List
Canvas
Label
• (I JDK 1.2 finns ett nytt paket kallat Swing med
nya klasser för grafiskt användargränssnitt.
Swing innehåller fler komponenter, är säkrare
och har ett mer homogent utseende på olika
plattformar än AWT)
Applet
TextField
TextComponent
Scrollbar
TextArea
2
Några grafiska
komponenter
JavaC - 5
Metoder i klassen
Component
JavaC - 6
• Exempel metoder som är gemensamma och kan
utföras på alla komponeneter:
setBackground(färg)
Sätter bakgrundsfärgen
setForeground(färg)
Sätter förgrundsfärgen
setFont(font)
Sätter typsnitt
Exempel på några klasser för färdiga grafiska komponenter:
Button beskriver en knapp som kan innehålla text
Checkbox beskriver en markeringsruta tillhörande
text som användaren kan markera
Label beskriver en enkel text som kan visas i ett fönster
List beskriver lista med element som visas i en ruta. Om det finns fler
element än vad som får plats i rutan, så finns en bläddringslist (scrollbar).
Choice beskriver en combobox i form av en popup-meny med olika
alternativ. När användaren inte använder menyn visas en ruta med
valda alternativet
Text Field och Text Area beskriver textområden med en
resp flera rader där användaren kan skriva eller läsa text
Scrollbar beskriver en rullningslistdär användaren förändra
ett värde som ligger mellan två givna värden
Canvas beskriver en målarduk på vilken man kan rita godtyckliga
figurer med hjälp av metoder i klassen ”Graphics”
Panel beskriver ett delfönster, används i komplicerade gränssnitt
setSize(x,y)
Sätter komponentens storlek
(Ersätter metoden resize (x, y) i Java 1.0. resize är
numera definierad i klassen Applet)
setVisible(bool)
Visar/gömmer komponenten
repaint()
Ritar om komponenten, anropar paint
paint(g)
Anropas automatiskt då komponenten måste ritas om
3
Placering av
komponenter
JavaC - 7
Klassen Container
• Klassen Container är en superklass till flera
andra klasser bl.a Applet och Frame . Grafiska
komponenter kan inte visas separat på skärmen.
utan måste placeras i en container. (t.ex i ett
fönster av klasserna Applet och Frame)
• Ett objekt w är av en subklass till klassen
Container och kan innehålla komponenter.
Några metoder är:
w.add(x)
JavaC - 8
import java.applet.*;
import java.awt.*;
public class Test extends Applet
{
public void init ()
{
Button knappen = new Button("Knappen");
knappen. setFont (new Font("Serif", Font.ITALIC, 30));
knappen. setBackground (Color.black);
knappen. setForeground (Color. white);
add(knappen);
placerar den grafiska komponenten x i w
Label raden=new Label("En Label",Label.CENTER);
raden. setFont(new Font("monospaced ", Font.BOLD, 40));
raden. setBackground (Color. blue);
raden. setForeground (Color.green);
add(raden);
w.remove(x)
tar bort den grafiska komponenten x i w
}
w.removeAll()
}
tar bort alla grafiska komponent från w
w.setLayout (l)
anger att l skall användas som LayoutManager
w.setVisible(true)
visar w och dess komponenter
4
JavaC - 9
JavaC - 10
Klassen Button
• En knapp kan tryckas ned för att utföra
kommandon eller svara på frågor från
applikationen till användaren. Den skapas
med eller utan text
Klassen Label
En label-komponent visar en enkel rad med text i ett
fönster. Texten kan inte ändras av användaren.
new Label (”text”)
Skapar en Label med texten text vänsterjusterad
new Button()
Skapar en ny knapp utan text
new Button(”text”)
Skapar en ny knapp med texten text på
new Label (”text”, adj)
Skapar en Label med texten text.
adj kan vara Label.LEFT, Label.CENTER
eller Label.RIGHT
l.setText( ”text”)
b.setLabel (”text”)
Placerar texten text på knappen b
Sätter texten i l till text
l.getText()
b.getLabel ()
Returnerar texten på knappen b
Returnerar texten i l
l.setAlignment( adj)
Justerar texten i l. adj kan vara Label.LEFT ,
Label.Center eller Label.RIGHT
l.getAlignment()
Ger Label.LEFT , Label.Center eller
Label.RIGHT
5
Exempel med knapp och
textfält
JavaC - 11
Klassen TextField
Visning av text kan också göras med ett textfält
där användaren kan även kan skriva in text
(s.k. inmatningsfält). När användaren slår Enter
genereras en s.k. ActionEvent
new TextField ()
Skapar ett nytt textfält
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class Test extends Applet
{
private TextField texten;
private TextField resultat;
private Button knappen;
new TextField (n)
Skapar ett textfält med plats för n tecken
public void init()
{
knappen = new Button("Knappen");
knappen.addActionListener(new KnappLyssnare());
add(knappen);
new TextField (”text”)
Skapar ett textfält med texten text från början
new TextField (”text”, n)
Skapar ett textfält med texten text från början
och plats med n tecken
texten = new TextField("Skriv något här");
add(texten);
resultat = new TextField(40);
add(resultat);
}
class KnappLyssnare implements ActionListener
{
public void actionPerformed(ActionEvent event)
{
resultat.setText(texten.getText());
}
}
x.setText(”text”)
Placerar texten text i textfältet x
x.getText()
Returnerar texten i textfältet x
JavaC - 12
}
6
Klasserna Choice och
List
JavaC - 13
Choice beskriver en combobox i form av en popup-meny
med olika alternativ. Endast det valda alternativet visas
List beskriver en meny med flera alternativ som visas i
en lista. Listan är bläddringsbar om inte alla alternativ
får plats
new Choice()
Skapar ett ny valmeny
Exempel med knapp,
popup-meny och label
JavaC - 14
import java. applet.*;
import java. awt.*;
import java. awt.event.*;
public class Test extends Applet
{
private Button knappen;
private Choice menyn;
private Label valet;
public void init ()
{
knappen = new Button ("Knappen");
knappen. addActionListener (new KnappLyssnare ());
add (knappen);
new List(n, bool)
Skapar en alternativlista med n synliga alternativ,
om bool == true får flera alternativ väljas
x.add(”text”)
Lägger till alternativet text till x
menyn = new Choice();
menyn.add("Te");
menyn.add("Kaffe");
add(menyn);
x.select(n)
Markerar alternativ n
valet = new Label("Här kommer ditt val att visas.");
add (valet);
x.getSelectedIndex()
Ger numret för markerat alternativ, eller -1 om
inget eller flera alternativ är markerade
}
x.getSelectedItem ()
Ger texten i det valda alternativet
class KnappLyssnare implements ActionListener {
public void actionPerformed (ActionEvent event ) {
valet. setText("Dryck: " + menyn.getSelectedIndex());
}
}
x.getItemCount()
Ger antalet alternativ
}
7
Markeringsrutor och
radioknappar
JavaC - 15
Checkbox beskriver en markeringsruta, med tillhörande
text, som användaren markerar att vara ”på” eller ”av”.
new Checkbox(”text”)
Skapar en checkbox, med texten text och och omarkerad
Exempel med knapp,
radioknappsgrupp och label
JavaC - 16
public class Test extends Applet
{
private Button knappen;
private CheckboxGroup drycker;
private Checkbox te, kaffe;
private Label valet;
new Checkbox(”text”, bool )
Skapar en checkbox, med texten text och markerad om bool är true
public void init ()
{
knappen = new Button ("Knappen");
knappen. addActionListener (new KnappLyssnare ());
add (knappen);
I en radioknappsgrupp är endast en radioknapp markerad
new CheckboxGroup ()
Skapar en radioknappsgrupp
drycker = new CheckboxGroup ();
new Checkbox(”text”, bool , g)
Skapar en radioknapp i gruppen g, med text och eventuellt markerad
te = new Checkbox("Te", true, drycker);
add(te);
x.setState (bool)
Markerar eller avmarkerar x
kaffe = new Checkbox("Kaffe", false, drycker);
add(kaffe);
x.getState ()
Ger true om x är markerad
valet = new Label("Här kommer ditt val att visas.");
add(valet);
x.setCheckboxGroup(g)
Anger att x skall tillhöra gruppen g
}
x.getCheckboxGroup()
Ger den grupp x tillhör
class KnappLyssnare implements ActionListener {
public void actionPerformed (ActionEvent event ){
Checkbox valt = drycker. getSelectedCheckbox ();
valet. setText("DRYCK: " + valt. getLabel ());
}
}
g.setSelectedCheckbox(x)
Anger att x i gruppen g skall markeras
g.getSelectedCheckbox(x)
Ger den Checkbox i gruppen g som är markerad
}
8
JavaC - 17
Layouthanterare
•
Layouthanterare är objekt som styr utplaceringen av
komponenter
•
Några vanliga typer av layouthanterare är:
– FlowLayout
Placerar komponenter radvis från vänster till höger, tills
att utymmet är slut, på liknande sätt som texten i en
boksida,. De enskilda komponenterans storlek förändras
ej.
– GridLayout
Fönstret delas upp i ett rutnät med rader och kolumner.
Komponenterna placeras ut radvis från vänster till höger.
Alla komponenter blir lika stora.
– BorderLayout
Fönstret delas in i fem områden. Fyra områden längs
fönstrets fyra kanter och ett femte område i fönstrets
mitt.
JavaC - 18
FlowLayout
• FlowLayout är default LayoutManager för
klasserna Applet och Panel.
• FlowLayout-placeringen ändras automatiskt om
fönstrets storlek ändras
• Konstruktorer:
new FlowLayout ()
Komponenterna centreras
new FlowLayout (a)
a är FlowLayout .LEFT eller FlowLayout .RIGHT
new FlowLayout (a, dx, dy)
dx och dy anger avstånd mellan komponenterna
– CardLayout
CardLayout skiljer sig från andra layouthanterare genom
att alla komponenter inte syns på en gång. Man definierar
istället en ”kortlek” som användaren kan bläddra i och
studera ett i taget (jmfr flikar)
– GridBagLayout
Delar in fönstret ett rutnät med olika stora rutor. Vissa
komponenter kan dessutom uppta flera rutor
9
JavaC - 19
Applet med FlowLayout
import java. applet.*;
import java. awt.*;
public class Test extends Applet
{
private Button b1 = new Button ("1");
private Button b2 = new Button ("Knapp 2");
private Label l3 = new Label ("Label 3");
private TextField t4 = new TextField ("Text 4");
private Canvas c5 = new Canvas ();
// Canvas är en komponent som endast tillhandahåller
// en yta att rita på, t.ex grafiska figurer
public void init ()
{
c5. setBackground (Color.lightGray );
c5. setSize(75,75); //måste anges
setLayout(new FlowLayout());
add (b1); add(b2); add(l3); add(t4); add(c5);
GridLayout
JavaC - 20
• Fönstret delas in i ett rutnät. Alla komponenter
blir lika stora även om man angivit något annat
• Konstruktorer
new GridLayout (r,k)
Placerar komponenterna i r rader och k kolumner.
0 betyder godtyckligt antal rader respektive
kolumner
new GridLayout (r, k, dx, dy)
dx och dy anger avstånd mellan komponenterna
• Antalet kolumner justeras om antalet
komponeneter som placeras inte stämmer
}
}
10
JavaC - 21
Applet med GridLayout
import java. applet.*;
import java. awt.*;
BorderLayout
JavaC - 22
• Konstruktorer
new BorderLayout ()
public class Test extends Applet
{
private Button b1 = new Button ("1");
private Button b2 = new Button ("Knapp 2");
private Label l3 = new Label ("Label 3");
private TextField t4 = new TextField ("Text 4");
private Canvas c5 = new Canvas ();
private Button b6 = new Button ("6");
public void init ()
{
c5. setBackground (Color. lightGray );
c5. setSize (75,75);
setLayout(new GridLayout(2,3));
Delar upp fönstret i fem områden. Fyra områden längs
fönstret kanter och ett område i fönstrets centrum
new BorderLayout (dx, dy)
dx och dy anger avstånd mellan komponenterna
• Metoder
add(”plats”, c)
Placerar ut komponenten c. plats kan vara North,
South, East, West eller Center
add (b1); add(b2); add(l3); add(t4); add(c5); add(b6);
}
}
11
Applet med
BorderLayout
Olika layouthanterare
med klassen Panel, del 1
JavaC - 23
•
import java. applet.*;
import java. awt.*;
public class Test extends Applet
{
private Button b1 = new Button ("1");
private Button b2 = new Button ("Knapp 2");
private Label l3 = new Label("Label 3");
private TextField t4 = new TextField("Text 4");
private Canvas c5 = new Canvas();
public void init()
{
c5.setBackground(Color.lightGray);
c5.setSize(75,75);
setLayout(new BorderLayout());
add("West", b1); add("East", b2); add("North",l3);
add("South", t4); add("Center", c5);
}
•
•
JavaC - 24
Klassen Panel är en generell containerklass som används för
att innehålla ett antal komponenter i mer komplicerade
gränssnitt.
Paneler används och placeras normalt inuti en annan container.
– En container kan exempelvis innehålla två paneler, där en
panel använder en typ av layout manager och den andra
har en annan typ.
I exemplet nedan används tre paneler, där appleten använder
en typ av layout manager och panelerna en annan typ.
import java. applet.*;
import java. awt.*;
public class Test extends Applet
{
public void init()
{
Panel knappar = new Panel();
knappar.setLayout(new FlowLayout(FlowLayout.RIGHT));
knappar.add(new Button("OK"));
knappar.add(new Button("Cancel"));
knappar.add(new Button("Help"));
}
Panel input = new Panel();
input.setLayout(new GridLayout(3,1));
Panel rad1 = new Panel();
rad1.setLayout(new FlowLayout(FlowLayout.RIGHT));
rad1.add(new Label("Namn:", Label.RIGHT));
rad1.add(new TextField(40));
input.add(rad1);
12
Olika layouthanterare
med klassen Panel, del 2
JavaC - 25
Panel rad2 = new Panel();
rad2. setLayout (new FlowLayout (FlowLayout .RIGHT));
rad2. add(new Label ("Adress:", Label.RIGHT));
rad2. add(new TextField (40));
input. add(rad2);
Panel rad3 = new Panel();
rad3. setLayout (new FlowLayout (FlowLayout .RIGHT));
rad3. add(new Label ("Telefonnummer:", Label.RIGHT));
rad3. add(new TextField (40));
input.add(rad3);
setLayout(new BorderLayout());
add("North", knappar);
add("Center", input);
}
}
13
