Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7 Grafikk Fra AWT til Swingside 2.

Presentasjon om: "Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7 Grafikk Fra AWT til Swingside 2."— Utskrift av presentasjonen:

1 Fag LO189D - Objektorientert programmering Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7 Grafikk Fra AWT til Swingside 2 Forskjellige ”Look and Feel”side 3-5 Vi trenger fremdeles AWTside 6 Sentrale klasser i grafikk-programmeringside 7 Å gjøre klassen JFrame brukbarside 8 Koordinatsystemetside 9 Viktige metoder og klasserside 10-11 Å tegne figurerside 12 Metoden paintComponent( ) og klassen Graphicsside 8 Tekst og skrifttyper, klassen Fontside 14 XOR modusside 15 Å bruke ferdige bilderside 16-18 Appletsside 19-23 Et større eksempel, søylediagram i aksekorsside 24-30

2 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 2 Fra AWT til Swing Graphical User Interface = GUI Biblioteker med ferdige GUI-komponenter som vinduer, trykknapper, listebokser, etc. –Abstract Window Toolkit (AWT) - kom med Java 1.0 delegerer generering og oppførsel til de GUI-komponentene som hører til den aktuelle plattformen (”peers”) AWT ble et minste felles multiplum mellom de ulike plattformene ulike feil på ulike plattformer - ”write once, debug everywhere” –Netscape (1996) laget Internet Foundation Classes krevde at plattformen måtte kunne lage et vindu, og at det var mulig å tegne i vinduet de ulike GUI-komponentene ble tegnet i vinduet –Netscape samarbeidet med Sun om videreutvikling. Resultat: Swing. Del av Java Foundation Classes (JFC). Brukeren kan bestemme ”Look and Feel” Kjør SwingSet-demoen som ligger på jdk1.2\demo\jfc\SwingSet! –Vedlegg: Oversikt over Swing-komponentene http://java.sun.com/products/jfc/tsc/getting_started/comp_gal/comp_gal.html

3 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 3 Java Look and Feel

4 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 4 Motif Look and Feel

5 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 5 Windows Look and Feel

6 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 6 Vi trenger fremdeles AWT Alle Swing-komponenter arver fra klassene Component og Container som ligger i pakken java.awt Bruker AWT til tegning av enkle figurer (denne leksjonen) I AWT finner vi klasser for –farger –skrifttyper –å hente ut opplysninger om brukerens skjerm –å vise fram bilder

7 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 7 Sentrale klasser i grafikk-programmering java.lang.Object java.awt.Component java.awt.Container java.awt.Window java.awt.Frame Object: Superklassen til alle andre klasser Component: Superklassen til alle GUI- komponenter. Klassen er abstrakt. Container: En komponent som kan inneholde andre komponenter. Klassen er abstrakt. Window: Et topp-nivå-vindu uten ramme og uten meny. Brukes sjelden. Frame: Topp-nivå applikasjonsvindu med tittel-linje og eventuelt meny. Delegerer til plattformavhengige metoder (”peer based”) JFrame: Samme, men for Swing- applikasjoner. Beholdere for GUI- komponenter. JComponent: Basisklassen for alle Swing- komponenter. JPanel: En frame deles inn i paneler. I denne leksjonen skal vi tegne og skrive i paneler. javax.swing. JComponent javax.swing. JPanel javax.swing.JFrame

