Einführung in die Informatik - Teil 1b -

Transkript

1 Eckart Modrow Java-Applets mit JBuilder 9 S. 1 Einführung in die Informatik - Teil 1b - Java-Applets mit dem JBuilder 9 Inhalt: 1. Grundeinstellungen 2. Erzeugen eines neuen Projekts 3. Erzeugen eines neuen Applets 4. Die HTML-Startdatei 5. Die Java-Datei 6. Applets im Browser ansehen 7. Übersetzen von Programmen 8. Aufbau eines Applets 9. Einige Grafikbefehle 10. Das Hilfesystem 11. Ein erstes Beispiel 12. Aufgaben Literaturhinweise: Küchlin/Weber: Einführung in die Informatik, Objektorientiert mit Java, Springer 1998 Krüger, Guido: Handbuch der Java-Programmierung, oder Addison Wesley 2002 Tutorials zu JBuilder 9, Borland 2003

2 Eckart Modrow Java-Applets mit JBuilder 9 S Grundeinstellungen Sollten Sie nur über einen älteren Rechner verfügen (<800MHz,256MB), dann lassen Sie besser die Finger vom JBuilder! Ansonsten: Der Borland-JBuilder ist ein mächtiges Werkzeug, das über entsprechend viele Einstellungsmöglichkeiten verfügt, in denen man sich ganz schön verheddern kann. Zum Glück gibt es eine umfangreiche, frei zugängliche Dokumentation. Bei der Installation und den ersten Schritten hält man sich am besten an diese. Im Tutorial JBuilder Fundamentals (Einführung) ist das Ganze gut beschrieben. Im letzten Abschnitt findet man dann auch eine Übung: Applets entwerfen, in der alles Schritt für Schritt beschrieben ist. Der JBuilder arbeitet mit Wizards, also Hilfsprogrammen, die einen ganz gut durch die einzelnen Stufen verschiedener Prozesse leiten. Diese arbeiten mit den Voreinstellungen, die sie vorfinden. Eine davon ist die, Daten im Homeverzeichnis des Benutzers abzulegen. Da ich nichts davon halte, mit Anwendungsprogrammen im Stammverzeichnis von Windows zu arbeiten, wollen wir das als erstes ein für allemal abstellen. Dazu legen wir ein neues Verzeichnis für JBuilder-Projekte an, z. B. F:\JBuilder-Projekte. Nach dem Start des JBuilders wählen wir aus dem Projekt-Menü den Punkt Standard- Projekteigenschaften. Das da!

3 Eckart Modrow Java-Applets mit JBuilder 9 S. 3 Sie erhalten ein Fenster, in dem Sie zahlreiche Voreinstellungen vornehmen können. Wir wählen hier nur die eingestellten Pfade aus, bei denen meist das Verzeichnis Eigene Dateien/JBuilder Projekte eingestellt ist. Das ersetzen wir durch ein Verzeichnis im Datenbereich der Platte(n). Da der JBuilder für jedes Projekt ein eigenes Unterverzeichnis anlegt, finden sich diese dann in diesem Pfad wieder. Da sollen die Dateien hin! Nach dem Anklicken des ok-buttons werden neue Projekte auf dem gewünschten Laufwerk angelegt wenn nichts andres angegeben wird. Das Verzeichnis müssen wir dann noch selbst wählen.

4 Eckart Modrow Java-Applets mit JBuilder 9 S Erzeugen eines neuen Projekts Zuerst einmal legen wir eine neue Projektmappe an (dafür ist die Dateiendung jpx vorgesehen), in dem das Applet und andere Dateien gespeichert werden können. Das erreichen wir mit den Menüpunkten Datei Neues Projekt Dort geben wir den Namen der Projektmappe an (hier: MeinAllererstes- Applet) und darunter das gewünschte Verzeichnis. (Beim Verzeichnis müssen wir ggf. nachbessern, indem mit das gewünschte Verzeichnis ausgewählt wird.) Die nächsten Punkte überspringen wir mit Weiter, bis wir zu Fertigstellen kommen. Dann haben wir eine neue leere JBuilder- Projektmappe. In dieser Mappe können wir jetzt arbeiten.

5 Eckart Modrow Java-Applets mit JBuilder 9 S Erzeugen eines neuen Applets Applets sind Java-Programme, die in einem Browser ablaufen. Zu diesem Zweck gehört zum Applet immer eine HTML-Seite, die das Applet aufruft. Mit dem JBuilder können wird beides (Applet und HTML-Seite) zusammen erzeugen. Dazu starten wir den JBuilder und wählen den Menüpunkt Datei Neu Web Applet Das da! Nach dem Drücken des ok-buttons erscheint ein Fenster, in dem wir nur einen aussagekräftigen Namen wählen, z. B. appletmitlinie. Den Rest der Einstellungen lassen wir unverändert.

6 Eckart Modrow Java-Applets mit JBuilder 9 S. 6 Die nächste Auswahlmöglichkeit überspringen wir mit Weiter. Wir benötigen nämlich keine Parameter. Für die HTML-Seite, in der das Applet läuft (s. u.) können wir auch Einstellungen vornehmen. Vor allem die Größe des Applets sollte geeignet gewählt werden. Größe einstellen. Das nächste Fenster überspringen wir wieder mit Fertigstellen.

7 Eckart Modrow Java-Applets mit JBuilder 9 S. 7 Wir erhalten ein neues leeres Applet, das schon viel automatisch erzeugten Quelltext enthält. Da wir den noch nicht gebrauchen können, löschen wir ihn bis auf die äußeren geschweiften Klammern. Wir erhalten dann einen schön gestalteten, weitgehend leeren Editor. Applet übersetzen und starten Dateien in der Projektmappe Editor vorhandene Elemente

8 Eckart Modrow Java-Applets mit JBuilder 9 S. 8 Das Projekt enthält jetzt ein lauffähiges Applet, das wir direkt übersetzen und ausführen können. Wir klicken dazu den Pfeil ( ) in der oberen Befehlsleiste an. Nach kurzer Zeit (je nach Leistungsfähigkeit des Rechners) erscheint das Applet im Appletviewer. Beim Übersetzen hat der JBuilder aus der Quelltextdatei des Applets (Applet1.java) eine vom Java-Interpreter ausführbare Datei (Applet1.class) erzeugt. Diese wird vom Appletviewer verarbeitet. Der übernimmt aber leider nicht die Größeneinstellung für die HTMLdatei. Das müssen wir noch per Hand erledigen: Wir wählen aus dem Menü Projekt Projekteigenschaften Laufzeit den Punkt Bearbeiten und erhalten dann ein Fenster, in dem wir die Größe des Applet-Viewers einstellen können.

9 Eckart Modrow Java-Applets mit JBuilder 9 S Die HTML-Startdatei Nach einem Doppelklick auf die HTML-Datei (links-oben im Fenster) kann die HTML-Datei in drei Versionen angezeigt werden: Ansicht, Quelle und Historie. In der Quelltext- Version wird der HTML-Text angezeigt, in der Vorschau das zu erwartende Ergebnis und in der Historie z. B. die während der Arbeit vorgenommenen Änderungen. Wenn das zu startende Applet übersetzt ist, dann wird es in dieser Darstellung angezeigt.

10 5. Die Java-Datei Virtuelle Lehrerweiterbildung Informatik in Niedersachsen Eckart Modrow Java-Applets mit JBuilder 9 S. 10 Die (weitgehend gelöschte) Java-Datei enthält nur noch das Minimalgerüst eines Applets (das nichts tut): package appletmitlinie; benutztes Paket (das Unterverzeichnis ) import java.awt.*; import java.awt.event.*; import java.applet.*; benutzte Bibliotheken public class Applet1 extends Applet das Applet Damit überhaupt etwas passiert, fügen wir jetzt einen Zeichenbefehl ein (die Theorie dazu folgt später). package appletmitlinie; import java.awt.*; import java.awt.event.*; import java.applet.*; public class Applet1 extends Applet public void paint(graphics g) g.drawline(10,10,100,100); Damit erhalten wir eine Linie vom Punkt (10/10) zum Punkt (100/100). Wir haben den Grafik-Kontext g gebeten, eine entsprechende Linie zu zeichnen. Wenn wir eine Linie zeichnen können, dann stehen uns alle grafischen Möglichkeiten offen!

11 Eckart Modrow Java-Applets mit JBuilder 9 S Applets im Browser ansehen Unsere HTML-Seite enthält den Text (hier etwas anders eingerückt): <html> <head> <title> HTML-Testseite </title> </head> <body> appletmitlinie.applet1 erscheint in einem Java-fähigen Browser.<br> <applet codebase = "." code = "appletmitlinie.applet1.class" name = "TestApplet" width = "600" height = "800" hspace = "0" vspace = "0" align = "middle" > </applet> </body> </html> Die rot geschriebenen Teile sind ziemlich überflüssig. Im restlichen Text finden wir die eingestellten Werte des Applets wieder. Öffnen wir diese HTML-Datei mit einem der üblichen Browser, dann funktioniert das manchmal, manchmal aber auch nicht je nach Einstellungen. Wir erhalten oft nur ein graues Rechteck der eingestellten Größe, aber nicht das Applet. Ist das z. B. im Internet-Explorer der Fall, dann sollte wenn noch nicht geschehen das Java2-SDK von SUN installiert werden (gibt es im Netz). Danach wählen wir im Internet-Explorer Extras Internetoptionen Erweitert und scrollen etwas nach unten, bis die Java- Optionen erscheinen. Dort schalten wir die Microsoft-Virtual-Machine ab und die SUN- Java-Version an. Nach einem Neustart des einschalten Rechners sollte dann alles richtig funktionieren. abschalten

12 Eckart Modrow Java-Applets mit JBuilder 9 S. 12 Der JBuilder verwaltet seine Dateien in verschiedenen Unterverzeichnissen. Wollen wir das Ergebnis publizieren, dann funktioniert das am einfachsten so (finde ich): 1. Wir kopieren die erforderlichen Dateien (hier: Applet1.html und Applet1.class) in ein neues Unterverzeichnis. 2. Wir starten z. B. im Internetexplorer die HTML-Datei über Datei Öffnen Durchsuchen. Danach erhalten wir die Fehlermeldung, dass das Applet nicht gefunden wurde. Fehlermeldung 3. Wir verändern die HTML-Datei. Dazu laden wir deren Quelltext. (Da wir in einem neuen Unterverzeichnis arbeiten, dürfen wir den ruhig verändern, ohne den JBuilder zu stören.) Ansicht Quelltext

13 Eckart Modrow Java-Applets mit JBuilder 9 S. 13 Dort löschen wir alles Überflüssige und erhalten. <html> <head> <title>html-testseite</title> </head> <body> <applet code=applet1.class width=600 height=400></applet> </body> </html> 4. Das Ergebnis wird gespeichert. Mithilfe des Aktualisierungs-Buttons im Internetexplorer können wir dann das Ergebnis ansehen. Wenn wir Glück haben, dann versteht der Browser die benutzte Java-Version und zeigt das Ergebnis an.

14 14 Virtuelle Lehrerweiterbildung Informatik in Niedersachsen Eckart Modrow Java-Applets mit JBuilder 9 S. 7. Übersetzen von Programmen Man schreibt ein Java-Applet im Editor. Schon bei der Eingabe werden sehr viele Fehler vom JBuilder erkannt und angezeigt (durch Unterkringeln ). Manchmal muss man ein bisschen warten, damit sich der JBuilder den Text ansehen kann. Typische Fehler sind falsche Groß-/Kleinschreibung falsche Klammerstruktur ( Klammer fehlt ) Fehler in den Parameterlisten ( ein Wert zu viel ) Typfehler ( Zahl statt Zeichen ) Übersetzt man das Programm, dann werden gefundene Fehler im unteren Fenster Meldungen angezeigt. Klickt man auf die Fehleranzeige, dann springt der Cursor in die entsprechende Zeile. Während der Eingabe blendet der JBuilder mögliche Optionen ein. Schreibt man also z. B. g. (d.h. g und Punkt ) und wartet einen Augenblick, dann erscheint ein Fenster mit den möglichen Methoden von g, den Befehlen. Wählt man eine Methode aus und tippt die öffnende Klammer, dann erscheint eine Liste mit den notwendigen Parametern.

