Post on 30-Apr-2020
transcript
Tables und weitere Elemente
Ralf Gitzelralf_gitzel@hotmail.de
1
Themenübersicht
Ralf Gitzelralf_gitzel@hotmail.de
2
Übersicht
• Übergreifendes Beispiel:Kühlschrankverwaltung
• Weitere JSF-Tags• Tables
3
Beispiel:Kühlschrankverwaltung
Ralf Gitzelralf_gitzel@hotmail.de
4
Problem
5
Was ist alles im Kühlschrank?Was muss aufgebraucht werden?
Lösung
6
Mini-JEE Server
Web Applikation zur Verwaltungvon Lebensmitteln
Applikation – Einkaufregistrieren
7
Applikation – Was mussverbraucht werden?
8
Weitere JSF Tags
Ralf Gitzelralf_gitzel@hotmail.de
9
Radiobuttons
10
1. Verknüpfung zumProperty derMangedBean
2. Liste der möglichenWertea. Explizit im HTML-
Codeb. Über eine Liste aus
der Bean
h:selectOneRadio• Radiobuttons• Der Inhalt kann auf verschiedene Weise bereitgestellt
werden (f:selectItem, f:selectItems)
11
Attribut Verwendungszweckvalue Das Property in der ManagedBean, das über die
Radiobuttons verändert wird
layout Richtung der Buttons – „lineDirection“ oder„pageDirection“
f:selectItem• Ein explizit auswählbares Element, fest im HTML-Code
beschrieben
12
Attribut VerwendungszweckitemValue Ist dieser Button ausgewählt, so wird dieser Wert in
das Property geschrieben
itemLabel Der Beschreibungstext am Button
f:selectItem - Beispiel
13
f:selectItems• Verwendung einer Collection, Liste, eines Vektors, der
in der ManagedBean angelegt wurde
14
Attribut Verwendungszweckvalue Name des Properties in dem die Listenelemente
gespeichert sindvar Das aktuelle Element aus ‚value‘itemValue Ist dieser Button ausgewählt, so wird dieser Wert in
das Property geschriebenitemLabel Der Beschreibungstext am Button
f:selectItems - Beispiel
15
Value „Obst“
„Gemüse“
Diskussion: Drop Down Listen
16
Wie könnte dasfunktionieren?
h:selectOneMenu• Drop Down Liste• Der Inhalt kann auf verschiedene Weise bereitgestellt
werden (f:selectItem, f:selectItems), identisch zuRadiobuttons
17
Attribut Verwendungszweckvalue Das Property in der ManagedBean, das über die
Radiobuttons verändert wird
Tables
Ralf Gitzelralf_gitzel@hotmail.de
18
Verwendungszweck
• Einfache Darstellung von Collections• Erzeugt eine Tabelle, d.h. etwas
spezieller als repeat
19
Beispiel einer Anwendung
20
Beispiel einer Anwendung
21
h:dataTable• Eine Tabelle mit frei definierbaren Spalten
22
Attribut Verwendungszweckvalue Die Collection über die iteriert wird (ähnlich wie bei
repeat)
var Der Variablenname, der für den aktuellem Eintrag inder der Tabelle steht
border Der Rand der Tabellefirst Erstes Element aus der Collection, dass angezeigt wirdrows Anzahl der Zeilen, die angezeigt werden (ab ‚first‘)styleClass, captionClass, headerClass, footerClass, rowClasses,columnClasses
h:column• Eine Spalte in der Tabelle• Anmerkung: Es gibt keine Zeilen, diese werden
automatisch je nach Collectiongröße erzeugt
23
Attribut Verwendungszweck
Tabelle - Zeilen
24
Value:Sammlung(z.B. Liste)
aller „Zeilen“
Element 1
Element 2
Element 3
Var: Zeiger aufaktuelles Element
Tabelle - Spalten
25
Element 1 Var: Zeiger aufaktuelles Element
Column: Inhaltebasierend auf aktuellem
Element
Aufgebaute Tabelle
26
h:facet• Wird benutzt um Überschriften, Unterschriften und
Kommentare zu definieren
27
Attribut Verwendungszweckname Kann „header“, „footer“ oder „caption“ sein
Tabelle – Header und Footer
28
Diskussion: EditierbareTabellen
29
Wie realisiert maneditierbare Spalten?
Editierbare Spalte
30
Jedes beliebige Tag kann in der Spalte verwendet werden,z.B. für Textinput etc.
Lernziele
Ralf Gitzelralf_gitzel@hotmail.de
31
Lernziele
• Radiobuttons und Drop Down Listenverwenden können
• Tabellen erstellen können (aucheditierbare)
32
Praxisbeispiel
Ralf Gitzelralf_gitzel@hotmail.de
33
Andere Teilbereiche der BWL• Bereich: Lebenszyklusmanagement• Echtes Beispiel aus unserer
Entwicklungsarbeit• Problem: Verwaltung der Ergebnisse von
Fehleranalysen an Produkten undErstellung von Fehlercodes
• Techniker gibt Problembeschreibunganhand von Fragelisten ein, Fehlercodewird erstellt
• Liste empfohlener Maßnahmen wirdgeneriert
34
Fault Code Generator
35
Übungsaufgabe
Ralf Gitzelralf_gitzel@hotmail.de
36
Codeanalyse
• Betrachtung einer fertigen Applikation• Ziel ist es, zu verstehen, was im Code
passiert und wo ein Effekt ausgelöst wird
• Eine aktuelle Studie unterstreicht den Lerneffekt des Codelesens gegenüber demexperimentellen Programmieren: http://cacm.acm.org/magazines/2015/2/182637-whats-the-best-way-to-teach-computer-science-to-beginners/fulltext
37
Fragen• ManagedBeans
– Welche ManagedBeans gibt es?– Wann werden diese angelegt?– Wer kann auf sie zugreifen?– Wie sind sie miteinander verbunden?
• Navigation– Welche Stellen im Code beschreiben die
Navigation?– Welcher Code wird ausgeführt, wenn man auf der
Seite AusbuchbarerStatus.jsf auf den Buttondrückt? Auf welcher Seite landet man danach?Warum?
38
Fragen
• Unterkategorie.xhtml:– Welche Klassen werden von der Tabelle genutzt?– Wie ist der Ausdruck
„#{konstanten.wertelisten[element.typ.einheit]}“ zuverstehen?
• Kühlschrankinhalt– Wo wird gespeichert was sich im
Kühlschrank befindet?– Was passiert, wenn man 5 Äpfel einbucht,
aber noch 3 im Kühlschrank sind?39