Grafiska komponenter.

(1)

9/25/00

Kap J5-1

Grafiska komponenter.

• Grafiska användargränssnitt är det moderna alternativet till traditionell terminal-I/O.

• GUI-programmering bygger på en händelsestyrd flödeskontroll.

• I Java utförs GUI-programmeringen med hjälp av standardpaketet AWT vilket följer med alla Javasystem.

• AWT (Abstract Window Toolkit)

– innehåller basklasser för att skapa GUI. Finns i java.awt.

– är portabelt och fungerar tvärsöver olika plattformar.

– enkelt att använda för enkla gränssnitt.

• Ett närliggande begrepp är Java-appleten

– som är ett program som kan laddas ner från internet och köras i värddatorn.

– som baseras på AWT-komponenter.

9/25/00

Kap J5-2

En översikt.

• AWT-paketet är organiserat i form av klasser i en arvshierarki.

– Se fig nästa bild.

– Observera att klasser som t ex Font och Color vilka också definieras i java. awt-paketet ej tillhör Component-hierarkin. De ärver direkt från Object.

• Component-klassen – abstrakt

– representerar något med position och storlek som kan ritas på skärmen samt ta emot ”input”-händelser.

– Några viktigare metoder är (finns många!)

• void paint(Graphics g);

• void repaint(); //anropar paint

• void setSize(int width , int height);

• void setBackground (Color c);

• void setFont(Font f);

• void show(); //setVisible( boolean b);

Kap J5-3

Översikt av Javas grafiska komponenter

Component

Container Button Checkbox

Choice List Canvas

Label TextComponent

Panel ScrollPane Window

TextArea

Applet

Dialog Frame

FileDialog

(2)

9/25/00

Kap J5-4

En översikt, forts.

• Container-klassen – abstrakt superklass

– representerar komponenter som kan innehålla andra komponenter.

– Container IS-A Component – hjälpobjekt LayoutManager .

• bestämmer hur komponenterna skall ordnas i containern.

– Några centrala metoder är

• void setLayout(LayoutManager mgr);

• LayoutManager getLayout();

• void add (Component comp );

• void remove(Component comp );

• void add (Component comp, Object where);

• pack() //för subklasser till Window, version?

• void show(); //setVisible( boolean b);

– storleken bestäms av typ av Container och val av LayoutManager.

9/25/00

Kap J5-5

Liten FileDialog-applikation

• En applikation som använder GUI-gränssnitt måste ha en Frame (eller subklass till Frame) som yttersta container.

import java.awt.*;

import java.io.*;

public class FilDialogTest

{ // Pop up a FileDialog, select a file, and list contents public static void main( String [ ] args ) throws IOException {

Frame f = new Frame( );

f.show( );

FileDialog d;

d = new FileDialog( f, "List File ", FileDialog.LOAD );

d.show( );

String fileName;

if( ( fileName = d.getFile( ) ) != null ) ListaFiler.listFile( fileName );

System.exit( 0 );

} }

Kap J5-6

Exekvering av FileDialog-applikationen

D:\minaprog\java\ohtester >java FilDialogTest FILE: a.txt

Peter Hellstr ÷m

D:\minaprog\java\ohtester >

(3)

9/25/00

Kap J5-7

Kort beskrivning av Javas grafiska komponenter.

– Button

• knapp (med text)

– CheckBox

• markerbar ruta med tillhörande text. Kan grupperas.

– Choice

• popup-meny

– List

• meny i ruta (bläddringslist)

– Canvas

• ”målarduk”

– Label

• Enkel ”fast” text.

– TextComponent (superklass)

• TextField enkel rad för textinmatning.

• TextArea för flerradstextredigering.

– Scrollbar

• skjutreglage för värdesinställning.

9/25/00

Kap J5-8

Kort beskrivning av Javas grafiska komponenter, forts.

• Container (superklass) – behållare för grafiska komponenter.

– Window (superklass)

• fristående fönster (saknar kanter och titelrad ).

