frameworks. konstruktion av fönster, gränssnitt och användning av grafik i java

nextprevious

Frameworks. Konstruktion av fönster, gränssnitt och användning av grafik i Java

OOMPA 2001Föreläsning 11a

Innehåll, kort om:FrameworksGrafik med främst AWTGrafiska interaktiva applikationerHändelsehanteringHur gör man i Swing då?

previous next 2

Frameworks. Konstruktion av grafiska interaktiva applikationer.

Frameworks (FW)• Ett FW är centralt för konstruktion av tex interaktiva grafiska

applikationer

• Varför ett framework?– svårt att tränga in i toolkits, eller följa givna designregler

– återanvändbar applikationsdesign eller delsystem

– representeras av ett antal abstrakta klasser och definitioner av hur dessa klasser samarbetar, vilket vägleder programutvecklaren och gör det enklare att konstruera enhetliga gränssnitt och applikationer

• snabbare

• mer uniformt

previous next 3


Vad är ett Framework?• Ett framework (FW) beskriver hur ett problem skall brytas ner

– Ett FW beskriver inte bara hur klasserna utan också hur deras instanser samverkar

• definierar invarianter som objekten måste dela

• anger också hur dom skall användas

– Ett FW består typiskt av en uppsättning abstrakta klasser och gränssnitt som beskriver en semikomplett applikation som sedan specialiceras för att konstruera konkreta applikationer

– Ett framework “påtvingar” en modell som programmeraren måste anpassa sig till

• Dom flesta FW använder designmönster som Template Method och Strategy

previous next 4


Hollywood• Omvänd kontroll

– Ibland talar man om Hollywood-principen i ett framework

– Ring inte oss vi ringer er!

AnvändarkodAnvändarkod

Koda med klassbibliotek

kod i klassbibliotek

FrameworkFramework

Koda med framework

användarkod

previous next 5


Exempel på Frameworks i Java• Collection Framework

– För mängdhantering

– Se Collection-klasserna i Javas tutorial, http://java.sun.com/docs/books/tutorial/collections/index.html

• Framework för grafiska gränssnitt– Med bla AWT, Swing mm

– Se resten av OH-bilderna + Javas tutorial,(Swing) http://java.sun.com/docs/books/tutorial/uiswing/index.htmlGraphics http://java.sun.com/docs/books/tutorial/2d/index.html

• Input/output Framework– Strömmar med in- och utmaning

– Se http://java.sun.com/docs/books/tutorial/essential/io/index.html

previous next 6


Javas API (Application Programming Interface)• Java:s API innehåller bla awt (abstract windowing

toolkit) som delvis kan användas som ett Framework som bla stödjer konstruktion av applikationer med fönster

• Den fundamentala klassen Frame– subklassas

– beteendet ändras, dvs anpassas till dom egna önskemålen, genom att lämpliga metoder skrivs om i den konkreta (egna) subklassen

previous next 7


Några viktiga klasser i java.awt

java.lang

java.awt

ObjectObject ComponentComponent ContainerContainer

ScrollPaneScrollPane

WindowWindow

DialogDialog

FrameFrame

ButtonButton

ListList

LabelLabel

ButtonButton

TextComponentTextComponent

TextAreaTextArea

TextFieldTextField

…

java.applet AppletApplet

PanelPanel

previous next 8


Skapa fönsterimport java.awt.*;

public class FrameHelloFirst extends Frame {

public static void main(String [] args) {FrameHelloFirst frame = new FrameHelloFirst();frame.setSize(200, 300); //Fönstrets storlekframe.setVisible(true); //Öppna fönstret

}}

previous next 9


Olika sätt att skapa fönster

• Använd klassen Frame• Vi skapar en klass som använder en Frame för att skapa

ett fönster

import java.awt.Frame;public class Frame1 {public static void main(String args []) {

// skapa ett fönster med given titelFrame frame = new Frame("Frame 1");frame.setSize(300, 400); // fönstrets

storlekframe.setVisible(true); // öppna fönstret

}}

previous next 10


...• Alternativt kan vi konstruera subklass till Frame...

