Frames och applets - en jämförelse

Transkript

1 4 Applets Frames och applets - en jämförelse Din första applet Färger, texter och figurer Skapa egna klasser och objekt Bilder och ljud Parametrar i html-koden

2 Kap 4: Sid 2 Frames och applets - en jämförelse Att visa en Frame Vi repeterar först hur vi gjorde för att visa en Frame: I föregående kapitel gjorde du en övning där du skapade en klass, MinFrame, genom att ärva från Frame. Sedan skrev du ett javaprogram (en klass med en main-metod) Här instansierade du ett MinFrame-objekt och visade det på skärmen: class VisaFrame public stati void main(...) MinFrame f; f = new MinFrame(); f.show();... class Frame public void show()... // med flera metoder // (Kod skriven av // Javas konstruktörer) class MinFrame extends Frame MinFrame()... public void show()... // med flera metoder // (Kod skriven av // Javas konstruktörer) f... show()... MinFrame-objektet MinFrame-objektet är en (mycket enkel) GUI-applikation, ett windows-program. Det kan förses med knappar, textfält, kryssrutor etc. (Det ska vi göra så småningom ) För att visa ett Frame-objekt (starta GUI-applikationen) krävs alltså en main-metod där man instansierar objektet (anropar dess konstruktor) anropar objektets show-metod Java applets Ordet "applet" betyder "liten applikation" (litet program) Vad är då en applet? En applet är också en GUI-applikation, men den är inte ett fristående program. En applet visas (och körs) "inbäddad" på en webb-sida. Java4.doc Ove Lundgren 2

3 Kap 4: Sid 3 Java har en klass som heter Applet. Man skriver sin egen applet genom att ärva från denna klass (precis som vi gör en egen frame genom att ärva från klassen Frame ) Antag att vi skrivit en applet, MinApplet.java, där vi ärvt från Applet, samt sparat och kompilerat så att filen MinApplet.class existerar. Det behövs nu inte någon klass med en main-metod för att starta appleten. Ett appletobjekt instansieras och visas nämligen genom webbläsarens försorg! För att få webbläsaren att skapa och visa ett MinApplet-objekt skriver man helt enkelt in följande tagg i HTML-koden: <APPLET CODE = "MinApplet.class" WIDTH=300 HEIGHT=200> </APPLET> När webb-läsarens träffar på denna tagg så instanieras (och visas) automatiskt ett objekt ur klassen. En applet har några metoder. Efter att objektet skapats anropas dessa (med automatik). Så här kan du tänka dig att det går till: En "tagg" i vår HTML-fil <APPLET CODE = "MinApplet.class" WIDTH=200 HEIGHT=200> </APPLET> class Applet public void init() public void start() public void paint(graphics g) // fler metoder finns... Någon classfil med mainmetod behövs inte! Webb-läsaren utför satserna nedan automatiskt Här är vår appletklass, skapad genom arv från klassen Applet MinApplet x; x = new MinApplet(); x.init(); x.start(); x.paint(graikfobj); Objektet skapas class MinApplet extends Applet public MinApplet() // konstruktor public void init() public void start() public void paint(graphics g) // fler metoder finns... init() start() Appletytan visas paint(grafikobj) // fler metoder finns... Innehåll visas MinApplet-objektet Anmärkning: I figuren ovan har vi (för att öka tydligheten) låtit appletobjektet få referensen x. Instansieringen av appletobjeket sker bakom kulisserna så detta är ingen referens vi kan använda oss av. Java4.doc Ove Lundgren 3

4 Kap 4: Sid 4 Vi kommer nu till avsnitt där vi ska lära oss hur man arbetar med färger samt hur man ritar och lägger in komponenter (knappar, textfält, kryssrutor etc). Därefter följer mus- och knapphantering, animering, trådar mm. För att lära oss detta kan vi antingen arbeta med frames eller med applets. Hanteringen är likartad. Vi har bedömt att det är något enklare att gå vägen via applets. Det är dessutom trevligt att kunna publicera sina nyvunna kunskaper på webben om man vill Därför kommer större delen av denna kurs att handla om applets. Alltså: Dags att jobba med Applets! Din första applet Bland de fördefinierade klasserna finns alltså klassen Applet Den klassen finns i ett paket som heter java.applet. (Vi måste komma ihåg att importera det paketet.) Klassen Applet har metoder som finns med i varje applet ( bl a init, start, paint ) Att skapa en applet innebär att man skapar en klass som ärver från klassen Applet. Här är koden för en mycket enkel applet, MinApplet. import java.applet.*; public class MinApplet extends Applet public MinApplet() // konstruktorn Använd alltid modifieraren public när du skapar skapar en applet (annars hittas den inte av webläseren) Övning: MinApplet Skapa mappen X\java\MinApplet Skriv in koden ovan. Spara som MinApplet.java i mappen MinApplet Kompilera (MinApplet.class skapas) Skriv en HTML-fil: <html> <body bgcolor ="blue"> <h1>jag testar min applet! </h1> <APPLET CODE="MinApplet.class" WIDTH=300 HEIGHT=200 ></APPLET> </body> </html> Spara den med namnet MinApplet.html i mappen MinApplet Öppna MinApplet.html i webbläsaren (En helt tom applet visas ) Med JDK följer ett program, appletviewer, med vars hjälp vi kan se appleten utan att starta webbläsaren. Exekvera MinApplet.html med appletviewer (En helt tom applet visas ) Java4.doc Ove Lundgren 4

