Java - Entwicklung

Dynamische Webseiten:
Damit bezeichnet man Webseiten, die Layout und Inhalt - im Gegensatz zu fix programmierten "statischen" Seiten - variabel ändern können. Eine Standardmethode dazu ist der Einsatz von JavaScript mit der Methode document.write();

Das tag <script></script> begrenzt ein script - hier der type JavaScript. Mit <noscript></noscript> können sie eine Variante für Browser dazufügen, die JavaScript abgeschaltet haben, oder gar nicht beherrschen.

Die HTML-Kommentar-Begrenzer  verbergen den script-Inhalt vor Alt-Browsern, die das <script>-tag nicht verstehen.

Mit document.write() schreiben sie (variabel programmierbaren) HTML-Code in das Dokument - an genau jener Stelle, an der sich das script befindet. Sie erzeugen damit nicht nur Texte (Daten), sondern auch tags, wie z.B. document.write("<div>");. Als Argumente dienen direkt eingesetzte Text-strings, aber auch string-Variable:
document.write("Monitor-Breite = "+screen.width);

Testseite.

Sie verwenden einen
<script type="text/javascript">

</script>
Monitor
<noscript>
unbekannter Größe.
</noscript>

Eine Möglichkeit, Daten dynamisch an ein Java-Applet zu übergeben, ist die Programmierung des <param>-tags in Javascript:

Da HTML-Code zum Glück aus Klartext aufgebaut ist, kann die Übergabe von Parametern an ein Applet dynamisch programmiert werden. Der eigentliche Wert des jeweiligen Parameters wird in JavaScript programmiert - abhängig von Umgebungs-Variablen oder von der Interaktion der User.

Testseite.

Statischer HTML-Code:
<noscript>
<applet code=neonbar.class name=neonbar width=500 height=6>
<param name=ScrollSpeed value=8>
<param name=ColorSpeed value=7>
</applet>
</noscript>
Dynamischer HTML-Code:
<script type="text/javascript">
<!--
var scrsp = Math.floor(screen.width/100);
var colsp = Math.floor(screen.width/123);

document.write("<applet code=neonbar.class name=neonbar width=500 height=6>");

document.write("<param name=ScrollSpeed value="+scrsp+">");

document.write("<param name=ColorSpeed value="+colsp+">");

document.write("</applet>");
//-->
</script>

Struktur eines Standard-Applets:

import - damit importieren sie alle benötigten extern definierten Klassen, sowohl aus den Standard Java libraries als auch der selbst definierten Klassen.
applet enthält alle für ein Applet benötigten Klassen.
awt (Abstract Window Toolkit) enthält hochintegrierte Klassen, z.B. für Fenster, Texte (Schrift, Größe, Farbe...), einfache Grafik, etc...
Mit dem * importieren sie alle Klassen eines Pakets.

public class myApplet - damit definieren sie die öffentlich zugängliche Klasse "myApplet". Java unterscheidet (!) zwischen großen und kleinen Buchstaben. Der Name der definierten Klasse muss gleich lauten wie der Name der Datei - diesem Falle myApplet.java. Verwenden sie für Namen keine Umlaute oder Sonderzeichen.

extends Applet - damit erweitern sie die importierte Klasse "Applet". Ihre neue Klasse "myApplet" erbst von "Applet" alle Eigenschaften und Methoden, dazu kommen ihre eigenen Definitionen.

String - am Anfang definieren sie alle innerhalb ihrer Klasse benötigten Objekte. Hier wird das (hier einzige) Objekt "text1" als Mitglied der Klasse "String" definiert und gleichzeitig mit "Nasowas!" initialisiert.

Methode init() wird ausgeführt, wenn das Applet erstmals (von der Webseite) geladen und initialisiert wird.

Methode start() wird (immer dann) ausgeführt, wenn die Webseite sichtbar wird, erstmals unmittelbar nach init().

Methode stop() wird (immer dann) ausgeführt, wenn die Webseite unsichtbar wird (oder wenn der Browser beendet wird).

Methode destroy() wird ausgeführt, wenn der Browser beendet wird.

Objekt gr wird als Mitglied der Klasse "Graphics" definiert. Dann wird die Methode drawString() darauf angewendet. Ihre Parameter: der zu "zeichnende" Text, X-Position (von links), Y-Position (von oben).

Testseite.

import java.applet.*;
import java.awt.*;

public class myApplet extends Applet {
String text1=new String ("Nasowas!");

public void init() { }
public void start() { }
public void stop() { }
public void destroy() { }
public void paint (Graphics gr) {
gr.drawString(text1,50,20);
}
}

Sie benötigen nicht immer alle Standard-Methoden, es schadet jedoch nichts, sie anfänglich auch als leere Methoden mitzuführen.

Übergabe von Parametern:
Mit dem tag <param...> übergeben sie Daten von HTML an ein Java-Applet. Dieser Vorgang (Die Auswahl des Applets, die Übergabe der Parameter...) kann mit Hilfe von JavaScript dynamisch programmiert werden. Hier sehen sie, wie die Parameter vom Applet "abgeholt" und verwertet werden:

HTML:

Testseite.

Java:

/* Applet CommTest */
import java.applet.*;
import java.awt.*;

public class CommTest extends Applet
{

String mytext;

public void init()

{

mytext=getParameter("text1");

if (mytext==null){mytext="Von HTML wurde kein Text an Java übergeben";}

}

public void paint (Graphics gr)

{

gr.drawString("Applet CommTest - Version 1.0",50,20);

gr.drawString("Übergabetext = "+mytext,10,40);

}
}

Methode getParameter(); übergibt Daten von HTML (Applet-Aufruf) an ein Applet. Beachten sie die Möglichkeit erwarteter, jedoch fehlender Parameter sowie von falsch oder fehlerhaft übergegebenen Daten. Gute Applets unterwerfen übergebene Daten vor der Verwendung einer "Eingangs-Kontrolle" und setzen notfalls "default"-Werte ein.

Kombinieren sie diese Technik mit der Dynamik von JavaScript: Übergeben sie "programmierte" Daten an ein Applet.

Formatierung
Zur Abrundung einige der vielen Möglichkeiten, ihr Applet attraktiv zu formatieren:

Setzt die Hintergrund-Farbe des Applets.

public void init() {

setBackground(Color.yellow);
}

JavaScript hat Zugriff auf document.bgColor. Damit können sie den Hintergrund eines Applets dynamisch an den der Webseite anpassen.

Setzt die Vordergrund-Farbe = Schriftfarbe.

public void init() {

setForeground(Color.blue);
}

Die Klasse Color enthält einige fixe Werte: black, blue, cyan, darkGrey, gray, green, lightGrey, magenta, orange, pink, red, white, yellow
Die Klasse Color ist in java.awt enthalten.

Jede andere Farbe kann direkt aus den RGB-Daten erzeugt werden:

Color myColor=new Color(123, 234, 56);

setBackground(myColor);

Besorgen sie sich eines der unzähligen Color-Tools, um Farbwerte vorhandener Objekte (z.B. direkt vom Bildschirm) zu entnehmen, deren RGB-Anteile zu analysieren, und diese dann zur (dynamischen) Definition neuer Farben zu verwenden. An Stelle von Zahlen (123,234,56) können sie auch Variable verwenden (r.g.b).

Damit ändern sie den aktuellen Zeichensatz.

Font mySchrift=new Font ("SansSerif", Font.PLAIN, 20);

setFont(mySchrift);

Font ist in java.awt enthalten. Variable: SchriftArt, Schnitt, Größe. Vordefinierte Schnitte: Font.PLAIN, Font.BOLD, Font.ITALIC, Font.BOLD + Font.ITALIC
Spätere Erweiterung: prüfen sie vor der Verwendung eines Fonts seine Verfügbarkeit im AnwenderInnen-System und setzen sie notfalls default-Werte ein. Dazu verwenden sie die Klasse GraphicsEnvironment von java.awt.

Einige Zeichen-Funktionen von java.awt:

public class myPaint extends Applet {

Graphics myZeichnung;

int x1, y1;

public mydraw(int x2, int y2) {

myZeichnung=getGraphics();

myZeichnung.drawLine(x1,y1,x2,y2);

x1=x2; x2+=10;

y1=y2; y2+=10;

}
}

drawLine(int x1, int y1, int x2, int y2) zieht eine Linie von (x1,y1) nach (x2,y2)
drawString (String s, int x, int y) zeichnet einen Text.
drawRect (int x, int y, int width, int height) zeichnet ein Rechteck.
fillRect (int x, int y, int width, int height) zeichnet gefüllte Rechtecke.
drawOval (int x, int y, int width, int height) zeichnet Kreise oder Ovale.
fillOval (int x, int y, int width, int height) zeichnet gefüllte Kreise oder Ovale.