public class Frame2 extends Frame {/* om vi vill använda konstruktören med argument måste vi skapa motsvarande konstruktör i den egna klassen */public Frame2(String s) {

super(s);

}

...

previous next 11


Definiera utritning• Använd "subklass-strategin”

• Skriv över metoden paint(Graphics g)

• Dvs skriv

public void paint(Graphics g) {// använd g för att rita

}

• metoden anropas automatiskt då fönstret behöver ritas om

previous next 12


Rita text på fönstret

• Använd metoden– drawString(String str, int x, int y) i

klassen Graphics

public void paint(Graphics g) {

// vi skriver ut fönstrets höjdSystem.out.println(getHeight());g.drawString("Här kommer en sträng halvägs ner i y-led",

20, //x-koordinatgetHeight() / 2); //y-koordinat

}

previous next 13


En rutin för att rita lite olika grafikpublic void paint(Graphics g) {

int posY;

posY = getBounds().height / 3;

g.drawString("Man kan 'rita' ut text", 20, posY);

//Färg

g.setColor(Color.blue);

posY = posY + 30;

g.drawString("Man kan ändra färgen (och rita figurer)", 20, posY);

g.setColor(Color.red);

g.drawLine(10, 10, 100, posY);

g.setColor(new Color((float) 0.5, (float) 1.0,(float) 0.7));

g.fill3DRect(posY, posY, posY + 50, posY + 70, true);

}

previous next 14


Ett objekt som själv ritar på skärmenimport java.awt.*;public class Ball {

Color myColor;Point position;int radius;

public Ball(Color aColor, Point aPosition, int aRadius) {myColor = aColor;position = aPosition;radius = aRadius;

}

public void paint(Graphics g) {g.setColor(myColor);g.fillOval(position.x - radius, position.y - radius,

2 * radius, 2*radius);}

}

previous next 15


… och ändra i Frameklassenpublic class FrameHelloFourth extends Frame {

Ball [] theFigures = {new Ball(Color.red, new Point(70, 70), 50),new Ball(Color.blue, new Point(75, 170),

70)};

public static void main(String [] args) {FrameHelloFourth frame = new FrameHelloFourth();frame.setSize(200, 300);frame.setLocation(new Point(100, 150));frame.setTitle("Med två bollar");frame.setVisible(true); frame.addWindowListener(new MyWindowListener());

}

public void paint(Graphics g) {for(int i = 0; i < theFigures.length; i++) {

theFigures[i].paint(g);}

}}

previous next 16


Vad kan jag rita i Java?• I Java 1.1 är ritrutinerna ganska primitiva

– Man kan endast• rita objekt med tjocklek 1 (ett)

• rita enklare typer av primitiva objekt

• hantera pixelkartor på ett begränsat sätt

– Man kan också använda tex färg och sätta klipprektangel

• I Java 2 (JDK 1.2 och senare) med Java2D har vi fler möjligheter

– som tex• rita splines och andra kurvor

• ange tjocklek på kanter

• ange typ av linje (tex rita streckad linjer mm)

• ange transformationer som skalning, translation och rotation

• rita genomskinligt eller ange att antialiasing skall användas

• Idag tittar vi lite på Java 1.1 och den intresserade kan titta på Java 2 på SUNs sidor

previous next 17


Rita ickefyllda grafiska objektNågra exempel

• linjegc.drawLine(int x1, int y1, int x2, int y2);

• ovalgc.drawOval(int x, int y, int width, int height);

• rektangelgc.drawRect(int x, int y, int width, int height);

• polygongc.drawPolyline(int xPoints[], int yPoints[], int nPoints);

alternativtgc.drawPolygon(Polygon p);

previous next 18


Rita fyllda grafiska objekt• oval

gc.fillOval(int x, int y, int width, int height);

• rektangelgc.fillRect(int x, int y, int width, int height);

• polygongc.fillPolygon(int[] xPoints, int[] yPoints, int nPoints)

ellergc.fillPolygon(Polygon p)

previous next 19


Rita med olika färg• ändra färg

gc.setColor(Color c)

• rita med XOR-mod, dvs alternera mellan den grafiska kontextens färg och den som ges som argument till metoden

gc.setXORMode(Color c1)

previous next 20


Rita bilder

• Hämta bild från fil (från en Frame måste vi använda getToolKit, från en applet behövs inte detta)Image image = getToolkit().getImage(imageFile);

• Rita bilden på grafiska kontexten(skalad att passa in i given rektangel)gr.drawImage(image,

posX,posY,width,height,bgcol,this);

previous next 21


Inmatning i Java• Händelsestyrd inmatning

– Förändringar hos enheter placeras i en kö• intresserade program meddelas om att händelse inträffat från början av kön

(flera kan alltså meddelas om samma händelse)

• Det är sedan upp till varje program att själv bestämma hur det skall (eller inte skall) reagera

– Exempel, en metod som reagerar om händelsen dubbeklick inträffar

public void doubleClickEvent(Event event) { frame.setLocation(event.position());}

previous next 22


Java 1.1s händelsemodell• Java 1.1. och senare baseras på en modell där händelser i

gränssnitten tas om hand av "lyssnare"

• I princip sätter man upp en händelselyssnare per typ (tangentbord, mus, fokus, etc.) av händelse man är intresserad av i applikationen

• Varje komponent (knapp, fält, mfl) kan också hanteras av sin egen händelselyssnarebuttonX.addActionListener(myListenerForButtonX)

• Med fördel används anonyma klasser för att definiera lyssnare för olika objekt

previous next 23


Händelselyssnare• Händelser till en grafisk applikation tas omhand av

händelselyssnare

• Olika typer av lyssnare tar hand om olika typer av händelser

• Till varje lyssnare finns ett speciellt interface som beskriver vilka metoder som lyssnaren implementerar

• Lyssnarna och deras interface tillhör ett gemensamt package nämligen: java.awt.event

previous next 24


Inre klasser• I Java kan man deklarera inre klasser på i princip tre sätt

– Toppnivåklasspublic class A {

//...

private B test = new B();//...

}class B {

//..

}– Nästlad medlemsklass

public class A {//...

class B {//..

}private B test = new B();//...

}

previous next 25


... Inre klasser– Anonym klass

public class A {//...

Adapter myAdapter = new Adapter()//Här skapas en anonym subklass till Adapter{

public void adapt(Event e) {// metoden skriver över superklassen

Adapter:s // version av adapt(Event e)}

};//...this.addAdapter(myAdapter);

}

previous next 26


Lyssna efter stängningshändelse (med inre klass)import java.awt.*;import java.awt.event.*;

public class FrameHelloSecond extends Frame {public static void main(String [] args) {

FrameHelloSecond frame = new FrameHelloSecond();frame.setSize(200, 300);frame.setLocation(new Point(100, 150));frame.setTitle("The second one");frame.setVisible(true);

/* Vi är trötta på att stänga med CTRL-C så vi skriver följande */

frame.addWindowListener(new MyWindowListener());}

}

previous next 27


... och den inre klassen

class MyWindowListener implements WindowListener {public void windowOpened(WindowEvent e) {}

public void windowClosing(WindowEvent e) {System.exit(0);

}

public void windowClosed(WindowEvent e) {}public void windowIconified(WindowEvent e) {}public void windowDeiconified(WindowEvent e) {}public void windowActivated(WindowEvent e) {}public void windowDeactivated(WindowEvent e) {}

}

previous next 28


"Ritprogram" i Java 1.1import java.awt.*;import java.awt.event.*;

public class Scribble2 extends Frame implements MouseListener, MouseMotionListener {

private int last_x = 0, last_y = 0; // koordinater

public Scribble2(String s) {super(s);this.addMouseListener(this);

this.addMouseMotionListener(this);}

Vi deklareraratt vi imple-menterar rättgränssnitt

Vi lyssnar påbåde musknapparoch musrörelser

previous next 29


... // En metod beskriven i MouseListener. // Anropas vid tryck på musknapp. public void mousePressed(MouseEvent e) { last_x = e.getX(); last_y = e.getY(); }

// En metod beskriven i MouseMotionListener. // Anropas då musen dras runt med knapp nertryckt. public void mouseDragged(MouseEvent e) { Graphics g = this.getGraphics(); int x = e.getX(), y = e.getY(); g.drawLine(last_x, last_y, x, y); last_x = x; last_y = y; }

Vi tar hand ommustryck

Vi tar hand ommusrörelser

previous next 30


... // Metoder deklarerade i MouseListener måste implementeras // även om vi inte gör något i dem public void mouseReleased(MouseEvent e) {;} public void mouseClicked(MouseEvent e) {;} public void mouseEntered(MouseEvent e) {;} public void mouseExited(MouseEvent e) {;}

// och samma sak för metoder från MouseMotionListener. public void mouseMoved(MouseEvent e) {;}

public static void main(String args []) {Scribble2 frame = new Scribble2("Scribble- Java 1.1

med lyssnare");frame.setSize(200, 200);frame.setVisible(true);

}}

Vi måsteimplementerahela “lyssnaren”

previous next 31


Frame (och Applet) hur var det nu…

• Ofta är det tillräckligt att (Java 1.1)

– subklassa Frame och implementera tex WindowListener, MouseListener och MouseMotionListener

• senare skall vi titta på hur vi istället kan använda adaptorer

– skriva public static void main(String args[])• instansiera den egna klassen, ange fönsterstorlek och ange att fönster och mushändelser

skall tas emot (addWindowListener(this) osv), öppna det hela

– skriva public void paint(Graphics g)• rita på skärmen

– konstruera metoder för gränssnitt till "lyssnare" som vi angett att vi skall implementera

java.lang java.awt java.applet

ObjectObject ComponentComponent ContainerContainer PanelPanel AppletApplet

WindowWindow FrameFrame

previous next 32


Mer om händelselyssnare• Händelser till ett fönster eller komponent tas omhand av händelselyssnare

• Olika typer av lyssnare tar hand om olika typer av händelser, MouseListener, WindowListener, FocusListener, ActionListener, osv– Namnet är uppbyggt på följande sätt: HändelsetypListener

• Till varje lyssnare finns ett speciellt interface som beskriver vilka metoder som lyssnaren implementerar

• Lyssnarna och deras interface tillhör ett gemensamt package nämligen: java.awt.event

previous next 33


Händelselyssnare, några typiska

EventListenerEventListener

ActionListenerActionListener

ComponentListenerComponentListener

FocusListenerFocusListener

KeyListenerKeyListener

MouseMotionListenerMouseMotionListener

MouseListenerMouseListener

TextListenerTextListener

WindowListenerWindowListener

ItemListenerItemListener

ContainerListenerContainerListener

AdjustmentListenerAdjustmentListener

previous next 34


Adaptorer och händelselyssnare• För att förenkla användningen av händelselyssnare finns ett antal

fördefinierade adaptorer– Dessa adaptorer implementerar alla metoder deklarerade i den aktuella

lyssnarens gränssnitt

– En adaptor implementerar endast tomma metoder

– Genom att subklassa en adaptor och använda den som lyssnare så räcker det att endast skriva om dom metoder som verkligen gör något, så slipper man som i föregående exempel implementera massa metoder utan metodkropp

– Dessa adaptorer är speciellt enkla att använda tillsammans med anonyma inre klasser

previous next 35


Adaptorer

ObjectObject

ContainerAdapterContainerAdapter

FocusAdapterFocusAdapter

ComponentAdapterComponentAdapter

MouseMotionAdapterMouseMotionAdapter

MouseAdapterMouseAdapter

WindowAdapterWindowAdapter

ActionListenerActionListener

ComponentListenerComponentListener

FocusListenerFocusListener

KeyListenerKeyListener

MouseMotionListenerMouseMotionListener

MouseListenerMouseListener

TextListenerTextListenerWindowListenerWindowListener

ItemListenerItemListener

ContainerListenerContainerListener

AdjustmentListenerAdjustmentListener

KeyAdapterKeyAdapterKlasserKlasser GränssnittGränssnittGränssnitt

previous next 36


Scribble med inre klasser och adaptorerimport java.awt.*;import java.awt.event.*;

/** Frame med anonyma inre klasser **/public class Scribble4 extends Frame { int last_x, last_y;

...

public void init() { // Definiera, instansiera och registrera en MouseListener this.addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { last_x = e.getX(); last_y = e.getY();} });

previous next 37


...

// Definiera, instansiera och registrera en MouseMotionListener

this.addMouseMotionListener(new MouseMotionAdapter() { public void mouseDragged(MouseEvent e) { Graphics g = getGraphics(); int x = e.getX(), y = e.getY(); g.setColor(Color.blue); g.drawLine(last_x, last_y, x, y); last_x = x; last_y = y;

} });

previous next 38


...// Konstruera en knappButton b = new Button("Clear");

// Definiera en lyssnare som tar hand om tryck på knappenb.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent e) { /* Rensa hela fönstret genom att rita en fylld rektangel i

fönstrets storlek */

Graphics g = getGraphics();g.setColor(getBackground()); //Rita med bakgrundens

färg

g.fillRect(0, 0, getSize().width, getSize().height);

}});

// Lägg knappen i fönstretthis.add(b);

}}