5 Kap 4: Sid 5 Metoderna i klassen Applet Klassen Applet har ett antal metoder (som vår egen applet, MinApplet, ärver) Metod: init() start() Körs med automatik när en applet laddas. Här lägger man kod för initialvärden av olika slag. (I applets placerar man, som vi senare ska se, oftast initieringar i init-metoden, och inte i konstruktorn.) Körs automatiskt då en applet visas Här skrivs kod som får appleten att göra något. Antag att du under ett surfpass visar en en webbsida med en applet. Därefter går du till en annan sida men återvänder sedan till appleten. Appletens init-metod körs första gången appleten visas. Appletens start-metod körs första gången samt varje gång du återvänder till sidan med appleten. paint(graphics g) Metoden exekveras automatiskt varje gång en applet visas. Metoden har en parameter, en referens till ett Graphics-objekt. Dessa har en rad metoder för att rita och skriva på appletytan. Vi ska strax förklara hur Graphics fungerar Följande metoder exekveras med automatik i samband med att man lämnar en applet: stop() destroy() Körs automatiskt då man lämnar webb-sidan med appleten Exekveras automatiskt när man slutar sitt surfpass. (Det kommer att dröja ett tag innan vi använder de två sistnämnda metoderna. För närvarande räcker det att du känner till att de finns ) Alla dessa metoder (och många fler) finns i klassen Applet, och därmed i vår appletklass, subklassen MinApplet. class Applet public void init() public void start() public void paint(graphics g) public void stop() public void destroy()... Metoderna finns här också, de är ju ärvda från klassen Applet! class MinApplet extends Applet public void init() public void start() public void paint(graphics g) public void stop() public void destroy()... Java4.doc Ove Lundgren 5

6 Kap 4: Sid 6 Du minns från kapitel 3 att en metod kan omdefinieras i subklassen (överskuggas säger man ibland, engelska: override) Att skriva applets handlar mycket om att omdefiniera ovanstående metoder. Vi börjar med att se på en typisk omdefinition av paint. Då måste vi först diskutera klassen Graphics: Klassen Graphics Appletens yta kan du tänka dig som en rityta som vi kan rita och skriva på. Vi behöver nu en "verktygslåda" med metoder för att rita och skriva på appleten Det finns en klass som heter Graphics ( finns i paketet java.awt ) Ett objekt ur den klassen är en sådan "verktygslåda"! Med metoderna i ett Graphics -objektets kan vi nämligen rita och skriva på appleten! Till varje appletobjekt (även till Frame-objekt och flera andra typer av objekt) hör ett Graphics-objekt. (Du kan tänka dig att det till varje rityta finns en låda med ritverktyg.) init() start() paint(grafikobj) //fler metoder finns... drawstring(...) drawrect(...) fillrect(...) med flera grafikobjektet som tillhör appleten MinApplet-objektet Vi såg på föregående sida att metoden paint anropas och körs då appleten visas. Metoden paint ska, som synes, ha ett argument, nämligen en referens till ett Graphics-objekt. Då paint anropas används som argument automatiskt en referens till detta grafikobjektet som tillhör appleten! Exempel: Tänk dig att vi överskuggar paint-metoden så här: public void paint(graphics g) g.drawstring("min applet!", 20, 30); Vad händer vid anrop av paint? Jo, parametern g byts ut mot referensen till grafikobjektet som tillhör appleten. Satsen g.drawstring("min applet!", 20, 30); betyder då att metoden drawstring i grafikobjektet som tillhör appleten exekveras: Strängen "Min applet" kommer att skrivas på positionen 20, 30 i appleten ( 20 pixlar från vänsterkanten, 30 pixlar från överkanten ) Anmärkning: Som namn på parametern brukar man välja bokstaven g (Så är det i nästan all javalitteratur ) Naturligtvis kan du välja vilket parameternamn som helst Java4.doc Ove Lundgren 6

