Dieser Artikel wurde maschinell übersetzt.

HTML5

Entwicklung von HTML 5 Windows Phone-Apps mit Apache Cordova

Colin Eberhardt

Dieser Artikel stellt Apache Cordova, ein Framework zum Erstellen von Cross-Plattform mobile Anwendungen mit HTML5 und JavaScript, und zeigt, wie es zur Entwicklung von Anwendungen für Windows Phone verwendet werden kann.

Windows Phone und seine Entwicklung systemeigener-Plattform können Sie mit Leichtigkeit-schöne Metro-Stil-Anwendungen zu erstellen.Windows Phone beginnt mit der letzten Nokia Partnerschaft seinen Weg in mehr und mehr Taschen finden.

Den letzten veröffentlichte Forschung Daten Marktforschungsunternehmen Gartner Inc.prognostiziert eine vielversprechende Zukunft für das Microsoft-Betriebssystem (bit.ly/h5Ic32), mit beträchtlicher Marktmacht Teilen in einem fragmentierten Markt.Wenn Sie eine Smartphone-Anwendung entwickeln, bedeutet diese Zersplitterung des Marktes, dass Sie, die entweder zu wählen welches OS Ziel oder die gleiche Anwendung mehrere Male mit der Vielfalt der Sprachen schreiben diese Telefone haben (c#, Java und Objective-C) benötigen.

Allerdings gibt es einen anderen Weg.Alle diese Smartphones haben einen sehr fähigen Browser in vielerlei Hinsicht leistungsfähiger als ihre desktop-Pendants, wo einige Leute immer noch archaische Browser verwenden!Moderne Smartphones können Sie Anwendungen erstellen, die innerhalb des Browsers mit einer Kombination aus HTML5, JavaScript und CSS ausgeführt.Mit diesen Technologien können Sie möglicherweise eine einzelne Browser-basierte Anwendung schreiben, die über ein breites Spektrum von Smartphone-Geräte ausgeführt wird.

Einführung in Apache Cordova

Sie können eine HTML5-basierte mobile Anwendung erstellen, durch Erstellen einer öffentlichen Webseite mit JavaScript und HTML5 Inhalte und Regie Menschen zum hosting URL.Allerdings gibt es ein paar Probleme mit diesem Ansatz.Das erste ist das Verteilungsmodell über online-Marktplätze und Stores.Einreichen Sie können nicht die URL, die hostet Ihre Webanwendung auf einem Markt, so wie Sie es Geld verdienen können?Das zweite Problem ist, wie man das Telefon Hardware zugreifen.Es gibt keine weithin unterstützten Browser APIs für den Zugriff auf Benachrichtigungen, Telefonkontakte, Sensoren, Kameras und so weiter.Apache Cordova (nur Cordova nachstehend aus Platzgründen) ist eine freie und open-Source-Framework, das löst beide Probleme.

Cordova fing Leben als PhoneGap, das von Nitobi entwickelt wurde.Im Oktober 2011 wurde Nitobi erworben von Adobe Systems Inc., mit der PhoneGap-Framework wird Open-Source unter der Apache Software Foundation und Cordova umbenannt.Dieser Übergang ist noch im Gange.

Cordova bietet eine Umgebung für das Hosten Ihrer HTML5/JavaScript-Inhalte innerhalb eines dünnen systemeigenen Wrapper.Für jedes Smartphone OS verwendet es eine systemeigene Webbrowser-Steuerelement zum Rendern Ihrer Anwendungsinhalte, mit der Anwendung wird die verteilbare gebündelt.Mit Windows Phone sind Ihre HTML5-Ressourcen innerhalb der XAP-Datei verpackt und in isolierten Speicher geladen, wenn die Cordova-Anwendung startet.Zur Laufzeit rendert den Inhalt ein WebBrowser-Steuerelements und führt den JavaScript-Code.

Cordova bietet auch eine Reihe von standard-APIs für den Zugriff auf die Funktionalität, die über verschiedene Smartphones üblich ist.Zu diesen Funktionen zählen:

• Application Lifecycle-Ereignisse
• Speicher (HTML5 local Storage und Datenbanken)
• Contacts
• Kamera
• Geolocation
• Beschleunigungssensor

Jeweils von der vorangegangenen Funktionalitäten ausgesetzt ist als ein Java­Skript-API, die Sie aus dem JavaScript-Code verwenden.Cordova bedeutet all die harte Arbeit bei der Bereitstellung der erforderlichen nativen Implementierung, um sicherzustellen, dass Sie gegen den gleichen JavaScript-APIs, unabhängig davon das Telefon OS Code Arbeiten beteiligten läuft, wie in dargestellt Abbildung 1.

Abbildung 1 Cordova kann die gleiche HTML5 Anwendung über eine Reihe von Mobile-Betriebssystemen laufen

Der Großteil dieses Artikels erläutert Cordova aus der Perspektive eines Entwicklers Windows Phone, wo Entwicklung erfolgt innerhalb von Visual Studio und testen Sie Ihre Anwendung auf dem Emulator oder ein physisches Gerät.Cordova ist eine Cross-Plattform-Technik, entwickeln Sie in der Regel mit Ihren Editor oder IDE der Wahl, so dass ein iOS-Entwickler eine Cordova Anwendung in Xcode entwickeln würde und ein Android-Entwickler würde höchstwahrscheinlich Eclipse verwenden.

Cordova hat auch einen Cloud-basierte Builddienst namens Build (build.phonegap.com), wo Sie Ihre HTML5/JavaScript-Inhalte einreichen können.Nach kurzer Zeit gibt es Distributionen für den Großteil der Cordova-unterstützte Plattformen.Dies bedeutet, dass Sie brauchen nicht zu Kopien der verschiedenen plattformspezifischen IDEs (oder einen Mac-Computer), um Ihre Anwendung für eine Reihe von Plattformen zu erstellen haben.Der Build Service ist Eigentum von Adobe und ist derzeit in der Beta und kostenlos zu benutzen.Es bleibt frei für open Source Projekte.

Erwerb der Tools

Es wird davon ausgegangen, dass Sie bereits Visual Studio Windows Phone SDK und (optional) Zune für Windows Phone Entwicklung eingerichtet.Wenn nicht, Sie die Tools kostenlos erhalten können, indem Sie Visual Studio 2010 Express für Windows Phone herunterladen (bit.ly/dTsCH2).

Erhalten Sie die neuesten Cordova-Developer-Tools von der PhoneGap-Website (phonegap.com), auch wenn zukünftige Versionen über Apache verteilt werden (incubator.apache.org/cordova).Der Download enthält die Vorlagen, Bibliotheken und Skripten erforderlich, Cordova Anwendungen auf allen unterstützten Plattformen zu entwickeln.Sie wollen natürlich die Version Windows Phone verwenden.

Nachdem Sie die Cordova Tools heruntergeladen haben, folgen Sie der Windows Phone Get Started-Guide (http://phonegap.com/getstarted/) und installieren Sie die Visual Studio-Vorlage.Erstellen eines "Hello World"-Anwendung im Stil ist so einfach wie ein neues Projekt basierend auf der angegebenen Vorlage erstellen, wie in gezeigt Abbildung 2.

Abbildung 2 Cordova für Windows Phone enthält eine Visual Studio-Vorlage

Wenn Sie erstellen und des Projekts von der Vorlage auf den Emulator erstellt bereitstellen, Sie sollte begrüßt werden mit der Meldung "Hallo Cordova," wie im Abbildung 3.

Abbildung 3 der Cordova Vorlage-Anwendungs auf einem Emulator ausgeführt

Die Anatomie einer Windows Phone Cordova Anwendung

Obwohl Sie eine Cordova Anwendung ohne viel wissen wie es funktioniert unter der Haube entwickeln können, es lohnt zu verstehen was die verschiedenen Dateien, die von der Vorlage erstellt werden, wie in Abbildung 4.

Abbildung 4 die Cordova Vorlage-Ordner-Struktur

Schwerpunkt der Cordova-Dateien in Abbildung 4 (von oben nach unten), beachten Sie Folgendes:

• GapLib/WP7CordovaClassLib.dll ist der Cordova-Assembly.Dies enthält die Windows Phone native Implementierung der Cordova-APIs.
• Www ist der Ordner, in dem Sie Ihre Anwendung Vermögenswerte, HTML5, JavaScript, CSS und Bilder platzieren.Die Vorlage generiert eine grundlegende index.html-Datei und die master.css-Stylesheet.
• www/Cordova-1.5.0.js bietet die Windows Phone diesen­Dokumentation der Cordova JavaScript-APIs.Diese Schnittstellen mit den systemeigenen Code enthaltenen WP7CordovaClassLib.
• BuildManifestProcessor.js ist eine JavaScript-Datei, die von einem Postbuildereignis Schritt aufgerufen wird.Diese Datei wird generiert, der Cordova­SourceDictionary.xml Datei, um sicherzustellen, dass alles, was Sie zu dem Ordner Www hinzufügen in den isolierten Speicher geladen werden.
• CordovaSourceDictionary.xml ist eine generierte XML-Datei, die alle Ihre Vermögenswerte Anwendung auflistet.Wenn Ihre Anwendung erstmals gestartet wird, zeigt diese XML-Datei die Dateien in isoliertem Speicher geladen werden.

Die MainPage.xaml-Datei enthält eine Instanz des CordovaView-Steuerelements, ein Benutzersteuerelement, die ein WebBrowser-Steuerelement enthält:

<Grid x:Name="LayoutRoot">
    <my:CordovaView Name="PGView" />
  </Grid>

Wenn die Anwendung gestartet wird, sich kümmert das CordovaView-Steuerelement laden Ihrer Anwendung Ressourcen in lokalen Speicher und navigieren zu der www/index.html-Datei, damit Sie die Anwendung starten. Sie können, natürlich, andere Silverlight-Steuerelemente in der Seite platzieren durch Bearbeiten dieser XAML-Code, obwohl ich würde es nicht empfehlen. Wenn Sie eine HTML5-Anwendung schreiben, dürfte Ihre Absicht zu dieser Arbeit Cross-Plattform. Alle Steuerelemente, die Sie MainPage.xaml hinzufügen werden natürlich speziell für Ihren Build Windows Phone.

Entwicklung von Cordova-Anwendungen

Können Sie Ihre HTML, JavaScript und CSS-Dateien in den Ordner Www und — so lange, wie Sie diese mit einem Build Action von Content markieren — sie werden in Ihrem Projekt enthalten und über das WebBrowser-Steuerelement, wenn die Anwendung ausgeführt wird. Die standard-JavaScript/HTML5-Bibliotheken oder Rahmen können in der Cordova-Anwendung Sie, solange sie mit dem Handy-Browser kompatibel sind.

Der Cordova-APIs sind dokumentiert auf der Website von Cordova; Ich wird nicht ihnen hier ausführlich beschreiben. Eine wichtige Sache zu beachten ist, dass Sie warten müssen, für das Deviceready-Ereignis vor Nutzung aller andere API-Methoden. Wenn Sie die index.html Datei generiert aus der Vorlage überprüfen, sehen Sie, dass es wartet, bis das Gerät bereit ist, vor dem Aktualisieren der Benutzeroberfläche:

<script type="text/javascript">
  document.addEventListener("deviceready",onDeviceReady,false);
  function onDeviceReady()
  {
    document.getElementById("welcomeMsg").innerHTML
      += "Cordova is ready!
version=" + window.device.cordova;
    console.log(
      "onDeviceReady.
You should see this " +
        "message in Visual Studio's output window.");
  }
</script>

Im vorhergehenden Code verwendeten Objekts Console können Sie Ihre Anwendung Debug-Ausgabe hinzu. Diese Nachrichten sind in der Visual Studio-Konsole von Cordova.

Einseitige oder mehrseitige Anwendungsarchitektur

Beim Erstellen von Cordova Anwendungen können Sie zwei unterschiedliche Muster verwenden:

• Mehrseitige Anwendungen: In mehrseitigen Anwendungen sind mehrere HTML-Seiten verwendet, um die verschiedenen Bildschirme einer Anwendung darstellen. Navigation zwischen den Seiten verwendet die standard-Browser-Mechanik, mit Links von Anker-Tags definiert. Jede HTML-Seite enthält Skriptverweise auf die
• Cordova JavaScript-Code und JavaScript Anwendung.
• Einseitige Anwendungen: In Single-Seite Anwendungen verweist auf eine einzelne HTML-Datei Cordova und Ihre Anwendung JavaScript. Navigation zwischen den verschiedenen Seiten der Anwendung erfolgt durch den gerenderten HTML dynamisch zu aktualisieren. Aus der Perspektive des Handy-Browsers die URL bleibt gleich und es gibt keine Navigation zwischen den Seiten.

Die Wahl zwischen diesen zwei Mustern vorgenommenen hat erhebliche Auswirkungen auf die Struktur des Codes.

Generell ist das mehrseitige Muster am besten geeignet für Anwendungen, die hauptsächlich statischen Inhalte umfassen. Mit diesem Ansatz können Sie HTML/CSS/JavaScript, die derzeit auf Ihrer Web Site verwendet wird und Verpacken, mithilfe von Cordova, Übermittlung an das Telefon als eine Anwendung nutzen. Aber der mehrseitige Ansatz hat einige Nachteile. Zuerst, wenn der Browser von einer Seite zur nächsten navigiert, muss es neu zu laden und analysieren alle die neue Seite JavaScript. Es ist eine merkliche Pause wie der Lebenszyklus der Cordova, schafft die Verbindung zwischen der JavaScript-API und C#-Entsprechungen ausgeführt wird. Zweitens, weil Ihr JavaScript-Code neu geladen wird, alle Anwendungszustand geht verloren.

Das einseitige Muster überwindet die Probleme im Zusammenhang mit der mehrseitigen Ansatz. Der Cordova und Anwendung JavaScript-Code nur einmal geladen, wodurch eine reaktionsfähigere Benutzeroberfläche und entfernen die Notwendigkeit, den Zustand der Anwendung von einer Seite zur nächsten übergeben. Der einzige Nachteil dieses Ansatzes ist die zusätzliche Komplexität, mit JavaScript-Code zum Aktualisieren der Benutzeroberfläche bei Navigation benötigt wird.

Die Beispielanwendung in diesem Artikel beschriebenen verwendet das einseitige Muster. Ein Beispiel für die mehrseitige Ansatz in Aktion, empfehle ich Blick auf die DemoGAP CodePlex-Projekt (demogap.codeplex.com), die enthält eine einfachen Demonstration der Cordova API Funktionen innerhalb einer Windows Phone Anwendung.

Die Demoanwendung

Der Rest dieses Artikels beschreibt "Cordova Twitter Suche," eine einfache Windows Phone-Anwendung, die dem Benutzer ermöglicht, basierend auf einem oder mehreren Schlüsselwörtern, Twitter Suche, wie in gezeigt Abbildung 5.

Abbildung 5 die Cordova Twitter Suche Demo-Anwendung

Sowie Cordova, macht diese Anwendung verwenden Sie die folgenden Rahmenbedingungen:

• jQuery und jQuery Templates: jQuery ist der de-facto standard Rahmen für die Manipulation des Browsers (Dokumentobjektmodell) geworden. jQuery-Vorlagen sind Plug-ins, die Microsoft entwickelt (bit.ly/8ZO2V1), erleichtert die wiederverwendbare HTML-Vorlagen erstellen, die dem Dom wiedergegeben werden können Twitter Suche jQuery Vorlagen verwendet, um die Benutzeroberfläche für die verschiedenen Seiten in der Anwendung definieren.
• K.o. JS: Ko ist ein Model-View-ViewModel (MVVM) Framework, das macht es leicht, ViewModels zu konstruieren und zu halten synchronisiert mit Blick auf eine Weise, die Silverlight-Entwicklern vertraut. Es ist diese Vertrautheit, die mich zu Knockout über die zahlreichen anderen geeigneten JavaScript UI Rahmen wählen.

Ich wird nicht Knockout in diesem Artikel ausführlich behandelt. Wenn Sie mehr über dieses Framework interessiert sind, empfehle ich John Papa den letzten Artikel, "Getting Started mit Knockout" (msdn.microsoft.com/magazine/hh781029). Und wenn Sie nicht vertraut mit dem MVVM-Muster (wo Sie versteckt haben?), empfehle ich diesen ausgezeichneten Artikel von Josh Smith: "WPF-Anwendungen mit dem Model-View-ViewModel-Entwurfsmuster" (msdn.microsoft.com/magazine/dd419663).

JavaScript-Anwendungen mit Visual Studio entwickeln

Vor dem Eintauchen in die Details der Anwendung, möchte ich sagen, ein paar Dinge über JavaScript-Anwendungsentwicklung. Eine der Herausforderungen für den JavaScript-Entwickler ist die dynamische Natur der Sprache. Mit JavaScript nicht sind Sie durch eine starre Typsystem eingeschränkt; Stattdessen können dynamisch Objekte erstellt werden. Dies stellt eine Herausforderung für die Entwickler von JavaScript-Editoren und IDEs. Mit stark typisierten Sprachen wie c# und Java kann die Typinformationen verwendet werden, um verbesserte Code-Navigation, Umgestaltung und IntelliSense bieten. Mit JavaScript auf der anderen Seite, bedeutet das Fehlen von Informationen, dass die IDE in der Regel weit weniger Entwickler Hilfsmittel bietet.

Glücklicherweise haben Sachen vor kurzem mit Visual Studio 2010 ausführen Pseudo-execution von den JavaScript-Code zur Bestimmung die "Form" der jedes Objekt, damit JavaScript IntelliSense bereitgestellt verbessert. Um die IntelliSense-Unterstützung nutzen zu können, haben wir die IDE mit ein paar "Hinweise" in Form von "Verweise" zu sagen, dass der IDE, welche Dateien in ihre Pseudo-execution aufnehmen. Mit dem Demoprojekt beginnen alle Dateien mit einem Referenz-Kommentar, der sagt, die IDE die intellisense.js-Datei enthalten. Der Inhalt dieser Datei ist einfach eine Liste der Verweise, die sicherstellen, dass die IDE alle wichtige Anwendung JavaScript Dateien, enthält die Qualität IntelliSense Unterstützung in der Anwendung, wie hier gezeigt:

/// Ensure IntelliSense includes all the files from this project.
///
/// <reference path="app.js" />
/// <reference path="viewModel/ApplicationViewModel.js" />
/// <reference path="viewModel/SearchResultsViewModel.js" />
/// <reference path="viewModel/TweetViewModel.js" />
/// <reference path="viewModel/TwitterSearchViewModel.js" />
/// <reference path="lib/jquery-1.6.4.js" />
/// <reference path="lib/cordova-1.5.0.js" />
/// <reference path="lib/knockout-1.2.1.js" />

JavaScript ist eine Sprache entspannt und nachsichtig mit Features wie z. B. Wert Zwang und Semi­Doppelpunkt einfügen, so dass es in eine Skripting-Umgebung einfach zu benutzen. Jedoch werden diese gleichen Eigenschaften oft problematisch beim Verwalten großer Mengen von Code. Aus diesem Grund empfehle ich mit JSLint, ein Tool, das ein steifer Kodierungsstandards für JavaScript gelten. Ein beliebter Visual Studio Extension fügt JSLint-Unterstützung (jslint4vs2010.codeplex.com), fusselfreien Fehler in der Fehlerkonsole. Ich habe JSLint für die Twitter-Suche-Anwendung (und praktisch jedes andere JavaScript-Projekt habe ich auf).

Sie können einen Kommentar von "Globals" zu Beginn jeder JavaScript-Datei innerhalb des Projekts feststellen. JSLint verhindert "undichte" in den globalen Gültigkeitsbereich durch versehentliche Unterlassung des Schlüsselwortes Var Variablen. Der Kommentar von "Globals" bietet JSLint eine formale Definition, die Variablen zulässig sind, einen globalen Gültigkeitsbereich zu besetzen.

Die Struktur des MVVM-Anwendung

Die Anwendung Twitter-Suche ist, aus der Perspektive des Telefons-Webbrowser-Steuerelement, eine einseitige Anwendung. Umgekehrt aus der Benutzerperspektive, es hat mehrere Seiten, wie in Abbildung 5. Um dies zu unterstützen ein Knockout ViewModel erstellt, die einen Stapel von ViewModel-Instanzen enthält, jeweils eine Seite innerhalb der Anwendung darstellt. Wie der Benutzer zu einer neuen Seite navigiert, das entsprechende ViewModel ist dieser Stapel hinzugefügt, und wenn der Benutzer zurück navigiert, wird das oberste ViewModel vom Stapel geholt (siehe Abbildung 6).

Abbildung 6 die Knockout-ApplicationViewModel

/// <reference path="..//intellisense.js" />
/*globals ko*/
function ApplicationViewModel() {
  /// <summary>
  /// The ViewModel that manages the ViewModel back-stack.
/// </summary>
  // --- properties
  this.viewModelBackStack = ko.observableArray();
  // --- functions
  this.
navigateTo = function (viewModel) {
    this.viewModelBackStack.push(viewModel);
  };
  this.back = function () {
    this.viewModelBackStack.pop();
  };
  this.templateSelector = function (viewModel) {
    return viewModel.template;
  }
}

Wenn die Anwendung gestartet wird, ist eine Instanz von der ApplicationViewModel erstellt und an die Benutzeroberfläche mithilfe von Knockout gebunden:

document.addEventListener("deviceready", initializeViewModel, false);
var application;
function initializeViewModel() {
  application = new ApplicationViewModel();
  ko.applyBindings(application);
}

Die Benutzeroberfläche selbst ist recht einfach, ein Div-Element, das die Knockout-Vorlage-Bindung zum Rendern des ViewModel-Stacks verwendet bestehend aus:

    <body>
      <h1>Cordova Twitter Search</h1>
      <div class="app"
        data-bind="template: {name: templateSelector,
                              foreach: viewModelBackStack}">
      </div>
    </body>

Die Knockout-Vorlage-Bindung funktioniert in ähnlicher Weise auf die Silverlight-ItemsControl bindet an ein Array von Instanzen der ViewModel und ist zuständig für die Generierung der Ansicht für jede über eine Vorlage. In diesem Fall ist die TemplateSelector-Funktion für die ApplicationViewModel aufgerufen, um zu bestimmen, die benannte Vorlage für jede ViewModel.

Wenn Sie diese Anwendung ausführen werden Sie feststellen, dass es tatsächlich etwas nicht tut – das ist, weil es keine ViewModels auf die Seiten der Anwendung darstellen!

Die TwitterSearchViewModel

Ich werde das erste ViewModel, TwitterSearchViewModel, einzuführen, die die erste Seite der Anwendung darstellt. Dieses ViewModel ein paar einfache beobachtbare Eigenschaften verfügbar, die Unterstützung die Benutzeroberfläche nämlich den Suchbegriff, die dem Benutzer-Eingabe-Feld gebunden ist, und IsSearching, die ein Boolean zu beobachten ist, die die suchen-Schaltfläche deaktiviert, wenn die Twitter-APIs über HTTP abgefragt werden. Sie stellt auch eine Suchfunktion, die die Schaltfläche Suchen in viel die gleiche Weise gebunden ist, dass Sie auf eine Schaltfläche in Silverlight einen ICommand binden würde (siehe Abbildung 7).

Abbildung 7 der TwitterSearchViewModel

/// <reference path="..//intellisense.js" />
/*globals $ application ko localStorage SearchResultsViewModel TweetViewModel*/
function TwitterSearchViewModel() {
  /// <summary>
  /// A ViewModel for searching Twitter for a given term.
/// </summary>
  // --- properties
  this.template = "twitterSearchView";
  this.isSearching = ko.observable(false);
  this.searchTerm = ko.observable("");
  // --- public functions
  this.search = function () {
    /// <summary>
    /// Searches Twitter for the current search term.
/// </summary>
    // implementation detailed later in this article ...
};
}

Die Template-Eigenschaft der ViewModel den Namen der Ansicht, die dieses ViewModel zugeordnet ist. Diese Ansicht wird als jQuery Vorlage in der Datei index.html beschrieben:

    <script type=text/x-jquery-tmpl" charset="utf-8" id="twitterSearchView" 
      <div>
        <form data-bind="submit: search">
          <input type="text"
            data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" />
          <button type="submit"
            data-bind="enable: searchTerm().length > 0 &&
              isSearching() == false">Go</button> 
        </form>     
      </div>
    </script>

Wenn Sie eine Instanz von der TwitterSearchViewModel der Anwendung ViewModel Stapel hinzufügen, zeigt die Anwendung nun die erste Seite, wie in gezeigt Abbildung 8.

Abbildung 8 die TwitterSearchViewModel über die TwitterSearchView Vorlage gerendert

Erstellen einer Metro UI mit CSS

Eines der auffälligsten Merkmale des Windows Phone OS ist die Metro Design-Sprache, die alle Aspekte des Telefons Aussehen führt. Diese Formensprache, welche Inhalte über Chrom begünstigt, ist nicht nur angenehm für die Augen, es ist auch praktisch, liefert gut lesbare Schnittstellen auf den kleinen Telefon-Formfaktor.

Die aktuelle Benutzeroberfläche, wie in Abbildung 8, verwendet das standard-Browser-Styling und infolgedessen nicht sehr angenehm für die Augen! Es gibt bereits ein paar etablierte Frameworks zum Erstellen von gut aussehenden mobilen UIs mit HTML und CSS, wie z. B. jQuery Mobile (jquerymobile.com). Diese Frameworks tendenziell derzeit emuliert das iOS Erscheinungsbild konzentrieren. Eine Anwendung Windows Phone Cordova formatiert werden könnte unter Verwendung von jQuery Mobile, obwohl es wahrscheinlich einige Benutzer Ablehnung konfrontiert würde, weil es einfach wäre nicht "" mit das allgemeine Aussehen und Verhalten des Betriebssystems passt.

Zum Glück, die Chrom-freie Metro Thema ist eigentlich ganz einfach, mithilfe von HTML und CSS zu replizieren. In der Tat, behandelt Windows 8 HTML als erstklassige Bürger, so dass Sie HTML5 Metro-Anwendungen mithilfe der Windows-Runtime-APIs entwickeln.

Durch die Einführung der richtigen Schriftarten, Schriftgrößen und Farben über einige einfache CSS (gezeigt Abbildung 9), können Sie eine Benutzeroberfläche, die das Thema Metro eng folgt, wie in Abbildung 10.

Abbildung 9 Code, das Metro Thema folgen

    body
    {
      background: #000 none repeat scroll 0 0;
      color: #ccc;
      font-family: Segoe WP, sans-serif;
    }
    h1
    {
      font-weight: normal;
      font-size: 42.667px; /* PhoneFontSizeExtraLarge */
    }
    button
    {
      background: black;
      color: white;
      border-color: white;
      border-style: solid;
      padding: 4px 10px;
      border-width: 3px; /* PhoneBorderThickness */
      font-size: 25.333px; /* PhoneFontSizeMediumLarge */
    }
    input[type="text"]
    {
      width: 150px;
      height: 34px;
      padding: 4px;
    }

Abbildung 10 angewendet, die Twitter-Suche-Anwendung mit einer Metro-CSS-Stil

Ein letzter Aspekt, der ein bisschen wie ein Werbegeschenk ist, dies eine HTML5 Anwendung anstatt einer systemeigenen ist, dass der Benutzer immer noch "die Benutzeroberfläche" Kneifen kann um es zoom machen. Dies kann teilweise gelöst werden, indem Sie die index.html-Seite die folgende Meta-Eigenschaft hinzufügen:

    <meta name="viewport" content="user-scalable=no" />

Dies informiert dem Browser, dass der Benutzer ist nicht berechtigt den gerenderten Inhalt skalieren. Leider, die Art, wie, die dies von den Windows Phone-Browser implementiert ist, ermöglicht dem Benutzer, den Inhalt zu skalieren, aber reißt zurück zu der ursprünglichen Skala endet die Interaktion. Dies sieht nicht schrecklich gut!

Ich habe entdeckt, dass, indem Sie die visuelle Struktur des Steuerelements WebBrowser überprüfen, es ist möglich, fügen Sie Handler für die Manipulation Ereignisse und verbieten sie sprudelt bis zu den einheimischen TileHost, das die HTML5-Inhalte wiedergibt. Ich habe eine kurze Blog-Post veröffentlicht (bit.ly/vU2o1q), die enthält eine einfaches Utility-Klasse, die dies erreicht. Aber Sie sollten dies mit Vorsicht verwenden, da es hängt die interne Struktur des WebBrowser-Steuerelements, die auch in zukünftigen Versionen des Betriebssystems Windows Phone ändern kann.

Twitter Suche

Wenn Sie näher an die Suchfunktion TwitterSearchViewModel suchen, fragt es den Twitter-APIs über die jQuery-Funktion "Ajax", die eine JSONP-Antwort zurückgibt. Eine TweetViewModel-Instanz wird erstellt, aus jedem der zurückgegebenen Tweets, und diese werden verwendet, um eine SearchResultsViewModel-Instanz zu erstellen (siehe Abbildung 11).

Abbildung 11 die TwitterSearchViewModel Suchfunktion

this.search = function () {
  /// <summary>
  /// Searches Twitter for the current search term.
/// </summary>
  this.isSearching(true);
  var url = "http://search.twitter.com/search.json?q=" +
    encodeURIComponent(that.searchTerm());
  var that = this;
  $.ajax({
    dataType: "jsonp",
    url: url,
    success: function (response) {
      // Create an array to hold the results.
var tweetViewModels = [];
      // Add the new items.
$.each(response.results, function () {
        var tweet = new TweetViewModel(this);
        tweetViewModels.push(tweet);
      });
      // Navigate to the results ViewModel.
application.
navigateTo(new SearchResultsViewModel(tweetViewModels));
      that.isSearching(false);
    }
  });
};

Die SearchResultsViewModel enthält lediglich eine Liste der Tweets:

/// <reference path="..//intellisense.js" />
/*globals ko*/
function SearchResultsViewModel(tweetViewModels) {
  /// <summary>
  /// A ViewModel that renders the results of a twitter search.
/// </summary>
  /// <param name="tweetViewModels">An array of TweetViewModel instances</param>
  // --- properties
  this.template = "searchResultsView";
  this.tweets = ko.observableArray(tweetViewModels);
}

Und die TweetViewModel stellt die Eigenschaften für eine einzelne Tweet und select-Funktion, die zu der Ansicht einzelne Tweet navigiert als gewiesen Abbildung 12.

Abbildung 12 die TweetViewModel

/// <reference path="..//intellisense.js" />
/*globals application*/
function TweetViewModel(tweet) {
  /// <summary>
  /// A ViewModel that represents a single tweet
  /// </summary>
  /// <param name="tweet">A tweet as returned by the twitter search API</param>
  // --- properties
  this.template = "tweetDetailView";
  this.author = tweet.from_user;
  this.text = tweet.text;
  this.id = tweet.id;
  this.time = tweet.created_at;
  this.thumbnail = tweet.profile_image_url;
  // --- public functions
  this.select = function () {
    /// <summary>
    /// Selects this tweet, causing the application to navigate to a tweet-view.
/// </summary>
    application.
navigateTo(this);
  };
}

Wieder, die Vorlagen, die beschreiben, die Ansicht für jeden der diesen ViewModels hinzugefügt werden die index.html Datei, wie in Abbildung 13.

Abbildung 13 Vorlagen hinzufügen, um die index.html Datei

    <script type=text/x-jquery-tmpl" charset="utf-8" id="searchResultsView">
      <div>
        <ul data-bind="template: {name: 'tweetView',
                                  foreach: tweets}"> </ul>
      </div>
    </script>
    <script type="text/x-jquery-tmpl" charset="utf-8" id="tweetView">
      <li class="tweet"
          data-bind="click: select">
        <div class="thumbnailColumn">
          <img data-bind="attr: {src: thumbnail}"
                                 class="thumbnail"/>
        </div>
        <div class="detailsColumn">
          <div class="author"
               data-bind="text: author"/>
          <div class="text"
               data-bind="text: text"/>
          <div class="time"
               data-bind="text: time"/>
        </div>
      </li>
    </script>

