Aktuelle EasyChat-Version: EasyChat 3.0.0 final [Download] [Changelog] In Entwicklung: EasyChat 3.1.0 [TODO]

EasyChat - Java-Client

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.

Eine HTML-Seite hat das folgende Grundgerüst:

<html>
 <head>
  <title>EasyChat3 f&uuml;r Java (Version 0.5.5)</title>
  <!-- Seitenkopf -->
 </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 ):

  <script language="JavaScript" type="text/javascript">
   <!--
   String.prototype.trim
    = function(){return(this.replace(/\s+$/,"").replace(/^\s+/,""));};

   function Popup() {
    chatName=window.document.AppletForm.ChatName.value;
    chatPassword=window.document.AppletForm.ChatPassword.value;
    serverPort=window.document.AppletForm.ServerPort.value;
    server=serverPort.substr(0,serverPort.indexOf(":"));
    port=serverPort.substr(serverPort.indexOf(":")+1);
    color=window.document.AppletForm.ChatColor.value;
    nosound=window.document.AppletForm.NoSound.checked;
    nomultiline=window.document.AppletForm.NoMultiline.checked;

    if (chatName.trim().length > 0) {
     appletCode='<html><head>';
     appletCode=appletCode+'<title>EasyChat3 f&uuml;r Java (Version 0.5.5)</title>';
     appletCode=appletCode+'</head><body style="margin:0;">';
     appletCode=appletCode+'<applet archive="EC3Applet.jar" ';
     appletCode=appletCode+'code="ec3.client.applet.ColorApplet.class" ';
     appletCode=appletCode+'codebase="." width="100%" height="100%">';
     appletCode=appletCode+'<param name="cabbase" value="EC3Applet.cab">';
     appletCode=appletCode+'<param name="ChatName" value="'+chatName+'">';
     appletCode=appletCode+'<param name="ChatPassword" value="'+chatPassword+'">';
     appletCode=appletCode+'<param name="Server" value="'+server+'">';
     appletCode=appletCode+'<param name="Port" value="'+port+'">';
     appletCode=appletCode+'<param name="ChatColor" value="'+color+'">';
     if (!nomultiline ) {
      appletCode=appletCode+'<param name="MultiLine" value="true">';
     }
     if (nosound) {
      appletCode=appletCode+'<param name="NoSound" value="true">';
     }
     appletCode=appletCode+"</applet>";
     appletCode=appletCode+"</body></html>";
     win=window.open("",
      "AppletWindow",
      "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1, "+
        "width=640, height=480"
     );
     win.document.write(appletCode);
    } else {
     alert ("Kein Chatname eingegeben");
    }
     return false;
    }
   //-->
  </script>

Dieser Code sorgt dafür, dass das Applet später in einem neuen Fenster geöffnet wird.

Im nächsten Schritt werden die Formularelemente in den Seitenkörper eingefügt (auch hier wird der Kommentar  nicht weiter benötigt):

  <p>Hinweis: diese Seite ben&ouml;tigt JavaScript und Java
   &gt;= 1.1 von Sun oder MicroSoft</p>
  <form name="AppletForm" onSubmit="Popup ();" action="javascript:;">
   Chatname: <input type=text name=ChatName><br>
   Passwort: <input type=password name=ChatPassword><br>
   Farbe: <select name=ChatColor size=1>
    <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><br>
   <!-- Hier fehlt noch der Server -->
   Sound deaktivieren: <input type=checkbox name=NoSound value=true><br>
   Multiline deaktivieren: <input type=checkbox name=NoMultiline value=true><br>
   <input type=submit value="starten">
  </form>
  <p><a href="readme.html">Hilfe</a></p>

Jetzt fehlt noch die Adresse des EasyChat-Servers, zu dem verbunden werden soll. Um diese einzufügen, gibt es drei Möglichkeiten:

Ein select-Tag bietet die Auswahl zwischen mehreren Servern:

   Server: <select name=ServerPort size=1>
    <option value="erster-server.dyndns.org:1000">Erster Server</option>
    <option value="zweiter-server.dyndns.org:1000">Zweiter Server</option>
    <!-- hier eigene/andere Server eintragen-->
   </select><br>

Für jeden zusätzlichen Server ist dabei ein weiteres option-Tag vorzusehen.

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:
```
   <input type=hidden name=ServerPort value="mein-server.dyndns.org:1000">
```
Schließlich gibt es noch die Variante, den Benutzer selbst eine Serveradresse eingeben zu lassen:
```
   Server:<input name=ServerPort value="echp.dyndns.org:1000"><br>
```

Das Formular kann jetzt noch dem eigenen Homepage-Style angepasst werden. Die Eingabefelder können beliebig verschoben werden, solange nur der Name bestehen bleibt.

Am Ende sollte der Quelltext so aussehen, wie in der Datei "applet_starten.html" (abgesehen von eigenen Formatierungen). Und so sollte es im Browser angezeigt werden:

Danach wird die Datei abgespeichert und auf den Webspace hochgeladen. Wichtig dabei ist, dass sich die Dateien "EC3Applet.jar" und "EC3Applet.cab" (aus dem Archiv) in ein und demselben Verzeichnis befinden, wie die vorher hochgeladene Datei. Das gilt auch für die "readme.html".

Das Archiv mit den benötigten Dateien kann man hier herunterladen: [LINK]

Client Menü

Java-Client Menü