Cross-Plattform-Entwicklung mit dem Intel XDK in HTML5 und JavaScript
Seite 4: Zusätzliche Seiten
Eine weitere Seite erstellen
Die App funktioniert nun und erweckt auf den ersten Blick im Emulator einen angenehmen Eindruck. Nun sollen bei der Auswahl eines Films die passenden Informationen auf einer neuen Seite angezeigt werden. m das einzurichten, ist zurück zum App Designer wechseln. Links oben lässt sich unter Pages per Klick auf den "New Page"-Button die besagte Seite generieren. Es erscheint ein Dialog zur neuen Seite. Ihr Name soll "infoPage" lauten und die Option "Page" soll aktiv bleiben.
Nach dem Erzeugen ist wieder eine Definition der Webdienst-Methode nötig. Dazu ist die aktuelle Seite unter "Pages" aufzuklappen und "sub-page infoPagesub" auszuwählen. Bei der Eigenschaft Service Method steht nun neben dem Standard Binding ein weiter Punkt mit "listitem uib_w_3 selection" zur Verfügung. Damit gibt die Anwendung aktuell genau den Datensatz durch, der auf der vorherigen Seite auf der Listview ausgewählt wurde. Bei der Eigenschaft "Data Path" wird wieder "(base)" benötigt.
Jetzt kann man die Oberfläche wieder mit Steuerelementen bestücken. Das erste wäre ein Header- Steuerelement, wie zu Beginn dieses Artikel beschrieben. Im Titel des Data-Binding ist nun allerdings der Wert "{{entry.title}}" als Platzhalter für den Titel des gewählten Films einzugeben.
Um das aktuelle Coverbild zu sehen, platziert man links unter "Controls" das IMG-Steuerelement auf
der Anwendungsoberfläche. Auch hier ist ein Data-Binding nötig. Bei der Eigenschaft "Src" fügt
man "{{entry.posters.profile}}" ein, und bei Caption folgt "{{entry.release_dates.theater}} {{entry.synopsis}}" mit der Position "bottom".
Wie in jeder guten App soll auch die hier erstellte eine Navigationsmöglichkeit enthalten. Auf der "infoPage" fügt man daher einen neuen Button auf der Oberfläche ein. Als Labelbeschreibung tippt man "Zurück" ein. Das Festlegen der Interaktion erfolgt nun rechts unten im Bereich "Interactivity": Das "listitem" wird auf "page infoPage" und der "Zurück"-Button auf "page mainpage" gesetzt.
Testrunde, die zweite
Nachdem die erste Hybrid-App fertig ist, kann man sie einmal im Emulator ausprobieren. Auf dem Startbildschirm sind nun die aktuellen Kinofilme zu sehen. Bei Auswahl einer der Filme, wechselt die Ansicht auf die Infoseite, und die App zeigt weitere Filminformationen mit Coverbild an.
Ein Test im Emulator liefert immer schnell ein Ergebnis, dennoch wird dringend ein Test auf der eigenen Hardware empfohlen. Über das Test-Tab lässt sich die App direkt auf einem beliebigen Gerät überprüfen. Auf Letzterem muss lediglich die App "Intel XDK App Preview" vom jeweiligen Store installiert sein. Für die Verbindung gibt es zwei unterschiedliche Möglichkeiten: Die erste verbirgt sich hinter "Mobile", wobei die App über die Cloud bereitgestellt wird. Die zweite ist WiFi, wodurch sich die App direkt über WLAN ausführen lässt.