7 Kap 4: Sid 7 Övning: Överskugga paint Gör tillägg i MinApplet på följande sätt: import java.applet.*; public class MinApplet extends Applet public MinApplet() // konstruktor public void paint(graphics g) g.drawstring("min applet!", 20, 30); Spara. Kompilera. Kör MinApplet.html i appletviewer Vi använder ju här klassen Graphics så vi måste komma ihåg att importera den. Klassen ligger i paketet java.awt. paint-metoden är omdefinierad så som vi beskrev på föregående sida: g.drawstring( Min applet!, 20, 30); Metoden har, som du ser, tre argument: - textsträngen Min applet! - talet 20 (som anger textsträngens position i x-led räknat i pixels) - talet 30 (positionen i y-led) (Du kommer väl ihåg att textsträngar skrivs inom citationstecken. Tal skrivs utan citationstecken.) Lägg till ytterligare en sats i paint-metoden: g.drawstring("välkommen!", 20, 60); Spara kompilera kör! Njut! Du kommer snart att lära dig använda de andra metoderna i grafikobjektet Om init-metoden I kaptitel 2 behandlade vi konstruktorer. Konstruktorn är den metod som skapar objektet. Du minns kanske att en konstruktor med tomt block (standardkonstruktorn) inte behövde skrivas in i koden, den existerar ändå. Satsen public MinApplet() // konstruktor i appleten ovan skulle vi alltså kunnat utelämna (Testa gärna!) I applets brukar man alltid använda standardkonstruktorn, så vi kodar den inte i fortsättningen (kom bara ihåg att den finns där, "osynlig" ) För att sätta eventuella initialvärden används i applets metoden init Sådan kod som vi för andra klasser skriver i konstruktorn placerar vi hos applets i init-metoden Exempel följer strax Java4.doc Ove Lundgren 7

8 Kap 4: Sid 8 En modell för att skriva applets Vi kommer att följa denna modell när vi skriver våra applets: Allra först skriver vi satser för att importera klassen Applet ( i paketet java.applet ) Vanligen importeras också klasserna i paketet java.awt (där finns Graphics, Color m fl) (Först i klassdefinitionen brukar vi ha konstruktorn. Eftersom vi i applets alltid använder standardkonstruktor kodar vi den inte) Deklarationer av instansvariabler och objekt. Metoden init överskuggas: Här skriver vi kod som sätter initialvärden: Vi instansierar objekt som ska användas (med new), sätter begynnelsevärden på variabler mm (sådant som vi "normalt" skriver i konstruktorn ) (Eventuell överskuggning av metoden start. Det dröjer lite innan vi använder start ) Metoden paint överskuggas. Här är modellen : import java.applet.*; import java.awt.* ; // importera ev. andra klasser som behövs public class MinApplet extends Applet // standardkonstruktor - kod utelämnas // här följer deklaration av instansvariabler och objekt public void init() // ev. omdefiniera init public void paint(graphics g) // omdefiniera paint Java4.doc Ove Lundgren 8

9 Kap 4: Sid 9 Färger, texter och figurer Övning: Färglägg texter Skapa mappen X\java\Grafik Skriv in denna kod och spara filen som Grafik.java i den nya mappen. import java.applet.*; public class Grafik extends Applet // instansvariabler Color farg; public void init() farg = new Color(255,0,0); public void paint(graphics g) g.setcolor(farg); g.drawstring("välkommen till JAVA",25,25); g.drawstring("välkommen till JAVA",25,45); Kompilera. Skriv en enkel HTML-fil (Grafik.html). Kör appletviewer (Texten skrivs med röd färg) Du förstår förhoppningsvis det mesta av koden. Nyheter förklaras nedan i avsnittet om färger Om färger Vi använder en färg i övningen ovan och måste skapa ett objekt ur klassen Color Klassen finns i java.awt-paketet Först i klassdefinitionen deklarerar vi ett objekt som vi kallar farg. Vi skriver Color farg; I init-metoden skapar vi objektet farg. Vi skriver farg = new Color(255,0,0); Color-konstruktorn tar tre argument, tre heltal i intervallet En färg blandas nämligen av tre komponenter: Rött, Grönt, Blått. En komponent kan ha värden mellan 0 och 255. Några exempel: farg1 = new Color(255,0,0); // röd färg farg2 = new Color(0,255,0); // grön färg farg3 = new Color(0,0,255); // blå färg farg4 = new Color(255,0,255); // violett färg farg5 = new Color(255,255,255); // vit färg farg6 = new Color(0,0,0); // svart färg farg7 = new Color(128,128,128); // grå färg Java4.doc Ove Lundgren 9

