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