Dieses Tutorial soll dir zeigen, wie du das Java-Applet auf deiner Homepage einbinden kannst. Das Ergebnis dieses Tutorials liegt auch als "applet_starten.html" dem Java-Clienten bei.
Eine (X)HTML-Seite hat das folgende Grundgerüst:
<?xml version="1.0" encoding="ISO-8859-15" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>EasyChat3 für Java (Version 0.6)</title> <!-- Skripte --> <!-- Styles --> <!-- weitere Kopfdefinitionen --> </head> <body> <!-- Seiteninhalt --> </body> </html>
Im erste Schritt muß der folgende Java-Script Code in den Seitenkopf eingefügt werden (und ersetzt dabei den Kommentar <!-- Skripte -->):
<script type="text/javascript">//<![CDATA[ function Popup() { // Formularobjekt holen appletForm = window.document.getElementById("AppletForm"); // Chatname prüfen chatName = appletForm.ChatName.value.replace(/\s+$/,"").replace(/^\s+/,""); if (chatName.length == 0) { alert ("Kein Chatname eingegeben"); return false; } // Server und Port holen und trennen serverPort = appletForm.ServerPort.value; if (serverPort.indexOf(":") > 0) { server = serverPort.substr(0,serverPort.indexOf(":")); port = serverPort.substr(serverPort.indexOf(":")+1); } else { server = serverPort; port = 1000; // Standardport } // HTML-Kopf appletCode = '<html><head>'; appletCode += '<title>EasyChat3 für Java (Version 0.6)<' + '/title>'; appletCode += '<' + '/head><body style="margin:0;">'; // Applet-Tag und Angabe der Archive appletCode += '<applet archive="EC3Applet.jar" '; appletCode += 'code="ec3.client.applet.ColorApplet.class" '; appletCode += 'codebase="." width="100%" height="100%">'; appletCode += '<param name="cabbase" value="EC3Applet.cab" />'; // Applet-Parameter appletCode += '<param name="ChatName" value="' + appletForm.ChatName.value + '" />'; appletCode += '<param name="ChatPassword" value="' + appletForm.ChatPassword.value + '" />'; appletCode += '<param name="Server" value="'+server+'" />'; appletCode += '<param name="Port" value="'+port+'" />'; appletCode += '<param name="ChatColor" value="' + appletForm.ChatColor.value + '" />'; if (!appletForm.NoMultiline.checked) { appletCode += '<param name="MultiLine" value="true" />'; } if (appletForm.NoSound.checked) { appletCode += '<param name="NoSound" value="true" />'; } ///////////////////////////////////////////////// // für fortgeschrittene Benutzer: // hier können weitere Parmeter eingefügt werden -> siehe readme ///////////////////////////////////////////////// // Ende Applet-Tag appletCode=appletCode+'<' + '/applet>'; // HTML-Fuß appletCode=appletCode+'<' + '/body><' + '/html>'; // Fenster öffnen und Inhalt setzen win = window.open("", "AppletWindow", "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1," + "width=640, height=480" ); win.document.write(appletCode); return false; } // Ende des Scriptes //]]></script>
Dieser Code sorgt dafür, dass das Applet später in einem neuen Fenster geöffnet wird.
Danach wird in den Seitenkopf eine CSS-Style-Definition eingefügt, um die <label>'s korrekt darstellen zu können. Die Definition ersetzt den <!-- Styles -->-Kommentar.
<style type="text/css">/*<![CDATA[*/ /* alle LABEL's sollen einen anderen Mauscursor haben */ label { cursor:pointer; } /* die Labels für Textboxen sollen als Blockelement dargestellt werden */ .label { display:block; } /*]]>*/</style>
Im nächsten Schritt werden die Formularelemente in den Seitenkörper eingefügt (auch hier wird der Kommentar <!-- Seiteninhalt --> nicht weiter benötigt):
<p>Hinweis: diese Seite benötigt JavaScript und Java >= 1.1 von Sun oder MicroSoft</p> <form id="AppletForm" action="javascript:Popup();"> <fieldset> <legend>EasyChat-Applet</legend> <!-- Der Benutzername --> <label for="ChatName" class="label">Chatname:</label> <input type="text" name="ChatName" id="ChatName" /> <!-- Das Passwort (optional) --> <label for="ChatPassword" class="label">Passwort:</label> <input type="password" name="ChatPassword" id="ChatPassword" /> <!-- Die Chatfarbe --> <label for="ChatColor" class="label">Farbe:</label> <select name="ChatColor" size="1" id="ChatColor"> <option value="black">schwarz</option> <option value="blue">blau</option> <option value="cyan">cyan</option> <option value="darkgray">dunkelgrau</option> <option value="gray">grau</option> <option value="green">grün</option> <option value="magenta">magenta</option> <option value="orange">orange</option> <option value="red">rot</option> <option value="yellow">gelb</option> </select> <!-- Der Server --> <!-- diese Checkbox deaktiviert den Piepton; im Chat ist das jederzeit mit /sound änderbar --> <br /> <input type="checkbox" name="NoSound" value="true" id="NoSound" /> <label for="NoSound">Sound deaktivieren</label> <!-- diese Auswahlfelder steuern die Möglichkeit, mehrere Textzeilen hintereinander einzugeben. --> <br /> <input type="radio" name="Multiline" value="0" id="Multiline_0" /> <label for="Multiline_0">Multiline deaktivieren; Senden durch Enter möglich</label> <br /> <input type="radio" name="Multiline" value="1" id="Multiline_1" /> <label for="Multiline_1">Multiline aktivieren; Senden durch Ctrl+Enter und Alt+S möglich</label> <br /> <input type="radio" name="Multiline" value="2" id="Multiline_2" /> <label for="Multiline_2">Multiline aktivieren; Senden durch 2x Enter ermöglichen</label> <!-- Der Absendebutton --> <br /> <input type="submit" value="starten" /> </fieldset> </form> <!-- weiterer Seiteninhalt -->
Das Formular ruft die Javascript-Funktion nach dem Absenden auf und öffnet das Applefenster.
Jetzt fehlt noch die Adresse des EasyChat-Servers, zu dem verbunden werden soll. Um diese einzufügen, gibt es drei Möglichkeiten, einzusetzen statt des <!-- Der Server -->-Kommentars:
<!-- Der Server --> <label for="ServerPort" class="label">Server:</label> <select name="ServerPort" size="1" id="ServerPort"> <!-- Die Vorgaben können ergänzt/angepasst/gelöscht werden --> <option value="ec3server.chlhp.de:1000">Eike's Server</option> <option value="matrixstorm.hopto.org:1000">Matrixstorm</option> <option value="127.0.0.1:1000">localhost</option> <!-- hier eigene/andere Server eintragen--> </select>Für jeden zusätzlichen Server ist dabei ein weiteres option-Tag vorzusehen.
<!-- Der Server --> <input type=hidden name="ServerPort" value="matrixstorm.hopto.org:1000" />
<!-- Der Server --> <label for="ServerPort" class="label">Server:</label> <input name="ServerPort" value="ec3server.chlhp.de:1000" id="ServerPort" /><br>
Das Formular kann jetzt dem eigenen Homepage-Style angepasst werden. Dazu können die Eingabefelder beliebig verschoben werden, solange nur der Name bestehen bleibt.
Ein Link auf die Befehlsreferenz wäre sicher nicht verkehrt (einzufügen bei <!-- weiterer Seiteninhalt -->):
<p><a href="befehle.html">Chatbefehls-Referenz</a></p>
Falls keine weiteren Änderungen vorgenommen werden, so sollte der Quelltext so aussehen, wie in der Datei "applet_starten.html".
Zum Schluß wird die Datei abgespeichert und auf den Webspace hochgeladen. Wichtig dabei ist, dass sich die Dateien "EC3Applet.jar", "EC3Applet.cab" und "close.html" (aus dem Archiv) in ein und demselben Verzeichnis befinden, wie die hochgeladene HTML-Datei. Das gilt auch für die "befehle.html", sollte diese referenziert werden.
Das Archiv mit den benötigten Dateien kann man hier herunterladen: [LINK]