10 Kap 4: Sid 10 Grafikobjekt (vår "låda med målarverktyg") har en metod som heter setcolor och denna metod har ett objekt av klassen Color som argument. Vi använder den i paint-metoden för att sätta färg på den text som skrivs med drawstring Testa! Ändra till annan färgblandning. Spara kompilera kör! Färgkonstanter Ovan skapade vi själva ett färgobjekt med ( t ex ) och valde sedan denna färg med farg1 = new Color(255,0,0); g.setcolor(farg1); Klassen Color har ett antal färgkonstanter, det vill säga fördefinierade färger, som direkt kan användas, så här exempelvis: g.setcolor(color.red); Color.red är en färgkonstant som (förstås) ger röd färg. Här är alla färgkonstanterna: Color.orange Color.pink Color.cyan Color.magenta Color.yellow Color.black Color.white Color.gray Color.lightGray Color.darkGray Color.red Color.green Color.blue En konstant är (som vi förut har sett) en klassvariabel (primitiv variabel eller objekt) vars värde ej kan ändras. Så här är t ex den röda färgen deklarerad i Color-klassen: public static final Color red = new Color(255,0,0); Övning: Testa färgkonstanter Gör tillägg i paint-metoden i appleten ovan: Spara - kompilera - kör. g.setcolor(farg); g.drawstring("välkommen till JAVA",25,25); g.setcolor( Color.blue ); g.drawstring("välkommen till JAVA",25,45); Den "senast" satta färgen är den som gäller för utskrifterna: Den första strängen skrivs med din egen-komponerade färg, den andra skrivs med blå färg. Java4.doc Ove Lundgren 10

11 Kap 4: Sid 11 Grafik Övning: Rita figurer Ändra koden i klassen Grafik till följande: // Grafik import java.applet.*; public class Grafik extends Applet // deklarationer Color roed, groen, blaa; // Tre färgobjekt deklareras public void init() roed = new Color(255,0,0); groen = new Color(0,255,0); blaa = new Color(0,0,255); // röd // grön // blå public void paint(graphics g) g.drawline(10,10,100,100); g.setcolor(groen); g.drawrect(100,10,130,170); g.setcolor(blaa); g.drawoval(50,50,120,100); g.setcolor(roed); g.drawstring("välkommen till JAVA",25,25); g.drawstring("välkommen till JAVA",25,45); Spara. Kompilera. Kör med appletviewer Här använder vi ytterligare några metoder i Graphics-objektet ("målarlådan") Metoderna används för att rita figurer av olika slag. Alla metoderna har fyra heltalsargument som anger hur figurerna ska placeras: Metoden drawline(x1,y1,x2,y2) ritar en linje från punkten (x1,y1) till punkten (x2,y2) (i vårt fall alltså från (10,10) till (100,100) ) Metoden drawrect(x,y,b,h) ritar en rektangel med övre vänstra hörnet i (x,y) med bredden b och höjden h (i vårt fall övre vänstra hörnet i (100,10) och med bredden 130 och höjden 170) Metoden drawoval(x,y,b,h) ritar en ellips inskriven i den tänkta rektangel som har övre vänstra hörnet i (x,y) och med bredden b och höjden h ( i vårt fall ö. v. hörn i (50, 50) bredd 100 och höjd 100) Så här alltså: (50, 50) Java4.doc Ove Lundgren 11

12 Kap 4: Sid 12 Metoden setcolor sätter färg på de ritade figurerna. Nu: Byt ut drawrect mot fillrect och drawoval mot filloval Spara kompilera kör (Figurerna är nu fyllda med den valda färgen ) Byt ut g.fillrect(100,10,130,170) mot g.fillroundrect(100,10,130,170,20,20) Spara kompilera kör (Rektangeln har nu rundade hörn ) (100, 10) Om man ökar talen 20 får man mer avrundade hörn Om koordinater i en applet Från matematiken är vi vana vid att x får större värden åt höger längs x-axeln och att y växer uppåt I en applet (och i de flesta datorgrafiksammanhang) ligger origo, alltså pixeln eller bildpunkten med bildskärmskoordinaterna ( 0, 0 ) längst upp till vänster. x får större värden ju längre åt höger vi kommer men: y växer nedåt. Så här: ( 0, 0) Allt större x-värden 50 Allt större y-värden 100 ( 100, 50 ) (100, 80 ) Java4.doc Ove Lundgren 12

13 Kap 4: Sid 13 Övning: Stapeldiagram Metoden g.fill3drect(x,y,b,h,true) ger en viss (dock blygsam) 3D-effekt. x, y, b och h fungerar som för fillrect. Det fjärde argumentet ska ha ett boolskt värde (dvs skriv antingen antingen true eller false ) (true ger "upphöjning", false ger "nedsänkning") (Mer om boolska värden kommer i kapitel 6 ) Gör en applet som ser ut som på bilden nedan. (Olika färger på staplarna.) Spara som Stapeldiagram.java i mappen X\java\Stapel Övning: Blomma Skapa mappen X\java\Blomma Skriv en applet som visar en blomma såsom figuren visar. Använd blå, röda, gröna och gula cirklar, och en (smal) grön rektangel. Spara som Blomma.java Java4.doc Ove Lundgren 13