Mit diesem Code wenn der Benutzer die "weiter" Schaltfläche um Twitter, suchen hits wird eine neue SearchResultsViewModel im ViewModel-Stapel hinzugefügt. Dies führt automatisch in die SearchResultsView-Vorlage gerendert wird, innerhalb der "app" div. Da der ViewModel-Stapel über eine Foreach-Vorlage-Bindung gerendert wird, wird nicht dadurch allerdings die TwitterSearchView Vorlageninstanzen ausgeblendet; Stattdessen werden sie übereinander gestapelt werden. Dies kann durch die Zugabe von ein paar einfache CSS-Regeln gelöst werden:

    .app>div
    {
      display: none;
    }
    .app>*:last-child
    {
      display: block;
    }

Die erste Auswahl blendet alle unmittelbar untergeordneten Elemente des Div mit der app-Klasse markiert, während die zweite Auswahl, die eine höhere Priorität hat, stellt sicher, dass das letzte untergeordnete Element angezeigt wird.

Mit dieser CSS-Regeln im Ort ist die Twitter-Suche Anwendung voll funktionsfähige und schiffbar.

Verwaltung des Back-Stapels

Anwendung, die Sie von der Suche navigieren können Ergebnisse mit aktuellen Twitter Suche Seite eine einzelne tweet, aber wenn Sie das Telefon zurück Knopf drücken die Anwendung sofort beendet. Dies ist da die Anwendungsnavigation vollständig in ein Webbrowser-Steuerelement erfolgt — daher aus der Sicht der das Silverlight-Framework, die Anwendung verfügt über eine einzelne Seite. Dies führt nicht nur eine schlechte Benutzererfahrung, es führt fast sicher in der Anwendung wird abgelehnt, wenn der Windows Phone Markt vorgelegt.

