EasyChat - Java-Client

HTML-Tutorial

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.

HTML-Grundgerüst

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&uuml;r Java (Version 0.6)</title>
  <!-- Skripte -->
  <!-- Styles -->
  <!-- weitere Kopfdefinitionen -->
 </head>
 <body>
  <!-- Seiteninhalt -->
 </body>
</html>

Java-Script

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&uuml;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.

Style

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>

Eingabeformular

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&ouml;tigt JavaScript und Java &gt;= 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&uuml;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&ouml;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&ouml;glich</label>
    <br />
    <input type="radio" name="Multiline" value="2" id="Multiline_2" />
    <label for="Multiline_2">Multiline aktivieren; Senden durch 2x Enter erm&ouml;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.

Der Server

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:

  1. Ein select-Tag bietet die Auswahl zwischen mehreren Servern:
        <!-- 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.
  2. Wenn nur ein Server benutzt werden soll, dann sollte das Eingabefeld versteckt werden. Der Benutzer hat nun nicht mehr die Möglichkeit einen anderen Server auszuwählen:
        <!-- Der Server -->
        <input type=hidden name="ServerPort" value="matrixstorm.hopto.org:1000" />
  3. Schließlich gibt es noch die Variante, den Benutzer selbst eine Serveradresse eingeben zu lassen:
        <!-- Der Server -->
        <label for="ServerPort" class="label">Server:</label>
        <input name="ServerPort" value="ec3server.chlhp.de:1000" id="ServerPort" /><br>

was noch zu tun bleibt

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]