© Excellent backgrounds/Shutterstock.com
Moderne Weboberflächen mit JavaServer Faces und Bootstrap

Frischzellenkur


JSF erfreut sich einer starken Verbreitung. Auch wenn die Aufnahme in den Java-EE-Stack ihren Teil dazu beigetragen hat, so war dies sicher nicht der einzige Grund für den Erfolg. Die Stärken sind seit jeher die umfangreiche Komponentenbibliotheken sowie die einfache Anbindung von Geschäftslogik an das Frontend. In der Praxis hat sich jedoch häufig gezeigt, dass sich die Bibliotheken als zu schwergewichtig erwiesen haben und das Design von modernen Weboberflächen aufwändig werden konnte. Die Anpassung gemäß den Vorgaben der Fachabteilungen und der Corporate Identity hat schon vielen Entwicklern einiges an Zeit und Nerven gekostet.

Im folgenden Artikel wollen wir zeigen, wie mit JSF und Bootstrap moderne Weboberflächen entwickelt werden können, die optisch ansprechend sind und Nutzern eine gelungene „User Experience“ bieten. Auch wenn es in der Zukunft noch zahlreiche Herausforderungen geben wird, so denken wir, dass es mit den Neuerungen von JSF 2.2 möglich ist, modernere und leichtgewichtigere Frameworks für Weboberflächen mit JSF zu verknüpfen.

„Mobile First“: Rette sich wer kann. Kleine Devices zuerst!

Die Entwicklung mit dem Bootstrap-Framework erleichtert die Entwicklung von Webseiten, egal um welches Endgerät es sich handelt. Ursprünglich von Twitter entwickelt, ist es seit August 2011 als Open-Source-Projekt auf GitHub für die Öffentlichkeit verfügbar. Über die Jahre hinweg wurde es aktiv weiterentwickelt und ist mittlerweile eines der beliebtesten Projekte auf GitHub. Neben der Unterstützung der gängigsten Browser war der Fokus von Bootstrap schon immer die Unterstützung von verschiedenen Endgeräten. Während sich schon Bootstrap 2 den Responsive-Design-Ansatz auf die Fahne geschrieben hatte, ist dieser Aspekt in Bootstrap 3 mit seinem „Mobile-First-Ansatz“ stärker in den Vordergrund gerückt. „Mobile First“ bedeutet nichts anderes als das Webseitendesign auf die Erfordernisse der mobilen Endgeräte auszurichten und auf die klassischen Formate (Desktop) zu skalieren. Neben einer Vielzahl spezieller Komponenten bietet Bootstrap auch ein spezifisches Layoutsystem, das es ermöglicht, Layouts zu erstellen, die sich den Fähigkeiten der Endgeräte anpassen. Analog zu Javas „Write once, run anywhere“ verspricht Bootstrap die zielgerichtete Darstellung von Webseiten auf allen Endgeräten.

„Smart Grids“ mal anders: Layout mit Bootstrap

Ein zentraler Bestandteil von Bootstrap ist das Grid-Layout. Es ist vergleichbar mit dem Gridbag-Layout von Swing. Inhalte wer...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang