Cross-Plattform-Entwicklung mit dem Intel XDK in HTML5 und JavaScript
Seite 2: App Designer
Die erste eigene Hybrid-App
Durch ein kleines Beispiel soll im Folgenden das Intel XDK und die Entwicklung damit veranschaulicht werden. Dessen Inhalt soll eine Kino-App sein, die aktuelle deutsche Kinofilme mit Cover und einer Filmbeschreibung zeigt.
Für das erste Starten des XDK wird ein kostenfreies Entwicklerkonto bei Intel benötigt, das später für das Testen und Ausführen auf eigenen Geräten zum Einsatz kommt. Nach dem Anmelden sieht man die Projektverwaltung, in der unterschiedliche Vorlagen zur Verfügung stehen. Sie sind folgender Tabelle genauer beschrieben.
| Projektvorlage | Beschreibung |
| Start with a Blank Project | ein leeres Projekt mit Verweis auf das Intel App Framework ohne App Designer |
| Work with a Demo | 14 fertige Demoanwendungen als Vorlage und zum Ausprobieren |
| Start with a Template | fertige Projekt-Templates mit App-Designer-Unterstützung und Verweis auf das Intel App Framework |
| Import an Existing App | vorhandenes Projekt einbinden |
| Use App Starter | dient nur zum Ausprobieren für HTML-Anfänger, eine Art Prototyp-Vorlage |
| Start with App Designer | leeres Projekt mit App-Designer-Unterstützung |
Für das Beispiel wird "Start with App Designer" ausgewählt und der Projektname "KinoApp" eingegeben. Mit einem Klick auf den blauen Create-Button rechts unten lässt sich das Projekt im Anschluss erzeugen.
Der App Designer im Develop-Tab
Zu Beginn landet man direkt beim von Intel entwickelten App Designer im Develop-Tab. Er dient dem schnellen Bestücken der Nutzeroberfläche. Das Besondere ist der eingebaute Support für unterschiedliche JavaScript UI Frameworks, die Responsive Webdesign ermöglichen. Darunter zählt das Intel App Framework, Twitter Bootstrap 3, jQuery Mobile und Topcoat. Für die Beispielanwendung kommt das Intel App Framework zum Einsatz.
Der Aufbau ist dem bekannter Anwendungsdesigner sehr ähnlich. Auf der linken Seite ganz oben befinden sich alle Seiten, direkt darunter die Steuerelemente. In der Mitte vom Bildschirm ist die Oberfläche der App zu sehen. Auf der rechten Seite befinden sich die Eigenschaften des ausgewählten Steuerelements oder der aktuellen Seite. Rechts unten sind die allgemeinen Interaktionen zu finden, womit sich Steuerelemente mit JavaScript-Code oder anderen Seiten verbinden lassen.
Zuerst soll ein Header-Element zur Anzeige des Namens der App erstellt werden. Dazu ist auf der linken Seite unter "Controls" im Layout- Bereich das Header-Steuerelement auszuwählen und per Drag-and-drop zur App-Oberfläche hinzuzufügen. In den Eigenschaften kann man im Anschluss "Title" aktivieren und erhält den Wert "Meine KinoApp".
Nun soll die Anwendung die aktuellen Kinofilme mit einer Vorschau in einer Liste anzeigen. Wählt der Nutzer dann einen Film aus, erscheint auf einer neuen Seite der passende Informationstext.
Für die Liste platziert man auf der linken Seite das Listview-Steuerelement auf halber Höhe der App-Oberfläche. In ihm stehen automatisch drei Einträge. Die Listview benötigt mindestens einen Eintrag, weshalb nun zwei manuell zu entfernen sind. Durch einen Klick auf einen Eintrag lässt sich dieser auswählen, ein weiterer Rechtsklick öffnet das Kontextmenü. Wählt man dort "Delete" und bestätigt durch einen Klick, lässt sich der Eintrag entfernen.
