Exemplarische Vorgehensweise: Verwenden von LightSwitch-Daten in einer Windows Store-App

Artikel
02/26/2013

Anhand dieser exemplarischen Vorgehensweise ausführen, können Sie erfahren, wie eine Windows Store App oder anderen Anwendung erstellt oder konfiguriert, die das Open Data Protocol (OData) unterstützt um Daten von beliebigen Visual Studio LightSwitch Anwendung zu verarbeiten.

Vorbereitungsmaßnahmen

Für diese exemplarische Vorgehensweise muss auf Ihrem Computer Visual Studio 2012 unter Windows 8 ausgeführt werden.Außerdem ist es erforderlich, die Contoso-Konstruktions-Anwendung von der Microsoft-Website aus der MSDN-Beispielgalerie herunterzuladen und die Setupanweisungen in der Datei Infodatei zu befolgen.Falls Sie noch keine Windows Store-App erstellt haben, werden Sie zur Beschaffung einer Entwicklerlizenz aufgefordert, wenn Sie das Projekt für die Windows Store-App erstellen.

So machen Sie eine OData-Datenquelle verfügbar

Wählen Sie in der Menüleiste die Option Datei und dann Öffnen und Projekt/Speicherort aus.
Greifen Sie im Dialogfeld Projekt öffnen auf die Datei "ContosoConstruction.sln" zu, und öffnen Sie die Datei.
Öffnen Sie im Projektmappen-Explorer das Kontextmenü für Eigenschaften, und wählen Sie Öffnen aus.
Wählen Sie im Anwendungs-Designer die Registerkarte Anwendungstyp aus.
Wählen Sie im Abschnitt Client die Optionsschaltfläche Web aus.

Mit dieser Prozedur werden beide Datenquellen für die Contoso-Konstruktions-Anwendung als OData-Feeds verfügbar gemacht.

Um die Windows Store-App erstellen

Wählen Sie auf der Menüleiste Datei, Hinzufügen, Neues Projekt aus.
Wählen Sie in der Liste der Projekttypen für JavaScript die Option Geteilte Anwendung aus.
Geben Sie im Textfeld Name den Text ContosoProjects an, und wählen Sie dann die Schaltfläche OK aus.

Das Projekt ContosoConstruction wird der Projektmappe hinzugefügt.

So fügen Sie Skriptbibliotheken hinzu

Wählen Sie in der Menüleiste die Option Extras und dann Bibliotheks-Paket-Manager und Paket-Manager-Konsole aus.

Das Fenster mit der Paket-Manager-Konsole wird geöffnet.
Geben Sie an der Eingabeaufforderung der Paket-Manager-Konsole den Text install-package jquery ein, und drücken Sie die EINGABETASTE.
Nachdem die Durchführung des Befehls abgeschlossen ist, geben Sie install-package datajs ein, und drücken Sie die EINGABETASTE.

Nachdem die Durchführung des Befehls abgeschlossen ist, werden im Projektmappen-Explorer im Ordner Skripts die folgenden JavaScript-Dateien aufgeführt:
- datajs-1.0.2.js
- datajs-1.0.2.min.js
- jquery-1.7.1.js
- jquery-1.7.1.min.js
- jquery-1.7.1.-vsdoc.js

Um die Windows Store-App ändern

Öffnen Sie im Projektmappen-Explorer die Datei "default.html".

Fügen Sie im Abschnitt WinJS references die folgenden Verweise hinzu:

<!-- jQuery references --> 
  <script src="/Scripts/jquery-1.7.1.js"></script> 
  <!-- datajs references --> 
  <script src="/Scripts/datajs-1.0.2.js"></script>

Erweitern Sie im Projektmappen-Explorer den Knoten js, und öffnen Sie dann die Datei "default.js".
Fügen Sie in der Zeile var app = WinJS.Application; die folgende Variable hinzu:
```
var OData = window.OData;
```
Öffnen Sie im Projektmappen-Explorer die Datei "data.js".

Ersetzen Sie den Code im Abschnitt sampleGroups durch den folgenden Code:

var sampleGroups = [ 
        {
            key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.",
            backgroundImage: darkGray
        },
    ];

Suchen Sie nach der Funktion nach dem Kommentar // TODO: Replace the data with your real data., und ersetzen Sie den vorhandenen Code durch den folgenden Code:

//Generic function for loading data via a odata url
    function loadData(data, odataUrl, dataLoaded) {
        if (data) {
            return WinJS.Promise.as(data);
        }
        else {
            return new WinJS.Promise(function (complete, error, progress) {
                OData.read(odataUrl,
                function (data) {
                    complete(dataLoaded(data.results));
                },
                function (dataerror) {
                    error(dataerror);
                });
            });
        }
    }


    var projectsODataUrl = "https://localhost:#####/ApplicationData.svc/Projects";
    //TODO: Replace projectsODataUrl with url for deployed OData service
    //  before publishing this application.
    var _projects;
    //Loads projects
    function loadProjects() {
        loadData(_projects, projectsODataUrl, function (results) {
            _projects = results;
            return _projects;
        }).then(function (projects) {
            var items = [];

            $.each(projects, function (l, e) {
                var notes;
                if (e.Notes === null) {
                    notes = "";
                }
                else {
                    notes = e.Notes;
                }
                items.push({
                    displayName: e.ProjectName, subtitle: "Estimate: $" +
                        e.OriginalEstimate, description: "", content: notes
                });
            });
            showProjects(items.sort(), sampleGroups[0]);
        });
    }

    //Adds projects to binding list.
    function showProjects(items, itemGroup) {
        items.forEach(function (item) {
            list.push(
                {
                    group: itemGroup, title: item.displayName,
                    subtitle: item.subtitle, description: item.description,
                    content: item.content, backgroundImage: lightGray
                }
              )
        });
    }

    loadProjects();

Um Funktionen für die Windows Store-App angeben

Öffnen Sie im Projektmappen-Explorer die Datei "package.appxmanifest".
Aktivieren Sie auf der Registerkarte Funktionen das Kontrollkästchen Private Netzwerke (Client und Server).

Diese Prozedur ermöglicht einer Unternehmens-App den Zugriff auf Intranetressourcen.Diese Einstellung ist für normale Windows Store-Apps aus dem Windows Store nicht erforderlich.

So führen Sie das Debugging und einen Test der Anwendung durch

Öffnen Sie im Projektmappen-Explorer das Kontextmenü für den Knoten Projektmappe, und wählen Sie dann Eigenschaften aus.
Wählen Sie die Optionsschaltfläche Mehrere Startprojekte aus.
Wählen Sie in der Spalte Aktion sowohl für das Projekt ContosoConstruction als auch für das Projekt ContosoProjects die Option Starten aus.

Wichtig

Stellen Sie sicher, dass ContosoConstruction in der Startreihenfolge vor ContosoProjects aufgeführt ist.
Öffnen Sie im Projektmappen-Explorer die Datei "data.js".
Legen Sie in der Zeile, die mit return new WinJS.Promise beginnt, einen Haltepunkt fest.
Drücken Sie die F5-TASTE, um das Debuggen zu starten.

Die Anwendung wird gestartet, um den Ladevorgang auszuführen. Wenn der Haltepunkt erreicht wird, wird die Ausführung angehalten.
Kopieren Sie in dem Browserfenster, in dem die Contoso-Konstruktions-Anwendung ausgeführt wird, die Portnummer aus der Adressleiste.

Die Portnummer ist der numerische Wert, der in der URL auf https://localhost: folgt.
Geben Sie im Direktfenster den Text odataUrl = https://localhost:#####/ApplicationData.svc/Projects ein, und ersetzen Sie die Portnummer durch #####. Drücken Sie dann die EINGABETASTE.
Drücken Sie die F5-TASTE, um das Laden der Contoso-Projekt-App fortzusetzen.

Die Contoso-Projekt-App wird angezeigt.
Klicken Sie auf die Schaltfläche Alle Projekte, um eine Liste mit den Projekten der Contoso-Konstruktions-Anwendung anzuzeigen.

Wichtig
Stellen Sie sicher, dass ContosoConstruction in der Startreihenfolge vor ContosoProjects aufgeführt ist.

Nächste Schritte

Wenn Sie zur Bereitstellung der App bereit sind, müssen Sie jedes Projekt einzeln veröffentlichen.Zuerst veröffentlichen Sie die LightSwitch-Anwendung auf Ihrem Produktionsserver.Nachdem die LightSwitch-Anwendung bereitgestellt wurde und Ihnen die URL des OData-Diensts für den Produktionsserver bekannt ist, können Sie die Portnummer in der Datei "data.js" für die Windows Store-App aktualisieren, bevor Sie sie bereitstellen.

Siehe auch

Weitere Ressourcen

LightSwitch als Datenquelle

Gewusst wie: Bereitstellen einer 3-Schicht-Anwendung

Gewusst wie: Erstellen Sie eine Windows Store-Anwendung bereit

Freigeben über