Glücklicherweise ist die Lösung für dieses Problem ist einfach. Die ApplicationViewModel enthält einen Stack von ViewModel-Instanzen. Wenn mehr als eine ViewModel-Instanz in diesem Stapel vorhanden ist, müssen Sie behandeln die Hardware zurück drücken und das oberste ViewModel aus diesem Stapel pop. Andernfalls können Sie das Silverlight-Framework, um die Anwendung zu beenden.

Um dies zu unterstützen, wird eine BackButtonRequired abhängige Observable ViewModel hinzugefügt:

function ApplicationViewModel() {
  // --- properties
  this.viewModelBackStack = ko.observableArray();
  this.backButtonRequired = ko.dependentObservable(function () {   
    return this.viewModelBackStack().length > 1;
  }, this);
  // --- functions
  // ...
}

Wenn das ViewModel initialisiert wird, können Sie behandeln Änderungen dieses Observable und abonnieren Sie den Backbutton-Ereignisse, die Cordova liefert. Wenn das Ereignis ausgelöst wird, rufen Sie die zurück-Funktion auf der ApplicationViewModel, die das oberste ViewModel vom Stapel holt. Die Vorlagenbindung Knockout kümmert sich um das ViewModel zugeordneten Ansicht aus der Benutzeroberfläche entfernt und das CSS-Styling sorgt für die Auffassung, dass jetzt oberste sichtbar ist (siehe Abbildung 14).

