Java EE 7: Web Services

Webfrontend mit HTML und Twitter Bootstrap

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erklärt, wie Sie Twitter Bootstrap, AngularJS und jQuery in eine Webseite einbinden können. Außerdem lernen Sie, wie mit dem Bootstrap-Framework professionelle Applikationslayouts mit wenig Aufwand erstellt werden können.

Transkript

Der ganze schöne Java-Code, den wir bisher geschrieben haben, nutzt uns noch gar nichts ohne ein Frontend. Ohne eine Komponente, die also unsere Kunden anzeigt und verwaltbar gestaltet. Dies werden wir mit HTML umsetzen und in diesem Video werden wir uns damit auseinandersetzen, was wir benötigen, um ein schickes Frontend mit wenig Aufwand schreiben zu können. Wir werden uns anschauen, wie die Seite aussieht, in der wir uns bewegen, und wir werden einen ersten Blick auf den AngularJS Controller werfen. Das Webfrontend besteht, wie gesagt aus HTML und es ist eine sogenannte Single-Page-Applikation. Das bedeutet, es gibt wirklich nur genau diese eine Seite. In dieser einen Seite spielt sich dann alles ab. Das Darstellen der Benutzer, das Anlegen eines neuen Benutzers, das Verarbeiten der Benutzer und Bearbeiten der Benutzer, und auch das Löschen von Benutzern. Genau dasselbe gilt auch für die Adressen. Das alles innerhalb von einer HTML-Seite sorgt dann zwar für jede Menge HTML, das wir schreiben müssen, auf der anderen Seite verringert es aber sehr, sehr stark die Ladezeiten. Damit das Ganze vernünftig funktioniert, verwenden wir Twitter Bootstrap für das Layout. Twitter Bootstrap ist ein Framework, was tatsächlich von der Firma Twitter bereitgestellt worden ist und dieses Twitter Bootstrap-Layout-Modell hat aber jetzt nichts mit der Twitter-Webseite zu tun, sondern verfolgt den Ansatz, dass eine Webseite im Grunde aus 12 gleichgroßen Spalten besteht. Und auf Ebene von Twitter Bootstrap als Framework, hat man dann die Möglichkeit diese 12 Spalten mit Leben zu befüllen. Es gibt vordefinierte CSS-Stile und -Klassen Es gibt die Möglichkeit, dass wir schicke Layouts mit sehr wenig Aufwand zaubern können. Wir können zum Beispiel auch Navigationsleisten oder große Header damit bauen. Das alles ist schon in Twitter Bootstrap drin und muss letztlich dann für eine professionelle Applikation vielleicht noch mal an die eigenen geschmacklichen Vorstellungen angepasst werden. Aber es gibt uns einen sehr, sehr, sehr schönen Start und deswegen benutzen wir den Twitter Bootstrap hier an dieser Stelle. Um die bereits angesprochene, durchaus umfangreiche Logik abbilden zu können: auf der Client-Seite verwenden wir AngularJS. AngularJS ist ein Framework, mit dem wir im Grunde einen Model-View- Controller-Ansatz umsetzen können und das für eine JavaScript-Webapplikation. Zu diesem Zweck definieren wir in AngularJS eine Applikation und innerhalb dieser Applikation dann einen oder potenziell auch mehrere Controller Und die werden dann an die Seite oder Teile der Seiten gebunden. Bestimmte optische Effekte, wie zum Beispiel das Ein- und Ausblenden der Nachricht werden wir mit Hilfe von jQuery umsetzen. So. Genug der Vorrede. Lassen Sie uns einen Blick auf das HTML werfen. Ich habe die Seite schon vorbereitet. Und wir müssen dort nur noch Kleinigkeiten implementieren. Wir befinden uns hier in der Startseite. Eigentlich der einzigen Seite, der Kundenverwaltung. Ich habe einmal die komplette HTML-Sicht aufgemacht, so dass wir sehen können, womit wir es hier zu tun haben. Wie bereits erwähnt, es handelt sich um eine HTML-Seite und im Kopf der HTML-Seite sind sowohl CSS als auch JavaScripte erfasst und hinterlegt. Wichtig ist hier, dass die ganzen Frameworks, die wir benutzen, jQuery, Bootstrap und AngularJS, von uns schon lokal heruntergeladen worden sind und sich innerhalb der Applikation im Unterverzeichnis js befinden. Das Ganze sollten Sie auch bei produktiven Applikationen machen. Sie sollten nicht der Versuchung erliegen, über sogenannte CDNs zu gehen, also Content Delivery Networks, und hier dann komplette Adressen einzugeben, die irgendwo ins Internet zeigen, denn das Problem ist, dass, wenn einmal so eine Adresse irgendwie kompromittiert worden ist, dann ist Ihre Webapplikation und die Browser Ihrer Kunden sofort kompromittiert. Aus diesem Grund empfehle ich immer, die Sachen lokal runterzuladen und dann dort in einem Unterverzeichnis abzulegen. Genau dasselbe haben wir mit dem CSS von Twitter Bootstrap gemacht. Übrigens: Die Begrifflichkeit min hier drin in diesen Adressen, beziehungsweise Scriptnamen bedeutet immer, dass es sich um die sogenannte Minifight-Variante handelt. Die ist nicht von Menschen lesbar, dafür aber extrem optimiert im Bezug auf die Dateigröße. Zuletzt haben wir hier noch ein eigenes Script eingebunden. Und in diesem eigenen Script befindet sich unsere eigene Implementierung. Wie gesagt, wir verwenden Twitter Bootstrap für das Layout-Modell. Und Twitter Bootstrap ist eigentlich ein einfach zu lernendes und zu begreifendes Layout-Modell. Grundsätzlich ist es so, dass es immer sogenannte Container gibt. Das sehen Sie hier hervorgehoben. Bei der Adressübersicht gibt es ein div mit der Klasse Container. Innerhalb eines Containers befinden sich dann verschiedene, meistens mehrere, so genannte Rows, das sind Zeilen. Jede Zeile kann dabei über bis zu 12 Spalten verfügen. Wir werden nun einmal den Header implementieren und auch im Header findet sich dieses Modell wieder. Allerdings, damit der Header als Header auch erkennbar ist, legen wir ihn in ein div mit der Klasse jumbotron. Das ist etwas, was Sie bei Twitter Bootstrap bereits bekommen und was Sie dann gerne auch in einer eigenen Applikation entsprechend an Ihre Bedürfnisse anpassen können. Nun legen wir ein div mit der Klasse Container an. Und innerhalb dieses Containers werden wir nun 2 divs definieren, die als Zeilen dienen. Einmal ein div dann für die große Überschrift und ein div, um die Statusmeldungen von der Applikation, die über Websockets geliefert werden, anzuzeigen. Nun können wir die einzelnen Spalten definieren. Das Spaltenmodell von Twitter Bootstrap basiert darauf, dass der verfügbare Platz in 12 verschiedene Spalten unterteilt wird. Alle Spalten sind gleich groß grundsätzlich und Sie können nun mit Hilfe der diversen Col-Klassen angeben, wie breit die jeweilige Spalte gerade sein soll. Sie fangen also immer an mit dem Präfix col. Danach geben Sie ein Kürzel an: lg, md oder sm. lg steht für large, md steht für medium und sm für small. Und dieses Kürzel bezieht sich auf die Schriftgröße. Wir können jetzt also hier das Kürzel sm angeben und der dritte Wert, den Sie angeben, das ist die Anzahl der Spalten, die diese Spalte breit sein soll. Wie gesagt, 12 Spalten stehen zur Verfügung und eine Angabe von col-sm-1 würde zum Beispiel dafür sorgen, dass diese Spalte genau 1/12 breit ist. Eine Angabe von col-sm-3 würde dafür sorgen, dass die Spalte 1/4 des verfügbaren Platzes einnimmt, nämlich 3/12. Und die Angabe von col-sm-12, wie in diesem Fall, sorgt dafür, dass sie über die gesamte Breite geht. Grundsätzlich kann es natürlich in jeder Zeile mehrere Spalten geben. Wie in diesem Fall. Hier definieren wir nämlich zuerst eine Spalte mit der Breite 1. Die dient als Platzhalter, damit der Platz optisch schonmal belegt ist. Denn die zweite Spalte mit der Breite 11 bekommt noch eine ID. Nämlich customerMessage. Und die wird dann später beim Eintreffen einer Websocket-Nachricht befüllt werden mit Inhalten uns so ist sie nun erstmal leer. Aus diesem Grund haben wir, wie gesagt, die Platzhalterspalte davor definiert und haben so sichergestellt, dass es nachher nicht zu irgendwelchen Rucklern auf der Seite kommt. Neben Zeilen wollen Sie möglicherweise auch Tabellen anlegen. Wir werden uns einmal anschauen, wie das funktionieren kann. Wir haben hier bereits eine Tabelle definiert. Die Tabelle befindet sich innerhalb eines div-Elements mit der Klasse row und die Klasse der Tabelle lautet table. Wir können darüber hinaus zusätzliche CSS-Klassen mit angeben. Zum Beispiel table-hover und table-striped. Table-hover sorgt dafür, dass die Tabelle beim Überfahren die aktuelle Zeile hervorhebt und table-striped sorgt dafür, dass die Datensätze wechselseitig eine andere Hintergrundfarbe erhalten. Der Rest der Tabelle wird ganz normal implementiert. Wir haben einen Kopfbereich und wir haben einen Body-Bereich. Twitter Bootstrap ist sehr stark an den Stellen, wo es darum geht, Buttons zum Beispiel schön zu gestalten. Ich habe auch dazu schon einmal etwas vorbereitet. Und zwar gibt es hier zwei Buttons. Eigentlich sind diese Buttons aber gar keine Buttons, sondern es sind ganz normale HTML-Anchor-Elemente. Um diese Buttons als Buttons darstellen zu können, werden wir ihnen die Rolle button zuweisen und sie bekommen mindestens die Klasse btn zugewiesen. Über die zusätzlichen Klassen, wie btn-success oder btn-default, können Sie dafür sorgen, dass die Buttons dann eine spezifische Farbe haben. Btn-success färbt den Button grün. btn-default sorgt für eine weiße Färbung. Sie können darüberhinaus aber auch noch echte Buttons definieren. Diese befinden sich aber immer innerhalb von Formular-Elementen. So ein Formularelement wird stets ausgedrückt in Form eines Form-Tags und verfügt über das Attribut role mit dem Wert form. Darüber hinaus kann so ein Formular über die Klasse form-group verfügen. Damit wird ausgesagt, dass die untergeordneten Elemente in einer bestimmten Art und Weise dargestellt werden sollen. Die zusätzliche Zuweisung von form-group-sm sorgt dafür, dass die Elemente etwas kleiner dargestellt werden als bei Bootstrap üblich. Die einzelnen Formularelemente verfügen dann über die CSS-Klasse form-control. Und mit Hilfe dieser CSS-Klasse werden sie in der Twitter Bootstrap-typischen touch-optimierten Art und Weise dargestellt. Ebenfalls sind wir in der Lage, Buttons zu definieren. Echte Buttons. Und das machen wir, indem wir Input-Elemente vom Type Button oder vom Type Submit definieren oder Button-Elemente definieren und diesen Button-Elementen können wir dann über ihre CSS-Klassen auch wieder ein Aussehen zuweisen, nämlich die Klasse btn sorgt dafür, dass das so ein typischer Twitter Bootstrap-Button wird und btn-success oder btn-danger oder btn-default sorgen dann für eine grüne, rote oder weiße Färbung des Buttons. Das sieht dann in Natura so aus, wie man das hier sehen kann. Die Elemente haben dann halt die entsprechenden Farben und können entsprechend dann auch dargestellt werden und sind somit für den Benutzer einfach eindeutiger in ihrer Bestimmung. In diesem Video haben wir uns damit auseinandergesetzt, wie wir unsere Single-Page-Applikation grundsätzlich aufbauen können und wie wir mit Twitter-Bootstrap ein Grundlayout erzeugen können.

Java EE 7: Web Services

Steigen Sie ein in die Java-Enterprise-Welt und lernen Sie, wie Nachrichten ausgetauscht und Dienste definiert werden.

5 Std. 13 min (30 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!