previous next 39


Klasshierarki AWT

Object

Component

Container List

Panel

Applet

Label

Window

Dialog Frame

Button Checkbox TextComponent

TextField TextArea

previous next 40


Grafiska komponenter• Det finns flera olika typer av komponenter i Java

ButtonCheckboxListChoiceLabelTextFieldTextAreaScrollbar

• För illustration och exempel se exempel: komponenter nedan sidan 35

previous next 41


Containers• En container är en komponent som kan innehålla andra

komponenter• Ett objekt läggs in i containern med meddelandet

add(component)

• Instanser av Panel brukar användas för att organisera komponenter på olika sätt inom appleten

panel1panel1 panel2panel2

previous next 42


Exempel: komponenter• Ett test av att skapa olika typer av komponenter och låta

det hela placeras automatiskt

previous next 43


... den här gången varierar vi oss och gör det som en applet, fast koden blir ungefär densamma som för en Frame.

import java.awt.*;import java.applet.*;

public class DemoComponents extends Applet {private Button button;private Checkbox checkbox;private Label label;private List list;private Choice choice;private Scrollbar scrollbar;private TextField textField;private TextArea textArea;

previous next 44


...

public void init() {super.init();resize(300, 200);

button = new Button("En knapp");add(button);

checkbox = new Checkbox("En checkbox");add(checkbox);

label = new Label("En label");add(label);

previous next 45


...

list = new List();list.addItem("List 1");list.addItem("List 2");add(list);

choice = new Choice();choice.addItem("A");choice.addItem("B");add(choice);

scrollbar = new Scrollbar();add(scrollbar);

previous next 46


...

textField = new TextField("Textfält");add(textField);

textArea = new TextArea("Textruta", 4, 15);add(textArea);

}}

