Applets und HTML. Martin Wirsing. Exkurs: Noch einmal Object. in Zusammenarbeit mit Matthias Hölzl, Nora Koch

Transkript

1 Applets und HTML Martin Wirsing in Zusammenarbeit mit Matthias Hölzl, Nora Koch 12/03 Exkurs: Noch einmal Object 2 Achtung: Die Methode equals der Klasse Object kann unterschiedlich implementiert werden: In der Klasse Object werden die Objektreferenzen verglichen. In der Klasse String werden die Attributwerte der Instanzen, d.h. die Zeichenketten, verglichen. 1

2 Exkurs: Noch einmal Object 3 Object String tostring() boolean equals(object o)... n Vergleich zweier Objekte Achtung: Die Methode equals der Klasse Object kann unterschiedlich implementiert werden: In der Klasse Object werden die Objektreferenzen verglichen. In der Klasse String werden die Attributwerte der Instanzen, d.h. die Zeichenketten, verglichen. equals für Instanzen von Object Für Instanzen der Klasse Object gilt: o1.equal(o2) vergleicht die Objektreferenzen von o1 und o2. 4 Betrachte zwei neue Instanzen Object o1 = new Object(); Object o2 = new Object(); Dann gilt: :Object o1 o2 o1.equals(o2) == false :Object 2

3 equals für Instanzen von String Für Instanzen der Klasse String gilt: str1.equals(str2) vergleicht die Zeichenketten von str1 und str2. 5 Betrachte zwei neue Instanzen String str1 = new String(); String str2 = new String(); Dann gilt: :String str1 str2 str1.equals(str2) == true :String equals für Instanzen von String Für Instanzen der Klasse String gilt: str1.equals(str2) vergleicht die Zeichenketten von str1 und str2. 6 Betrachte zwei Instanzen String str1 = abc ; String str2 = abc ; Dann gilt ebenso: :String Siehe die Klasse EqualsTest abc str1 str2 str1.equals(str2) == true :String abc 3

4 Ziele der Vorlesung 7 Lernen, einfache HTML-Programme zu schreiben Lernen, einfache Applets zu schreiben Graphische Elemente, wie Linien und Ellipsen, anzeigen lernen Einführung in HTML 8 Die grundliegende Sprache zum Verfassen von Web-Seiten ist HTML ( Hypertext Markup Language ). HTML ist eine klammerorientierte Sprache, bei der spezielle Formen durch Marken geklammert werden. Mit HTML wird die logische Organisation eines Dokuments spezifiziert, die genaue Darstellung der markierten Dokument -Elemente wird dem Browser überlassen. 4

5 Einführung in HTML 9 HTML ist eine Instanz der Sprache SGML ( Standard Generalized Markup Language ), des Standards für die Beschreibung von Markup-Sprachen. Die DTD ( Document Type Definition ) von HTML ist mit SGML geschrieben. HTML wurde um 1990 von Tim Berners -Lee am CERN entwickelt. Die heutige Version von HTML ist 4.01, die letzte Version von HTML. In Zukunft wird HTML durch XHTML ( extensible Hypertext Markup Language ) ersetzt werden. XHTML ist sehr ähnlich zu HTML, allerdings werden alle Marken wie im Folgenden mit kleinen Buchstaben geschrieben. Eine weitere heute wichtige Markup-Sprache ist XML ( extensible Markup Language ), eine Sprache, die fast alle nützlichen Konzepte von HTML und SGML bietet. Einführung in HTML 10 In Hypertext Elementen kann man Verweise auf beliebige Adressen im Netz machen. Dazu verwendet man global eindeutige Adressen, so genannte URLs ( Uniform Resource Locator ) Syntax: scheme://host.domain/path/filename Beispiele: file:///c:/java/halloapp/halloapplet.html 5