14 Kap 4: Sid 14 Välj bakgrundsfärg Övning: Bakgrundsfärg Metoden setbackground() är en metod som är definierad i klassen Applet - och därmed i vår appletklass. När en ett objekt anropar en metod som den själv äger så anropas metoden med this, så här: this.setbackground(color.yellow); // Metoden setbackground anropas Metoden har ett objekt av typen Color som argument. Vi har använt konstanten Color.yellow När metoden anropas får objektet (vår applet) den bakgrundsfärg som argumentet anger. Skriv in ovanstående sats i init()-metoden i appleten Grafik Spara kompilera provkör. Experimentera gärna vidare med texter, färger och figurer. Provkör på riktigt i en web-läsare. Anmärkning: Ordet this kan utelämnas. Om man inte skriver någonting alls framför ett metodnamn så är det underförstått att objektet anropar en egen metod. (Vi skriver - oftast - ut this för att öka tydligheten.) Textfonter Övning: Vi testar fonter Skriv in koden nedan. Spara den som FontTest.java i X\java\FontTest // FontTest import java.applet.*; public class FontTest extends Applet // deklarationer Font typ1, typ2, typ3; public void init() typ1 = new Font("TimesRoman",Font.PLAIN,10); typ2 = new Font("Courier",Font.BOLD,20); typ3 = new Font("Arial",Font.ITALIC,30); public void paint(graphics g) g.setcolor(color.red); g.setfont(typ1); g.drawstring("java - forever!",100,100); g.setfont(typ2); g.drawstring("java - forever!",100,150); g.setfont(typ3); g.drawstring("java - forever!",100,200); Kompilera. Skriv en HTML-fil. Kör! Läs kommentarer på nästa sida! Java4.doc Ove Lundgren 14

15 Kap 4: Sid 15 Vi arbetar med en ny klass Font (finns i java.awt-paketet) Vi deklarerar tre fontobjekt: typ1, typ2, typ3 I init-metoden skapar vi de tre objekten och skickar med tre parametrar: - Typsnitt (t ex TimesRoman ) - Stil (t ex Font:BOLD) - Storlek. (t ex 20 ) Testa gärna andra kombinationer av typsnitt - stil -storlek! Text på statusraden Övning: Statusrad I någon av dina applets - lägg till följande sats i paint-metoden: this.showstatus("denna text skrivs på statusraden!"); Spara - kompilera om. Kör motsvarande HTML-fil med Appletviewer Texten skrivs på statusraden längst ned i appleten (Ibland får du göra appleten lite större för att statusraden ska synas) Öppna även HTML-filen i web-läsaren och provkör appleten där. Texten hamnar på web-läsarens statusrad. showstatus är en metod som definierats i klassen Applet. Därmed finns den även i vår applet och ägs således av appletobjektet Java4.doc Ove Lundgren 15

16 Kap 4: Sid 16 Skapa egna klasser och objekt Dags att skriva några egna objekt igen! Övning: KryssRektangel Skapa klassen KryssRektangel, så här: public class KryssRektangel private int xpos; private int ypos; private int bredd; private int hojd; public KryssRektangel( ) bredd = 50; hojd = 40; public KryssRektangel(int b, int h ) bredd = b; hojd = h; public void setposition(int x, int y) xpos = x; ypos = y; public void rita(graphics g) g.drawrect(xpos, ypos, bredd, hojd); g.drawline(xpos, ypos, xpos+bredd, ypos+hojd); g.drawline(xpos, ypos+hojd, xpos+bredd, ypos); Paketet java.awt måste importeras eftersom klassen Graphics förekommer Instansvariablerna anger den kryssade rektangelns position i x- och y-led, samt dess bredd och höjd. Klassen har två konstruktorer: Den första har inga argument. Variablerna får standardvärden för bredd och höjd. I den andra tilldelas instansvariablerna värden vid instansieringen. Klassen har en metod, setposition, där man kan sätta rektangelns läget, det vill säga bestämma var rektangeln ska ritas. Klassen har också en metod, rita, som ritar den kryssade rektangeln med hjälp av metoderna ("verktygen") i ett Graphics-objekt ("målarlådan") ( xpos,ypos ) bredd hojd ( xpos+bredd, ypos+hojd ) Java4.doc Ove Lundgren 16