• Skapa en HTML-fil och kör med en appletviewer eller nätbläddrare

previous next 47


Layoutmanagers för att kontrollera placering av komponenter

LayoutManager

BorderLayout

GridLayout

GridBagLayout

CardLayout

FlowLayout

previous next 48


...• FlowLayout

– är default för Panelobjekt

– placerar komponenter från vänster till höger. Vid full rad så ny rad

• GridLayout– ser till att alla komponenter har samma storlek. Rutnät (rad, kolumn)

• BorderLayout– är default för Window-klasser (ex Frame och Dialog)

– Placerar komponenter i ”vädersträck”

• CardLayout– Placerar objekten i en ”kortlek” där endast ett kort i taget synlikt

• GridBagLayout– Mest generell (och komplex). Delar in ytan i flera celler.

– Använder restriktioner (eng. constraints) för att beskrivahur komponenter placeras samt deras utsträckning

previous next 49


Exempel: Flowlayoutimport java.awt.*;import java.applet.*;

public class DemoFlowlayout extends Applet {Button buttons[];public void init() {

super.init();setLayout(new FlowLayout());buttons = new Button[10];for (int i = 0; i < 10; i++) {

buttons[i] = new Button("Knapp " + i);add(buttons[i]);

}}

}

previous next 50


...• Layouten ”följer med” förändringar av fönsterstorlek

