Session Storage - ip-projekt

19.12.11
YouTube5
.0
Projektpräsentation
Michael Baumgartner,
YouTube5.0
1
Christoph Asanger,
Inhalt
2
 Projektziel
 Datenbank
 Benutzerverwaltung
 Videosuche
 Favoritenliste
 Design/Struktur
YouTube5.0
19.12.11
Projektziel
3
 Erstellung einer HTML 5 – Website
 Suche nach YouTube-Videos
 Abspielen der gefundenen Videos
 Registrierung und Benutzeranmeldung
 Persönliche Favoritenliste
 Sortierbar per Drag & Drop
YouTube5.0
19.12.11
Datenbank
4
 Erstellung der benötigten Tabellen mit SQL
 Nutzung der JPA-Schnittstelle

Zuordnung und Übertragung der Objekte zu
den zugehörigen Datenbankeinträgen
 Konfigurationsdatei: Persistence.xml
YouTube5.0
19.12.11
Datenbank
5
 Java Beans
 Zugehörige Java-Klassen pro Datenbanktabelle
YouTube5.0
19.12.11
Datenbank
6
 Datenzugriffsobjekte
 Automatisierte Erstellung der Basisoperationen
YouTube5.0
19.12.11
Benutzerverwaltung
7
Html5 Web Storage (besser als Cookies?)
YouTube5.0
19.12.11
Benutzerverwaltung

Speichergröße: 5 MB

Key/Value Paare (Strings)

Client-side Interface

Web Storage Event
Session Storage
Local Storage
Pro Tab/Window
Pro Browser
Sessiondauer
Benutzerverwaltung
- Instanz von FacesContext holen
- Erzeugen von Data Access Objekt
- User aus der Datenbank laden
Benutzerverwaltung
- Javascript Aufruf an FacesContext hinzufügen
- Wird am Ende der Requestverarbeitung
ausgeführt
- Setzt Eintrag in Session Storage
Benutzerverwaltung
- Lösche Einträge aus der Session Storage
-Auslesen aus Session Storage
-Redirect auf Mainseite
Videosuche
YouTube5.0
12
19.12.11
Videoplayer & Favoritenliste
13
 YouTube Videos als <iframe> einbinden
YouTube5.0
19.12.11
Videoplayer & Favoritenliste
14
 HTML5 Drag&Drop Events
YouTube5.0
19.12.11
Videoplayer & Favoritenliste
15
 Ein Element dragbar machen und Attribute für
drag-Events setzen:
YouTube5.0
19.12.11
Videoplayer & Favoritenliste
16
 Aufruf der Funktion dragStart()
YouTube5.0
19.12.11
Design/Struktur
17
 Neue Tags in HTML5 zur Seitenstrukturierung
 Bisher Verwendung von DIV-Containern
 Jetzt mehr Übersichtlichkeit durch Einführung der
Tags
 <header>
 <nav>
 <section>
 <footer>
YouTube5.0
19.12.11
Design/Struktur
18
 Strukturierung bisher:
YouTube5.0
19.12.11
Design/Struktur
19
 Mit HTML5 Tags:
YouTube5.0
19.12.11
Design/Struktur
20
 Praktische neue Funktionalität stellen die
erweiterten Input Types für Formulare dar, z.B.:
 Email
 Url
 Tel
 Number
 ...
 Einige der neuen Types bringen automatisch
Validierungsfunktionalität mit sich, ohne weiteren
Code (wie etwa JavaScript) zu benötigen
YouTube5.0
19.12.11
Design/Struktur
21
 Beispiele hierfür sind die Types Email und Url
 Möglichkeit Platzhalter anzugeben („Name“)
 Reguläre Ausdrücke können hinterlegt werden,
gegen diese wird die Eingabe automatisch
geprüft
YouTube5.0
19.12.11