17 Kap 4: Sid 17 Spara klassen med namnet KryssRektangel.java i mappen X\java\KryssRektanglar och kompilera Skriv nu en applet som skapar objekt ur klassen ovan, och anropar dess metoder setposition och rita: // TestaKryssRektangel.java import java.applet.*; public class TestaKryssRektangel extends Applet KryssRektangel kr; public void init() kr = new KryssRektangel(50, 40 ); kr.setposition( 20, 30 ); public void paint(graphics g) kr.rita(g); // argumentet är appletens Graphics-objekt Spara som TestaKryssRektangel.java i samma mapp som ovan. Kompilera. Skriv också en html-fil som startar appleten, och exekvera! I TestaKryssRektangel: Deklarera ytterligare ett objekt: KryssRektangel kr, kr2 ; I init-metoden, lägg till: kr2 = new KryssRektangel(10,50 ); kr2.setposition( 50, 40 ); I paint-metoden: kr2.rita(g); Spara, kompilera, provkör! I KryssRektangel: Lägg till ytterligare en instansvariabel private Color farg; Ändra den andra konstruktorn så att man kan ange färg på den kryssade rektangeln: public KryssRektangel(int b, int h, Color c ) bredd = b; hojd = h; farg = c; Först i rita-metoden: Lägg till: Spara och kompilera. g.setcolor(farg); Java4.doc Ove Lundgren 17

18 Kap 4: Sid 18 I TestaKryssRektangel: Ändra instansieringen av objekt: kr = new KryssRektangel( 50, 40, Color.red ); ( Gör samma sak med kr2 ) Spara, kompilera, provkör! Övning: KryssKvadrat Skriv en klass, KryssKvadrat, som ritar kryssade kvadrater. Den ska kunna instansieras från en applet med t.ex kk = new KryssKvadrat(50, Color.red ); // sidan är 50 Spara i samma mapp som ovan. Sedan: Deklarera och skapa några kryssade kvadrater i appleten ovan. Tips: Klassen KryssKvadrat ärver förstås från KryssRektangel. Allt är redan deklarerat. Det enda som behövs är en ny konstruktor. Kom ihåg att deklarera instansvariablernas i KryssRektangel som protected Försök klara uppgiften på egen hand (annars får du kika nedan) public class KryssKvadrat extends KryssRektangel public KryssKvadrat (int s, Color c) bredd =s; // bredd och hojd får samma värde hojd = s; // farg =c; Java4.doc Ove Lundgren 18

19 Kap 4: Sid 19 Övning: Asteroid I denna applet, VisaAsteroid, instansieras ett objekt av klassen Asteroid. Skriv av (eller kopiera) koden. Spara den som VisaAsteroid.java i mappen X\java\Asteroid // VisaAsteroid.java import java.applet.*; public class VisaAsteroid extends Applet Asteroid ast; public void init() ast = new Asteroid(50 ); ast.setposition( 120, 130 ); public void paint(graphics g) this.setbackground(color.black); ast.visa(g); Skriv klassen Asteroid. Då ett objekt, ast, instansieras med ast = new Asteroid(50); ska ett Asteroid-objekt med diametern 50 pixels skapas. I klassen finns en metod public void setposition(int x, int y)... Vid anrop kan man ange koordinaterna för asteroidens mittpunkt, t.ex. ast.setposition(100,120); I klassen finns ännu en metod, public void visa(graphics g)... Då metoden anropas, t.ex. så här ast.visa(g); ska asteroiden visas som en mörkgul cirkelskiva och, på denna, en blekgul cirkelskiva något förskjuten uppåt-vänster. Spara Asteroid.java i mappen X\java\Asteroid och kompilera. Komilera VisaAsteroid.java Skriv också en html-fil som visar appleten Försök klara uppgiften på egen hand! (Lösningsförslag på nästa sida) Gör sedan så att fler Asteroid-objekt skapas och visas Java4.doc Ove Lundgren 19

20 Kap 4: Sid 20 Lösningsförslag: public class Asteroid private int xpos, ypos, diam; private Color c1, c2; public Asteroid( int d ) diam = d; c1 = new Color(220,220,150 ); // grå-gul c2 = new Color(255,255,190 ); // vit-gul public void setposition(int x, int y) xpos = x; ypos = y; public void visa(graphics g) g.setcolor(c1); g.filloval(xpos - diam/2, ypos - diam/2, diam, diam ); int diam2 = diam - 5; g.setcolor(c2); g.filloval(xpos - diam/2,ypos-diam/2, diam2, diam2 ); Övning: Flaggor I appleten på nästa sida instansieras tre objekt av typen Flagga. Metoden setposition() bestämmer flaggornas position på appletytan. Metoden rita(...) ritar flaggorna. Skriv av koden! Spara filen TestaFlagga.java i mappen X:\java\Flaggor Java4.doc Ove Lundgren 20

