Eine Projektarbeit von: Thorsten Stücke, Carsten Kammann, Frank Wellhausen

Eine Projektarbeit von: Thorsten Stücke,Carsten Kammann,Frank Wellhausen

- Aufgabenstellung- Zielsetzung: Was muss unser Programm enthalten- Die Bildergalerie

- Hauptbildansicht- Vorschaubilder- Steuerung- Kommentare

- Die Galerieverwaltung und Uploadfunktion- Galerien erstellen- Kommentare bearbeiten- Galerien entfernen

- Aspekt Sicherheit- nicht angemeldete Benutzer abweisen- angemeldete Benutzer auf Berechtigung prüfen- Abspann

- bekannte Fehler, Probleme- Lösungsansätze

- Verbesserungsvorschläge

- Tipps / Hinweise / Ratschläge

- Das Erstellen einer Bildergalerie für das Projekt „Java News & Music“

- Die einzige Vorgabe:

- Größe des Darstellungsbereichs

- Offen gelassen wurde:

- Das Layout der Galerie

- Die Art der Programmierung (Servlet, Applet, JSP)

- Bestandteile der Galerie

Die Bildergalerie sollte unserer Vorstellung nach enthalten:

- Eine Großansicht des Bildes

- Eine Vorschauansicht von fünf Bildern- Ein Kommentar zu jedem Bild

- Eine Steuerung mit...

- Bild vor- und zurück Funktion

- Eine Direktauswahl

- der Möglichkeit per Klick auf die Voransicht das Vollbild zu bekommen- der Auswahl zwischen verschiedenen Galerien

- Eine Verwaltung für die Galerien

- einer nahezu von der Auflösung unabhängige Darstellung

Die Galerieverwaltung sollte folgende Funktionen beinhalten:

- Neue Galerien erstellen

- Kommentare bearbeiten

- Galerien löschen

Das alles ohne Verwendung von Windows Programmenwie Explorer oder Editor usw.

Kommentare

GrossbildansichtSteuerungsleisteVorschauansicht

Der Aufbau der Bildergalerie

Zu jedem Bild wird ein Kommentar angezeigt

Kommentare

GrossbildansichtSteuerungsleisteVorschauansicht

Der Aufbau der Bildergalerie

Das Bild wird in realer Größe dargestellt

Kommentare

GrossbildansichtSteuerungsleisteVorschauansicht

Der Aufbau der Bildergalerie

Der Benutzer kann zwischen Galerien und Bildern navigieren

Kommentare

GrossbildansichtSteuerungsleisteVorschauansicht

Der Aufbau der Bildergalerie

Fünf Bilder werden im Kleinformat als Vorschau dargestellt

Die Kommentare

- sind einzeilig

- wurden auf 50 Zeichen begrenzt

- werden in ...info.dat Dateien gespeichert[weitere Informationen dazu später]

Die Grossbildansicht

- Die Bilddimensionen werden ermittelt- Prüfung auf Hoch- oder Querformat- Anpassung ans Layout

- zu große Bilder werden verkleinert- passende Bilder werden in

Realgröße dargestellt

Die Steuerungsleiste

Galerieauswahl

Bildnummerauswahl

Bildvorschau

Grossbildansicht

Hier kann zwischen verschiedenen Galerien gewechselt werden

Die Steuerungsleiste

Galerieauswahl

Bildnummerauswahl

Bildvorschau

Grossbildansicht

Hier kann ein Bild nach seiner Nummer ausgewählt werden

Die Steuerungsleiste

Galerieauswahl

Bildnummerauswahl

Bildvorschau

Grossbildansicht

Dieser Button lässt die Vorschauansicht fünf Bilder weiter springen

Die Steuerungsleiste

Galerieauswahl

Bildnummerauswahl

Bildvorschau

Grossbildansicht

Dieser Button lässt die Grossbildansicht ein Bild weiter springen

Die Vorschauansicht

- Es werden fünf Bilder angezeigt- pro Bild steht ein Bereich von 80x80 Pixel zur Verfügung- Unterschieden wird zwischen Hoch-, Querformat und quadratischen Bildern- Hochformat:

- Höhe 78 Pixel, Breite 56 Pixel

