Applets
Spelprogrammering
Vad jag jobbar med just nu
Spel
Effektapplets
Diverse länkar
- En enkel applet
- Förse appleten med större text
- Centrera texten i appleten
- Ändra textfärgen i appleten
- Ändra bakgrundsfärgen i appleten
- Låta användare styra med värden i appleten via parametertaggar
- Låta användaren bestämma texten i appleten
- Låta användaren ställa in önskad font, teckenstorlek och stil
- Resultatet
En enkel applet
I programmeringsspråket java kan man skapa program, som ligger inbäddade på webbsidor och som exekveras av en browser.
Det är förhållandevis enkelt att skapa en applet. Det finns ett absolut krav, som man måste uppfylla, för att kunna
programmera en applet, din applikation måste ärva någon av klasserna Applet eller JApplet.
Det är denna klass, som sköter kommunikationen, mellan din applet och browsern. Den innehåller ganska många metoder, som
man antingen kan välja att skriva om (överskugga) eller låta vara som de är. I det senare fallet, så används superklassens metod.
För att nämna några av dessa metoder så har vi, void paint(Graphics g), void init(), void start() och void stop().
Det är inte så svårt att lista ut vad metoderna gör, det framgår av namnen. Paint är naturligtvis bra att skriva över, om man skulle vilja
rita något i en applet.
Vi skulle kunna börja med att skapa en applet, genom att skapa en klass, som ärver Applet, och som skriver över metoden paint.
Så det är bara att plocka from notepad, eller annan texteditor, och börja koda.
import java.applet.Applet; // Här importeras klassen Applet
import java.awt.Graphics;
public class MyApplet extends Applet {
/* MyApplet extends (utökar/ärver) klassen Applet.
* Det var, som du kan se ovan, ett krav.
*/
/*
* Genom att vi skriver över paint, så kommer vår
* metod att köras istället för den paintmetod, som
* finns i superklassen. Objektet page av typen Graphics
* har tillgång till en hel massa ritmetoder. Till exempel, så
* har den tillgång till metoden drawString(string,x,y);
*/
public void paint(Graphics page)
{
page.drawString("AlesnaWebbSystem.se",10,10);
}
}
När skrivandet är klart, så är det dags att kompilera. När man har fått till en lyckad kompilering, så måste den
eller de erhållna klassfilerna länkas in på en webbsida,
<html> <body> <applet code="MyApplet" width="300" height="100"> </applet> </body> </html>
Så här blev resultatet, när jag öppnade
html-filen i FireFox. Det råder väl ingen som helst tvekan om, att världen har skådat flashigare applets, men i alla fall, det fungerade.
Observera att texten i appleten ritas ut, snarare än printas, såsom sker i konsolprogram.
Okey, nu skulle vi kanske fortsätta med att få till en lite större text och bättre placering av texten i appletens rityta.
Förse appleten med större text
När man skapar webbsidor, så är det ganska ofta som man ändrar på det teckensnitt, som gäller default. Detsamma gäller applets och på samma sätt, som man måste vara lite återhållsam med teckensnitt, eftersom användaren kanske inte har önskat teckensnitt installerad, så måste man vara lite återhållsam, när det gäller användandet av fonter i applet.Det är en sak, vad som fungerar på hemdatorn, en annan hur det fungerar på användarnas datorer ute på nätet.
Bland alla tusentals klasser, som finns i de olika javapaketen, så finns naturligvis en klass, som hanterar fonter.
I klassen Graphics finns en metod, som heter setFont(Font f). Den ska vi använda. Du behöver bara ändra/skriva om i paintmetoden.Det kan nämnas att läran om tecksnitt (fonter) är ganska avancerad, och att det handlar om komplicerade och krävande beräkningar, som utförs av datorn. Läran om typer är äldre än datorerna och har burits av en lång och stolt tradition.
import java.applet.Applet;
import java.awt.Font;
import java.awt.Graphics;
public class MyApplet extends Applet {
public void paint(Graphics page)
{
/*
* Först skapar vi en intans av klass Font via
* ett anrop till en av klassens konstruerare.
*/
Font f = new Font("Sans-serif",Font.BOLD,22);
/*
* Det grafiska objektet page, byter font via
* metodanropet setFont(Font f);
*/
page.setFont(f);
/*
* Sedan ritar vi, och naturligtvis kommer det grafiska ojektet
* att använda sin nya font. Skulle någonting gå fel, så
* kommer systemet deafultfont att användas.
* Flytta ner y-variabeln från 10 till 40.
*/
page.drawString("AlesnaWebbSystem.se",10,40);
}
Som du kan se på bilden, så blev texten betydligt större. Du kan naturligtvis pröva andra
teckensnitt och storlekar. Skulle du råka använda ett teckensnitt, som ditt operativsystem
inte har stöd för eller som inte är installerat, så kommer du att få en defaulttyp.
Centrera texten i appleten
För att kunna centrera texten, så måste vi veta två saker,storleken på appleten och storleken på texten hänsyn taget till den font som texten ritas ut i.Det första problemet är kanske det lättaste att lösa. I sann objektorienterad anda, så frågar man helt enkelt appleten efter dess mått via getHeight och getWidth.
Det andra problemet kan man lösa genom att använda klassen FontMetrics. Man kan erhålla en instans av denna klass via ett grafiskt objekt genom Graphics.getFontMetrics(). I klassen FontMetrics finns mängder av användbara metoder för beräkning av teckenstorlekar.
I exemplet nedan, så behöver du bara lägga till ett par saker i importena längst upp, samt ändra och lägga till lite i paintmetoden.
import java.applet.Applet;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
public class MyApplet extends Applet {
public void paint(Graphics page)
{
String str="AlesnaWebbSystem.se";
Font f = new Font("Sans-serif",Font.BOLD,22);
page.setFont(f);
/*
* Först så hämtar vi det grafiska objektets instans
* av FontMetrics. Sedan utförs en del beräkningar, som lagras
* i variablerna x och y. Dessa används sedan i utritningen.
*/
FontMetrics fm = page.getFontMetrics();
int x = (getWidth()/2)- (int) fm.stringWidth(str)/2;
int y = (getHeight()/2)+(fm.getHeight()/2);
page.drawString(str,x,y);
}
}
Nu har texten i appleten blivit centrerad. Du skulle kunna pröva riktigheten i mitt påstående genom
at förändra storleken på width och height parametrarna i applettaggarn i htmlfilen och eller
textens storlek. Det gör du genom att förändra talvärdet i Fontens konstrueraranrop.
Nu kan man ju tycka att appleten ser lite flashigare ut, men att det ändå fattas en del. T.ex. så skulle det vara trevligt
om texten hade en annan färg än svart. Och kanske skulle bakgrundsfärgen vara annorlunda. Så småningom, så skulle det vara bra, om
man kunde ändra textens innehåll och färgvärden på ett smidigt sätt. På samma smidiga sätt som en webbdesigner änddrar attributvärden på en webbsida.
Vi ska ordna till allt det där och lite till, men vi börjar väl med färgen på texten.
Ändra textfärgen i appleten
Vi ska börja med att ändra lite i själva appletens grundstruktur, genom att skriva över ytterligare en metod, nämligen init. Den körs, när appleten laddas in på en webbsida. Det är ett bra ställe att initiera diverse variabler och objekt på. Vi ska ha variabler och objekt, vars värden ska kunna ändras via appletens parametertaggar, förgrundsfärg, bakgrundsfärg samt text, så dessa behöver vara kända i hela klassen,MyApplet.Gjorda förändringar ligger i importerna, den nya metoden init samt i paintmetoden.
import java.applet.Applet;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
public class MyApplet extends Applet {
/*
* Det här är ett bra ställe att placera variabler, som
* ska användas i klassen. Vi börjar med att lägga dit
* en instans av klassen Color. Namnet på objektet blir
* text_color, självbeskrivande.
*/
private Color text_color;
/*
* (non-Javadoc)
* @see java.applet.Applet#init()
* När appleten laddas in på sidan, så kommer metoden
* init att köras en gång. Det är därför ett bra ställe
* att initiera variabler/objekt på.
*/
public void init()
{
/* text_color skapas genom ett anrop
* till en av klassen Colors konstruerare.
*/
text_color = new Color(230,0,40);
}
public void paint(Graphics page)
{
String str="AlesnaWebbSystem.se";
Font f = new Font("Sans-serif",Font.BOLD,22);
page.setFont(f);
FontMetrics fm = page.getFontMetrics();
int x = (getWidth()/2)- (int) fm.stringWidth(str)/2;
int y = (getHeight()/2)+(fm.getHeight()/2);
/*
* Det grafiska objektet använder text_color för att ställa
* om sin ritfärg. Observera att detta måste ske innan
* utritningen sker.
*/
page.setColor(text_color);
page.drawString(str,x,y);
}
}
Det är klart att du ska stilla din nyfikenhet genom att ställa om färgen. De tre värdena
till konstrueraren i klassen Color utgör naturligtvis den gamla välkända RGB-koden.
De tre färkanalerna, eller färgpyttsarna om man så vill, är röd, grön och blå. Man kan slå i från 0 till 255 i vardera färgburk. Slår man i fullt i alla tre (255,255,255), så får man vit färg, (0,0,0) ger ingen färg, dvs. svart.
Ändra bakgrundsfärgen i appleten
Ett enkelt sätt att lösa detta på vore att sätta det grafiska objektets önskade ritfärg och sedan rita en fylld rektangel innan vi sätter textfärgen och ritar ut texten.Förändringarna ligger bland de privata variablerna längst upp i klassen, i initmetoden samt i paintmetoden.
import java.applet.Applet;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
public class MyApplet extends Applet {
private Color text_color;
private Color bakgrund;//Den nya Colorinstansen
public void init()
{
text_color = new Color(230,0,40);
bakgrund = new Color(0,0,0);//Den nya Colorinstansen
}
public void paint(Graphics page)
{
String str="AlesnaWebbSystem.se";
Font f = new Font("Sans-serif",Font.BOLD,22);
page.setFont(f);
FontMetrics fm = page.getFontMetrics();
int x = (getWidth()/2)- (int) fm.stringWidth(str)/2;
int y = (getHeight()/2)+ (fm.getHeight()/2);
/*
* Det grafiska objektet ställer om sin ritfärg och ritar
* ut en fylld rektangel.
*/
page.setColor(bakgrund);
page.fillRect(0,0,getWidth(),getHeight());
/*
* Det grafiska objektet använder text_color för att ställa
* om sin ritfärg. Observera att detta måste ske innan
* utritningen sker.
*/
page.setColor(text_color);
page.drawString(str,x,y);
}
}
Pröva gärna att på egen hand
förändra bakgrundsfärgen. Nästa steg är att låta användare styra och ställa med färgerna i appleten.
Låta användare styra med värden i appleten via parametertaggar
För att du ska förstå vad jag menar, så ska jag visa html-koden, såsom den skulle kunna se ut, om man lät användaren styra med diverse attributs värden.<html> <body> <applet code="MyApplet" width="300" height="100"> <parame name="textfärg" value="0000AC"><!-- ny parameter--!> <param name="bakgrundsfärg" value="002121"><!-- ny parameter--!> </applet> </body> </html>Som du kan se, så har det tillkommit två s.k parametertaggar. Det finns inget hokus pokus involverat i detta, utan det hela fungerar enligt intentionerna enbart, om programmeraren av appleten har öppnat möjligheten i appleten.
I exemplet ovan, så har användaren (webbdesignern) anget färgen på ett för webbmakarna vanligt sätt, nämligen via hexadecimala värden. Det känns väl helt okey!
Det finns dock ett antal problem som kan uppstå
- Användaren underlåter/glömmer att ange värden för förgrunds respektive bakgrundsfärg
- Användaren anger felaktiga värden, t.ex. "blue"
Förändringarna ligger helt och hållet i initmetoden
public void init()
{
/*
* Vi börjar med att nulla text_color. Sedan försöker vi läsa in
* värden från parametertaggarna med appletens metod getParameter("namn").
* Nu är dock problemet att metoden getParameter returnerar en textsträng.
* Denna textsträng måste således konverteras till ett heltal med 16 som bas.
* Det sker med Integerklassens statiska metod parseInt(sträng,talbas).
* Det är alldeles uppenbart att det föreligger ganska många felrisker.
* Till exempel så kan man inte göra om vad som helst till ett tal.
* Om ett fel uppstår, så hamnar vi i catchsatsen,
* där vi helt enkelt skapar en defaultfärg.
* Observera att vi nu använder en annan av klassen Colors konstruerare,
* en som tar ett heltal som argument.
*/
text_color = null;
try
{
text_color =
new Color(Integer.parseInt(getParameter("textfärg"),16));
}
catch(Exception fel)
{
text_color = new Color(230,0,40); //Oj då något fel har uppstått!
}
/*
* Vi använder precis samma strategi för bakgrundsfärgen.
*/
bakgrund = null;
try
{
bakgrund =
new Color(Integer.parseInt(getParameter("bakgrundsfärg"),16));
}
catch(Exception fel)
{
bakgrund = new Color(0,0,0);
}
}
Nu kan man styra och ställa precis som man vill med bakgrunds -och förgrundsfärgerna via appletens parametertaggar. Pröva
gärna på egen hand.
Låta användaren bestämma texten i appleten
När det gäller att låta användare bestämma vad appleten ska rita ut för text, så finns det förmodligen, trots att det handlar om en textsträng, ännu fler felmöjligheter. Bland annat, så kan användare råka skapa en tom sträng. Det är väl i och för sig inte något fel, men strider mot appletens syfte.En sak som vi måste göra, är att flytta upp variabeln str till klassnivå. Sedan gör vi ett försök att läsa in variabeln via appletens getParameter-metod. Lyckas inte detta, om det skulle uppstå något annat fel, så tilldelar vi strängen ett defaultvärde.
Förändringarna ligger i variabellistan längst upp i klassen, i initmetoden samt i att strängvariabelns (str) tilldelning har försvunnit från paintmetoden.
import java.applet.Applet;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
public class MyApplet extends Applet {
private Color text_color;
private Color bakgrund;
private String str; //Variabeln str flyttas upp till klassnivå.
public void init()
{
text_color = null;
try
{
text_color = new Color(Integer.parseInt(getParameter("textfärg"),16));
}
catch(Exception fel)
{
text_color = new Color(230,0,40); //Oj då något fel har uppstått!
}
bakgrund = null;
try
{
bakgrund = new Color(Integer.parseInt(getParameter("bakgrundsfärg"),16));
}
catch(Exception fel)
{
bakgrund = new Color(0,0,0);
}
/* Här nedan nullas först str. Sedan görs ett försök att tilldela den
* ett värde från appletens parametertaggar. Skulle det inte lyckas, så
* fångas felet.
*/
str=null;
try
{
str = getParameter("message");
}
catch(Exception error)
{
/*
* Här fångas felet och str tilldelas
* ett defaultvärde
*/
str="AlesnaWebbSystem.se";
}
/*Även om inget fel skulle ha uppstått, så kan
*strängen ändå vara felaktig. Det kan vara tom,
*eller null.
*/
if(str.length()==0 || str== null)
str = str="AlesnaWebbSystem.se";
}
public void paint(Graphics page)
{
Font f = new Font("Sans-serif",Font.BOLD,22);
page.setFont(f);
FontMetrics fm = page.getFontMetrics();
int x = (getWidth()/2)- (int) fm.stringWidth(str)/2;
int y = (getHeight()/2)+ (fm.getHeight()/2);
page.setColor(bakgrund);
page.fillRect(0,0,getWidth(),getHeight());
page.setColor(text_color);
page.drawString(str,x,y);
}
}
Här nedan kan du se html-koden, nu med den nya parametertaggen.
<html> <body> <applet code="MyApplet" width="300" height="100"> <param name="message" value="Morgan is cool!"><!-- ny parameter--!> <parame name="textfärg" value="0000AC"> <param name="bakgrundsfärg" value="002121"> </applet> </body> </html>
Nu kan användaren av appleten styra och ställa med texten också! Då kan det ju dyka
upp ett och ett annat korrekt budskap (-;. Du är naturligtvis fri att ange vilka värden
du vill.
Låta användaren ställa in önskad font, teckenstorlek och stil
I det här fallet, så handlar det om tre parametrar. Det är för övrigt samma parametrar, som skickas till fontklassens konstruerare.Den första parametern handlar om teckensnittet. Det är lite äventyrligt, eftersom användaren kanske anger ett icke befintligt eller icke installerat teckensnitt.
Den andra parametern är ett heltal. Det kan innebära att att användaren ger en textsträng, som inte går att göra om till ett giltigt heltal.
Den tredje parametern är också ett heltal, som definieras av tre statiska konstanter i klassen Font, Font.PLAIN, Font.BOLD och Font.ITALIC. Frågan är vilket sätt, som känns naturligast för användaren, att ange stil på fonten. Förmodligen skulle många användare kunna tänkas acceptera, bold,plain och italic. Problemet är dock att användaren kanske stavar fel, t.ex. bolld, panic och italien.
Förändringarna ligger i variabellistan längst upp i klassen, dit objektet f (av typen Font) har flyttat. Där finns också ett antal nya variabler. I paintmetoden, så har konstruktionen av fontobjektet tagits bort. I övrigt, så ligger alla förändringar i initmetoden.
import java.applet.Applet;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
public class MyApplet extends Applet {
private Color text_color;
private Color bakgrund;
private String str;
/*
* Här nedan följer variabeln f av typen Font och tre
* variabler, som ska användas till att skapa fonten.
*/
private Font f;//Variabeln f, flyttad till klassnivå.
private String familj;
private int storlek;
private int stil;
public void init()
{
text_color = null;
try
{
text_color =
new Color(Integer.parseInt(getParameter("textfärg"),16));
}
catch(Exception fel)
{
text_color =
new Color(230,0,40); //Oj då något fel har uppstått!
}
bakgrund = null;
try
{
bakgrund =
new Color(Integer.parseInt(getParameter("bakgrundsfärg"),16));
}
catch(Exception fel)
{
bakgrund = new Color(0,0,0);
}
str=null;
try
{
str = getParameter("message");
}
catch(Exception error)
{
str="AlesnaWebbSystem.se";
}
if(str.length()==0 || str== null)
str = str="AlesnaWebbSystem.se";
/*
* Vi börjar med att försöka och eventuell
* felhantera teckensnittet.
*/
familj = null;
try
{
familj = getParameter("teckensnitt");
}
catch(Exception error)
{
familj = "Sans-Serif";
}
if(familj.length()==0 || familj== null)
familj ="Sans-Serif";
/*
* Sedan går vi vidare storleksvariabeln
*/
storlek = 0;
try
{
storlek = Integer.parseInt(getParameter("fontstorlek"));
}
catch(Exception error)
{
storlek = 22;
}
if(storlek < 0)
storlek = 22;
/*
* Nästa steg är att läsa in önskad stil på
* fonten.
*/
String font_stil=null;
try
{
font_stil = getParameter("font_stil").toUpperCase();
}
catch(Exception error)
{
font_stil = "PLAIN";
}
if(font_stil.length()==0 || font_stil== null)
font_stil="PLAIN";
if(font_stil.equals("BOLD"))
stil = Font.BOLD;
if(font_stil.equals("PLAIN"))
stil = Font.PLAIN;
if(font_stil.equals("ITALIC"))
stil = Font.ITALIC;
/*Slutligen så använder vi våra variabler till
*att skapa fontobjektet.
*/
f = new Font(familj,stil,storlek);
}
public void paint(Graphics page)
{
page.setFont(f);
FontMetrics fm = page.getFontMetrics();
int x = (getWidth()/2)- (int) fm.stringWidth(str)/2;
int y = (getHeight()/2)+ (fm.getHeight()/2);
page.setColor(bakgrund);
page.fillRect(0,0,getWidth(),getHeight());
page.setColor(text_color);
page.drawString(str,x,y);
}
}
Nedan finns html-koden, nu utökad med de nya parametrarna.
<html> <body> <applet code="MyApplet" width="300" height="100"> <param name="teckensnitt" value="sans-serif"><!-- ny parameter--!> <param name="fontstorlek" value="22"><!-- ny parameter--!> <param name="font_stil" value="italic"><!-- ny parameter--!> <param name="message" value="Morgan is cool!"> <parame name="textfärg" value="0000AC"> <param name="bakgrundsfärg" value="002121"> </applet> </body> </html>
Resultatet
Nedan så har jag lagt in den färdiga appleten.Nu har vi kommit ganska långt med vår applet. Nästa steg är förstås att animera den.
Den vanligaste typen av animation är förmodligen en scroll, men jag har någonting annat i bakfickan. Att skapa en animation innebär så många nya moment, att jag valt att lägga den delen under en egen länk animation (1).