Embed Size (px)
Citation preview
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 !