previous next 51


Exempel: Gridalyoutpublic class DemoGridlayout extends Applet {

Button buttons[];public void init() {

super.init();setLayout(new GridLayout(5, 2));buttons = new Button[10];for (int i = 0; i < 10; i++) {

buttons[i] = new Button("Knapp " + i);

add(buttons[i]);}

}}

previous next 52


Exempel: Borderlayoutpublic class DemoBorderlayout extends Applet {

public void init() {super.init();resize(300, 400);setLayout(new BorderLayout());add("North", new Button("Knapp " + "Norr"));add("South", new Button("Knapp " + "Söder"));add("East", new Button("Knapp " + "Öster"));add("West", new Button("Knapp " + "Väster"));add("Center", new Button("Knapp " +

"Centrum"));}

}

previous next 53


Metoder för att hantera komponenter• förutom layout kan komponenter också bla

– visas eller döljassetVisible(boolean)

– göras aktiva eller passivasetEnabled(boolean)

– omritas, ritas eller markeras som “korrupta”repaint(), paint(Graphics), invalidate()

– layout kan anges för containerbaserade komponenter också

– fönster kan visas, läggas i för- eller bakgrunden, titel kan anges, mmshow(), toFront(), toBack()

– cursor kan ändras

– storlek kanges (tänk på layout null)