Abbildung 14 Behandlung eine zurück-Taste

function initializeViewModel() {
  application = new ApplicationViewModel();
  ko.applyBindings(application);
  // Handle the back button.
application.backButtonRequired.subscribe(function (backButtonRequired) {
    if (backButtonRequired) {
      document.addEventListener("backbutton", onBackButton, false);
    } else {
      document.removeEventListener("backbutton", onBackButton, false);
    }
  });
  var viewModel = new TwitterSearchViewModel();
  application.
navigateTo(viewModel);
}
function onBackButton() {
  application.back();
}

Da über Cordova, den Code in das Ereignis Backbutton angegeben wird Abbildung 14 wird gut funktionieren, wenn Sie die app verwenden ein anderes Telefon OS (solange das Telefon selbst verfügt über eine zurück-Taste) ausführen.

Staatliche Persistenz

Wir werden ein letztes Feature der Twitter-Suche-Anwendung hinzufügen: Wenn eine Suche erfolgreich zurückgegeben wird, wird eine Liste der letzten Suche der Suchbegriff hinzugefügt (siehe Abbildung 15).

Abbildung 15 eine Liste der letzten Suche einen Suchbegriff hinzufügen

function TwitterSearchViewModel() {
  /// <summary>
  /// A ViewModel for searching Twitter for a given term.
/// </summary>
  // --- properties
  // ...
some properties omitted for clarity ...
this.recentSearches = ko.observableArray();
  // --- functions
  // ...
some functions omitted for clarity ...
this.loadState = function () {
    /// <summary>
    /// Loads the persisted ViewModel state from local storage.
/// </summary>
    var state = localStorage.getItem("state");
    if (typeof (state) === 'string') {
      $.each(state.split(","), function (index, item) {
        if (item.trim() !== "") {
          that.recentSearches.push(item);
        }
      });
    }
  };
  function saveState() {
    /// <summary>
    /// Saves the ViewModel state to local storage.
/// </summary>
    localStorage.setItem("state", that.recentSearches().toString());
  }
  function addSearchTermToRecentSearches() {
    /// <summary>
    /// Adds the current search term to the search history.
/// </summary>
    that.recentSearches.unshift(that.searchTerm());
    saveState();
  }
}