21 Kap 4: Sid 21 import java.applet.*; public class TestaFlagga extends Applet Flagga sweflag, danflag, finflag; public void init() sweflag = new Flagga(Color.blue, Color.yellow ); sweflag.setposition( 20, 30 ); danflag = new Flagga(Color.red, Color.white); danflag.setposition( 50, 100 ); finflag = new Flagga(Color.white, Color.blue ); finflag.setposition( 150, 130 ); public void paint(graphics g) setbackground(color.cyan); sweflag.rita(g); danflag.rita(g); finflag.rita(g); Skriv sedan klassen Flagga. Spara filen Flagga.java i samma mapp som ovanstående fil. Kompilera Flagga. Kompilera TestaFlagga. Skriv en html-fil som exekverar TestaFlagga och provkör. Så här ska resultatet bli: Övning: Norsk flagga Skriv en ny klass, NorFlagga som ärver från Flagga. Konstruktorn ska ha tre parametrar (färger) rita()-metoden ska rita en norsk eller isländsk flagga, så här: Java4.doc Ove Lundgren 21

22 Kap 4: Sid 22 Lösningsförslag: Övningen Flaggor // Flagga.java public class Flagga private int xpos, ypos; private int bredd=90, hojd=60; private Color bakfarg, korsfarg; public Flagga(Color c1, Color c2 ) bakfarg = c1; korsfarg = c2; public void setposition(int x, int y) xpos = x; ypos = y; public void rita(graphics g) g.setcolor(bakfarg); g.fillrect(xpos, ypos, bredd, hojd); g.setcolor(korsfarg); g.fillrect(xpos, ypos+hojd/2-5, bredd, 10); g.fillrect(xpos+bredd/3-5, ypos, 10, hojd); Lösningsförslag: Övningen Norsk Flagga // Ändra först i Flagga.java: protected int xpos, ypos; protected int bredd=90, hojd=60; protected Color bakfarg, korsfarg; // Lägg också till en parameterlös konstruktor: public Flagga() // NorFlagga.java public class NorFlagga extends Flagga private Color korsfarg2; public NorFlagga(Color c1, Color c2, Color c3 ) bakfarg = c1; korsfarg = c2; korsfarg2 = c3; //rita-metoden överskuggas: public void rita(graphics g) g.setcolor(bakfarg); g.fillrect(xpos, ypos, bredd, hojd); g.setcolor(korsfarg); g.fillrect(xpos, ypos+hojd/2-6, bredd, 12); g.fillrect(xpos+bredd/3-6, ypos, 12, hojd); g.setcolor(korsfarg2); g.fillrect(xpos, ypos+hojd/2-3, bredd, 6); g.fillrect(xpos+bredd/3-3, ypos, 6, hojd); Java4.doc Ove Lundgren 22

23 Kap 4: Sid 23 Övning: Stapelobjekt En stapel ritar du som bekant med g.fillrect(x,y,b,h) där x och y är koordinaterna för rektangelns övre, vänstra hörn. Skriv en klass Stapel med följande egenskaper: Ett objekt, st, instansieras i en applet med st = new Stapel(); Det ska finnas en metod: public void rita(int x, int y, int b, int h, Color c, Graphics g)... Då metoden anropas i en applet, t.ex. så här st.rita( 20, 100, 5, 25, Color.blue, g ); ska en blå stapel ritas med med nedre, vänstra hörnet i punkten ( 20, 100 ). Stapeln ska ha bredden 5 och höjden 25 pixels. Spara Stapel.java i mappen X\java\Stapel (som du har sedan tidigare) Försök klara uppgiften på egen hand! (Lösningsförslag på nedan) Skriv om appleten Stapeldiagram.java i övningen Stapeldiagram: Utnyttja din nya klass, Stapel public class Stapel // Endast en konstruktor utan parametrar. Behöver ej kodas... // Inga instansvariabler behövs... public void rita(int x, int y, int b, int h, Color c, Graphics g) g.setcolor(c); g.fillrect(x, y-h, b, h ); Övning: StreckGubbe Skriv en klass, StreckGubbe (Spara i mappen X\java\Gubbe ) Instansiering: gubbe = new StreckGubbe(Color c); Metoden gubbe.setposition(int x, int y)... sätter plats Metoden gubbe.visa(graphics g)... visar en figur på skärmen Skriv en applet som visar några gubbar Java4.doc Ove Lundgren 23

