Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Mobile Apps mit Cordova

GUI mit Bootstrap gestalten

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Framework Bootstrap eignet sich hervorragend zur Erstellung einer GUI. Bootstrap setzt auf jQuery auf und beschreibt deklarativ Strukturen mittels der Verwendung von Klassen. Während jQuery Mobile explizit für mobile Seiten bzw. Apps und jQuery UI für Desktop-RIAs optimiert sind, kann Bootstrap für beide Welten genutzt werden.
05:39

Transkript

In diesem Video möchte ich Ihnen den Einsatz von Bootstrap zur Gestaltung einer Oberfläche bei einer Cordova-App etwas näher bringen. Es ist eine Möglichkeit, um sehr flexible grafische Oberflächen zu bauen. Sie können sich jetzt fragen: "OK, ich habe doch jQuery Mobile beispielsweise oder ich hätte auch jQuery UI zur Not zur Verfügung. Warum jetzt noch ein weiteres Framework?" Der Sinn und Zweck ist, dass hier ein sog. Responsive Design mit möglich ist. Sie sehen, dass man hier verschiedene CSS- und JavaScript-Dateien in eine Webseite einbinden muss. Genau so, wie wir es beispielsweise bei jQuery Mobile machen. Es ist sogar so, dass Bootstrap tatsächlich auf jQuery aufbaut; jQuery, nicht jQuery Mobile. Entsprechend werden auch die Codes so aussehen, dass man zuerst jQuery einbindet und dann eben Bootstrap. Wir schauen uns mal eine Beispiel-Applikation an, die Sie gleich noch mehr sehen werden. Das hier ist die HTML-Seite für die App, also die "index.html". und Sie sehen, hier gibt es die Verbindungen zu einer CSS-Datei für Bootstrap, noch was von Bootstrap. Dann kommt eine Zeile mit eigenem CSS und noch so ein bisschen was anderes, das spielt jetzt keine große Rolle. Aber der entscheidende Punkt hier ist Bootstrap mit seinen CSS-Regeln eingebunden, entsprechend wie Sie es in der Dokumentation eben hier gesehen haben und am Ende der App haben wir die Script-Einbindung und Sie sehen, hier wird jQuery eingebunden, das wird benötigt von Bootstrap, dann kommt die Script-Referenz auf die Bootstrap-JavaScript-Datei und dann kommen JavaScript-Anweisungen für Cordova, zwei Stück in diesem Fall und dann mein eigenes JavaScript. Sie sehen nun hier eine Cordova-App, die im Ripple-Emulator ausgeführt wird und diese Eingabefelder, die Sie hier sehen, die sind mit Bootstrap gemacht. Das heißt, ich kann hier beispielsweise eine "ID" eingeben, "Anzeigenamen", tatsächliche "Namen", "Spitzname" und so weiter. Was da tatsächlich passiert, ist gar nicht das Interessante. Das Interessante ist, dass die optische Gestaltung von Bootstrap vorgenommen wird. Das ist ein normales Formular, was aber nicht wie ein normales Webformular aussieht. Wir haben hier ein ähnliches Verhalten, was auch jQuery Mobile macht. Es wird über die Zuweisung gewisser Klassen eine Optik und eine Verhaltensweise geregelt. Es ist eine deklarative Vorgehensweise. Wir schauen uns das mal kurz im Quellcode an. Ich habe hier bestimmte Klassen, "form-group" beispielsweise, "form-control", und diese Klassen sorgen dafür, dass das Framework Bootstrap aus diesen im Grunde Standard-HTML-Elementen etwas Besonderes macht. Eine optisch angepasste Version, smarter, viel besser auf gewisse Gegebenheiten angepasst. Wir haben ein Responsive Design. Dieser Begriff ist am Anfang schonmal gefallen. Was bedeutet das eigentlich? Ganz vereinfacht bedeutet das, dass sich die grafische Oberfläche an die Gegebenheiten beim Besucher anpasst oder der Inhalt. Es ist eigentlich ein zwangsläufiges Konzept moderner Oberflächen. Aber hier werden noch einige Besonderheiten bei einem Responsive Design gefordert. Nämlich nicht, dass eine Skalierung stattfindet, sondern, dass eine Anpassung der Elemente an die verfügbaren Gegebenheiten stattfindet. Dass beispielsweise Elemente nebeneinander angeordnet werden, wenn Platz ist und untereinander, wenn kein Platz ist. Dass sie eben nicht skaliert werden, sondern die Reihenfolge angepasst wird. Das könnte also dazu führen, dass dieser Kasten zur Ausgabe neben dem Formular angezeigt wird und nicht unter dem Formular. In diesem Fall, so wie diese App konzipiert ist, macht das keinen Sinn. Aber grundsätzlich könnte dieser Kasten bei einem Responsive Design neben anderen Komponenten zu sehen sein. Das ist ein Kern dessen, was dieses Responsive Design ausmacht. Sie erhalten also beispielsweise eine angepasste Navigation; Seitenspalten, wenn möglich ist; man kann Texte in unterschiedlicher Größe und Formatierung darstellen; Bilder können skaliert werden und es kann vor allen Dingen auch eine Nutzung unterschiedlicher Eingabemethoden und Techniken erfolgen je nach Plattform. Das heißt, eine solche Webseite kann beispielsweise auf einem mobilen Gerät dafür sorgen, dass hier so eine Tastatur auftaucht. In einer normalen Webseite wird das nicht der Fall sein, weil man dort ja die tatsächliche Tastatur des Rechners zur Verfügung hat. All so etwas hängt damit zusammen. Die technische Basis ist da: das neue HTML5, CSS3 und insbesondere die sog. Meta Queries und eben JavaScript sowie Design-Vorlagen, also Templates. Bootstrap nutzt das ganz extrem und hat einen sog. "Mobile First"-Ansatz. Das heißt, das Ziel von Bootstrap ist, erst einmal eine mobile Seite, eine mobile Applikation, zu erzeugen, aber sofern die Gegebenheiten so sind, dass beispielsweise so eine Seite mit einem Desktop-Browser geladen wird, wird es sich an diesen anpassen. Das Ziel aber, dass es eben zuerst mobil vernünftig funktionieren und aussehen soll, das merkt man und das prädestiniert eben Bootstrap auch zur Gestaltung einer GUI bei einer Cordova-App.

Mobile Apps mit Cordova

Schreiben Sie mit Cordova mobile Apps, die nicht nur auf einer bestimmten mobilen Plattform laufen, sondern in verschiedenen Umgebungen.

3 Std. 58 min (59 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!