6 Einführung in HTML 11 Ein minimales HTML-Dokument hat folgende Form: <html> <head> <title> Ein einfaches HTML-Beispiel </title> </head> Überschrift Stufe1 (6 Stufen möglich) <body> <h1> HTML ist einfach zu lernen </h1> Jedes HTML-Dokument besteht aus einem kopf und einem rumpf In den Rumpf können jaya-applets eingebettet sein. </body> </html> Kodierung für Umlaut ö Kopf, enthält den Titel, der nicht Teil des Texts ist. Titel wird z.b. im Lesezeichen angezeigt Absatz ( paragraph ) Fettdruck ( bold ) Aufbau eines HTML-Dokuments Eine Formatierinformation in HTML heißt Marke (engl. tag) und wird durch spitze Klammern gekennzeichnet. ist Marke zur Kenzeichnung eines kursiv geschriebenen Texts. 12 Marken umschließen den zu formatierenden Text wie Klammern mit einer Startmarkierung <m> und einer Endmarkierung </m>. Hans ist klein. steht für Hans ist klein. Die Markierungen können geschachtelt werden. Hans ist klein. steht für einen Absatz, in dem Hans kursiv geschrieben ist. Jedes HTML-Dokument besteht aus einem Kopf und einem Rumpf. Der Kopf enthält den Titel des Dokuments, der nicht Teil des Texts ist. Der Titel wird z.b. im Lesezeichen angezeigt. 6

7 Spezielle HTML-Marken ( tags ) 13 html Dieses Element beginnt und beendet ein HTML-Programm. head Der Kopf identifiziert den ersten Teil des Dokuments, der den Titel enthält. title Der Titel enthält den Dokumententitel und identifiziert das Dokument in einem globalen Kontext. Der Titel wird meist oben im Browser-Fenster (oder im Lesezeichen) angezeigt und ist nicht Teil des Texts. Der Titel sollte 64 Zeichen nicht überschreiten. body Der Rumpf enthält den Text der HTML-Seite. Die folgenden Marken erscheinen im body. Headings hi (i=1,...,6) Diese Marke zeichnet Überschriften aus, in 6 Stufen. Spezielle HTML-Marken ( tags ) 14 Paragraph p Ein Absatz ( paragraph ) beginnt mit und endet mit . Leerstellen, Zeilenumbruch etc. spielen in HTML keine Rolle. Mit Hilfe des Attributs align kann der Text zentriert oder rechtsbündig geschrieben werden. bla, bla ergibt: bla, bla 7

8 Spezielle HTML-Marken ( tags ) 15 Aufzählungen Aufzählungen (ohne Nummern) starten mit <ul> und enden mit </ul>. Die Aufzählungspunkte werden mit <li> ( list item ) eingeleitet. <ul> <li> ein Rechteck <li> eine Ellipse </ul> ergibt: - Rechteck - eine Ellipse Numerische Listen starten mit <o1> ( Ordered List ) und enden mit <o1>. Spezielle HTML-Marken ( tags ) Schriftstile ( bold ) fett ( italics ) kursiv <tt> ( type-writer, monospaced) nicht-proportionale Schrift 16 Umlaute Deutsche Umlaute werden durch &_uml; kodiert, wobei f ür _ der passende Vokal eingesetzt wird. Beispiele: ä steht f ür ä ü steht f ür ü Ä steht f ür Ä Ü steht f ür Ü Vorformatierter Text Durch die Marke <pre>... </pre> wird angezeigt, daß die Formatierung des eingeschlossenen Texts durch den Browser nicht verändert werden soll. Dies ist sinnvoll z.b. bei der Darstellung von Programmen. 8

9 Spezielle HTML-Marken ( tags ) Anker Ein Anker markiert den Beginn oder das Ende eines Hypertext-Links, in der Form <a Attribute>... text... </a> 17 Beispiele: <a href= > bla bla </a> Der String bla bla ist ein Hypertext-Link zur Datei file.html der angegebenen URL. <a href= file:image.jpeg > <img src= icon.gif > </a> Das (kleine) Icon icon.gif ist ein Hypertext-Link zu dem Bild image.jpeg (im gleichen Verzeichnis) minihtml1.html Spezielle HTML-Marken ( tags ) 18 Link Ein link ist ein Verweis im Kopf ( head ) auf andere Webseiten. <head> <link href= file1.html rel= next > <link href= /cgi-reg/gloss.html rel= glossary > </head> href und rel sind Attribute, wobei href auf eine Datei oder Seite verweist und rel den sichtbaren Namen angibt. 9

