Procedura dettagliata: utilizzo dei dati LightSwitch in un'applicazione Windows Store

Articolo
06/10/2015

Seguendo questa procedura dettagliata, è possibile imparare come creare o configurare un'applicazione Windows Store o un'altra applicazione che supporti il protocollo OData (Open Data) per utilizzare i dati di qualsiasi applicazione LightSwitch.

Prerequisiti

Per completare questa procedura dettagliata, è necessario eseguire Visual Studio 2012 in Windows 8. Sarà inoltre necessario scaricare l'applicazione Contoso Construction dalla raccolta di esempi di MSDN nel sito Web Microsoft e seguire le istruzioni di installazione nel file readme.txt. Se non è mai stata creata prima un'applicazione Windows Store, verrà richiesta l'acquisizione di una licenza per sviluppatori quando si crea il progetto per l'applicazione Windows Store.

Per esporre un'origine dati OData

Nella barra dei menu scegliere File, Apri, Progetto/percorso.
Nella finestra di dialogo Apri progetto individuare e aprire il file ContosoConstruction.sln.
In Esplora soluzioni aprire il menu di scelta rapida per Proprietà, quindi scegliere Apri.
In Progettazione applicazione scegliere il collegamento Modifica proprietà DesktopClient.
Nella finestra di progettazione Client desktop scegliere la scheda Tipo di client.
Nella sezione Client scegliere il pulsante di opzione Web.

In questa procedura vengono esposte entrambe le origini dati per l'applicazione Contoso Construction come feed OData.

Per creare l'applicazione Windows Store

Nella barra dei menu scegliere File, Aggiungi, Nuovo progetto.
Nell'elenco dei tipi di progetto per JavaScript scegliere Applicazione divisa.
Nella casella di testo Nome specificare ContosoProjects, quindi scegliere il pulsante OK.

Il progetto ContosoConstruction verrà aggiunto alla soluzione.

Per aggiungere le librerie di script

Nella barra dei menu scegliere Strumenti, Gestione pacchetti di librerie, Console di Gestione pacchetti.

Verrà aperta la finestra Console di Gestione pacchetti.
Nel prompt dei comandi Console di Gestione pacchetti immettere install-package jquery, quindi premere INVIO.
Al termine del comando, immettere install-package datajs, quindi premere INVIO.

Al termine del comando, i file JavaScript seguenti verranno visualizzati nella cartella Script in Esplora soluzioni:
- 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.

Per modificare l'applicazione Windows Store

In Esplora soluzioni aprire il file default.html.

Nella sezione WinJS references aggiungere i seguenti riferimenti:

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

In Esplora soluzioni espandere il nodo js, quindi aprire il file default.js.
Sotto la riga var app = WinJS.Application; aggiungere la variabile seguente:
```
var OData = window.OData;
```
In Esplora soluzioni aprire il file data.js.

Sostituire il codice nella sezione sampleGroups con il codice seguente:

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

Individuare la funzione dopo il commento // TODO: Replace the data with your real data. e sostituire il codice esistente con il seguente:

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

Per specificare le funzionalità per l'applicazione Windows Store

In Esplora soluzioni aprire il file package.appxmanifest.
Nella scheda Funzionalità selezionare la casella di controllo Reti private (client e server).

Questa procedura consente a un'applicazione aziendale di accedere alle risorse della rete Intranet. Questa impostazione non è necessaria per le applicazioni tipiche Windows Store da Windows Store.

Per eseguire il debug e il test dell'applicazione

In Esplora soluzioni aprire il menu di scelta rapida del nodo Soluzione, quindi scegliere Proprietà.
Scegliere il pulsante di opzione Progetti di avvio multipli.
Nella colonna Azione scegliere Avvia per i progetti ContosoConstruction e ContosoProjects.

Importante

Assicurarsi che ContosoContruction sia elencato prima di ContosoProjects nell'ordine di avvio.
In Esplora soluzioni aprire il file data.js.
Nella riga che inizia con return new WinJS.Promise impostare un punto di interruzione.
Premere il tasto F5 per avviare il debug.

Verrà avviato il caricamento da parte dell'applicazione e, successivamente, verrà arrestata l'esecuzione una volta raggiunto il punto di interruzione.
Copiare il numero di porta dalla barra degli indirizzi nella finestra del browser in cui è in esecuzione l'applicazione Contoso Construction.

Il numero di porta è il valore numerico che segue https://localhost: nell'URL.
Nella finestra Controllo immediato immettere odataUrl = https://localhost:#####/ApplicationData.svc/Projects, sostituendo il numero di porta con #####, quindi premere INVIO.
Premere il tasto F5 per riprendere il caricamento dell'applicazione Contoso Projects.

Verrà visualizzata l'applicazione Contoso Projects.
Scegliere il pulsante Tutti i progetti per visualizzare un elenco di progetti dall'applicazione Contoso Construction.

Passaggi successivi

Quando si è pronti per distribuire l'applicazione, è necessario pubblicare ciascun progetto in modo indipendente. Innanzitutto, si pubblica l'applicazione LightSwitch nel server di produzione. Una volta che l'applicazione LightSwitch è stata distribuita e si conosce l'URL del servizio OData per il server di produzione, aggiornare il numero di porta nel file data.js per l'applicazione Windows Store prima della distribuzione.

Vedere anche

Altre risorse

LightSwitch come origine dati

Procedura: distribuire un'applicazione LightSwitch a tre livelli

Procedura: Distribuzione di un'applicazione Windows Store

Condividi tramite