Java als DOM-Objekt

Möglichkeiten für dynamische Webseiten

Jede Webseite besteht aus einem Objekt-Baum (tree) nach dem DOM (Document Object Model)-Modell. Auch ein darin enthaltenes Java-Applet ist ein DOM-Element.

Hier werden einige Möglichkeiten demonstriert, die sich für die dynamische Gestaltung von Webseiten ergeben.
Derzeit funktionieren einige, jedoch noch nicht alle Beispiele, je nach Browser und Version.

Demo:

Java	Starker Kaffee für EntwicklerInnen
Demo	Java-Applets auf Befehl laden oder löschen.
<applet>	Java-Applets als <embed>-Element behandeln
<object>	Java-Applets als <object>-Element behandeln
Löschen	Löschen aller childNodes eines DOM-Elements
Verzögerung	Verzögertes Laden von Java-Applets

Laden von Java-Applets 'auf Befehl'
DOM-Methoden bieten die Möglichkeit, beliebige Elemente einer Webseite live zu erzeugen, zu ändern oder zu löschen. Das gilt auch für Java-Applets.	Hier wird in 9 Sekunden oder auf ihren Befehl ein Java-Applet geladen.
Live--Javascript: Klicken sie diese Links zum Laden eines Applets als DOM-Objekt: ♦ Applet laden: Farbbalken, Rubik-Würfel ♦ Applet-Bereich löschen ♦ Diese Seite neu laden	Wenn das Applet nicht angezeigt wird, dann sollten sie testen, ob ihr Browser überhaupt Java beherrscht.
Details zum Laden und Löschen von Java-Applets finden sie weiter unten auf dieser Seite.