– ...

previous next 54


Blandat exempelimport java.awt.*;import java.awt.event.*;

public class TestOfFrame extends Frame {public TestOfFrame(String s) {

super(s);}

protected void delay(int ms) {// Vi måste ta hand om exceptions, vilket görs med ett try-catch-par

try{Thread.currentThread().sleep(ms);

} catch(Exception e) {}}

previous next 55


...

protected void testLayoutes() { /* Lite urartat visar vi hur man kan fråga om komponenter. I det här fallet vet vi att det är en Container och "kastar" */ Container panel = (Container) this.getComponents()[0]; int delayTime = 3000;

delay(delayTime);

panel.setLayout(new GridLayout(5, 4, 10, 20)); this.setTitle("Gridlayout"); this.validate();

delay(delayTime);

panel.setLayout(new FlowLayout(FlowLayout.LEFT, 7, 7));

this.setTitle("Flowlayout"); this.validate();

Gridlayout

Flowlayout

previous next 56


...

Component[] panelComponents = panel.getComponents(); for (int i = 0; i < panelComponents.length; i++) {

Component component = panelComponents[i];component.setBounds((i % 5) * 40, i * 25, 50, 20);

}

delay(delayTime);

panel.setLayout(null); this.setTitle("null layout"); this.validate(); }

Ingen layout

previous next 57


...

public static void main(String args []){TestOfFrame frame = new TestOfFrame("Test of frame layout"); Panel panel; frame.addWindowListener(new WindowAdapter(){ public void windowClosing(WindowEvent e) {

System.exit(0);}

}); frame.setSize(200, 300); frame.show();

// Vi skapar en panel

panel = new Panel();frame.add(panel);

previous next 58


... //Vi skapar några knappar

for (int i = 0; i < 10; i++) {Button button = new Button("Button-" +

new Integer(i).toString());

panel.add(button);

// Alla knappar får bli "stängknappar"button.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e){

System.exit(0); }});

/* För att ett nytt objekt skall visas på skärmen måste vi göravalidate på framen (repaint eller invalidate hjälper inte! Bug??)

*/ frame.validate();/* Vi skulle ju kunna göra validate efter slingan och

visa alla nya knappar på en gång förstås! */

}

previous next 59


...

//Vi skapar några fält for (int i = 0; i < 10; i++) {

TextField field = new TextField("Field-" +new

Integer(i).toString()); panel.add(field);

} // Den här gången gör vi "det" efter slingan frame.validate();

// Nu testar vi att ändra layouten frame.testLayoutes(); }}

previous next 60


Hur gör man i Swing då?• Ja i princip

– Använd paketet javax.swing.*– Komponentklasserna börjar på J

JButton, JFrame, JLabel, JComponent, osv

• Lägg till komponent– AWT: frame. add(button);– Swing: frame.getContentPane().add(button);

• Några Swingreferenser– User Interfaces that Swing: A Quick Start Guide

http://java.sun.com/docs/books/tutorial/uiswing/mini/index.html

– Creating a GUI with JFC/Swing http://java.sun.com/docs/books/tutorial/uiswing/index.html

• Hinner vi så kodar vi några exempel

frameworks. konstruktion av fönster, gränssnitt och användning av grafik i java

Documents