Die AddSearchTermToRecentSearches-Funktion verwendet die Knockout-Komfort-Funktion, unshift, die fügt ein Element an den Anfang des Arrays.Wenn eine aktuelle Suche hinzugefügt wird, ist der Staat mit HTML5 local Storage gespeichert.In diesem Fall ist der Staat des Arrays in eine durch Kommas getrennte Liste über die ToString-Funktion konvertiert, und konvertiert zurück über Split.Eine komplexere ViewModel würde wahrscheinlich mehrere Eigenschaftenwerte im JSON-Format speichern.

Interessant ist, während der Browser Windows Phone lokalen Speicher unterstützt, ist diese Funktion deaktiviert, wenn der Browser Seiten aus dem isolierten Speicher rendert.Um den früheren Code funktionsfähig zu machen, musste das Team von Cordova eine "Shim" Implementierung des lokalen Speichers APIs schreiben, die der Staat im isolierten Speicher des Telefons speichert.

Mit dieser letzten Änderung der Twitter-Suche-Anwendung ist es nun voll funktionsfähig.

Portabilität Beweis: Läuft auf einem iPhone

Wie Sie sehen können, macht Cordova Rahmen es möglich, HTML5-basierten Anwendungen für Windows Phone erstellen.Es ist auch möglich, imitieren das native Metro Look And Feel mit einfachen HTML5 und CSS-Techniken, während Frameworks wie z. B. Knockout richtig strukturieren Ihres Codes ermöglicht.