15 Eckart Modrow Java-Applets mit JBuilder 9 S. 15 Durch Verbessern der Fehler und erneutes Übersetzen erhält man schrittweise ein Programm, das frei von Syntaxfehlern ist und übersetzt werden kann. Der Java-Compiler (Übersetzer) erzeugt dann aus der Quellcode-Datei nnn.java eine Code-Datei nnn.class im angegebenen Package (also einem Unterverzeichnis), die dann auf der HTML-Seite angegeben wird. Die Class-Datei enthält Code für die virtuelle Maschine von Java (die Java-VM, einen Modellcomputer ), die in den verschiedenen Browsern enthalten ist. Da alle diese virtuellen Maschinen den gleichen Code verstehen, können Java-Programme auf allen diesen Rechnern unabhängig vom Betriebssystem ablaufen. (Leider arbeiten die verschiedenen Java-VMs nicht völlig identisch, so dass die Ergebnisse des gleichen Applets durchaus unterschiedlich ausfallen können.) import java.awt.* import class test extends.. int I=0;.. Übersetzung durch den JBuilder LDA 0 STA (234). Interpretation durch die virtuelle Java-Maschine Quellcode (in nnn.java) Javacode (in nnn.class) ausführbarer Code (rechnerspezifisch) Logische Fehler befinden sich meist auch in dem Programm. Diese können beim Debuggen (Fehlersuche) gefunden werden, wenn ein Programm schrittweise ausgeführt wird und die aktuellen Werte der Variablen im Überwachungsfenster verfolgt werden. Wir wählen dazu aus dem Menü Start Routinen verfolgen (F7) und warten eine Weile, bis der Debugger gestartet wurde. Anschließend können wir mit Ausdruck hinzufügen die Werte einzelner Variabler im Meldungsfenster verfolgen und zusehen, wie sich der Debugger durch die Javamethoden des Laufzeitsystems wühlt.

16 Eckart Modrow Java-Applets mit JBuilder 9 S. 16 Um sich dort nicht zu verlaufen ist es ratsam, mit Breakpoints zu arbeiten. Man klickt dazu links im Editor auf eine Zeile, an der die Ausführung des Programms gestoppt werden soll. Ab dieser Stelle arbeitet man sich dann schrittweise durch das Programm. ein Breakpoint überwachte Ausdrücke anzeigen überwachte Ausdrücke Anweisungen schrittweise ausführen

17 Eckart Modrow Java-Applets mit JBuilder 9 S Aufbau eines Applets Man erzeugt ein neues Applet (z.b. mit dem Namen Applet1), indem man eine neue Klasse aus der Mutterklasse Applet ableitet: public class Applet1 extends Applet... Damit die Mutterklasse gefunden wird, muss man vorher die Bibliothek (Package) angeben, in sie sich befindet: import java.applet.*; Bei Bedarf folgen weitere Packages, z.b. mit import java.awt.*; (Informationen zur richtigen objektorientierten Programmierg OOP folgen später!) Programmiert wird, indem die (leeren) Standardmethoden der Applet-Klasse durch eigene Methoden überschrieben (ersetzt) werden. Standardmethoden sind z.b. init() wird anfangs einmal ausgeführt. start() wird bei jedem Neustart ausgeführt ausgeführt. stop() wird am Ende ausgeführt. Weil wir meist mit Grafik arbeiten wollen, müssen wir noch die Zeichenmethode überschreiben, die einen Grafikkontext g bereitstellt, den wir uns als ein Zeichenblatt vorstellen können, das einen Stift, einen Pinsel, ein Textwerkzeug usw. enthält. paint(graphics g) Die Methoden werden beim Start des Applets automatisch aufgerufen. Wir erhalten damit das Gerüst eines Applets: import java.awt.*; import java.applet.*; public class Applet1 extends Applet public void init() // z.b. Initialisierungen public void start() // z.b. Hintergrund neu zeichnen public void paint(graphics g) // Grafikbefehle public void stop() // braucht man nur selten Kommentare kann man in Java mit einem Doppelstrich (//) einleiten. Der restliche Text der Zeile wird dann vom Java-Übersetzer überlesen.