- Querformat: - Höhe 56 Pixel, Breite 78 Pixel

- quadratische Bilder: - Höhe 78 Pixel, Breite 78 Pixel

Wozu diese Seite ?Die „galeryindex.jsp“ dient der Initialisierung der Seite „gallery.jsp“in Bezug auf :

- Ermittlung einer Startgalerie

- Ermittlung der browserspezifischen Anzeigebereiche in Bezug auf das Hauptframe. (in dem die Galerieseiten angezeigt werden.)

- Automatisch unter Verwendung von JavaScript- Elementen

- unter Verwendung von Formularen, falls JavaScript nicht aktiv sein sollte.

Das JavaScript:

Masse für Internet-Explorer:

Masse für nicht Internet-Explorer:

automatische Übermittlung

Schematischer Initialisierungsablauf:

initTyp

Seitenaufruf

“initialize“

else Defaultgalerieermitteln

JavaScript

Script:Masse ermitteln

Fromular:Masse auswählen

Masse alsParameter ?

nein

SubmitÜbergabe Masse

als Parameter

Masse der Sessionhinzufügen

Redirect gallery.jsp

Der technische Aufbau Browser: Opera

Ermittlung der min. Abmessungen, mitdem Browser von Opera da hier derAnzeigebereich am kleinsten ist.

492x472B x H:

Das Layout wird zum Teilneu errechnet:

30 20 25 86

feste Höhen:

errechnete Höhen:305

feste Positionen (links,oben):(1,1) (1,32) (1,53)

errechnete Positionen :(1,359)(1,385)

Alle Angaben in Pixel !

horizontaler, vertikaler Abstand: 1

Durchsuchen der Ordner nach Galerien- Grundordner aller Galerien ist „Galleries“

- Jede Galerie hat einen eigenen Ordner Beispiel: Bilder zur Galerie „Amerika“ liegen im Ordner „Galleries/Amerika“, d.h: Ordnername = Galeriename

- Bei jedem Aufruf der Site wird Ordner „Galleries“ nach vorhandenen Galerien durchsucht.

Durchsuchen der Galerien nach Bildern

- Wenn in einer Galerie Bilder gefunden werden, werden diese durchgezählt und fortlaufend durchnummeriert und in ein Array geschrieben

- Danach wird dann der Name des Bildes mit der zughörigen Galerie an die Klasse FileSeeker übergeben

Klasse FileSeeker- Das Bild wird über ein AWT Toolkit vollständig in den MediaTracker geladen- Danach können dann Höhe und Breite bestimmt werden

Bildimensionen erfassen

Bilddimensionsarray nimmt dieWerte:

- Breite, Höhe

und als Zusatzparameter- eine Prüfziffer für das Bildformat

ermitteln, ob es sich um ein - Hochformatbild - Querformatbild - quadratisches Bildhandelt

ob das Bild in realer Größedargestellt werden kannbzw. angepasst werden muß

Das Hauptbild

<head>

</head>

<body>

</body>

Zur Darstellung der Hauptbildes werden dieBildabmessungen im HTML-Kopf definiert.

Im Anschluß erfolgt die erste Anwendung der Prüfziffer:

Der Ausdruck: (dimens[p-1][2]-(dimens[p-1][2]%4)) ergibt für Werte >= 4 das Ergebnis 4 , sonst das Ergebnis 0

Die Navigationsleiste:

- ist auf eine maximale Breite von 500 Pixeln und

wurde auf eine minimale Breite von 200 Pixeln begrenzt.- ist über 5 festgesetzte Stufen „variabel“, nicht nötige Elemente werden entfernt.

bis 450 Pixel

bis 400 Pixel

Framebreite: Darstellung:

bis 350 Pixel

bis 300 Pixel

200 bis 250 Pixel

Die Steuerung erfolgt über Formulare, teilweise in Verbindung mit JavaScript

Das Formular ruft die Seite „Galerie.jsp“ selbst auf, die gewünschte Bildnummer und (oder) der Galerienamen werden als Parameter übergeben.

Die Select-Felder der Navigationsleiste

Rückblick : Durchsuchen von Ordnern !

Erneuter Zugriff auf das „ordner“- Array

