Intel XDK: Responsive Webdesign mit dem App Designer (Hands-on-Lab)

Etiquetas

Einführung in die Cross-Plattform Entwicklung

 

Responsive Webdesign mit dem Intel XDK


[ Video-Training und weitere Artikel ]

Dieser Kurs steht am Ende von diesem Artikel auch als PDF-Datei zur Verfügung.

Einführung

Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird Schritt für Schritt eine Hybrid-App entwickelt und getestet.

Voraussetzungen

Die folgenden Voraussetzungen sind notwendig für die nächsten Schritte:

  • Das Intel XDK kostenlos Downloaden unter http://xdk.intel.com und installieren.
  • Es wird Windows, Mac OS X oder Linux benötigt.
  • Grundkenntnisse in HTML und JavaScript.

Was ist Responsive Webdesign?

Responsive Webdesign reagiert auf die Bildschirmauflösung (Höhe und Breite) des jeweiligen Anzeigegerätes PC, Ultrabook, Tablet oder Smartphone. Im Idealfall stufenlos und somit für nahezu alle Größen passend. Man spricht hier auch von „geräteoptimierter Darstellung“ oder „Fluid-Layout“.

Im klassischen Web gibt es dazu seit CSS3 die Media Queries. Mit dessen macht man die Darstellung der Layout-Elemente vom Gerät abhängig. Weitere Informationen dazu unter http://cssmediaqueries.com.

Zur vereinfachten Umsetzung gibt es JavaScript Frameworks wie zum Beispiel Twitter Bootstrap oder das Intel App Framework. Diese basieren auf CSS3 und JavaScript, bauen auf HTML5-Konzepte auf und unterstützen alle gängigen Browser. Diese helfen mit Tabellen das Layout aufzubauen, allerdings mit DIV-Elementen. Die Spalten und Zeilen werden via CSS-Klassen festgelegt. Die Tabelle wird auch als Grid-System bezeichnet. Das auf zwölf spalten begrenzt ist. Der Inhalt vom Grid-System passt sich automatisch auf die aktuelle Gerätegröße an. Sollte der Inhalt nicht perfekt angeordnet werden, kann man einfach durch Hinzufügen weiterer CSS-Klassen andere Regeln mitgeben.

Das Intel XDK bietet durch den App Designer ein ideales Tooling um die eigene Hybrid-App für Responsive Webdesign kompatibel zu machen. Ohne eine Zeile Code schreiben zu müssen.

Übung – Die eigene Hybrid-App mit dynamischen Layout

Für die Übung wählen wir die „Start with App Designer“-Vorlage aus und geben „ResponsiveAppBeispiel“ als Projektnamen ein. Wir erzeugen das Projekt per Klick auf den blauen Create-Button.


Abbildung 1 – Ein neues Projekt mit „ResponsiveAppBeispiel“ erzeugen

Es öffnet sich anschließend der App Designer mit einem Dialog. Dieses fragt welches JavaScript UI-Framework verwendet werden soll. In dieser Übung wird mit dem App Framework gearbeitet und wird mit einem Klick auf den Select-Button bestätigt.


Abbildung 2 – JavaScript UI-Framework auswählen

Der App Designer

Der App Designer selbst unterstützt unterschiedliche JavaScript UI Frameworks und bietet eine ideales Tooling für Responsive Webdesign. Wurde das Projekt erzeugt, befinden Sie sich bereits direkt im App Designer mit einer leeren Oberfläche. Diese ist standardmäßig 320 x 480 Pixel groß, was einer gängigen Smartphone Größe entspricht. Auf der linken Seite befinden sich die Projektdateien und daneben die Toolbox mit Steuerelemente.

Mit Drag-and-Drop wird jetzt ein Input-Steuerelement auf die Oberfläche platziert. Die passenden Eigenschaften befinden sich auf der rechten Bildschirmseite. Unter Label wird der Wert „Name“ geschrieben. Die Label Position soll auf „top left“ gesetzt werden.


Abbildung 3 – Input-Steuerelement auf der Oberfläche platzieren

Sobald das Steuerelement platziert wurde, wird automatisch ein DIV mit zwölf Spalten innerhalb von einer Zeile erzeugt. Das erkennt man auch oberhalb vom Designer, wenn am Rahmen beim Input-Steuerelement geklickt wird.


Abbildung 4 – Hierarchie der Layout-Elemente

Die Spalte soll sich jetzt aufteilen um weitere Steuerelemente seitlich anzeigen zu lassen. Dazu wird unter den Controls das Column-Layoutelement per Drag and Drop auf der rechten Seite neben dem Input-Steuerelement platziert.