18 Eckart Modrow Java-Applets mit JBuilder 9 S (einige) Grafikbefehle clearrect(int,int,int,int) draw3drect(int,int,int,int,boolean) drawarc(int,int,int,int,int,int) drawline(int,int,int,int) drawoval(int,int,int,int) drawpolygon(int[],int[],int) drawrect(int,int,int,int) drawroundrect(int,int,int,int,int,int) drawstring(string,int,int) fill3drect(int,int,int,int,boolean) fillarc(int,int,int,int,int,int) filloval(int,int,int,int) fillpolygon(int[],int[],int) fillrect(int,int,int,int) fillroundrect(int,int,int,int,int,int) setcolor(color) setxormode(color) setpaintmode(color) löscht ein Rechteck zeichnet ein Rechteck zeichnet einen Kreisbogen zeichnet eine Linie zeichnet eine Ellipse zeichnet ein Polygon zeichnet ein Rechteck zeichnet ein abgerundetes Rechteck zeichnet einen Text zeichnet ein gefülltes Rechteck zeichnet einen gefüllten Kreisbogen zeichnet eine gefüllte Ellipse zeichnet ein gefülltes Polygon zeichnet ein gefülltes Rechteck zeichnet ein gefülltes abger. Rechteck setzt die Zeichenfarbe setzt den invertierenden Zeichenmodus setzt den normalen Zeichenmodus 10. Das Hilfesystem Die genaue Arbeitsweise und die Bedeutung z.b. der Parameter erhält man durch das Hilfesystem des JBuilders. Man setzt dazu den Cursor im Editor auf einen Befehl und drückt die F1-Taste. Geschieht das z. B. bei drawline, so erhält man

19 Eckart Modrow Java-Applets mit JBuilder 9 S. 19 Ganz oben im Fenster findet man dann eine Übersicht über die Klasse, zu der die Methode gehört sowie weitere Angaben. Ausführliche Hilfen Beispiele etc. erhält man im Hilfesystem und den Tutorials.

20 Eckart Modrow Java-Applets mit JBuilder 9 S Ein erstes Beispiel Wir wollen Zufallsrechtecke mit Zufallsfarben auf den Bildschirm zaubern. Dazu bestimmen wir jeweils die obere linke Ecke eines Rechtecks, seine Breite und seine Höhe durch (geeignete) Zufallszahlen. Die erhalten wir durch eine nette Bitte ans Math-Objekt, uns solche zu liefern: Math.random(); Die erhaltenen Zahlen liegen zwischen Null und Eins. Wir strecken deshalb zuerst den Zahlenbereich mit einem Faktor m und erhalten Zufallszahlen zwischen Null und m, danach bitten wir erneut das Math-Objekt, das Ergebnis zu runden: Math.round(Math.random()*m); Da das Ergebnis nicht unbedingt eine ganze Zahl vom Typ int sein muss, erzwingen wir eine entsprechende Typwandlung (type-casting), indem wir die Anweisung (int) voranstellen. (int)math.round(math.random()*m); Wenn wir mehrmals Zufallszahlen dieser Art erzeigen wollen, dann stellen wir am besten eine entsprechende Funktion bereit, die solche Zahlen berechnen. Der Rückgabewert der Funktion ist int. Mit return definieren wir diesen Wert. public int zz(int m) return (int)math.round(math.random()*m); Variable müssen in Java zusammen mit ihrem Wert vereinbart werden, bevor man sie benutzen kann. Für unsere Rechtecke benötigen wir vier ganze Zahlen x, y, b und h, die die obere linke Ecke sowie Breite und Höhe des Rechtecks beschreiben. Weil wir noch eine Zufallsfarbe bestimmen wollen, vereinbaren wir diese gleich mit. int x,y,b,h; Color c; Allgemein muss eine Variablenvereinbarung der folgenden Syntax gehorchen: Variablentyp Variablenname ;, = Wert

