Intel XDK: Kostenlose Emulatoren für Responsive Webdesign

Dieser Artikel zeigt, dass das Intel XDK nicht nur eine kostenfreie komplett Lösung für die Cross-Plattform Entwicklung ist, sondern auch ideal für die klassische Web-Entwicklung dient.

Beim Emulate-Tab befindet sich das Open-Source Projekt Apache Ripple. Dieses wird vom Intel XDK-Team stark unterstützt. Möchte man nun für ein beliebiges Device die eigene Webseite testen, kann man links unter „Multi-Page Testing“ eine komplette URL eingeben und mit bestätigen auf „GO“ laden.

Abbildung 1 – Multi-Page Testing

Wechselt man nun das Gerät muss diese Eingabe wiederholt stattfinden. Das ist nicht gerade produktiv und deshalb gibt es einen ganz einfachen Trick:

Bei einem Projekt meinerseits arbeiten wir aktuell mit ASP.NET MVC und dem Responsive Webdesign Framework Bootstrap. Für uns bietet aktuell Visual Studio keine leichtgewichtige Lösung diese Web-Anwendung auf unterschiedlichen Geräten emulieren zu können. Höchstens die Entwicklungstools der Browser, die nur die aktuelle Browsergröße ändert aber nicht die gerätespezifische Browser-Engine emuliert.

Wir erzeugen beim Intel XDK ein neues Projekt mit der Projektvorlage „Start with a Blank Project“ und nennen es „EmulateMyProject“.

Abbildung 2 – Ein neues Projekt anlegen

Die Emulatoren sollen nun automatisch zur gewünschten URL vom lokalen Projekt wechseln. Dazu wird in der Index.html-Datei direkt im JavaScript-Bereich nach intel.xdk.device.hideSplashScreen(); die folgende Zeile Code hinzugefügt:

window.location = "http://localhost:8520";

Wichtig! Unter Visual Studio muss in den Projekteigenschaften bei Debugging der Port auf Fix festgelegt werden. Ansonsten ändert sich die Port-Adresse und das Intel XDK findet das lokale Projekt nicht mehr.

Abbildung 3 – Unter Visual Studio den Port festlegen

Das war es dann auch schon. Einmal muss das Projekt unter Visual Studio gestartet werden, damit sich der IIS Express startet und dann wechseln wir beim Intel XDK zum Emulate-Tab. Die Web-Anwendung wird nun automatisch im Emulator geladen, auch wenn ein anderes Gerät ausgewählt wird.

Abbildung 4 – Die ASP.NET Web-Anwendung mit Twitter Bootstrap im Emulator