24 Kap 4: Sid 24 Bilder och ljud Några begrepp i samband med bild och ljud Det är trevligt (och enkelt) att lägga in bilder och ljud i applets. Du kommer att arbeta med två nya (lite speciella) klasser, Image och AudioClip. Image -klassen finns i paketet java.awt AudioClip finns i paketet java.applet Ett bildobjekt (Image-objekt) skapas och hämtar sitt bildinnehåll från en fil med en metod i appletobjektet som heter getimage() Ett ljudobjekt (AudioClip-objekt) skapas och hämtar ett ljud från en fil med en metod i appletobjektet som heter getaudioclip() Bildfiler ska ha formaten gif eller jpg Ljudfiler ska (i Java 1.1) vara sparat som au-filer. Java2 har även stöd för formaten wav, aiff och mid Spara för enkelhetens skull de ljud- och bildfiler som tillhör din applet i samma mapp som du har appletens java-, class- och html-filer. Övning: Bilder Skapa mappen X\java\BildLjud Skriv koden nedan och spara filen som Bilder.java i den nya mappen. Kopiera filen jumbo.gif till mappen (Du kan naturligtvis byta filen mot en egen gif- eller jpg-fil om du vill ) import java.applet.*; public class Bilder extends Applet // deklarationer Color roed, blaagraa; Image bild1; public void init() roed = new Color(255,0,0); blaagraa = new Color(200,200,255); bild1 = this.getimage(getdocumentbase (),"jumbo.gif"); this.setbackground(blaagraa); public void paint(graphics g) g.setcolor(roed); g.drawstring("jumbo vinkar",25,25); g.drawimage(bild1,50,50,this); Java4.doc Ove Lundgren 24

25 Kap 4: Sid 25 Kommentar: Vi deklarerar ett bildobjekt (som vi har kallat bild1 ) I init-metoden använder vi Applet-metoden getimage för att tala skapa bildobjektet och ange vilken bild vi vill visa: bild1 = this.getimage(getdocumentbase ( ), "jumbo.gif" ); Här kan man skriva URL (=webbadress) för den sida där bilden finns. Tomt betyder att bilden finns i samma mapp som den HTML-fil som startar appleten Här skriver du bildfilens namn Du ser att vi inte skapar ett bildobjekt med new här. Metoden getimage sköter instansieringen I paint-metoden använder vi Graphics-metoden g.drawimage(bild1,50,50,this) för att rita bilden i position (50, 50) i denna (this) applet. Skriv en enkel HTML-fil (Bilder.html) som startar appleten. Kör denna i appletviewer. (Bilden visas nu i din applet ) Lägg till denna rad sist i paint-metoden: g.drawimage(bild1,150,50,120,100,this); Denna variant av drawimage-metoden har sex argument: bildobjektets namn, x-position, y-position, bredd, höjd och this. Spara, kompilera, kör. Java4.doc Ove Lundgren 25

26 Kap 4: Sid 26 Övning: Ljud Kopiera filen spacemusic.au till din mapp. (Du kan naturligtvis välja en egen au-fil om du vill ) Komplettera Bilder.java på följande sätt: import java.applet.applet; import java.applet.audioclip; import java.awt.graphics; import java.awt.color; import java.awt.image; public class Bilder extends Applet // deklarationer Color roed, blaagraa; Image bild1; AudioClip ljud1; public void init() roed = new Color(255,0,0); blaagraa = new Color(200,200,255); bild1 = this.getimage(getdocumentbase(),"jumbo.gif"); ljud1 = this.getaudioclip(getdocumentbase(), "spacemusic.au"); this.setbackground(blaagraa); public void paint(graphics g) g.setcolor(roed); g.drawstring("jumbo vinkar",25,25); g.drawimage(bild1,50,50,this); g.drawimage(bild1,150,50,120,100,this); this.ljud1.play(); Vi importerar här AudioClip (finns i paketet java.applet) Vi deklarerar ett ljudobjekt (som vi kallar ljud1) I init-metoden skapas ljudobjektet och vi anger vilken ljudfil som ska användas med metoden getaudioclip() Vi spelar upp ljudet med metoden play(); Spara - kompilera - kör - njut Testa gärna: Byt ut au-filen mot en ljudfil i wave-format. Spara och kompilera (med en Java2-kompilator) Exekvera html-filen med appletviewer (för Java2) Java4.doc Ove Lundgren 26

27 Kap 4: Sid 27 Parametrar i html-koden Det går att skicka med parametervärden (strängar) till appleten från html-koden. Övning: Testa html-parametrar I Grafik.java - deklarera dessa strängar: String text1, text2; I init()- metoden, lägg till dessa satser: text1 = getparameter("p1"); text2 = getparameter("p2"); I paint()-metoden, ändra så att det står: Spara och kompilera. g.drawstring(text1,25,25); g.drawstring(text2,25,45); Ändra <APPLET>-taggen i Grafik.html till <APPLET CODE="Grafik.class" WIDTH=500 HEIGHT=300 > <PARAM NAME = "p1" VALUE = "Java for ever!"> <PARAM NAME = "p2" VALUE = "Kalle Persson"> // skriv ditt eget namn! </APPLET> Provkör i webläsare! Parametrarna p1 och p2 tilldelas värden (strängar) i <APPLET>-taggen. Det värde (den sträng) som parametern p1 håller överförs till String-variabeln text1 med satsen text1 = getparameter("p1"); i appleten, och skrivs ut. (Motsvarande sker med värdet i p2) Java4.doc Ove Lundgren 27