Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Java EE 7: Geschäftsanwendungen

Startseite definieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Startseite bekommt der Benutzer zuerst zu Gesicht. Umso wichtiger, diese Seite schön und funktional zu gestalten. Hier legen Sie das Layout mit Bootstrap fest und fügen einen Suchbereich und eine Tabelle für die Darstellung von Kunden hinzu.

Transkript

Die Startseite einer Applikation ist das, was ein Endkunde natürlich als erstes zu Gesicht bekommt, wenn er mit dieser Applikation arbeiten möchte. Umso wichtiger ist es, dass diese Seite vernünftig aussieht. In diesem Video werden wir die Startseite unserer Applikation mit Hilfe von Twitter Bootstrap so definieren, dass sie einen oberen Bereich hat, in dem man eine Suche nach Datensätzen durchführen kann und über den man einen neuen Datensatz anlegen kann und dass sie ein unteren Bereich hat in dem die bereits existierenden Datensätze angezeigt werden. Die Implementierung dieser Startseite nehmen wir innerhalb der bereits angelegten Datei index.xtml vor. Hier werden wir zunächst einmal zwei ui:define-Elemente einfügen. Nämlich ein ui:define-Element, was den Titel der Seite setzt und ein zweites ein ui:define-Element, was den eigentlichen Seiteninhalt überschreiben wird. Im Seiteninhalt werden die Inhalte, die wir darstellen wollen, in Form von zwei oder mehr div-Elementen präsentieren. Jedes dieser div-Elemente verfügt über die CSS-Klasse row, die ist von Twitter Bootstrap vorgegeben und repräsentiert eine Zeile. So eine Zeile kann dann aus bis zu zwölf verschiedenen Spalten bestehen und diese werden ebenfalls in Form von div-Elementen implementiert. Wir fügen nun hier ein Formular ein und innerhalb dieses Formulars wird sich dann eine Sucheingabemaske befinden, über die wir Datensätze suchen können und einen Button, um neue Datensätze anzulegen. Fangen wir mit dem Formular an. Das ist ein Formelement mit der Klasse form-horizontal und hier drin fügen wir nun ein div-Element ein mit der Klasse form-group und innerhalb dieser Form group befinden sich dann die Eingabeelemente. Zunächst einmal legen wir ein Label und eine TextBox an. Dieses Label geht über zwei Spalten. Das ist ausgedrückt über die CSS-Klasse col-sm-2, das sm steht für small und meint, dass die Schriftgröße klein ist. Und das Eingabefeld geht über sechs Spalten ausgedrückt über col-sm-6 als CSS-Klasse. Und das Ganze befindet sich innerhalb eines div-Containers und das Eingabefeld selbst ist einfach nur ein input-Element von TypeText mit der CSS-Klasse form-control. Nun fügen wir ebenfalls noch einen Button ein und dieser Button geht über den Bereich einer Spalte und er ist ausgeführt in Form eines Links, wird dann aber dargestellt wie ein Button. Zuletzt fügen wir noch über drei Spalten gehend einen weiteren Button ein. Dieser Button, wie gesagt, geht über drei Spalten ausgedrückt über col-sm-3 und diesen Button finde aber aus in Form einer JSF Link Komponente, denn wir möchten hier eine Weiterleitung auf eine noch nicht existierende Seite mit dem Namen editUser machen. Und das Ganze ist ebenfalls wieder dargestellt als ein Button, allerdings in einer anderen Farbe als ist der obige Button hat. Darüber hinaus fügen wir noch ein hübsches kleines Icon mit an, mit dem wir ausdrücken, dass der Benutzer hinzugefügt werden soll. Das wird ein kleines Pluszeichen. All das bringt uns Boostrap schon mit. Wir können nun unser Ergebnis einmal speichern und kurz im Browser betrachten Nach einigen Sekunden ist die Applikation deployed und wir können sie im Browser aufrufen oder uns in Eclipse selber anschauen. Das Ergebnis sieht doch schon durchaus passabel aus. Nun widmen wir uns dem nächsten Teil unserer Seite, nämlich der Anzeige aller Datensätze. Zu diesem Zweck wechseln wir wieder zurück in unsere index.xhtml Seite und widmen uns nun der nächsten Zeile. Die Darstellung der einzelnen Datensätze erfolgt in Form einer HTML Tabelle. Diese wird einfach in die Zeile eingefügt und sie verfügt über verschiedene CSS-Klassenangaben. Die Klassenangabe table gibt für Twitter Bootstrap darüber Auskunft, dass es sich um eine Tabelle handelt. Die Angaben table-striped und table-bordered sorgen dann dafür, dass die Tabelle farblich wechselseitig dargestellt wird und über einen Rahmen verfügt. Wir zeigen vier Spalten an, nämlich Name, Geburtstag, Beziehung und Aktionen Der Rumpf der Tabelle ist dann die Darstellung der verschiedenen Feldern. Zu diesem Zweck fügen wir ein tbody-Element ein und innerhalb dieses tbody-Elements dann eine Table row, in der sich dann die verschiedenen Felder befinden. Wir verfügen darüber hinaus noch über die Ausgabe eines Links. Dieser Link geht auf eine noch nicht existierende Detailseite mit dem Namen details.html und wird die ID des Datensatzes beinhalten. Wir speichern dies nun und können uns nun einmal anschauen, wie das Ganze dann aussehen wird. Das ist schon ein Schick, aber noch nicht perfekt, denn der Anfang der Elemente stimmt noch nicht überein. Und aus diesem Grund werden wir innerhalb der Row noch ein div-Element mit der Klasse col-sm-12 einfügen. Damit nehme ich die Tabelle über genau die verfügbare Breite geht, nicht breiter ist, aber auch nicht schmaler ist. Nun haben wir unsere Tabelle erfolgreich angelegt. Und wenn wir uns das Ergebnis betrachten, befindet sie sich nun tatsächlich auch in einer Flucht mit dem Kopf. In einem nächsten Schritt gilt es nun diese statischen Informationen, die wir jetzt hier vorliegen haben, mit Dynamik zu erfüllen, mit Leben zu erfüllen. In diesem Video haben wir uns angeschaut, wie wir mit Hilfe von ui:define-Elementen Inhalte einer Seite definieren können. Wir haben den Titel der Seite definiert und wir haben den Seiteninhalt definiert, wir haben eine Suchmaske angelegt und einen Button über den, wer zukünftig einen neuen Benutzer hinzufügen können. Darüber hinaus haben wir eine Tabelle angelegt und in dieser Tabelle haben wir einen Bereich definiert, in dem die Daten aller Benutzer anzeigbar sind. Wie gesagt im Moment ist das Ganze noch statisch.

Java EE 7: Geschäftsanwendungen

Verfolgen Sie, wie eine komplette Business-Applikation unter dem Einsatz des gesamten Java-Enterprise-Techologiestacks ensteht.

5 Std. 2 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!