8 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 8 Å gjøre klassen JFrame brukbar Standard størrelse er 0x0 (!) punkter. Må håndtere den hendelsen at brukeren lukker vinduet. Klassen CloseableFrame fra læreboka (obs! Swing-utgave hentes fra kursets hjemmeside) –Størrelse 300x200 punkter –Viser klassenavnet i tittelfeltet –Kan lukkes med klikk i øverste høyre hjørne import javax.swing.*; class EnkeltVindu extends CloseableFrame { } class TestEnkeltVindu { static public void main(String[] args) { EnkeltVindu etVindu = new EnkeltVindu(); etVindu.show(); } // main } // TestEnkeltVindu

9 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 9 Koordinatsystemet All tegning forholder seg til koordinatsystemet nedenfor. Koordinatene angir antall punkter (piksler). Klassen Toolkit gir oss informasjon om den skjermen vi bruker. import java.awt.*; class DataEgenSkjerm extends CloseableFrame { public DataEgenSkjerm() { Toolkit tk = Toolkit.getDefaultToolkit(); Dimension d = tk.getScreenSize(); int skjermHoyde = d.height; int skjermBredde = d.width; System.out.println("Min skjerm har " + skjermBredde + " * " + skjermHoyde + " punkter."); int antPrTomme = tk.getScreenResolution(); int antPrCm = (int)Math.round(antPrTomme / 2.51); System.out.println("Antall punkter pr cm: " + antPrCm); } // DataEgenSkjerm (testklasse som i forrige eksempel) /* Kjøring: Min skjerm har 1280 * 1024 punkter. Antall punkter pr cm: 38 */

10 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 10 Viktige metoder og klasser Arv fra klassen Frame –void setTitle(String tittel); –void setResizable(boolean resizable); –void setIconImage(Image ikon); Arv fra klassen Window –void toFront(); –void toBack(); –void show(); Arv fra klassen Component –boolean contains(Point p); –void setBackground(Color c); –void setForeground(Color c); –void setVisible(boolean b); –boolean isVisible(); –void setEnabled(boolean b); –boolean isEnabled(); Klassen Point –Point(int x, int y); –boolean equals(Object obj); –void move(int x, int y); –void translate(int x, int y); Klassen Color –Color(int r, int g, int b); –static final Color black, blue, cyan, drakGrey, gray, green, lightGray, magenta, orange, pink, red, white, yellow –Color brighter(); –Color darker();

11 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 11 Eksempel import java.awt.*; import javax.swing.*; class EnkeltVindu2 extends CloseableFrame { public EnkeltVindu2() { setTitle("Mitt første vindu"); Container innhold = getContentPane(); JPanel p = new JPanel(); innhold.add(p); p.setBackground(Color.red); } // EnkeltVindu2 class TestEnkeltVindu2 { static public void main(String[] args) { EnkeltVindu2 etVindu = new EnkeltVindu2(); etVindu.show(); etVindu.setBackground(Color.red); Point etPunkt = new Point(50,50); if (etVindu.contains(etPunkt)) System.out.println("Inneholder punktet"); else System.out.println("Inneholder ikke punktet"); } // main } // TestEnkeltVindu

12 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 12 Å tegne figurer import java.awt.*; import javax.swing.*; class EnkeltVindu3 extends CloseableFrame { public EnkeltVindu3(Color bakgrunnsfarge) { setTitle("Mitt første vindu"); Container innhold = getContentPane(); Tegning t = new Tegning(); t.setBackground(bakgrunnsfarge); Color forgrunn = bakgrunnsfarge.darker().darker(); t.setForeground(forgrunn); innhold.add(t); } // EnkeltVindu3 class Tegning extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); // Åpne figurer g.drawRect(20, 20, 40, 30); g.drawOval(20, 60, 40, 30); Polygon p1 = new Polygon(); (x,y) øvre venstre hjørne, deretter bredde, høyde p1.addPoint(80, 60); p1.addPoint(80, 90); p1.addPoint(120, 90); g.drawPolygon(p1); // Fylte figurer g.fillRect(150, 20, 40, 30); g.fillOval(150, 60, 40, 30); Polygon p2 = new Polygon(); p2.addPoint(210, 60); p2.addPoint(210, 90); p2.addPoint(250, 90); g.fillPolygon(p2); } // paintComponent } // Tegning

13 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 13 Metoden paintComponent( ) og klassen Graphics Frames er beholdere for GUI-komponenter, f.eks. trykknapper, listebokser, paneler En peker til beholderen får du ved å anvende metoden getContentPane( ) Du fyller opp beholderen ved å bruke metoden add( ) Du kan f.eks. fylle opp beholderen med en instans av en klasse Tegning, der du har laget din egen tegning Klassen Tegning må omdefinere metoden paintComponent( ). Husk å kalle super sin utgave av metoden. paintComponent( ) kalles automatisk av Java kjøresystem når det er nødvendig å tegne på nytt, f.eks. når størrelsen på vinduet endres, eller når vinduet hentes fram etter å ha vært skjult bak et annet vindu. Du kan framtvinge tegning ved å kalle metoden repaint( ) Argumentet til metoden paintComponent er et objekt av klassen Graphics. Det opprettes automatisk. Dette objektet representerer en bestemt tegneflate (”device context”). Klassen Graphics inneholder metoder for å tegne på den aktuelle flaten. Implementasjonen er ”device dependent”.

14 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 14 import java.awt.*; import javax.swing.*; class FontOgTekstVindu extends CloseableFrame { public FontOgTekstVindu() { setSize(600, 300); setTitle("Tester utskrift til grafikkflate"); Container innhold = getContentPane(); Tegning t = new Tegning(); t.setBackground(Color.yellow); t.setForeground(Color.black); innhold.add(t); } // FontOgTekstVindu class Tegning extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.drawString("Først en tekst med standardfonten.", 40, 60); Font [] fonter = new Font[3]; fonter[0] = new Font("SansSerif", Font.BOLD, 16); fonter[1] = new Font("Serif", Font.BOLD, 18); fonter[2] = new Font("Dialog", Font.BOLD + Font.ITALIC, 20); for (int i = 0; i < fonter.length; i++) { g.setFont(fonter[i]); g.drawString("Dette er skrevet med font "+fonter[i].getName(),40,100+40*i); } } // paintComponent } // Tegning Tekst og skrifttyper, klassen Font testvindu som før

15 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 15 XOR modus Figurer tegnes vanligvis med forgrunnsfargen. Ved å tegne i XOR-modus vil en kunne se hele omrisset av overlappende figurer. Kan brukes til å lage ”bevegelige” bilder ved å tegne over forrige utgave av en figur. import java.awt.*; import javax.swing.*; class XORVindu extends CloseableFrame { public XORVindu() { setTitle("Tester XOR"); Container innhold = getContentPane(); Tegning t = new Tegning(); t.setBackground(Color.yellow); t.setForeground(Color.black); innhold.add(t); } // XORVindu class Tegning extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.setXORMode(getBackground()); g.fillRect(80, 10, 80, 30); g.fillRect(120, 20, 80, 30); g.fillRect(10, 30, 80, 30); g.setPaintMode(); g.fillRect(80, 110, 80, 30); g.fillRect(120, 120, 80, 30); g.fillRect(10, 130, 80, 30); } // paintComponent } // Tegning

16 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 16 Bilder kan også hentes fra Internett... import java.awt.*; import java.net.*; import javax.swing.*; class BildeVindu0 extends CloseableFrame { public BildeVindu0() { Container innhold = getContentPane(); Bilde b = new Bilde(); innhold.add(b); } // BildeVindu0 class Bilde extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); try { URL u = new URL( "http://www.vastervik.se/~pin/hemsida/images/teleicon.gif"); Image bildeAvTelefon = Toolkit.getDefaultToolkit().getImage(u); // g.drawImage(bildeAvTelefon, 30, 30, this); // uskalert bilde g.drawImage(bildeAvTelefon, 30, 30, 100, 100, this); // skalert opp } catch (MalformedURLException e) { System.out.println("Problemer med URL'en."); } } // paintComponent } // Bilde testvindu av enkleste slag

17 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 17 …eller fra hard-disken import java.awt.*; import java.io.*; import javax.swing.*; class BildeVindu1 extends CloseableFrame { BildeVindu1() { setTitle("Clipart - Bullets"); File sti = new File("c:\\Program Files\\Microsoft Office\\Clipart\\Bullets"); String [] filnavn = sti.list(); Image [] bilder = new Image[filnavn.length]; for (int i = 0; i < filnavn.length; i++) { bilder[i] = Toolkit.getDefaultToolkit().getImage(sti + "\\" + filnavn[i]); } Container innhold = getContentPane(); Bilde1 b = new Bilde1(bilder); innhold.add(b); } // BildeVindu1 …forts... Java kan vise bildefiler av typen.gif eller.jpeg

18 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 18 …forts... class Bilde1 extends JPanel { public Bilde1(Image [] bilder) { this.bilder = bilder; } // Bilde1 public void paintComponent(Graphics g) { super.paintComponent(g); int x = 10; int y = 10; for (int i = 0; i < 5; i++) // 5 linjer med bilder { for (int j = 0; j < bilder.length; j++) { int bredde = bilder[j].getWidth(this); g.drawImage(bilder[j], x, y, this); x += bredde + 10; // 10 piksler mellom hvert bilde } y += 30; x = 10; } } // paintComponent private Image [] bilder; } // Bilde1 testvindu av enkleste slag

19 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 19 Applets En applet kjører alltid i tilknytning til en html-side. Bytekoden lastes ned fra web- tjeneren. En applet starter ved kall på init( ) i steden for main( ) En applet skal ikke være et applikasjonsvindu, dvs. at extends CloseableFrame ikke skal være med En Swing-applet er alltid en subklasse til JApplet En applet-klasse må alltid være public Object Component Container Window Frame Panel Applet JApplet JFrame

20 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 20 Eksempel import java.awt.*; import javax.swing.*; public class EnAppletSw extends JApplet // må være public { public void init() { Container innhold = getContentPane(); Tegning t = new Tegning(); innhold.add(t); } // EnAppletSw class Tegning extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); ….koden fra TestEnkeltVindu3 } // paintComponent } // Tegning

21 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 21 Eksempel, forts..html-koden må inneholde følgende: Eksempel: Dette er en side som inneholder en Swing-applet: Denne må kjøres gjennom HTML-converter, resultat, se neste side

22 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 22 En applet Dette er en side som inneholder en Swing-applet: <OBJECT classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" WIDTH = 400 HEIGHT = 300 codebase="http://java.sun.com/products/plugin/1.1.1/jinstall-111- win32.cab#Version=1,1,1,0"> <!-- -->

23 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 23 Å jobbe med applets - appletviewer Bruk appletviewer til å vise applet’en! –Ligger på samme katalog som javac og java –Skriv appletviewer.html –Viser bare applet’en, ikke det som er rundt –TextPad lager en primitiv.html-fil og starter opp appletviewer dersom.java-koden inneholder ordet ”Applet” og du kompilerer og kjører fra editoren. –Store problemer med å drive applet-utvikling med Netscape. Netscape har vanskelig for å glemme en nedlastet applet. –God erfaring med HotJava. Mer i leksjon 12 (kap. 10 i læreboka).

24 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 24 Et større eksempel - søylediagram i aksekors Figuren viser følgende data: {3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 10}

25 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 25 Eksempel, forts. Mange små detaljer som venter til programkoden –De små strekene på tvers må beregnes og tegnes. –Pilspissene må beregnes og tegnes. –Tall og aksetekster må skrives på riktig plass. Metoden paintComponent( ) må lages slik at den tegner figuren. Det sentrale objektet er Koordinatsystemet –Innhold/egenskaper: x- og y-akse, søyler. –Metoder: Tegn aksekorset. Tegn stolpene. –Aksene Egenskap: Tekst Metode: Tegn aksen, implementeres for x- og y-akse. Akse XAkseYAkse

26 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 26 Eksempel, forts. Koordinatsystemet inneholder en del data som aksene trenger å vite om, f.eks. plasseringen av origo. I stedet for å sende inn dette som argument til akse- konstruktørene, kan vi la akse-klassene være inni klassen Koordinatsystem. Forutsetningen for å bruke indre klasser er at disse klassene i seg selv ikke har noen verdi utenfor den ytre klassen.

27 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 27 Eksempel - klassestruktur //--------------------------------------------------------------------- class Koordinatsystem { public Koordinatsystem(…) public void tegnAksekors(Graphics g) public void tegnStolper(Graphics g, int[] data) private XAkse xAkse = null; // initieres i konstruktøren private YAkse yAkse = null; private Point p0 = new Point(); // nederste v. hjørne av aksekorset private Point p1 = new Point(); // øverste h. hjørne av aksekorset private Point oversteVenstreHjorne = null; // opplysninger om vinduet …mange flere data.. //------------------------------------------------------------------- abstract private class Akse { public Akse(….) public abstract void tegnAkse(Graphics g); protected String tekst; // tekst langs aksen } // Akse

28 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 28 Eksempel, forts... //------------------------------------------------------------------- private class XAkse extends Akse { public XAkse(…) public void tegnAkse(Graphics g) ….noe mer her… } // XAkse //------------------------------------------------------------------- private class YAkse extends Akse { public YAkse(….) public void tegnAkse(Graphics g) … noe mer her … } // YAkse } // Koordinatsystem

29 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 29 Eksempel, forts... //--------------------------------------------------- class Vindu extends CloseableFrame { public Vindu(int [] data) { this.data = data; Dimension d = tk.getScreenSize(); setSize((int)(d.width * 0.8), (int)(d.height * 0.4)); Container innhold = getContentPane(); Tegning t = new Tegning(); t.setBackground(Color.yellow); t.setForeground(Color.red); innhold.add(t); } // Vindu …. noe her } // Vindu

30 Objektorientert programmering© Else Lervik, TISIP - HiST/IDB vår-99Leksjon 7, side 30 Eksempel, forts... private class Tegning extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); Koordinatsystem k = new Koordinatsystem(Vindu.this, "x-aksen", "y-aksen"); k.tegnAksekors(g); k.tegnStolper(g, data); }// paintComponent } // Tegning } // Vindu //-------------------------------------------------- public class Grafisk { public static void main(String args[]) { int[] data = {3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 10}; Vindu f = new Vindu(data); f.show(); } // main } // Grafisk Fullstendig programkode, se kursets hjemmeside