Java-Applet als <applet>
Hier wird gezeigt, wie man ein Applet als <applet>-Element an einen DOM-Knoten anhängt, in diesem Beispiel an das Element <div id="jav1">, welches sich an einer beliebigen Stelle im <body> der Webseite befinden kann. Rechts der HTML-Code - Allerdings wird das <applet>-Element in diesem Beispiel erst mit Javascript erzeugt !	HTML-Code: leerer Knoten "jav1" (befindet sich real im anfangs gelben Feld unten) <div id="jav1"></div> Der gleiche Knoten mit Applet <div id="jav1"> <applet code="rubik.class" style="height:120px; width:120px;" ></applet> </div>
Zuerst wird der DOM-Knoten <div id="jav1"> mit getElementById adressiert und der Variablen njav zugewiesen. Das <applet>-Element wird mit createElement erzeugt und der Variablen napp zugewiesen. Nun werden die Attribute des <applet>-Elements erzeugt: Jedes Attribut (code, width, height) wird mit createAttributeNode erzeugt, sein Wert mit nodeValue zugewiesen. Danach wird der "fertige" Attribut-Knoten mit setAttributeNode an das <applet>-Element angehängt. Zuletzt wird das fertige <applet>-Element an das bestehende Element <div id="jav1"> angehängt - Damit wird das Java-Applet angezeigt. Funktioniert mit den meisten gängigen Browsern, evtl. Probleme mit Opera (testen). Wenn der adressierte DOM-Knoten <div id="jav1"> nicht leer ist, müssen anfangs seine childNodes gelöscht werden. Das wird hier mit Funktion childnodes_delete (s.u.) ausgeführt.	Javascript-Code: function java_applet(id,src,x,y) { // childnodes_delete(id); var njav=document.getElementById(id); var napp=document.createElement("applet"); var att=document.createAttribute("code"); att.nodeValue=src; napp.setAttributeNode(att); att=document.createAttribute("width"); att.nodeValue=x; napp.setAttributeNode(att); att=document.createAttribute("height"); att.nodeValue=y; napp.setAttributeNode(att); njav.appendChild(napp); }
Live--Javascript: Im anfangs gelben Feld rechts unterhalb befindet sich das Element <div id="jav1">. Sie können die gezeigten Funktionen mit diesen Links auslösen: <a href="javascript:java_applet('jav1','rubik.class',120,120)"> applet erzeugen </a> <a href="javascript:childnodes_delete('jav1')"> childNodes löschen </a>
Klicken sie die Links im Absatz oberhalb, um das Applet zu erzeugen oder zu löschen. Wenn das Java-Applet auf Befehl nicht angezeigt wird, dann sollten sie testen, ob ihr Browser überhaupt Java beherrscht.	Hier wird auf ihren Befehl ein Java-<applet> in das Element <div id="jav1"></div> geladen.

Java-Applet als <object>
Hier wird gezeigt, wie man ein Applet als <object>-Element an einen DOM-Knoten anhängt - In diesem Beispiel an das Element <div id="jav2">, welches sich an einer beliebigen Stelle im <body> der Webseite befinden kann. Rechts der HTML-Code - Allerdings wird das <object>-Element in diesem Beispiel erst mit Javascript erzeugt !	HTML-Code: leerer Knoten jav2 (befindet sich real im anfangs gelben Feld unten) <div id="jav2"></div> Der gleiche Knoten mit Applet <div id="jav2"> <object classid="java:test2.svg" codetype="application/java" width="120" height="120"> </object> </div>
Zuerst wird der DOM-Knoten <div id="jav2"> mit getElementById adressiert und der Variablen njav zugewiesen. Das <object>-Element wird mit createElement erzeugt und der Variablen nobj zugewiesen. Nun werden die Attribute des <object>-Elements erzeugt: Jedes Attribut wird mit createAttributeNode erzeugt, sein Wert mit nodeValue zugewiesen. Danach wird der "fertige" Attribut-Knoten mit setAttributeNode an das <object>-Element angehängt. Zuletzt wird das fertige <object>-Element an das bestehende Element <div id="jav2"> angehängt - Damit sollte das Applet angezeigt werden - Funktioniert mit Browsern der Mozilla / Firefox - Familie. M$IE funktioniert nicht, man muss dort das schon lange veraltete (deprecated) <applet> verwenden. Wenn der adressierte DOM-Knoten <div id="jav2"> nicht leer ist, müssen anfangs seine childNodes gelöscht werden. Das wird hier mit Funktion childnodes_delete (s.u.) ausgeführt.	Javascript-Code: function java_object(id,src,x,y) { // childnodes_delete(id); var njav=document.getElementById(id); var nobj=document.createElement("object"); var att=document.createAttribute("classid"); att.nodeValue="java:"+src; nobj.setAttributeNode(att); var att=document.createAttribute("codetype"); att.nodeValue="application/java"; nobj.setAttributeNode(att); att=document.createAttribute("width"); att.nodeValue=x; nobj.setAttributeNode(att); att=document.createAttribute("height"); att.nodeValue=y; nobj.setAttributeNode(att); njav.appendChild(nobj); }
Live--Javascript: Im anfangs gelben Feld rechts unterhalb befindet sich das Element <div id="jav2">. Sie können die gezeigten Funktionen mit diesen Links auslösen: <a href="javascript:java_object('jav2','rubik.class',120,120)"> object erzeugen </a> <a href="javascript:childnodes_delete('jav2')"> childNodes löschen </a>
Klicken sie die Links im Absatz oberhalb, um das Applet-Objekt zu erzeugen oder zu löschen. Wenn das Java-Applet nicht angezeigt wird, dann verwenden sie vermutlich M$IE (Fehler bei Java-Objekten) oder sie sollten testen, ob ihr Browser überhaupt Java beherrscht.	Hier wird auf ihren Befehl ein Java-<object> in das Element <div id="jav2"></div> geladen.

Löschen von DOM-Elementen
Rechts ein Javascript-Beispiel zum Löschen aller childNodes eines beliebigen DOM-Elements. Das Element wird hier durch seine id definiert, dazu sind jedoch auch andere Methoden möglich. Im Prinzip genügt die while-Schleife zur Entfernung aller childNodes. Der Einschluss in einen try-Block ignoriert allfällige Fehler, z.B. wenn der adressierte Knoten nicht existiert. Wenn sie den Kommentar vor dem alert entfernen, dann wird bei Bedarf die Fehlermeldung angezeigt.	Javascript-Code: function childnodes_delete(id) { try { var n=document.getElementById(id); while(n.childNodes.length>0) { n.removeChild(n.firstChild); } } catch(e) { // alert("Fehler "+e); } }
Der Aufruf der Funktion erfolgt z.B. aus einem anderen Javascript-Programm oder durch einen HTML-Link. Live--Test: Jedes der Beispiele weiter oben auf dieser Seite kann mit der Funktion gelöscht werden.	Aufruf aus Javascript: childnodes_delete("jav1"); Aufruf durch einen HTML-Link: <a href="javascript:childnodes_delete('jav1')> Element jav1 löschen </a>

Automatische Auslösung von DOM-Arbeiten
DOM-Methoden greifen auf Elemente (Knoten) der Webseite zu und lassen sich daher erst nach dem vollständigen Laden ausführen. Dafür eignet sich besonders das onLoad-Ereignis (event). Das onLoad-Attribut m <body>-Element verweist auf eine Javascript-Funktion (hier my_onload).	<html> <head> ... <script type="text/javascript"> function my_onload() { java_applet('jav1','tst.class',50,50); // andere Aufgaben ... } </script> </head> <body onload="my_onload()"> ... </body> </html>
Eine weitere Möglichkeit bietet das Timeout-Ereignis: setTimeout verweist auf eine Javascript-Funktion, welche nach der angegebenen Zeit in Millisekunden (hier: 1000ms = 1 s) ausgerufen wird.	Ausführung der Funktion java_applet 1 Sekunde (1000ms) nach dem Start der Funktion my_onload: function my_onload() { window.setTimeout("java_applet('jav1','tst.class',50,50)", 1000); }
Periodische Auslösung von Timeouts: Eine Funktion kann sich mit setTimeout auch selbst aufrufen.	function do_repeat() { // do something window.setTimeout("do_repeat()", 1000); }
♦ Details zu DOM, Javascript

Zum Inhaltsverzeichnis

> Entwicklung > Java