Grafiska program i Java 8-1 AWT och Swing? 8-2 Programmeringsgränssnittet för grafik i Java : Java Graphics API innehåller en mängd klasser för att utveckla grafiska program. De viktigaste typerna av klasser är: Komponenter för användargränssnitt- beskriver fönster, knappar, textfält etc (kap. 9) Layouthantering - organiserar och placerar ut gränssnittskomponenter på lämpligt sätt i ett fönster Händelsehantering - fångar och hanterar händelser, t.ex. musklick eller tangentnedtryckningar, som användaren initierar Grafik ritverktyg med hjälpmedel för färger och typsnitt, etc, Innehåll: Java Graphics API AWT och Swing Frame-fönster Layouthanterare FlowLayout, GridLayout, BorderLayout Paneler Grafik Klasserna Graphics, Color och Font Metoder för ritning Händelsehantering Händelseklasser, lyssnare och lyssnarmetoder Java Graphics API erbjuder två besläktade gränssnitt för att utveckla grafiska användargränssnitt. Bägge verktygen är plattformsoberoende och applikationerna antar den exekverande plattformens look and feel AWT (Abstract Windowing Toolkit, java.awt) Många gränssnittsklasser i AWT använder en motsvarande s.k. peer-klass för att ritas ut på en viss plattform. Denna bygger på s.k. native kod. Utseendet blir härigenom delvis beroende av plattformen. Swing (java.swing) Ett nyare paket (fr. o. m JDK 1.2 ). Rekommenderas av de som utvecklar Java. Bygger på och använder även klasser i AWT. Har utökad funktionalitet med fler och mer avancerade komponenter. Utnyttjar plattformens kapacitet bättre. Använder s.k. lättviktskomponenter (utan peer-klasser) skrivna helt i Java och får därför ett mer homogent utseende på olika plattformar än AWT. Swing - ingår i JFC (Java Foundation Classes) AWT Button Swing JButton Swing-komponenter har i allmänhet ett J i början på namnet Man bör undvika att blanda AWT och Swing-komponenter
8-3 8-4 Java Graphics API Klassen JFrame Java Graphics API är ett utmärkt exempel på användning av klasser, arv och gränssnitt. Det består av två paket som innehåller bl.a följande klasser: java.awt: Component - superklass till alla klasser för användargränssnitt. Definierar många och viktiga egenskaper för alla komponenter. Container - grupperar gränssnittskomponenter. Frame, Applet och Panel är exempel på containrar som innehåller AWT-komponenter LayoutManager är ett gränssnitt i Java som används av en container för att positionera och placera komponenter på önskad plats i en container AWTEvent med sina subklasser - representerar händelser som komponenterna skapar Font, FontMetrics och Color är hjälpklasser för att ange färg och typsnitt på grafiska komponenter Graphics - används för att rita text, linjer och figurer javax.swing: JComponent - superklass till alla lättvikts-swingkomponenter, som t.ex. JButton JTextField m.m. JFrame och JApplet - fönster där swingkomponenter placeras Gränssnittskomponenter kan inte visas direkt på skärmen utan måste placeras på en skärmyta som ingår i något fönster. Skärmytan är en s.k. container (t.ex en Frame eller en Applet). Klassen Frame beskriver ett fristående fönster som används i applikationer med AWT-komponenter Klassen JFrame är grunden för att skapa en grafisk applikation med Swing-komponenter. Ett JFramefönster består av en titelrad och en content pane där komponenter placeras. JFrame Titelrad Content pane AWTEvent Font LayoutManager 1 Classes in the java.awt package Heavyweight Komponent FontMetrics Object Color Panel Applet JApplet Graphics Component * Container Window Frame Dialog JFrame JDialog En Applet är en skärmyta som ingår som en del i webbläsarens fönster. Applets kommer att presenteras närmare senare. När en Swingbaserad Java applet ska skapas ärver man klassen JApplet. JComponent Swing Components in the javax.swing package Lightweight
Swing-komponenter i ett JFrame-fönster 8-5 AWT-komponenter i ett Frame-fönster 8-6 Skapa ett JFrame-fönster, bygg upp gränssnittet genom att välja en LayoutManager, samt skapa och lägga till Swing-komponenter i fönstrets ContentPane Swing använder paketen javax.swing och java.awt class DemoInmatning extends JFrame DemoInmatning() Container con=getcontentpane(); con.setlayout(new FlowLayout()); JLabel l=new JLabel("Namn:"); con.add(l); JTextField tf=new JTextField(12); con.add(tf); JButton knapp=new JButton("Skapa"); con.add(knapp); public static void main(string[]args) DemoInmatning frame = new DemoInmatning(); frame.settitle("demo Inmatning"); frame.setsize(300, 75); frame.setvisible(true); Skapa ett Frame-fönster, bygg upp gränssnittet genom genom att välja en LayoutManager, samt skapa och lägga till AWT-komponenter i fönstret AWT använder paketet java.awt class DemoInmatning extends Frame DemoInmatning() setlayout(new FlowLayout()); Label l=new Label("Namn:"); add(l); TextField tf=new TextField(12); add(tf); Button knapp=new Button("Skapa"); add(knapp); public static void main(string[]args) DemoInmatning frame = new DemoInmatning(); frame.settitle("demo Inmatning"); frame.setsize(300, 75); frame.setvisible(true);
Layouthanterare 8-7 Exempel med FlowLayout 8-8 En layouthanterare (eng. Layout Manager) är ett objekt i AWT som styr utplaceringen av komponenter för att anpassa ett gränssnitt efter skillnader i olika plattformar. Varje container har en layouthanterare. Så här definieras en layouthanterare av typen FlowLayout för en container: con.setlayout(new FlowLayout()); Några vanliga typer av layouthanterare är: FlowLayout Ordnar komponenter radvis från vänster till höger, tills att raden har fyllts, på liknande sätt som texten i en boksida,. Komponenternas ursprungliga storlek behålls vid utplaceringen. GridLayout Fönstret delas upp i ett rutnät med rader och kolumner. Komponenterna ordnas radvis från vänster till höger. Alla komponenter får samma storlek. 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. GridBagLayout Liknar GridLayout men delar in fönstret ett rutnät med rutor av olika storlek. En komponent kan uppta flera celler. 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) class FlowLayoutDemo extends JFrame FlowLayoutDemo() Container con=getcontentpane(); con.setlayout(new FlowLayout()); con.setbackground(color.white); con.add(new JButton("Knapp 1")); con.add(new JButton("Knapp 2")); con.add(new JLabel("Label 3")); con.add(new JTextField("Text 4")); public static void main(string[]args) FlowLayoutDemo frame = new FlowLayoutDemo(); frame.settitle("flowlayout Demo"); frame.setsize(200, 100); frame.setvisible(true); Komponentplaceringen ändras automatiskt om fönstrets storlek ändras.
FlowLayout 8-9 Exempel med GridLayout 8-10 Komponenterna ordnas radvis från vänster till höger. När en rad fyllts påbörjas nästa rad. Konstruktorer: new FlowLayout(a) a anger justering på raden och kan vara FlowLayout.LEFT, FlowLayout.CENTER eller FlowLayout.RIGHT new FlowLayout(a, dx, dy) dx och dy anger avståndet i pixlar mellan komponenterna new FlowLayout() Komponenterna centreras på raden med default avstånd mellan komponenterna FlowLayout är default LayoutManager för klasserna JApplet och JPanel. class GridLayoutDemo extends JFrame GridLayoutDemo() Container con=getcontentpane(); con.setlayout(new GridLayout(2,3)); con.add(new JButton("Knapp 1")); con.add(new JButton("Knapp 2")); con.add(new JTextField("Text 4")); con.add(new JLabel("Label 3")); con.add(new JButton("Knapp 5")); public static void main(string[]args) GridLayoutDemo frame = new GridLayoutDemo(); frame.settitle("gridlayout Demo"); frame.setsize(300,100); frame.setvisible(true);
GridLayout 8-11 Exempel med BorderLayout 8-12 Fönstret delas in i ett rutnät med rader och kolumner. Alla celler rymmer en komponent och får samma storlek. Komponenterna placeras radvis i rutnätet från vänster till höger med början i första raden Konstruktorer: new GridLayout(r,k) Placerar komponenterna i r rader och k kolumner. Värdet 0 innebär godtyckligt antal rader respektive kolumner new GridLayout(r, k, dx, dy) dx och dy anger avstånd mellan komponenterna Antalet kolumner i rutnätet justeras om antalet komponenter som placeras inte stämmer med angivna konstruktorvärden class BorderLayoutDemo extends JFrame BorderLayoutDemo() Container con=getcontentpane(); con.setlayout(new BorderLayout()); con.add(new JLabel("EAST"), BorderLayout.EAST); con.add(new JButton("SOUTH"), BorderLayout.SOUTH); con.add(new JTextField("WEST"), BorderLayout.WEST); con.add(new JButton("NORTH"), BorderLayout.NORTH); con.add(new JButton("CENTER"), BorderLayout.CENTER); public static void main(string[]args) BorderLayoutDemo frame = new BorderLayoutDemo(); frame.settitle("borderlayout Demo"); frame.setsize(300,200); frame.setvisible(true);
BorderLayout 8-13 Gruppera komponenter med paneler 8-14 Delar upp fönstret i fem områden. Fyra områden längs fönstrets kanter (North, South, East eller West) och ett område i fönstrets centrum (Center). Områdenas storlek anpassas efter komponenterna. Vissa områden i fönstret kan vara tomma. Konstruktorer: new BorderLayout() new BorderLayout(dx, dy) dx och dy anger avstånd mellan komponenterna Metoder: add(c, plats ) Placerar ut komponenten c. plats kan vara BorderLayout NORTH, SOUTH, EAST, WEST eller CENTER Klassen Panel är en generell containerklass. Paneler fungerar som mindre containrar och används ofta för att gruppera gränssnittskomponenter. Paneler placeras oftast inuti en annan container, t.ex ett Frame-fönster eller en applet, men kan även placeras inne i en annan panel. En Frame-fönster indelas ofta i flera paneler, där varje panel har en egen layouthanterare. Frame Panel med Panel med BorderLayout är default LayoutManager för klassen Window med sina subklasser (JFrame och JDialog). Panel med Gränssnittskomponenter Gränssnittskomponenter Panel med Gränssnittskomponenter Gränssnittskomponenter
Exempel med paneler 8-15 Ritytor Graphics Context 8-16 public class PanelerDemo extends JFrame PanelerDemo() Container con=getcontentpane(); con.setlayout(new BorderLayout()); JPanel p1=new JPanel(); p1.setlayout(new FlowLayout()); p1.add(new JButton("Lägg Till")); p1.add(new JTextField(10)); p1.add(new JButton("Avsluta")); con.add(p1, BorderLayout.NORTH); JTextArea ta=new JTextArea(); con.add(ta, BorderLayout.CENTER); public static void main(string[]args) PanelerDemo frame = new PanelerDemo(); frame.settitle("paneler Demo"); frame.setsize(300,200); frame.setvisible(true); Det går inte att rita direkt på en komponent. All ritning kräver en grafisk omgivning, ett s.k. graphics context. Javasystemet skapar automatiskt ett graphics context med ett objekt av klassen Graphics. All ritning sker genom anrop till metoder i Graphics-objektet Klassen Graphics innehåller metoder för att bl.a : skriva text, samt rita linjer och figurer drawstring, drawline, drawrect, drawoval,... formatera text och ange färg setfont, setcolor,... (visa bilder drawimage) Klassen JPanel kan även användas för att rita grafik (inklusive text) Man skapar en ny klass som ärver JPanel och överskuggar metoden paintcomponent och Ex. för att skriva text i grafisk mod: class MinPanel extends JPanel public void paintcomponent(graphics g) //super-klassens paintcomponent //SKA först anropas super.paintcomponent(g); g.drawstring( Hej Världen!, 50, 50); Vid anropet av paintcomponent överförs ett objekt av klassen Graphics, ett graphics context. Med ett anrop till metoder i Graphics-objektet ritar vi i panelen.
Koordinatsystem för grafik 8-17 Klassen Color 8-18 Positionerna i en rityta representeras med ett koordinatsystem där varje punkt representerar en bildpunkt (pixel). Koordinatsystemet har origo i övre vänstra hörnet, med ökande X-koordinater åt höger och med ökande Y-koordinater nedåt. Varje rityta har en bredd (width) och en höjd (heigth). Det som ritas utanför ritytan kan inte ses på skärmen. <0,0> X Klassen Color används för att ange färg på grafiska komponenter. Ett färgobjekt skapas med: Color c = new Color(r, g, b); Färgen defineras med tre rgb-värden (0..255) som anger färgstyrkan för de grundfärgerna röd, grön och blå. (255, 0, 0) ger röd (0, 0, 0) ger svart (255, 255,255) ger vit Ett ljusblått färgobjekt: <55,30> Color lightblue = new Color(175,175,255); Y <width-1, height-1> I klassen Color finns även 13 fördefinierade färgobjekt med de vanligaste färgerna Color.black, Color.red,... Ritytan
Ange färger 8-19 Klassen Font 8-20 Metoderna setforeground och setbackground i klassen Component anger förgrunds- och bakgrundsfärg på grafiska komponenter. Metoderna har ett objekt av klassen Color som argument. Exempel för att ange bakgrundsfärgen för en panel: Color lightblue = new Color(175,175,255); JPanel p1 = new JPanel(); p1.setbackground(lightblue); Alt. med standardfärg: JPanel p1 = new JPanel(); p1.setbackground(color.white); Klassen Graphics har metoden setcolor för att bestämma färg på geometriska figurer En objekt av klassen Font bestämmer textens typsnitt, stil och storlek. Font f = new Font(typsnitt, stil, storlek); Typsnitt: SansSerif, Serif, Monospaced, Dialog, eller DialogInput Helvetica, TimesRoman, Courier OBS! Det finns olika typsnitt på olika datorsystem Stil: Font.PLAIN, Font.BOLD, Font.ITALIC Storlek: Anges i antal punkter, t ex 12 Fonten sätts med metoden setfont som är definierad i klasserna Component och Graphics. Ex: public void paint(graphics g) Font myfont = new Font("Times", Font.BOLD, 16); g.setfont(myfont); g.drawstring("welcome to Java", 20, 40); //ange en ny font g.setfont(new Font("Courier", Font.BOLD+Font.ITALIC, 12)); g.drawstring("welcome to Java", 20, 70); Det finns också en FontMetrics-klass som kan användas för att ta reda på längden på en textsträng med en viss font
Några exempel på fonter 8-21 Några metoder för ritning 8-22 public class DemoFonter extends JFrame public DemoFonter() getcontentpane().add(new RitPanel()); public static void main(string[]args) DemoFonter frame = new DemoFonter(); frame.settitle("paneler Demo"); frame.setsize(200,150); frame.setvisible(true); Klassen Graphics har bl.a följande ritmetoder för geometriska figurer och text : drawline(x1, y1, x2, y2) Ritar en linje från punkten (x1, y1) till (x2,y2) drawrect(x, y, b, h) Ritar en ofylld rektangel med övre vänster hörn i (x,y), bredd b och höjd h. Kan även ritas i 3D drawoval(x,y, b, h) Ritar en ofylld ellips som är inskriven i en rektangel med övre vänster hörn i (x,y), bredd b och höjd h class RitPanel extends JPanel public void paintcomponent(graphics g) super.paintcomponent(g); g.setfont(new Font("SansSerif", Font.PLAIN, 15)); g.drawstring("hej Världen!", 20, 20); g.setfont(new Font ("Serif", Font.BOLD, 15)); g.drawstring("hej Världen!", 20, 40); g.setfont(new Font("Monospaced", Font.PLAIN, 15)); g.drawstring("hej Världen!", 20, 60); g.setfont(new Font("Dialog", Font.ITALIC, 15)); g.drawstring("hej Världen!", 20, 80); g.setfont(new Font("DialogInput", Font.PLAIN + Font.ITALIC, 15)); g.drawstring("hej Världen!", 20, 100); drawpolygon(xp, yp, n) Ritar en ofylld månghörning. xp och yp är fält med punkternas x- resp. y-koordinater. n är antalet punkter: xp[] = x1, x2, x3; (alt. drawpolygon(p), p är ett Polygon-objekt) drawstring(txt, x, y) Ritar textsträngen txt med början i punkten (x,y). y- koordinaten anger textens baslinje De flesta figurer även kan ritas ifyllda (ex: fillrect). Övriga ritmetoder: drawarc, drawpolyline
Ett grafikexempel 8-23 8-24 Program- eller händelsestyrd exekvering public class DemoGrafik extends JFrame public DemoGrafik() getcontentpane().add(new RitPanel()); public static void main(string[]args) DemoGrafik frame = new DemoGrafik(); frame.settitle( Grafik Demo"); frame.setsize(400,300); frame.setvisible(true); class RitPanel extends JPanel public void paintcomponent(graphics g) super.paintcomponent(g); g.drawrect(25, 25, 100, 50); g.setcolor(color.red); g.filloval(150, 100, 50, 50); g.fillrect(50, 150, 50, 75); g.drawline(370, 20, 32, 250); g.setcolor(color.yellow); int[] xarr = 350, 350, 150, 225, 125; int[] yarr = 100, 170, 250, 100, 50; g.fillpolygon(xarr, yarr, 5); Programstyrd exekvering I ett ett textbaserat användargränssnitt avgör programmet när det är dags för ineller utmatnig av data. Exekveringen är programstyrd. Händelsestyrd (eng. event-driven) exekvering I ett program med grafiska användargränssnitt styrs programmets exekvering av olika händelser som inträffar. Händelsen initieras av någon aktivitet från användaren, t.ex. ett musklick eller musrörelse eller tangentnedtryckning. Programmet reagerar när händelserna inträffar. Händelsestyrd programmering För att utveckla ett händelsestyrt program som hanterar de händelser som inträffar måste man oftast använda funktioner i något grafiskt användarbibliotek I Java finns dessa som funktioner som klasser i paketet java.awt.event
Javas modell för händelsehantering 8-25 Ex: Hantering av en ActionEvent-händelse 8-26 Javas modell för händelsehantering bygger på delegering. Ett källobjekt genererar en händelse och en lyssnare utses som fångar upp och hanterar händelsen. Så här hanteras en händelse i Java: Användar -aktivitet 1. Initiera en händelse 2. Skapa en händelse Källobjekt Händelseobjekt Registrera lyssnarobjekt 3. Meddela lyssnare Lyssnarobjekt Händelsehanterare 1. En yttre aktivitet (t.ex knappklickning), från en användare på ett källobjekt initierar en händelse. Det objekt som ska hantera händelsen registreras som ett lyssnarobjekt 2. Källobjektet skapar ett händelseobjekt som representerar händelsen. 3. Källobjektet meddelar lyssnaren att händelsen inträffat genom att anropa en händelsehanterare i lyssnarobjektet Händelseobjektet skickas med som parameter vid anropet till hanteraren En knappklickning leder till att ett ActionEvent-objekt skapas. Klassen ActionEventDemo är en lyssnare som hanterar händelsen genom att implementera metoden actionperformed i lyssnargränssnittet ActionListener import java.awt.event.*; public class ActionEventDemo extends JFrame implements ActionListener private Button bt = new Button("OK"); private JTextField tf = new JTextField(14); public ActionEventDemo() getcontentpane().setlayout(new FlowLayout()); getcontentpane().add(bt); getcontentpane().add(tf); bt.addactionlistener(this); public static void main(string[] argument) ActionEventDemo f = new ActionEventDemo(); f.settitle("actionevent Demo"); f.setsize(250, 75); f.setvisible(true); Händelsehanterare (Lyssnarmetod) public void actionperformed(actionevent event) tf.settext("ok-knappen har klickats"); Händelseobjekt
Lyssnare som en inre klass 8-27 Fånga och hantera händelser 8-28 Lyssnaren kan även definieras som en egen klass. Eftersom den inte används av andra klasser defineras den enklast som en inre klass import java.awt.event.*; public class ActionEventDemo extends JFrame private Button bt = new Button("OK"); private JTextField tf = new JTextField(14); public ActionEventDemo() getcontentpane().setlayout(new FlowLayout()); getcontentpane().add(bt); getcontentpane().add(tf); bt.addactionlistener(new Lyssnare()); private class Lyssnare implements ActionListener // Inre klass public void actionperformed(actionevent event) tf.settext(" OK-knappen har klickats "); public static void main(string[] argument) ActionEventDemo f = new ActionEventDemo(); f.settitle("actionevent Demo"); f.setsize(250, 75); f.setvisible(true); För att hantera en händelse definierar man en lyssnare och: (1) registrerar lyssnarobjektet som ska lyssna på källobjektets händelser (2) implementerar de speciella lyssnarmetoder i ett lyssnargränssnitt som motsvarar den aktuella händelsen När en händelse inträffar anropas automatiskt motsvarande lyssnarmetod i lyssnaren. Händelseobjektet skickas med som parameter till lyssnarmetoden (1) bt.addactionlistener(this); Lyssnarobjekt (2) public void actionperformed(actionevent event) tf.settext("ok"); Lyssnarmetod Händelseklass
Ex: Användaraktiviteter, källobjekt och händelseklasser 8-29 Händelseklasser 8-30 Exempel några användaraktiviteter på källobjekt och motsvarande händelseklasser: En händelse representeras med ett objekt av någon av följande klasser i paketet java.awt.event: Användaraktivitet Källobjekt Händelseklass Klickat på en knapp JButton ActionEvent Trycka på retur i ett JTextField ActionEvent textfält Bytt textinnehåll JTextComponent TextEvent Dubbelklickat på ett JList ActionEvent listobjekt Markererat eller JList ItemEvent avmarkerat element med enkelklick Markererat eller JComboBox ItemEvent avmarkerat element EventObject AWTEvent ListSelectionEvent ActionEvent AdjustmentEvent ComponentEvent ItemEvent TextEvent ContainerEvent FocusEvent InputEvent PaintEvent WindowEvent MouseEvent KeyEvent Händelseobjektet innehåller uppgift om bl.a: source: Den komponent på vilken händelsen inträffade x, y koord.: Muspekarens läge när en mouse movement händelse inträffat clickcount: Antalet musklick vid en MouseEvent key: Den tangent som tryckts ned eller släppts upp.
Gemensam lyssnare för flera händelser 8-31 Händelseklasser, lyssnargränssnitt och lyssnarmetoder 8-32 Om flera källobjekt genererar händelser som ska hanteras av samma lyssnare måste denna först identifiera källobjektet. Antag att vi kan klicka på två knappar med namnen btok och btavbryt. Lyssnaren registreras med: btok.addactionlistener(this); btavbryt.addactionlistener(this); Metoden getsource() i ActionEvent returnerar källobjektet som ska identifieras: public void actionperformed(actionevent event) if (event.getsource() == btok) tf.settext("ok-knappen har klickats"); else if (event.getsource() == btavbryt) tf.settext( Avbryt-knappen har klickats"); Händelseklass Lyssnargränssnitt Lyssnarmetod (hanterare) ActionEvent ActionListener actionperformed ItemEvent ItemListener itemstatechanged WindowEvent WindowListener windowclosing windowopened windowiconified windowdeiconified windowclosed windowactivated windowdeactivated ContainerEvent ContainerListener componentadded componentremoved ComponentEvent ComponentListener componentmoved componenthidden componentresized componentshown FocusEvent FocusListener focusgained focuslost TextEvent TextListener textvaluechanged KeyEvent KeyListener keypressed keyreleased keytyped MouseEvent MouseListener mousepressed mousereleased mouseentered mouseexited mouseclicked MouseMotionListener mousedragged mousemoved AdjustmentEvent AdjustmentListener adjustmentvaluechanged
Namnkonventioner för händelser och lyssnare 8-33 Det finns normalt ett lyssnargränssnitt för varje händelseklass. Namnet på händelseklassen motsvaras av namnet på lyssnargränssnittet och namnet på metoden för att registrera en lyssnare till en komponent Ex: ok.addactionlistener(new Lyssnare()); class Lyssnare implements ActionListener public void actionperformed(actionevent event) result.settext( OK ); Händelseklass: ActionEvent Registrera lyssnare: addactionlistener Lyssnargränssnitt: ActionListener Allmänt: Lyssnare registreras med addxlistener för XEvent Lyssnargränssnittet heter XListener för XEvent