Abbildung 5 – Eine neue Spalte hinzufügen

Eine neue Fläche wird rechts neben dem Input-Steuerelement angezeigt. Diese Fläche ist die neue Spalte, die automatisch auf 6 Spalten aufgeteilt wurde. Dieser fügen wir jetzt das Button Group-Steuerelement ein. Bei den Eigenschaften setzten wir dann den Haken bei Vertical. Die Buttons stehen dann untereinander.


Abbildung 6 – Button Group hinzufügen

Zum manuellen verstellen der Spalten dient die dunkel graue Spalte in der Mitte. Mit gedrückter Maustaste erscheinen dann die Anzahl der Spalten links und rechts. In diesem Beispiel möchten wir nichts verändern.


Abbildung 7 – Der App Designer zeigt die Spalten vom Grid-System an

Das gesetzte Input-Steuerelement und die Buttons sind für die Bedienung auf dem Smartphone viel zu eng einander gereiht. Jetzt soll die App automatisch bei einem Smartphone die Buttons unterhalb vom Input-Steuerelement platzieren. Dazu dienen Wrap Points, diese setzt man manuell durch ein Klick auf das Lineal oberhalb der Oberfläche oder über den „Insert Wrap-Point“-Button, der links oben mit einem Pfeil und Pluszeichen zur Verfügung steht. Für dieses Beispiel wird einfach auf das Pluszeichen geklickt. Der Wrap Point wird automatisch bei der aktuellen Auflösung gesetzt und die Spalte wird automatisch gebrochen.


Abbildung 8 – Einen „Wrap Point“ setzen

Die App kann nun innerhalb vom Emulator getestet werden. Wird ein Smartphone horizontal gedreht, wird der frei verfügbare Platz automatisch durch die Buttons belegt.


Abbildung 9 – Die Hybrid-App im Emulator testen


Abbildung 10 – Wird das Smartphone horizontal gedreht, wird der freue Platz automatisch besetzt

Media Queries mit dem App Designer

Der App Designer unterstützt nicht nur das Festlegen von Wrap Points, sondern auch das Erstellen von Media Queries. Dazu kann man manuelle CSS-Dateien anlegen oder durch den App Designer, die dann mit Media Queries verknüpft werden. Das Besondere daran ist, dass die Funktionalitäten ohne Programmieraufwand zur Verfügung stehen.

In diesem Beispiel selektieren wir das Button Group-Steuerelement. Passend dazu erscheinen auf der rechten Seite die Eigenschaften. Im Styles-Bereich befindet sich der Show-Hide-Button, über diesen können wir eine neue CSS-Klasse mit fertigen Eigenschaften zum Aus- und Einblenden erzeugen. Klicken wir ihn an und geben wir der Klasse den Namen „hideShowButtons“.


Abbildung 11 – Neue Show-Hide-CSS-Klasse erzeugen
 


Abbildung 12 – Name der CSS-Klasse festlegen

Nach dem Anlegen der CSS-Klasse ist diese auch selektiert. Im Media-Queries-Bereich ist im Standard immer „All“ für die CSS-Werte aller Auflösungen voreingestellt. Jetzt müssen wir eine weitere Media Query für eine bestimmte Auflösung hinzufügen. Dazu einfach auf das Plus-Icon klicken.


Abbildung 13 – Einen neuen Media Query für „hideShowButtons“ hinzufügen

Es erscheint ein Media Query Dialog. Bei diesem müssen wir ein Wrap Point festlegen. In diesem Beispiel wurde bereits ein Wrap Point gesetzt. Dieser wird nochmal explizit ausgewählt, so dass dieser farblich angezeigt wird.


Abbildung 14 – Im Media Query Dialog einen Wrap Point setzen

Eine neue Media Query wurde nun erzeugt und wird unter den Eigenschaften angezeigt. Jetzt setzen wir einen Haken in der Display-Checkbox mit dem aktivierten Wert none.


Abbildung 15 – Media Query Eigenschaften festlegen

Wir haben nun festgelegt dass bei einer Auflösung von 320 Pixel in der Breite die hideShowButtons mit der Eigenschaft Display auf none aktiv wird. Wird die Pixelbreite höher wie 320, wird automatisch das Media Query „All“ Aktiv. Im Emulator sieht man dass die Buttons in vertikaler Sicht ausgeblendet werden. Bei einer horizontalen Sicht, sind diese wieder auf dem Bildschirm aktiv.


Abbildung 16 – Die Hybrid-App im Emulator testen


Abbildung 17 – Wird das Smartphone horizontal gedreht, werden die Buttons wieder angezeigt

 

Lenguaje de programación

Zona

UX

Formato

Público

Sistemas operativos