Procédure pas à pas : utilisation de données LightSwitch dans une application Windows Store

Article
03/04/2013

En suivant cette procédure pas - à - pas, vous pouvez apprendre à créer ou de configurer une application pour Windows Store ou une autre application qui prend en charge le protocole ouvert OData (open data) pour consommer des données de n'importe quelle application d' Visual Studio LightSwitch .

Composants requis

Pour exécuter cette procédure, vous devez exécuter Visual Studio 2012 sur Windows 8.Vous devrez également télécharger la demande Galerie exemples de MSDN de construction Contoso en fonction de le site Web Microsoft et suivez les instructions d'installation dans le fichier lisezmoi.txt.Si vous n'avez jamais créé une application d' Windows Store avant, vous serez invité à entrer une licence de développement lorsque vous créez le projet pour l'application d' Windows Store .

Pour exposer une source de données d'OData

Dans la barre de menus, sélectionnez Fichier, Ouvrir, projet/emplacement.
Dans la boîte de dialogue Ouvrir un projet , accédez au fichier de ContosoConstruction.sln, puis ouvrez -le.
Dans Explorateur de solutions, ouvrez le menu contextuel pour Propriétés, puis choisissez Ouvrir.
Dans Concepteur d'application, choisissez Type d'application tableau.
Dans la section Client , sélectionnez la case d'option Web .

Cette procédure expose les deux sources de données pour l'application de construction Contoso comme OData l'distribue.

Pour créer des fenêtres signalent l'application

Dans la barre de menus, cliquez sur Fichier, Ajouter, Nouveau projet.
Dans la liste des types de projet pour JavaScript, choisissez Application fractionnée.
Dans la zone de texte Nom , spécifiez ContosoProjects, puis choisissez le bouton OK .

Le projet ContosoConstruction est ajouté à la solution.

Pour ajouter des bibliothèques de scripts

Dans la barre de menus, sélectionnez Outils, gestionnaire de module de bibliothèque, console de gestionnaire de module.

La fenêtre empaquetez la console de gestionnaire s'ouvre.
À l'invite de commandes console de gestionnaire de module , entrez jquery d'installer-module, puis choisissez la touche ENTRÉE.
Une fois la commande se termine, entrez datajs d'installer-module, puis choisissez la touche ENTRÉE.

Une fois la commande se termine, les fichiers suivants d' JavaScript apparaissent dans le dossier Scripts dans Explorateur de solutions:
- 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.

Pour modifier l'application de mémoire windows

Dans Explorateur de solutions, ouvrez le fichier default.html.

Sous la section d' WinJS references , ajoutez les références suivantes :

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

Dans Explorateur de solutions, développez le nœud JS , puis ouvrez le fichier default.js.
Sous la ligne d' var app = WinJS.Application; , ajoutez la clause suivante :
```
var OData = window.OData;
```
Dans Explorateur de solutions, ouvrez le fichier de data.js.

Remplacez le code dans la section d' sampleGroups par le code suivant :

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

Recherchez la fonction après le commentaire // TODO: Replace the data with your real data., et remplacez le code existant par le code suivant :

//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();

Pour spécifier des fonctions pour les fenêtres enregistrez l'application

Dans Explorateur de solutions, ouvrez le fichier de package.appxmanifest.
Sous l'onglet Capacités , activez la case à cocher réseaux privés (client et serveur) .

Cette procédure permet à une application d'entreprise d'accéder aux ressources intranet.Ce paramètre n'est pas nécessaire pour les applications classiques d' Windows Store d' Windows Store.

Pour déboguer et tester l'application

Dans Explorateur de solutions, ouvrez le menu contextuel du nœud Solution , puis choisissez Propriétés.
Sélectionnez la case d'option Plusieurs projets de démarrage .
Dans la colonne Action , choisissez Démarrer pour les projets ContosoConstruction et ContosoProjects .

Important

Assurez -vous que ContosoContruction apparaît avant ContosoProjects dans l'ordre de démarrage.
Dans Explorateur de solutions, ouvrez le fichier de data.js.
Dans la ligne qui commence return new WinJS.Promise, définissez un point d'arrêt.
Choisissez la touche F5 pour démarrer le débogage.

L'application commence à charger puis arrêter l'exécution lorsque le point d'arrêt est atteint.
Dans la fenêtre du navigateur dans laquelle l'application de construction Contoso exécute, copiez le numéro de port de la barre d'adresses.

Le numéro de port est la valeur numérique qui suit https://localhost: dans l'URL.
Dans la fenêtre Immédiat , entrez odataUrl = https://localhost:#####/ApplicationData.svc/Projects, en substituant le numéro de port pour #####, puis choisissez la touche ENTRÉE.
Choisissez la touche F5 pour continuer charger l'application de projets Contoso.

L'application de projets Contoso s'affiche.
Choisissez le bouton Tous les projets pour afficher une liste des projets d'application de construction Contoso.

Étapes suivantes

Lorsque vous êtes prêt à déployer l'application, vous devez publier chaque projet indépendamment.d'abord, vous publiez l'application d' LightSwitch à votre serveur de production.Une fois l'application d' LightSwitch déployée et vous connaissez l'URL de service OData de pour le serveur de production, vous mettez à jour le numéro de port dans le fichier de data.js pour l'application d' Windows Store avant de la déployer sur.

Partager via