imported>Liebsoer: /* Browser Template Elemente */

2012-11-18T00:33:01Z

Browser Template Elemente

Neue Seite

Hier befindet sich die technische Spezifikation des Kalenders.

= HTML Templates =
== Browser Templates ==
=== Allgemein ===
'''<big>Zweck</big>''' 
Das Allgemeine Browser-Template dient als Grundlage um Komponenten einzufügen.

'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_General_Layout_(Browser).png]]

'''<big>Beschreibung</big>''' 
Das Template stellt den Content-Bereich einer Website zu Verfügung und verfügt selber über 3 Bereiche.
* Filter Area
* Date Navigation Area
* View Area

Komponenten dürfen nicht direkt in diesem Template platziert werden.

== Browser Template Elemente ==
=== Date Navigation Area ===
'''<big>Zweck</big>''' 
Bereich zur Anordnung von Elementen, welche für die Navigation im Kalender zuständig sind.

'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_Date_Navigation_(Browser).png]]

'''<big>Beschreibung</big>''' 
Die Date Navigation Area beinhaltet
* Eine Komponente, welche das aktuelle Datum anzeigt
* Vier Komponenten zur Kalendernavigation. Welche angezeigt werden hängt von der jeweiligen View ab. Das Verhalten wird über eine Konfiguration festgelegt. So basiert jede Einzelkomponente auf dem gleichen Code. Jeweils eine für
** Jahr
** Monat
** Kalenderwoche
** Tag

=== Filter Area ===
'''<big>MockUp</big>''' 

=== View Area ===
=== Day View ===
'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_Day_View_(Browser).png]]

==== List View ====
'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_List_View_(Browser).png]]

=== Week View ===
'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_Week_View_(Browser).png]]

=== Month View ===
'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_Month_View_(Browser).png]]

= Komponenten =
== (Such) Filter ==
'''<big>MockUp</big>''' 
== Time Navigation ==
'''<big>Zweck</big>''' 
Bietet Funktionalität den Kalender zeitlich vor und zurück zu navigieren.

'''<big>MockUp</big>''' 
[[Datei:AG_Kalender_-_Time_Navigation_Component_(Browser).png]]

'''<big>Beschreibung</big>''' 
Die Variable "$Time" die vier Werte "Jahr", "Monat", "KW" (für Kalenderwoche) oder "Tag" haben. Diese vier werte sind gleichzeitig auch die vier Zustände, die die Komponente haben kann.
Ein Klick auf das Feld "$Time" bewirkt, dass ein PopUp auf den Bildschirm erscheint. Je nach Kontext wird dem User eine andere Auswahl geliefert. 
Beispiele: 
{|
|-
! Jahr !! Beschreibung
|-
|[[Datei:AG_Kalender_-_Date_Picker_(Year)_(Browser).png]] || Ein Klick auf das Jahr wechselt das Jahr, wobei die restlichen Angaben übernommen werden.
|-
! Monat !! Beschreibung
|-
|[[Datei:AG_Kalender_-_Date_Picker_(Month)_(Browser).png]] ||
* Ein Klick auf den Monat wechselt die Kalenderansicht auf den gewählten Monat. Das Jahr und der Tag werden übernommen.
* Ein Klick auf auf das Feld $Year öffnet die das Auswahlmenü vom Jahr. Der Kontext ist die Monats-Auswahl.
|-
! Woche !! Beschreibung
|-
|[[Datei:AG_Kalender_-_Date_Picker_(Week)_(Browser).png]] ||
* Ein Klick auf die gewünschte Kalenderwoche wechselt die Ansicht entsprechend. Das Jahr und der Wochentag werden übernommen.
* Ein Klick auf auf das Feld $Year öffnet die das Auswahlmenü vom Jahr. Der Kontext ist die Monats-Auswahl.
|-
! Tag !! Beschreibung
|-
|[[Datei:AG_Kalender_-_Date_Picker_(Day)_(Browser).png]] ||
* Ein Klick auf den gewünschten Tag wechselt die Ansicht entsprechend.
* Ein Klick auf Year und $Month verhalten sich entsprechenden der jeweiligen Komponente.
|}

[[Kategorie:AG Kalender]]

AG Kalender/Pflichtenheft/Technische Spezifikation - Versionsgeschichte

imported>Liebsoer: /* Browser Template Elemente */