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

Layout definieren, Teil 2: Bootstrap

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Eine unprofessionell gestaltete App wird potentiellen Kunden nicht zusagen. Deshalb binden Sie Bootstrap ein und sorgen so mit wenig Aufwand für ein professionelles Layout.

Transkript

Die beste Applikation der Welt nutzt Ihnen überhaupt nichts, wenn sie, nennen wir es mal so, Entwickler schön aussieht, das bedeutet eigentlich, kein Layout hat. Aus diesem Grund werden wir uns in diesem Video damit auseinandersetzen, wie wir mit Hilfe von Twitter Bootstrap ein schickes Layout erzeugen können. Wir werden Twitter Bootstrap herunterladen und die Ressourcen in unser Projekt mit übernehmen. Twitter Bootstrap als Framework ist ein UI-Framework. Es basiert auf HTML5, CSS3 und JavaScript und es ist relativ leicht in ein Projekt integrierbar. Unter der Haube wird sehr viel mit JQuery gearbeitet und Twitter Bootstrap ist Cross-Browser fähig. Das bedeutet, das läuft auf jedem modernen Browser und auch auf vielen älteren Browsern angenehm und schick und das Ganze sieht dann auch wirklich auf jedem Browser einigermaßen gleich aus und darüber hinaus ist Twitter Bootstrap responsiv. Das bedeutet, dass es auch auf zum Beispiel mobilen Geräten immer noch ganz vernünftig aussieht, was man dort gezaubert hat, solange wie man sich an die Regeln von Twitter Bootstrap hält. Twitter Bootstrap können Sie unter der Homepage unter getbootstrap.com herunterladen. Wenn Sie auf die Homepage kommen, haben Sie hier ein Link Namens Download Bootstrap und hier können Sie Bootstrap dann eben herunterladen und entsprechend speichern. Wenn Sie das Herunterladen erledigt haben, können Sie das Paket entpacken und werden dann in der Lage sein, die einzelnen Komponenten Ihrem Projekt hinzuzufügen. Die entpackte Bootstrap Distribution besteht aus drei Bereichen oder drei Teilen, nämlich einmal einem CSS-Bereich, einem Fonts-Bereich und einem JS-Bereich, in dem sich JavaScripte befinden. Sie haben hier an vielen Stellen immer doppelte Sachen drin, Sie haben einmal ein bootstrap.css und einmal ein bootstrap.min.css diese .MIN-Dateien sind minifiede Sachen, das bedeutet, die nehmen möglichst wenig Platz weg. Wir werden genau diese Minified-Sachen nun in unser Projekt mit aufnehmen. Zu diesem Zweck legen wir im Bereich WebContent nun erstmal einen neuen Ordner an mit dem Namen resources. Resources ist ein geschützter Name mit resources werden Ressourcen verwaltet und diese Ressourcen werden über ein spezielles Tag dann später in die Seite mit überführt. In diesem resources Unterordner legen wir dann weitere Ordner an, nämlich css, fonts und js und ja das entspricht den Ordnern, die mit Bootstrap ausgeliefert worden sind. Nun öffnen wir unseren Ordner, in dem wir Bootstrap entpackt haben und ziehen die bootstrap.min.css Datei und die bootstrap-theme.min.css Datei in den Ordner css. Wir kopieren die Datei darein und haben damit die CSS-Files in unser Projekt übernommen, analog gehen wir jetzt mit dem Ordner fonts vor, alle Inhalte ziehen wir in den Ordner fonts unseres Projektes und aus dem Ordner js kopieren wir bootstrap.min.js in den Ordner js. So damit haben wir Bootstrap unserem Projekt hinzugefügt. Nun öffnen wir unsere Template und werden hier im Kopfbereich die CSS-Dateien von Twitter Bootstrap einbinden. Wir machen dies mit Hilfe von outputStylesheet-Elementen. Die Library-Angabe erlaubt es uns eine Bibliothek unterhalb von resources anzugeben und Name ist dann der Dateiname nämlich bootstrap.min.css und das wiederholen wir noch einmal für bootstrap-theme.min.css und haben nun die Stylesheets von Twitter Bootstrap eingebaut. Im Fußbereich werden wir nun oberhalb des ui:inserts mit dem Namen scripts das Bootstrap JavaScript mit einbauen. Das machen wir über ein outputScript-Element. Die Library, also der Bereich, in dem es sich befindet, ist js und der Name ist bootstrap.min.js. Damit haben wir unsere Website erst einmal grundsätzlich für den Einsatz von Twitter Bootstrap konfiguriert. Hilfreich, aber nicht unbedingt zwingend notwendig ist der Download von jQuery dies finden Sie unter jquery.com und Sie laden bitte die aktuelle Version im Einzel Release runter. Zum Zeitpunkt der Erstellung dieses Video ist dies die Version 1.1 1.2. Nach dem Download können Sie jQuery Ihrem Projekt hinzufügen. Zu diesem Zweck lassen Sie den Package Explorer anzeigen und wechseln ihn in den Ordner, in dem sich jQuery befindet. Nun können Sie es per ziehen und fallenlassen in den Ordner js mit hineinkopieren und können es nun oberhalb der Bootstrap-Anweisung ebenfalls mit einfügen per outputScript-Element und haben damit Ihr Projekt schon für Boostrap und für jQuery konfiguriert. Nun können wir unser Tempate ein wenig anpassen. Das div, was sich außerhalb der Inserts befindet, verfügt nun über eine zusätzliche Angabe, nämlich eine Klassenangabe und zwar ist die Klasse Container. Container ist das Würzelelement, was Twitter Bootstrap erwartet. Den Header passen wir jedenfalls an und zwar geben wir dem div-Element ebenfalls eine CSS-Klasse mit und zwar navbar-brand, hier können wir jetzt einen schöneren Titel geben zum Beispiel Kundenverwaltung. Wir packen das Ganze noch in einen äußeren div-Container und dieser äußere div-Container hat die Klassen navbar und navbar-inverse. Jetzt haben wir nämlich eine Navigationsleiste für den oberen Rand definiert. Und zu guter Letzt können wir das Textelement Kundenverwaltung noch mit einem Link versehen und zwar lassen wir es immer auf die Indexdatei zeigen. Ich gebe nicht allerdings keine Dateiendung an, denn dieser Link ist ein JSF-Link und der wird dann so interpretiert, dass nach einem Outcome mit dem Namen Link gesucht wird, also nach einem Ergebnis einer Methode beziehungsweise einem Eintrag, in der faces-config.xml Datei und wenn es das nicht gibt, dann wird die Datei index.html beziehungsweise index.xhtml aufgerufen. Damit haben wir unseren Header konfiguriert und unser template ganz grob für den Einsatz mit Twitter Bootstrap vorbereitet. Wenn wir uns nun das Ergebnis unseren Bemühungen anschauen, denn werden wir feststellen, dass das Ganze eigentlich schon ziemlich professionell aussieht. Wir starten zu diesem Zweck das Projekt auf dem Server und sehen, wir haben nun einen checkin header mit einem funktionierenden Link. In diesem Video haben wir geklärt, wie wir unserem Projekt Twitter Bootstrap als UI-Framework hinzufügen können. Wir haben zu diesem Zweck den Ordner resources angelegt und die Unterordner css, fonts und js und dort die jeweiligen Komponenten von Bootstrap hineinkopiert. Ebenfalls haben wir dem Ordner js das jQuery-Framework hinzugefügt. Anschließend haben wir per outputStylesheet beziehungsweise outputScript Angaben dafür gesorgt, dass die entsprechenden Komponenten in unserer Seite angezeigt werden. Mit ein klein wenig Kosmetik konnten wir schaffen, dass der Header sehr schick aussieht .

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!