Sollte das Array min. einen Eintrag enthalten, wird das „Selectfeld“ um die auszuwählenden Namen der Galerien ergänzt.

JavaScript:- onChange-Event Für den Fall das ein Element einen geänderten Wert erhalten hat- this.options[this.selectedIndex].value: Das aktuelle Formular, den Wert der aktuellen „Option“ ...

...an die Seite „gallery.jsp“ als Parameter Gallery übermitteln.

Die VorschaubilderEs werden immer 5 „Bilder“ angezeigt.

Reicht die Anzahl der Bilder nicht aus um (weitere) 5 Bilder anzuzeigen,wird je fehlendes Bild ein „Dummi.gif“ als Platzhalter eingefügt.

Ein kleiner grafischer Effekt: - das aktuell angezeigte Hauptbild wird in der Vorschauleiste blau, die restlichen grau markiert

Berechnung: Navigationsvariablen

Es werden vier Basisvariablen zur Steuerung berechnet.

Die Berechnung erfolgt aufgrund desaktuell anzuzeigenden Bildes.

Berechnet werden Bildnummern für das- das nächste, vorherige Bild- das erste, letzte Vorschaubild

(Auszug)

Andere Bildnummern die zur Steuerungbenötigt werden können abgeleitet werden.

Zusätzlich behandelt werden müssen Grenzfälle wie:- erstes und letztes Bild der Galerie- erstes und letztes Bild der Vorschaubilder

Generierung der Vorschauleiste<head>

</head><body>

</body>

Allgemeines zur Galerieverwaltung

- Zur Galerieverwaltung kommt man über den Button „Edit“- Button „Edit“ erscheint nur, wenn Administrator angemeldet ist

- Nur Administrator hat Zugriff auf Galerieverwaltung-Der Admin hat die Optionen:

- Galerien erstellen - Galerien löschen

- Bilder hinzufügen - Kommentare

ändern

Erstellen einer neuen Galerie

- Das Hinzufügen einer neuen Galerie ist in Assistent Form gestaltet. - Assistent wird über Button „Hinzufügen“ aufgerufen

Bilderupload

- Bilder werden schrittweise hochgeladen.

- Upload erfolgt durch UploadBean ins Verzeichnis „UploadFiles“

- Bereits hochgeladene Bilder werden angezeigt, indem der Ordnerinhalt von „UploadFiles“ aufgelistet wird.

Das UploadBean wurde der Vollständigkeit halber insProgramm eingefügt. Genauere Informationen zum

Quellcode gibt es im Ordner „UploadDoku“

Bilderupload

- Letztendliche Sicherung im eigentlichen Galerieordner erfolgt nach Eingabe eines Galerienamens.- Wählt man einen schon bestehenden Galerienamen, wird das Bild der bestehenden Galerie hinzugefügt.- Wird der Assistent zwischendurch abgebrochen, bleiben bereits hochgeladene Bilder in der Liste erhalten. Ordner „UploadFiles“ wird erst nach vollständiger Fertigstellung des Assistenten geleert.

Galerieordner erstellen und Bilder kopieren- Ordner mit gleichem Namen wie Galerie wird

erstellt.- Bilder werden von „UploadFiles“ in neuen Ordner kopiert.

Kommentare bearbeiten

- Kommentare werden in einer Datei gespeichert.- der Name setzt sich zusammen aus:

- dem Namen der Galerie und - dem Textzusatz “info.dat“

Beispiel: Galeriename: Amerika Dateiname: Amerikainfo.dat

- Info.dat wird erst angelegt, sobald Kommentare zu Bildern geschrieben werden.

- Kommentarbearbeitung erfolgt über Tabelle. Bildname Kommentar

- Der Kommentar ist einzeilig und kann maximal 50 Zeichen lang sein.

Kommentare bearbeiten

In Galerie enthalteneBilddateien

Kommentare der zugehörigen ...info.dat(wenn vorhanden)

Wenn keine Info.dat vorhanden...

- Kommentarzeile zeigt Meldung „Keine Info.dat vorhanden“

- folglich: Kommentare sind zum Betrieb der Galerie nicht zwingend erforderlich.

Geänderte Kommentare sichern

- Klick auf Button „sichern“ speichert Kommentare.- Info.dat wird jedesmal neu überschrieben.