21 Eckart Modrow Java-Applets mit JBuilder 9 S. 21 Als Typen stehen Zahlen (int, double, long,...), Wahrheitswerte (boolean), Zeichenketten (String), Farben (Color) und weitere Klassen zur Verfügung. Die Vorgabewerte müssen natürlich dem Datentyp der Variablen entsprechen. In unserem Programm wollen wir jeweils 10 Zufallsrechtecke zeichnen. Da hierfür immer die gleichen Vorgänge (Zufallszahlen und Farben bestimmen, Rechtecke zeichnen,...) erforderlich sind, packen wir diese in eine Zählschleife, die dafür sorgt, dass der Schleifenkörper so oft ausgeführt wird, wie der Schleifenkopf angibt. Die Zählvariable i erhält anfangs den Wert 0. for (int i=0;i<max;i++) Die Schleife wird ausgeführt, solange i kleiner als max ist (Abbruchbedingung). Nach jedem Durchlauf wird i um 1 erhöht.... Allgemein muss eine Zählschleife der folgenden Syntax gehorchen: for ( Initialisierung ; Abbruchbedingung ; Aktualisierung ) Befehle Im Initialisierungsteil werden Variable vereinbart und Anfangswerte gesetzt. In der Abbruchbedingung wird vereinbart, unter welchen Bedingungen die Schleife weiter ausgeführt werden soll. Im Aktualisierungsteil werden die Werte der Variablen verändert. Innerhalb der Schleife basteln wir in unserem Programm aus den Farbwerten Rot, Grün und Blau im RGB-System eine Zufallsfarbe zusammen, mit der wir die Rechteckfläche zeichnen. Dann wird noch ein etwas breiterer weißer Rand erzeugt. import java.awt.*; import java.applet.*; public class Mondrian extends Applet int max=10; //Anzahl der Rechtecke eine Variable public int zz(int m) return (int)math.round(math.random()*m); public void paint(graphics g) int x,y,b,h; Color c; for (int i=0;i<max;i++) x = zz(50)+10; eine selbst geschriebene Funktion, die aus der Mathematikbibliothek Math die Methoden round() und random() benutzt. Farbe aus Zufallszahlen zusammenbasteln

22 Eckart Modrow Java-Applets mit JBuilder 9 S. 22 y = zz(30)+10; b = zz(600-x-20)+10; h = zz(400-y-20)+10; c = new Color(zz(255),zz(255),zz(255)); g.setcolor(c); g.fillrect(x,y,b,h); g.setcolor(color.white); g.drawrect(x,y,b,h); g.drawrect(x+1,y+1,b-2,h-2); g.drawrect(x+2,y+2,b-4,h-4); Rechteck mit Rand zeichnen

23 12. Aufgaben Virtuelle Lehrerweiterbildung Informatik in Niedersachsen Eckart Modrow Java-Applets mit JBuilder 9 S a: Erzeugen Sie Zufallsrechtecke auf dem Bildschirm. Sie können das Programm mehrfach ausführen, indem Sie Aktualisieren im Browser anklicken. b: Sorgen Sie dafür, dass die Rechtecke farbig werde. c: Wählen Sie die Zufallsfarben geschmackvoll, also nicht beliebig, sondern gezielt. Sie könnten z.b. Farben überwiegend aus dem Bereich grün-blau wählen, mit gelegentlichen gelben Ausrutschern. 2. a: Erzeugen Sie gefüllte Zufallsrechtecke auf dem Bildschirm. Informieren Sie sich dazu über die Methode SetXORMode() des Graphics-Objekts. b: Sorgen Sie dafür, dass die Rechtecke farbig werden. c: Wählen Sie wiederum geschmackvolle Zufallsfarben (s. Aufgabe 1.c). d: Entsteht in Ihrem Programm eine Gewichtung der Zufallsrechtecke wie in den nebenstehenden Beispielen? ( Kleinere Strukturen unten-rechts. ) Wie kommt das? Kann man den Effekt gezielt erzeugen? Kann man andere Gewichtungen erzielen? 3. a: Informieren Sie sich im Hilfesystem über die Methode fillarc() des Graphics- Objekts. Erzeugen Sie eine Grafik ähnlich der nebenstehenden mit Hilfe dieser Methode. b: Wechseln Sie bei den Figuren (zufallsgesteuert?) zwischen Rechtecken, Ellipsen, Polygonen,... c: Versuchen Sie es einmal mit Zufallstexten, also Texten, die zufällig über den Bildschirm verteilt werden. Informieren Sie sich im Hilfesystem über die Methode drawstring() des Graphics-Objekts.