Anleitung für Slideshow Applet

Anleitung für Slideshow Applet
Programmierer/Quelle : http://www.bysoft.se/sureshot/webeffects/
Bestandteile des Applets:
index.html, faq.html, manual.html, Slideshow.jar und die Datei, welche man selber erstellen muss - resources.jar.
Wichtige Dateien:
index.html - in der die Slideshow eingebettet ist.
DER CODE ALLEINE FUNKTIORIERT IN IWEB NICHT, DA SICH DAS PROGRAMM AUFHÄNGT!!!
slideshow.jar - wird benötigt fürs abspielen der Slideshow.
resources.jar - diese Datei muss von Hand erstellt werden, sie beinhaltet die Bilder, sowie eine Config Datei Namens
config.txt welche Steuerungsbefehle enthält, hierzu später mehr.
Bilddateien, hier habe ich mich an dem Demo des Programmierers orientiert.
Zu den Vorbereitungen:
Das wichtigste sind die Bilder! - Diese müssen alle die gleiche Größe und sollten das Größen-Format haben, wie die
Slideshow später dargestellt werden soll. Bei meinem Beispiel ist es 600 x 150 Pixel.
Die Bilder sind als Gif-Dateien abgespeichert, um die Größe so gering wie möglich zu halten! Andere Formate wie JPG, PNG
usw. habe ich nicht getestet und kann nicht sagen ob diese funktionieren.
1. Einen temporären Ordner (Arbeitsordner) erstellen, in dem die Bilder und die config.txt abgelegt werden. Dieser wird
später benötigt um die resources.jar zu erstellen.
2. Bilder in den Ordner kopieren.
3. config.txt erstellen, hierzu benötigt ihr ein Textprogramm das reinen Text abspeichert, TextEdit funktioniert nicht. Ich habe
die Textverarbeitung von openoffice benutzt.
TEXT DER CONFIG.TXT:
########################################################
#
#
# Configuration template file for the Slideshow Applet #
#
#
# http://www.bysoft.se/sureshot/webeffects/
#
#
#
########################################################
#
# The number of frames used in the transition between
# images.
#
frames=20
#
# The frame rate (ms) used in the transition between
# images.
#
frameDelay=100
#
# The time (ms) each image in the slideshow is displayed
# once the transition is finished.
#
displayTime=3000
#
# The slideshow images.
#
image0=image0.gif
image1=image1.gif
image2=image2.gif
image3=image3.gif
image4=image4.gif
image5=image5.gif
Die Parameter „frames“ - „frameDelay“ - „displayTime“ - könnt ihr beliebig ändern, bei den Bildparametern habe ich es von der
Bezeichnung so gelassen, wie vorgegeben. „image0“ usw. sind Variablen, welche später benötigt werden. Ich persönlich habe
die Namen der Bilder auch so gelassen, da ich zum testen so wenig wie möglich umstellen wollte. Solltet ihr weniger Bilder
testen, dann löscht die dementsprechenden Bilderzeilen oder fügt welche hinzu. Dann natürlich mit fortlaufender
Nummerierung.
Nun zum Schritt der Erstellung der Datei „resources.jar“:
Hier muss jeder selber entscheiden, ob er es sich traut, oder lieber die Finger davon lässt.
Als erstes muss das Terminal gestartet werden. Das Programm findet ihr unter /Programme/Dienstprogramme
Jetzt müsst ihr über das Terminal in den temporären Ordner mit der „config.txt“ und den Bildern wechseln. Das könnt ihr wie
folgt bewerkstelligen:
1. Im Terminal-Fenster „cd“ und ein Leerzeichen eingeben.
2. Öffnet den Finder und zieht den temporären Ordner auf das Terminal-Fenster. Hiernach sollte es ungefähr so aussehen
3. mit Enter bestätigen, dann sollte im Terminal-Fenster ungefähr folgendes stehen:
4. Jetzt solltet ihr auf alle Fälle den Inhalt des Ordners anzeigen lassen, damit ihr sicher seit, dass ihr auch im Verzeichnis steht.
Dieses erfolgt über den Terminal-Befehl „ls“ für list und dieses wieder mit Enter bestätigen. Jetzt sollte das Terminal-Fenster
in etwa so aussehen:
Wenn der Inhalt angezeigt wird kommt der große Moment des Erstellens der Datei „resources.jar“. hierfür muss folgender
Befehlssatz im Terminal-Fenster eingegeben, und mit Enter bestätigt werden:
jar cf resources.jar *
Hierüber wird die Java-Console angesprochen, und der Befehl erteilt, die Containerdatei „resources.jar“ zu erstellen und den
gesamten Inhalt des temporären Ordners in die Datei zu packen.
ALSO, NUR BILDER UND CONGIG.TXT IM ORDNER AUFBEWAHREN, SONST WIRD DIE DATEI ZU GROß UND ES
BEFINDET SICH ALLES WAS SICH IM ORDNER BEFINDET IN DIESER!
Jetzt könnt ihr im Finder kontrollieren, ob die Datei vorhanden ist, von der Größe sollte sie ungefähr die Größe des
Ordnerinhalts aufweisen.
Nun zur index.html für die Slideshow. Ich habe eine einfache HTML-Datei erstellt, welche ihr benutzen und abändern könnt.
Der Quelltext sieht so aus:
<html>
<head>
<title>Slide</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<APPLET CODE = "se.bysoft.sureshot.products.webeffects.applet.SlideShowApplet.class"
ARCHIVE = "slideshow.jar,resources.jar" WIDTH = "600" HEIGHT = "150"
ALT = "Your browser understands the applet tag but isn't displaying any applet." >
<PARAM NAME="info" VALUE="Slideshow Applet - http://www.bysoft.se/sureshot/webeffects/">
</APPLET>
</body>
</html>
Also, index.html in einem Html-Editor öffnen.
Hier müsst ihr die Parameter „WIDTH“ (Breite der Slideshow in Pixeln) und „HEIGHT“ (Höhe der Slideshow) angeben und die
Änderung abspeichern. Nun habt ihr alle wichtigen Dateien für die Slideshow erstellt und könnt diese auf eurem Rechner testen.
Die Dateien index.html, Slideshow.jar und resources.jar in einen Ordner kopieren und die index Datei mit einem Browser öffnen.
Wenn alles richtig gemacht wurde, sollte die Slideshow ablaufen. Wenn nicht, ist euch irgendwo ein Fehler unterlaufen und ihr
müsst noch einmal testen, ob ihr alle Schritte befolgt habt.
Wenn ja, könnt ihr die Dateien auf den Server hochladen. Hier würde ich einen Unterordner erstellen und die Dateien
index.html, Slideshow.jar und resources.jar hochladen.
Zum Schluß kommt noch der kleinere Teil, das Einbinden der Slideshow in iWeb.
Einbinden der Slideshow in iWeb:
1. Seite in iWeb aufrufen oder eine neue erstellen.
2. Ein Webwidget erstellen und und die index.html auf eurem Server in ein Iframe einbinden. Hierfür würde ich folgenden Code
verwenden:
<iframe width="600" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.EUER
SERVER/EUER(E) VERZEICHNIS(SE)/index.html"></iframe>
In dem Code finden sich zwei alte Bekannte wieder, „width“ und „heigth“. Hier gebt ihr wieder die Größe eurer Slideshow an.
Durch den Code wird ein Iframe mit statischer Größe erzeugt, der die Größe eurer Bilder widerspiegelt.
Und natürlich müsst ihr die Adresse auf eurem Server angeben (grün).
NICHT WUNDERN, WENN NACH DEM BESTÄTIGEN „ANWENDEN“ NCIHTS IN IWEB ANGEZEIGT WIRD, DAS KOMMT
ERST, WENN IHR DIE SEITE VERÖFFENTLICHT HABT.
Jetzt hoffe ich, ich habe nichts vergessen und es sind nicht so viele Tippfehler enthalten, nach der langen Erklärung hatte ich
keine große Lust auf Korrekturlesen!
Gruß
Didi