• Frame

– fristående fönster (med kanter och titelrad).

• Dialog

– dialogfönster (superklass till FileDialog)

– Panel

• delfönster, som måste inkapslas i en container.

• avänds för att få en hierarkisk struktur.

• Applet

– innehåller komponenter.

– har inget eget fönster och kan inte visas på skärmen. Webbläsare eller appletviewer tillhandahåller fönstret.

– Scrollpane

• container för en enda komponent.

Kap J5-9

Label.

• Visar en text på skärmen.

class ShowLabel extends Frame { public static void main(String[] arg) {

ShowLabel w= newShowLabel();

Label l1= new Label("X koord", Label.CENTER);

Label l2= new Label("Y koord", Label.CENTER);

l1.setFont(newFont( "SansSerif", Font.BOLD, 12));

l1.setBackground(Color. yellow );

l1.setForeground(Color.blue);

w.setLayout (new GridLayout (1,2));

w.add(l1); w. add(l2);

w.setSize(400,150);

w.show();//w. setVisible(true);

}

(4)

9/25/00

Kap J5-10

Egna grafiska komponenter.

• Egna grafiska komponenter kan skapas genom att låta en egen klass ärva egenskaper från en grafisk standardklass.

import java.text.*;

class TidpunktG extends Label { //instansvariabler

private int t,m,s;

private boolean visaSek=true;

private NumberFormat nf

= NumberFormat.getInstance();

//Konstruktorer

public TidpunktG (int ti,int mi,int se) { t=ti; m=mi; s=se;

nf.setMinimumIntegerDigits(2);

setFont(new Font( " Monospaced", Font.BOLD,18));

setBackground(Color.lightGray);

setAlignment(CENTER);

}

public TidpunktG (int t,int m) { this( t, m, 0);

visaSek=false;

}

public String toString () { String tid= nf.format(t) + ":" +

nf.format(m);

if (visaSek )

tid=tid + ":" + nf.format(s);

return tid;

}

//paint anger hur ett objekt skall ritas //på skärmen.

public void paint(Graphics g) { setText (toString () );

} }

9/25/00

Kap J5-11

Egna grafiska komponenter, forts.

• Egna grafiska komponenter kan skapas genom att låta en egen klass ärva egenskaper från en grafisk standardklass.

class TidDemoG extends Frame { TidpunktG t1; TidpunktG t2;

TidDemoG () { t1= new TidpunktG (0,0);

t2= new TidpunktG (10,20,30);

setSize(250,100);

setLayout(newGridLayout(2,2,5,5));

//2 rad, 2 col add(new Label ("Tidpunkt 1",

Label.CENTER));

add(new Label ("Tidpunkt 2", Label.CENTER));

add(t1); add(t2);

show();//setVisible(true);

}

public static void main(String[] arg) { TidDemoG demo = new TidDemoG();

} }

Kap J5-12

Panel.

• Panel är subklass både till Component och till Container.

– d v s man kan med metoden add() placera andra komponenter i ett Panel-objekt.

– används för att skapa en hierarkisk uppbyggnad av ett fönster.

– varje Panel har ett eget koordinatsystem och en egen

LayoutManager.

(5)

9/25/00

Kap J5-13

Panel-klassen Train