Dieser Artikel konzentriert sich auf die Erstellung von Anwendungen für Windows Phone, aber die Twitter-Suche Anwendung ist portabel und sollte auf einem iPhone oder Android Telefon ohne Änderung ausgeführt.Aber würde eine Anwendung im Metro-Stil passen diese Handys?

Als letzte Demonstration der Vielseitigkeit dieses Ansatzes habe ich eine iOS-Version der Twitter-Suche Anwendung, erstellt, unter Verwendung von jQuery Mobile um das native Look And Feel zu imitieren.Dies macht große Einsatz des MVVM-Musters, in diesem nur die Ansicht geändert werden muss — alle die ViewModel-Logik ist genau das gleiche.Mit dem Cloud-basierte Build Service konnte ich eine iOS "ipa" Paket erstellen und installieren Sie es auf ein iPhone, alle von einer Windows-Maschine.Können Sie die beiden Anwendungen laufen nebeneinander in Abbildung 16.

Abbildung 16 Twitter Suche auf ein iPhone und ein Windows Phone Gerät ausgeführt

Der vollständigen Quellcode für iOS und Windows Phone Versionen der Anwendung begleitet dieses Artikel.

Colin Eberhardt ist ein technischer Architekt bei Scott Logik Ltd. und Architekt bei Visiblox (http://visiblox.com), bietet die Diagrammsteuerelementen für eine Reihe von Microsoft.NET Framework-Technologien. Sie können ihn auf Twitter bei twitter.com/ColinEberhardt.

Dank der folgenden technischen Experten für die Überprüfung dieses Artikels: Olivier Bloch, Glen Gordon und Jesse MacFadyen