10 Spezielle HTML-Marken ( tags ) 19 Applet Mit <applet> und </applet> kann ein Applet in die HTML-Seite eingebunden werden in der Form <applet code= HalloApplet.class width=300 height=100> </applet> In code gibt man die passende übersetzte Applet-Datei an; die Attribute width, height beschreiben die Breite und die Tiefe des Platzes f ür das Applet (in Pixeln). Außerdem können Parameter übergeben werden. Ein einfaches Applet 20 Applets sind kleine Anwendungsprogramme, auf die über einen Internetserver zugegriffen wird. Applets werden über das Netz transportiert, automatisch installiert und laufen dann als Teil eines Web-Dokuments ab. Wenn ein Applet bei einem Client ankommt, hat es nur beschränkten Zugriff auf Ressourcen, so daß es zwar beliebige Multimedia-Benutzerschnittstellen erzeugen oder komplexe Berechnungen ausführen kann. Es kann aber keine Viren einschleusen oder die Datenintegrität brechen. Ein Applet ist ein spezielles Programm, das von der Klasse Applet (aus awt) erbt. Ein Applet kann dynamisch in einem Browser ausgeführt werden, und zwar dadurch, daß eine HTML-Seite geladen wird, die das Applet enthält. Außerdem benützt (fast) jedes Applet den Abstract Windowing Toolkit, der eine Menge von einfach benutzbaren Funktionen für graphische Benutzeroberflächen anbietet. In Java 2 wird awt teilweise von Swing abgelöst. 10

11 21 Wichtige Klassen des Abstract Windowing Toolkit Component für Objekte mit Position, Größe, die auf den Bildschirm gemalt werden können. Der linke, obere Eckpunkt hat die Koordinaten (0,0): (0,0) n x y 22 Wichtige Klassen des Abstract Windowing Toolkit Graphics Basisklasse für alle Anwendungen, die auf Komponenten zeichnen. Graphics drawstring(string str, int x, int y) drawline (int x1, int y1, int x2, int y2 drawoval (int x, int y, int width, int height) drawrect (int x, inty, int width, int height) filloval (int x, int y, int widht, int height) fillrect (int x, int y, int widht, int height) setcolor(color c) setfont(font font) Color für Farben in RGB-Format ( Rot-Grün-Blau-Format ) Font zur Darstellung von Schriftarten 11

12 Einfaches Applet Schema 23 Ein einfaches Applet hat die Form: import java.awt.*; import java.applet.applet; public class Name extends Applet { public void paint(graphics g) {... } } Einfaches Applet Schema 24 Die Methode paint wird jedesmal aufgerufen, wenn das Applet wiederhergestellt werden muß. import java.awt.*; import java.applet.applet; public class HalloApplet extends Applet { public void paint(graphics g) { g.drawstring( Hallo, hallo!, 20, 20); // Die letzten zwei Parameter sind Basispunkt-Koordinaten. // Der Basispunkt ist der linke untere Punkt des Beginns // des Strings. } } 12

13 Einfaches Applet Schema 25 Das folgende HTML-Programm halloapplet.html führt das Applet aus <html> <body> <applet code= HalloApplet.class width=200 height=40> </applet> </body> </html> Um es zu starten, gibt es zwei Möglichkeiten: Man ruft das html-programm in einem Browser auf; z.b. durch Anklicken der Datei halloapplet.html oder Man ruft den Appletviewer auf: C: appletviewer halloapplet.html Geometrische Formen, Farben und Schriften 26 Ellipsen zeichnen in Graphics g.drawoval(x,y,width,height) Eine Ellipse hat die Form (x,y) n width height 13

14 Geometrische Formen, Farben und Schriften 27 Farbenwerden nach dem RGB-Modell definiert, bei dem jede Farbe aus ihrem Rot-, Grünund Blau-Anteil gemischt wird. Die Anteile werden in float-werten zwischen 0.0f und 1.0f angegeben. In Tabelle stehen einige Standardfarben. Farbe RGB-Wert Color.black 0.0f, 0.0f, 0.0f Color.blue 0.0f, 0.0f, 1.0f Color.cyan 0.0f, 1.0f, 1.0f Color.gray 0.5f, 0.5f, 0.5f Color.darkGray 0.25f, 0.25f, 0.25 Color.lightGray 0.75f, 0.75f, 0.75 Color.green 0.0f, 1.0f, 0.0f Color.magenta 1.0f, 0.0f, 1.0f Color.orange 1.0f, 0.8f, 0.0f Color.pink 1.0f, 0.7f, 0.7f Color.red 1.0f, 0.0f, 0.0f Color.white 1.0f, 1.0f, 1.0f Color.yellow 1.0f, 1.0, 0.0f Geometrische Formen, Farben und Schriften 28 Schriftarten werden in der Klasse Font durch 3 Größen spezifiziert: Namen (logischer Schriftname) Stil (Font.PLAIN, Font.Bold, Font.ITALIC) Größe (in Punkten, wie 12, 24, 36) Name Beispiel Beschreibung Serif The quick brown fox Eine Schriftart mit Serifen wie z.b. Times Roman SansSerif The quick brown fox Eine Schrifart ohne Serifen wie z.b. Helvetica Monospaced The quick brown fox Eine Schriftart, bei der alle Buchstaben die gleiche Breite haben z.b. Courier Beispiel für die Deklaration eines Font und das Setzen dieses Fonts f ür ein Textobjekt: Font bold18=new Font ( Monospaced, Font.Bold, 18); g.setfont (bold18); 14

15 Applet mit einfacher Graphikausgabe 29 import java.applet.applet; import java.awt.graphics; import java.awt.font; import java.awt.color; public class RectangleApplet1_1 extends Applet { public void paint(graphics g) { // Konstruiere ein Rechteck mit gelbem Rand und //gelber Fuellung g.setcolor(color.yellow); g.drawrect(10, 20, 400, 200); g.setcolor(color.yellow); g.fillrect(10, 20, 400, 200); Applet mit einfacher Graphikausgabe 30 Fortsetzung des Beispiels: // Zeichne ein rote Diagonale g.setcolor(color.red); g.drawline(10, 220, 410, 20); // Zeichne eine Ellipse mit rotem Rand g.setcolor(color.red); g.drawoval(100, 150, 400, 200); // Fuelle die Ellipse mit blauer Farbe g.setcolor(color.blue); g.filloval(100, 150, 400, 200); // Schreibe einen Text in das Rechteck g.setcolor(color.black); String message = ein Rechteck ; g.drawstring(message, 50, 100); 15

16 Applet mit einfacher Graphikausgabe 31 Fortsetzung des Beispiels: } } // Schreibe einen Text in die Ellipse Font Bold18 = new Font( Monospaced, Font.BOLD, 18); g.setfont(bold18); g.setcolor(color.black); message = eine Ellipse ; g.drawstring(message, 200, 250); Und noch ein Applet import java.applet.applet; import java.awt.graphics; import java.awt.font; import java.awt.color; public class CandleApplet extends Applet { public void paint (Graphics g) { //Konstruiere ein hohes Rechteck mit roter Füllung g.setcolor(color.red); g.drawrect(100, 100, 40, 200); g.fillrect(100, 100, 40, 200); 16

17 ... und noch ein Applet Fortsetzung des Beispiels //Zeichne eine gelbe hohe Ellipse ueber dem Rechteck g.setcolor(color.yellow); g.drawoval(110, 50, 20, 50); 33 } } //Fülle die Ellipse mit gelber Farbe g.filloval(110, 50, 20, 50); //Schreibe einen Text neben das Rechteck Font Bold18 = new Font("Monospaced", Font.BOLD, 18); g.setfont(bold18); g.setcolor(color.black); String message = "Fröhliche Weihnachten!"; g.drawstring(message, 180, 150); Zusammenfassung 34 Applets werden in Webseiten eingebettet. Um ein Applet auszuführen, wird eine HTML-Seite mit einer Applet-Marke programmiert. Graphische Anwendungen in einem Applet werden mit der paint-methode aus Component geschrieben. Diese Methode wird immer dann aufgerufen, wenn das Applet aufgefrischt wird. 17