class Train extends Panel { //instansvariabler TidpunktG dep, arr;

String no, destination;

String comment = " ";

Label comLabel=new Label(comment);

//Konstruktor

public Train(String TrainNo, String dest, int depHour , int depMin, int arrHour , int arrMin ) { no= TrainNo; destination= dest;

dep=

new TidpunktG (depHour , depMin);

arr= new TidpunktG(arrHour , arrMin);

setLayout(newGridLayout(1,4));

setBackground(Color.white );

dep.setFont (getFont ());

dep.setBackground (getBackground());

add(new Label(no));

add(new Label(destination));

add(dep); add(comLabel);

show(); //setVisible(true);

}

public void delay(int min) { dep.ticka(min*60); arr.ticka(min*60);

setComment ("Ny avgångstid!" ); }

public void setComment (String com) { comment=com;

comLabel.setText(comment );

repaint(); //ritar om }

public String toString () { return (no + " " + destination + " " +

dep + " " + comment ); } }

9/25/00

Kap J5-14

Klassen TrainDemo

class TrainDemo extends Frame { Train t1,t2,t3,t4;

TrainDemo () { t1= new

Train("401","Göteborg",9,04,11,49);

t2= new

Train("701", "Malmö", 9,13, 13, 12);

t3= new

Train("424","Sundsvall", 9,18,12,48);

t4= new

Train("436", "Gävle", 9,44,11,15);

add(t1); add(t2); add(t3); add(t4);

setLayout(newGridLayout(4,1,0,1));

setForeground (Color.black);

pack(); show(); //setVisible(true);

t1.delay(15);

t2.setComment ("borda nu"); }

public static void main(String[] arg ) { TrainDemo demo= new TrainDemo();

} }

Kap J5-15

TextField.

• Inläsning av text kan göras med standardklassen TextField.

– medger att användaren kan ändra texten (jmf Label).

– placeras i ett fönster m h a add()-metoden.

• Några metoder är

– setcolumns(int n) ändra storlek

– setText(String t) visa text t

– String getText() läs inskriven text

– setEchoChar(char ch) visa tecken som ch

– selectAll() markera hela texten

– select(int no1, int no2) markera tecken i t o m j

– String getSelectedText() läs markerad text

(6)

9/25/00

Kap J5-16

Händelsestyrd programmering

• Ett typiskt enkelt GUI-program baseras på s k händelsestyrd programmering enligt följande:

– Programmet ritar upp fönster med innehåll etc.

– Programmet väntar på att användaren skall göra en inmatning.

– Användaren t ex matar in något och trycker på <enter >.

– Då genereras en s k händelse (event). Denna talar om för programmet vad som har hänt och programmet agerar utifrån detta.

• I Java måste speciella lyssnare (event listener) definieras som talar om för programmet när en viss händelse har inträffat. Det finns många olika slags lyssnare.

– enter-tryckning i TextField ActionEvent

• Fångas av lyssnare av typen ActionListener

9/25/00

Kap J5-17

Enkelt händelsestyrt program

import java. awt.*;

import java. awt. event.*;

class TrainDemoLyss extends Frame implements ActionListener { Train t1,t2,t3,t4;

TextField special= new TextField(30);

Label svar=new Label ("",Label .CENTER);

TrainDemoLyss( ) { t1=

new Train("401","Göteborg", 9,04,11,49);

t2= new Train("701", "Malmö", 9,13, 13, 12);

t3=

new Train("424", "Sundsvall", 9,18,12,48);

t4= new Train("436", "Gävle", 9,44, 11, 15);

setLayout(new GridLayout(6,1,10,10));

setForeground(Color. blue);

add(svar); add(t1); add(t2); add(t3);add(t4);

add(special); t1. delay(15);

t2. setComment("borda nu");

pack(); special.addActionListener(this);

setVisible(true); }

public static void main(String[] arg ) { TrainDemoLyss d= new TrainDemoLyss();}

public void actionPerformed (ActionEvent e) { //anropas när händelse inträffat

if (e. getSource()==special) { System. out.println("i actev");

String namn= special.getText ();

svar. setText( namn ); } } }

Kap J5-18

Ett seriöst program

import java.awt.event.*;

import java.text.*;

class V75Cost extends Frame implements ActionListener {

TextField antL1 = new TextField ("1",3); TextField antL2 = new TextField ("1",3);

TextField antL3 = new TextField ("1",3); TextField antL4 = new TextField ("1",3);

Label antL5 = new Label(" 1"); Label antL6 = new Label(" 1");

Label antL7 = new Label(" 1");

Panel p = new Panel(); // övre halvan under rubriken Panel p2 = new Panel(); // mitten

TextField radpris = new TextField ("1.0",5); // mitten Label antRad = new Label(); // mitten

Label cost = new Label ("Kostnad ",Label.RIGHT); // undre halvan Label rub = new Label ("V75 - 3 spikar ",Label.CENTER); // Rubrik

V75Cost() {// Konstruktor

rub.setFont (new Font ("Serif", Font.BOLD, 20));

setFont(new Font("Dialog", Font.PLAIN, 14));

// placera ut komponenterna i den övre panelen

(7)

9/25/00

Kap J5-19

Ett seriöst program, forts.

V75Cost() {// Konstruktor

rub.setFont (new Font ("Serif", Font.BOLD, 20));

setFont(new Font("Dialog", Font.PLAIN, 14));

// placera ut komponenterna i den övre panelen p.setLayout(new GridLayout (1,8)); // 1 rader 7 kolumner

p.add(new Label("Lopp 1 -7:", Label.RIGHT));p.add(antL1);p.add(antL2);

p.add(antL3);p.add(antL4);p.add(antL5);p.add (antL6);p.add(antL7);

// placera ut komponenterna i den nedre panelen p2.setLayout(new GridLayout (1,2)); // 1 rader 2 kolumn p2.add(radpris); p2.add(antRad);

// placera ut fönstrets komponenter

setLayout(newGridLayout(4,1)); // 4 rader 1 kolumn

add(rub); add(p); add(p2); add(cost); cost.setAlignment( Label.CENTER);

pack(); // beräkna fönstrets storlek // ange vilken lyssnare som skall användas

antL1.addActionListener(this); antL2.addActionListener(this);

antL3.addActionListener(this); antL4.addActionListener(this);

radpris.addActionListener(this); setVisible(true); // visa fönstret }

9/25/00

Kap J5-20

Ett seriöst program, forts.

public static void main (String[] arg) { V75Cost sys = new V75Cost(); }

public void actionPerformed(ActionEvent e) { // lyssnare int ant1, ant2, ant3, ant4, antr ;

if (e.getSource()==antL1 || e.getSource()==antL2 || e.getSource()==antL3 ||

e.getSource()==antL4 || e.getSource()==radpris ) { // avläs de fem svarsrutorna

ant1= Integer.parseInt(antL1.getText ()); ant2= Integer.parseInt(antL2.getText ());

ant3 = Integer.parseInt(antL3.getText ());ant4= Integer.parseInt(antL4.getText ());

double rpris = Double.valueOf(radpris.getText ()). doubleValue();

antr = ant1*ant2*ant3*ant4; antRad.setText("Antal rader: " + antr );

double totPris = antr * rpris;

// redigera resultattexten

NumberFormat r = NumberFormat.getInstance();

r.setMinimumFractionDigits (2); r.setMaximumFractionDigits (2);

String s = "Kostnad:" + r.format( totPris);

cost.setText(s); // visa nytt resultat }

} }

Kap J5-21

Exekvering

• Om Button används i stället

…

Button bu= new Button("Beräkna kostnad");

...

setLayout(new GridLayout (5,1)); // 5 rader 1 kolumn add(rub); add (p); add(p2); add (cost ); add (bu);...

... bu.addActionListener (this);…..

public void actionPerformed(ActionEvent e) { if (e.getSource()==bu ) {……

(8)

9/25/00

Kap J5-22

Layout Managers.

• En layout-manager arrangerar automatiskt en containers komponenter.

• Kommandot setLayout() associerar en layout -manager med en viss container. T ex

– setLayout(new FlowLayout());

• 5 subklasser till LayoutManager, 5 olika strategier – FlowLayout

• komponenterna placeras ut radvis från höger till vänster.

– GridLayout

• ”matrisuplacering”

– BorderLayout

• Fönstret delas in i fem delar – North,South,West,East,Center

– CardLayout

• kortutplacering, delvis dolda

– GridBagLayout

• Fönstret delas in i olika stora rutor

9/25/00

Kap J5-23