Formulare: Stellen eine einfache und bewährte Methode dar, dynamische Elemente in eine Webseite einzubauen. Sie verfügen über Objekte (Textfelder, Buttons...), die sowohl von den Usern als auch durch JavaScript bedient (verändert) werden können.	<form name="testform"> Mail-Adresse: <br> <input type=text name=email value="" size=75><br><br> <input type=submit name=submit value="Absenden" onClick="mysubmit()"> </form>
Mit diesen scripts reagieren sie auf eine User-Eingabe: In diesem Beispiel wird ein Text (Mail-Adresse) eingegeben, überprüft, und das Resultat als Alarmfenster ausgegeben. Vergessen sie nicht, alle Objekte eines Formulars mit eindeutigen Namen zu versehen - unter diesen können sie die Objekte ansprechen. Testseite.	<script type="text/javascript"> <!-- var myok = 0; function mysubmit() { myok=1; mytext=document.testform.email.value; mylength=mytext.length; if (mylength<5) myaction1(); else if (mylength>30) myaction2(); else { myat=mytext.indexOf("@"); if(myat<1) {myaction3();} } if (myok) {myaction4()} } function myaction1() { alert("Ihre Eingabe ist zu kurz !"); myok=0; } function myaction2() { alert("Ihre Eingabe ist zu lang !"); myok=0; } function myaction3() { alert("Ihre Eingabe enthält kein @-Zeichen !"); myok=0; } function myaction4() { alert("Danke für ihre Eingabe"); } //--> </script>

Aufgaben: Programmieren sie die hier angeführten Projekte. Richten sie ihre Arbeits-Umgebung dazu ein, erzeugen sie dann möglichst rasch eine Vorversion. Speichern sie jede Version, testen und verbessern sie das Projekt. Während der Erzeugung neuer Versionen sollten sie stets eine zumindest halbwegs herzeigbare Version "in Sicherheit" haben. Was zählt, ist eine im Internet aufrufbare, funktionsfähige Lösung. Vergessen sie nicht, Quellcodes ebenfalls verfügbar zu machen (z.B. wie die source-Links auf den Test-Beispielen dieser Seite).
Dynamische Webseite	Erzeugen sie eine Webseite, die je nach verwendetem Browser unterschiedliche Texte zeigt sowie die Farbe eines Objekts (body, div...) ändert. Hinweis: JavaScript-Methoden: navigator.appName, navigator.appVersion, navigator.platform... Demo für die dynamische Änderung von Farben u.a. style-Elementen.
Parameter-Übergabe	Geben sie einen Text und eine Zahl von einer Webseite an ein Applet weiter. Begrenzen sie die Zahl mit 0<zahl<11 und schreiben sie den Text in das Applet-Fenster. Der Text wird so oft wiederholt (Schleife), wie die Zahl angibt. Hinweis: Übergeben sie die Zahl als Text (Ziffern) und wandeln sie diesen in eine Zahl um: mynum=Integer.valueOf(mynumtxt).intValue();
Dynamische Parameter-Übergabe	Modifizieren sie das letzte Beispiel wie folgt: + Je nach Monitor-Größe wird ein Applet dynamisch variabler Größe eingefügt. Passen sie die Applet-Größe der Monitor-Größe sinnvoll an. + Als Text verwenden sie Name und Version des verwendeten Browsers (s.o.) + Die Wiederholungs-Zahl passen sie der Monitor-Größe sinnvoll an. Im Endeffekt erhalten sie eine Webseite, auf der ein zum Monitor passendes Applet-Fenster erscheint. Auf dieses wird eine Spalte von Texten (Browser-Name & Version) gezeichnet, die etwa 3/4 der angezeigten Fensterhöhe füllt.
User-Interaktion	+ Webseite: Erzeugen sie eine Webseite mit einem Formular. Dort wird ein Text sowie eine Zahl eingegeben. Bringen sie folgende Buttons an: Zurücksetzen (reset), Löschen (clear), Absenden (submit). + JavaScript: Kontrollieren sie, ob die Länge des Eingabe-Textes ihren Bedingungen entspricht (z.B. 10...30 Zeichen Länge), sowie ob die Eingabe-Zahl im gültigen Bereich liegt (z.B. 1...20). + Zeigen sie als Ergebnis (Feedback) ein Alarm-Fenster an (alert), in welchem der überprüfte Eingabe-Text so oft wiederholt wird, wie es der Eingabe-Zahl entspricht.
Ausblick	Die logische Weiterentwicklung ist die Übergabe von User-Daten an ein Applet und die Reaktion des Applets darauf. So können sie eine Kommunikations-Schleife in Gang setzen: + User sieht das Applet im Anfangszustand (z.B. eine Grafik). + User reagiert mit Eingabe. + Applet erhält die Daten und reagiert (erzeugt eine neue Grafik). + User sieht das geänderte Applet.