- Dies geschieht durch FileWriter

Das Entfernen von Galerien

- Es können nur ganze Galerien gelöscht werden

- Löschung erfolgt in drei Schritten:

1. Löschen aller Bilddateien in dem Galerieordner 2. Löschen des Galerieordners

3. Löschen der Info.dat

Administration via Internet: Ja Sicherheit ?Spätestens an dieser Stelle muß man sich die Frage stellen,welchen Personen (Usern) ein Zugriff via Internet

- auf den Bereich der Galerieverwaltung - auf alle, spezielle Projektseiten

gewährt wird.

- Registrierte User haben Zugriff auf die Bildergalerie.

- Administratoren haben Zugriff auf das gesamte Projekt.- nicht registrierte bzw. nicht “angemeldete“ User werden mit Fehlerhinweis zur Anmeldeseite verwiesen.

Die Startseite ohne Login(

http://novix.ee.fh-lippe.de:8080/jnews/html/jnm_start.jsp)

Fehlerparameter: [Typ], [Ursprung]

Verweis auf index.jsp (Startseite des ges. Projektes)

Realisierung der Sicherheitsabfragen

- Loginname wird aus der Session ausgelesen

- Prüfung auf Loginname und Loginname = “Admin“

- Weiterleitung zur Seite “ErrorSwitch.jsp“ erfolgt, wenn kein Benutzer bzw. kein Admin angemeldet ist.

- ein Scriptlet auf unseren Projektseiten

Die Seite: ErrorSwitch.jsp

- dient als Fehlerverzweigung - kann leicht verändert bzw. ergänzt werden in Bezug auf:

- auszulösender Aktion

- Fehlertyp- Fehlerursprung

Probleme und bekannte Fehler

I. Die Acht:

Zum Ende der Projektphase fielen uns noch einige Fehler auf:

Acht Einträge im Ordner Galleries ... Keinen Kommentar

II. Galerien: beim Löschen einer (Default-) Galerie bei Anwesenheit v. Besuchern

Lsg. Vors.: noch keiner, Fehler trat zu kurzfristig auf

Lsg. Vors.: Folie 21, Ordner durchsuchen bzw. Ordnernamen ermitteln. Die Namen der aktuellen (Default-) Galerie sind bekannt.

Vergleich dieser Namen mit den ermittelten Ordnernamen ... Initialisierung ausführen ...

III. JavaScript:Die Ermittlung des Darstellungsbereiches bereitet unterInternet Explorer V6.0 Probleme. (nicht unter V5.0; V5.5)Fehlerbehebung derzeit: auf Fehlerwerte prüfen, geg. Ersetzen.

Lsg. Vors.: Darstellungsgröße bei Anmeldung ermitteln.

IV. CSS-V 2.0.: Wird in speziellen Fällen (Browser u. Anwendung) nicht ordentlich interpretiert. Lsg. Vors.: getrennte CSS- Dateien, je nach Browser-Typ (- Version), setzt eine Browserkennung voraus ...

Verbesserungsvorschläge:

I. Layout ist „Geschmackssache“: Wer will kann einen „Pagekonfigurator“ erstellen, in dem der Benutzer die Anordnung der 5 Galerieteilbereiche flexibel einstellen kann, in Bezug auf z.B. - die Reihenfolge der Galerieteilbereiche - die Ausrichtung dieser Teilbereiche (vertikal/ horizontal) - ... ...

II. einzelne Bilddateien löschen ...

V. Wir möchten betonen, das die Punkte I./II. mit den in diesem Projekt vorgestellten Technologien umgesetzt werden können !! Ausführliche Informationen finden sich in der Dokumentation, bzw. alternativ in den nahezu vollständig kommentierten Quelltexten.

III. „Zentrale“ CSS-Dateien, Browserspezifisch angepasst.

IV. „Zentrale“ JS-Dateien, Browserspezifisch angepasst.

Outro

Wir bedanken uns bei:

- den Projektleitern, welche uns jederzeit mit Rat zur Verfügung standen

- der Layoutgruppe für die Umsetzung einiger Wünsche hinsichtlich - Button‘s - Admin- Information in Session

Ihnen für die Aufmerksamkeit !