Postupy: Používání dat z aplikací LightSwitch v aplikacích pro web Windows Store

Článek
06/10/2015

Podle tohoto postupu se můžete naučit, jak vytvořit nebo konfigurovat aplikace systému Windows Store nebo jiné aplikace, které podporují protokol OData (Open Data Protocol) zpracovávající data z libovolné aplikace LightSwitch.

Požadavky

K provedení tohoto postupu je třeba použít sadu Visual Studio 2012 v systému Windows 8.Bude také potřeba stáhnout aplikaci Contoso Construction z galerie ukázek MSDN na webu společnosti Microsoft a postupovat podle pokynů v souboru readme.txt.Pokud jste ještě nikdy dříve aplikaci pro systém Windows Store nevytvářeli, zobrazí se vám při tvorbě aplikace systému Windows Store výzva pro získání licence vývojáře.

Zpřístupnění zdroje dat OData

V panelu nabídek zvolte Soubor, Otevřít, Projekt/Umístění.
V dialogovém okně Otevřít projekt vyhledejte soubor ContosoConstruction.sln a otevřete jej.
V Průzkumníku řešení otevřete místní nabídku Vlastnosti a pak zvolte Otevřít.
V části Návrhář aplikací zvolte odkaz Upravit vlastnosti DesktopClient .
V návrháři klienta pro stolní počítače zvolte kartu Typ klienta.
V sekci Klient zvolte možnost Web.

Tento postup vystaví oba zdroje dat pro aplikaci Contoso Construction jako kanály typu OData.

Vytvoření nové aplikace pro web Windows Store

Na panelu nabídky vyberte možnosti Soubor, Přidat, Nový projekt.
V seznamu typů projektů pro JavaScript zvolte Rozdělená aplikace.
V textovém poli Název zadejte ContosoProjectsa pak klikněte na tlačítko OK.

Do řešení je přidán projekt ContosoConstruction.

Přidání knihovny skriptů

V panelu nabídek zvolte Nástroje, Správce balíčků knihovny a Konzola správce balíčků.

Zobrazí se okno Konzola správce balíčků.
V příkazovém řádku Konzole správce balíčků zadejte install-package jquery a pak stiskněte klávesu ENTER.
Po dokončení příkazu zadejte install-package datajsa stiskněte klávesu ENTER.

Po dokončení příkazu se v Průzkumníku řešení ve složce Scripty objeví následující soubory JavaScript:
- 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

Změna aplikace pro web Windows Store

V Průzkumníku řešení otevřete soubor default.html.

Do oddílu WinJS references přidejte následující odkazy:

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

V Průzkumníku řešení rozbalte uzel js a pak otevřete soubor default.js.
Pod řádek var app = WinJS.Application; přidejte následující proměnnou:
```
var OData = window.OData;
```
V Průzkumníku řešení otevřete soubor data.js.

Nahraďte kód v metodě sampleGroups následujícím kódem:

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

Vyhledejte funkci za komentářem // TODO: Replace the data with your real data. a nahraďte existující kód následujícím kódem:

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

Zadání možností pro aplikaci pro web Windows Store

V Průzkumníku řešení otevřete soubor package.appxmanifest.
V kartě Možnosti zaškrtněte políčko Privátní sítě (Klient a Server).

Tento postup umožňuje podnikovým aplikacím přistupovat k prostředkům v síti Intranet.Toto nastavení není pro typické aplikace Windows Store z Windows Store nezbytné.

Ladění a testování aplikace

V Průzkumníku řešení otevřete místní nabídku uzlu Řešení a pak zvolte Vlastnosti.
Zvolte tlačítko možnosti Více projektů po spuštění.
Ve sloupci Akce zvolte pro oba projekty, ContosoConstruction a ContosoProjects, možnost Spustit.

Důležité

Ujistěte se, že je v pořadí spuštění projekt ContosoContruction uveden před projektem ContosoProjects.
V Průzkumníku řešení otevřete soubor data.js.
V řádku, který spouští return new WinJS.Promise, nastavte zarážku.
Pro spuštění ladění stiskněte klávesu F5.

Aplikace spustí načítání a pak se při dosažení zarážky zastaví.
V okně prohlížeče, ve kterém běží aplikace Contoso Construction, zkopírujte z panelu adresy číslo portu.

Číslo portu je číselná hodnota, která v adrese URL následuje řetězec https://localhost:.
V Příkazovém podokně zadejte odataUrl = https://localhost:#####/ApplicationData.svc/Projects, namísto čísla portu ##### a poté stiskněte klávesu ENTER.
Pro pokračování v zavádění aplikace Contoso Projects stiskněte klávesu F5.

Zobrazí se aplikace Contoso Projects.
Pro zobrazení seznamu projektů pomocí aplikace Contoso Construction klikněte na tlačítko Všechny projekty.

Důležité
Ujistěte se, že je v pořadí spuštění projekt ContosoContruction uveden před projektem ContosoProjects.

Další kroky

Jakmile budete připraveni na nasazení aplikace, je nutné publikovat každý projekt samostatně.Nejprve bude třeba publikovat aplikaci LightSwitch na produkční server.Po nasazení aplikace LightSwitch a po získání adresy URL služby OData pro produkční server aktualizujete číslo portu v souboru data.js aplikace Windows Store před jejím nasazením.

Viz také

Další zdroje

LightSwitch jako zdroj dat

Postupy: Nasazení třívrstvé aplikace LightSwitch

Postup: nasazení aplikace pro web Windows Store

Sdílet prostřednictvím