Procedura dettagliata: creazione di un client LightSwitch per utenti di dispositivi mobili

Articolo
06/10/2015

Con LightSwitch è possibile creare un client HTML in cui gli utenti mobili possono visualizzare, aggiungere e aggiornare i dati da posizioni remote usando dispositivi moderni e orientati al tocco come telefoni e tablet. In questa procedura dettagliata verrà creato un client per una società di traslochi fittizia, Contoso Moving, per consentire al personale dell'assistenza clienti di prevedere più facilmente il numero di persone, camion e scatoloni necessari per ogni trasloco.

Gli addetti alla pianificazione di Contoso trascorrono la maggior parte del tempo in ufficio, parlando con i potenziali clienti di persona o al telefono e organizzando visite. Per svolgere queste attività usano un client desktop avanzato basato su Silverlight che supporta meglio l'inserimento di grandi quantità di dati con la tastiera e il mouse. Gli specialisti della pianificazione invece viaggiano tutto il giorno, visitando i clienti in varie località e registrando informazioni come le dimensioni, il contenuto e i requisiti di ogni stanza. Questi utenti mobili hanno bisogno di un client in grado non solo di mostrare loro le informazioni su ogni visita fissata dagli addetti alla pianificazione, ma anche di supportare l'inserimento di tipi di dati specifici, di scattare foto e di avvisare i traslocatori su possibili divieti di parcheggio o su altri dettagli.

Il client desktop per gli addetti alla pianificazione è già stato preparato. Occorre invece compilare il client mobile che verrà usato dagli specialisti della pianificazione per tenere traccia degli appuntamenti fissati dagli addetti alla pianificazione e per inserire le informazioni su ogni trasloco.

Prerequisiti

Scaricare l'applicazione di esempio ContosoMoving.

Per iniziare

Prima di compilare il client mobile, occorre creare alcuni dati di esempio per il client desktop precedentemente scaricato.

Per creare dati di esempio

Nella barra dei menu scegliere File, Apri, Progetto/Soluzione.
Individuare il file ContosoMoving.sln scaricato e aprirlo.
Nella barra dei menu scegliere Debug, Avvia debug.
Nella barra dei menu nel client in esecuzione scegliere Sample Data, Create Sample Data.
Nella barra degli strumenti nella schermata Create Sample Data scegliere il pulsante Add All Sample Data.

I dati di esempio vengono creati per le entità State, Employee, Customer e Appointment.
Nella barra degli strumenti scegliere il pulsante Salva.
Nella barra dei menu scegliere Home.
Nella barra degli strumenti scegliere il pulsante Aggiorna.

Viene visualizzato un elenco dei prossimi appuntamenti per tutti i dipendenti ed è possibile esplorare le altre schermate del client desktop.

Aggiungere un client mobile

A questo punto verrà aggiunto un progetto client HTML alla soluzione esistente.

Per aggiungere un progetto client HTML

In Esplora soluzioni scegliere il nodo ContosoMoving.
Nella barra dei menu scegliere Progetto, Aggiungi client.
Nella finestra di dialogo Aggiungi client scegliere Client HTML, assegnargli il nome MobileClient e quindi scegliere OK.

Il nodo di progetto MobileClient viene aggiunto in Esplora soluzioni.

Creare schermate e definire la navigazione

Si creerà ora una schermata iniziale e una schermata dei dettagli, si definirà la navigazione tra le schermate e si creerà una finestra di dialogo modale. I client mobili usano un modello di navigazione diverso rispetto ai client desktop. In genere in un client mobile è visibile solo una schermata alla volta e il commit delle modifiche viene eseguito quando si passa da una schermata a un'altra.

Per creare una schermata iniziale

In Esplora soluzioni scegliere il nodo MobileClient.
Nella barra dei menu scegliere Progetto, Aggiungi schermata.
Nella finestra di dialogo Aggiungi nuova schermata scegliere il modello Schermata sfoglia dati.
Nella casella di testo Nome schermata immettere Home.
Nell'elenco Dati della schermata scegliere UpcomingAppointments, quindi fare clic su OK.

Per personalizzare la schermata iniziale

In Progettazione schermata scegliere il nodo Appointment e quindi scegliere Layout righe nell'elenco a discesa.
Nel nodo Layout righe | Appointment eliminare tutti i nodi eccetto Start Date e Customer.
Nella barra dei menu scegliere Avvia debug.

Il client mobile viene visualizzato nel browser.

A questo punto, nella schermata sono visualizzati solo gli appuntamenti. Verrà ora aggiunta una schermata dei dettagli in modo che, quando un utente tocca un appuntamento, vengano visualizzati i relativi dettagli.

Per creare una schermata dei dettagli

In Progettazione schermata scegliere il nodo Upcoming Appointments.
Nella finestra Proprietà scegliere il collegamento Tocco elemento: nessuno.
Nella finestra di dialogo Modifica azione ItemTap selezionare il pulsante di opzione Scegli metodo esistente e quindi selezionare UpcomingAppointments.ViewSelected nell'elenco.
Nell'elenco Passa a scegliere (Nuova schermata) e quindi OK.

Verrà visualizzata la finestra di dialogo Aggiungi nuova schermata.
Nella finestra di dialogo Aggiungi nuova schermata scegliere il modello Visualizza schermata dei dettagli.
Nella casella di testo Nome schermata immettere ViewAppointment.
Nell'elenco Dati della schermata scegliere Appointment.
Selezionare le caselle di controllo Appointment Details, Appointment Photos e Appointment Rooms e quindi scegliere OK.

In Progettazione schermata viene creato un layout Schede in cui i diversi tipi di dati sono organizzati in schede.
Nella barra dei menu scegliere Avvia debug ed eseguire il client mobile.
Toccare un appuntamento per visualizzare la schermata View Appointment.
Ridimensionare la finestra del browser e notare che il layout a due colonne diventa a una sola colonna.

Per personalizzare la schermata dei dettagli

In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata scegliere il nodo Layout righe | Details.
Eliminare i nodi Start Date, End Date, Notes, Move Type, Employee e Customer.
Spostare il nodo State sotto il nodo City.
Selezionare il nodo Layout righe | right, espandere il nodo Aggiungi e quindi scegliere Altri dati della schermata.

Viene visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella di testo Specificare i dati della schermata da aggiungere immettere Customer.Phone e quindi scegliere OK.
Espandere il nodo Aggiungi e quindi scegliere Altri dati della schermata.

Viene visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella di testo Specificare i dati della schermata da aggiungere immettere Customer.Email e quindi scegliere OK.

Per creare una finestra di dialogo modale

In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Barra dei comandi della scheda Details, quindi scegliere Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante selezionare il pulsante di opzione Scegli metodo esistente e quindi selezionare Appointment.edit nell'elenco.
Nell'elenco Passa a scegliere (Nuova schermata) e quindi OK.

Verrà visualizzata la finestra di dialogo Aggiungi nuova schermata.
Nella casella di testo Nome schermata immettere EditAppointment e quindi scegliere OK.

Nella finestra Proprietà la casella di controllo Mostra come finestra di dialogo è selezionata, pertanto la schermata verrà visualizzata come finestra di dialogo modale.
In Progettazione schermata eliminare il nodo Layout colonne | columns.
Espandere il nodo Aggiungi e quindi scegliere Altri dati della schermata.

Viene visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella di testo Specificare i dati della schermata da aggiungere immettere Appointment.Customer.FirstName e quindi scegliere OK.
Espandere il nodo Aggiungi e quindi scegliere Altri dati della schermata.

Viene visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella di testo Specificare i dati della schermata da aggiungere immettere Appointment.Customer.LastName e quindi scegliere OK.
Espandere il nodo Aggiungi e quindi scegliere Altri dati della schermata.

Viene visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella di testo Specificare i dati della schermata da aggiungere immettere Appointment.Customer.Phone e quindi scegliere OK.
Espandere il nodo Aggiungi e quindi scegliere Altri dati della schermata.

Viene visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella di testo Specificare i dati della schermata da aggiungere immettere Appointment.Customer.Email e quindi scegliere OK.
Nel riquadro sinistro trascinare Street, City, State e PostalCode nel nodo Email.

Nota

In alternativa, invece di trascinare è possibile aggiungere i campi Street, StreetLine2, City, State e PostalCode seguendo gli stessi passaggi usati per i campi FirstName e LastName.

Per visualizzare la finestra di dialogo

In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata scegliere il nodo Edit Appointment.
Nella finestra Proprietà espandere l'elenco Icona e quindi scegliere Modifica.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client mobile.
Nel client in esecuzione toccare un appuntamento per aprire la schermata View Appointment.
Toccare il pulsante Edit Appointment per visualizzare la finestra di dialogo.

I pulsanti OK e Annulla sono inclusi automaticamente.

Personalizzare l'interfaccia utente

È possibile personalizzare l'Interfaccia utente del client non solo modificando le impostazioni in Progettazione schermata, ma anche aggiungendo controlli personalizzati e scrivendo codice JavaScript.

Per applicare la formattazione personalizzata mediante le librerie JavaScript

In Esplora soluzioni aprire la schermata Home.
In Progettazione schermata scegliere il nodo Layout righe | Appointment e quindi scegliere Controllo personalizzato nell'elenco.
Nell'elenco Scrivi codice scegliere il metodo RowTemplate_render.

Nell'editor del codice aggiungere il codice seguente per la funzione RowTemplate_render:

myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

Questo codice JavaScript usa la variabile membro contentItem.value per determinare cosa visualizzare e il metodo format per definire la formattazione.

In Esplora soluzioni aprire il menu di scelta rapida per il nodo MobileClient e quindi scegliere Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti di NuGet scegliere il nodo Online.
Nella casella di testo Cerca online immettere moment.js.
Scegliere il pulsante Installa per installare la libreria di Moment.js, quindi scegliere Chiudi.
In Esplora soluzioni espandere il nodo MobileClient e quindi aprire il file default.htm.
Nell'editor di codice aggiungere il seguente tag di script dopo l'ultimo tag </script>:
```
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
```
Questo tag aggiunge un riferimento alla libreria moment.js.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.

L'appuntamento viene formattato e vengono aggiunti l'ora e il numero di telefono.

Per modificare il layout in un elenco di icone

In Esplora soluzioni aprire la schermata Home.
In Progettazione schermata scegliere il nodo Elenco | Upcoming Appointments e quindi selezionare Elenco icone nell'elenco.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.

La schermata iniziale visualizza gli appuntamenti imminenti in un layout a icone. Modificare la larghezza della finestra del browser per dimostrare come il layout delle icone si adatta dinamicamente per sfruttare al meglio lo spazio orizzontale disponibile. Questa dimostrazione illustra in che modo il layout elenco può cambiare in base all'orientamento e alle dimensioni dello schermo di un dispositivo mobile.

Per aggiungere un titolo dinamico della schermata

In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata scegliere il nodo Layout righe | Details.
Nell'elenco Scrivi codice scegliere Details_postRender.

Nell'editor del codice aggiungere il codice JavaScript seguente:

myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Appointment.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Appointment.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Appointment.Customer.FirstName + " " +
        contentItem.value.Appointment.Customer.LastName + " " +
        moment(contentItem.value.Appointment.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.Appointment.EndDate).format("h:mma");
    };
};

Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.

Le schermate appointment-detail mostrano il nome del cliente e le ore di inizio e fine dell'appuntamento.

Aggiungere un controllo personalizzato per caricare le foto

La schermata appointment details contiene una scheda Appointment Photos che consente a uno specialista della pianificazione di Contoso Moving di scattare foto della sede di un cliente per fare una stima più precisa del lavoro. Per abilitare questa attività, è necessario aggiungere un controllo personalizzato al client.

Per aggiungere un controllo personalizzato

In Esplora soluzioni aprire il menu di scelta rapida per il nodo Script, scegliere Aggiungi, quindi Elemento esistente.
Nella finestra di dialogo Aggiungi elemento esistente passare alla cartella ContosoMoving e quindi aprire la cartella Sample Resources.
Selezionare i file image_uploader-base64-file-encoder e image-uploader e quindi scegliere il pulsante Aggiungi.
Aprire il file default.htm e quindi nell'editor del codice aggiungere il seguente riferimento a image-uploader.js alla fine del blocco di riferimenti allo script:
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata scegliere il nodo Elenco | Photos e quindi selezionare Elenco icone nell'elenco.
Nella finestra Proprietà aprire l'elenco proprietà Altezza e quindi scegliere Adatta a contenitore.
Nella casella di testo Min immettere 150.
In Progettazione schermata aprire il menu di scelta rapida per la scheda Photos nel nodo Barra dei comandi e quindi scegliere Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante selezionare il pulsante di opzione Scegli metodo esistente, selezionare Photos.addEditNew nell'elenco e quindi scegliere OK.

Verrà visualizzata la finestra di dialogo Aggiungi nuova schermata.
Nella casella di testo Nome schermata immettere UploadPhoto e quindi scegliere OK.
In Progettazione schermata eliminare il nodo Layout righe | right.
Scegliere il nodo Didascalia e quindi modificare il tipo di controllo in Area testo.
Scegliere il nodo Immagine e quindi modificare il tipo di controllo in Controllo personalizzato.
Nella finestra Proprietà scegliere il collegamento ipertestuale Modifica codice Render.
Nell'editor del codice aggiungere il codice seguente alla funzione Picture1_render:
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
Questo codice inizializza il controllo personalizzato ImageUploader quando viene eseguito il rendering della schermata.
In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata scegliere il pulsante Add Photo e modificare la proprietà Icona in Add Picture.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.
Nel client in esecuzione toccare un appuntamento.
Nella schermata appointment detail toccare la scheda Photos.
Toccare il pulsante Add Photo per aprire la finestra di dialogo Image Uploader.

Eseguire il mapping dell'indirizzo di un cliente

Per consentire allo specialista della pianificazione di trovate la sede del cliente, verrà ora aggiunta la funzionalità di mapping mediante un controllo mappa Bing.

Per aggiungere un controllo mappa

In Esplora soluzioni aprire il menu di scelta rapida per il nodo Script, scegliere Aggiungi, quindi Elemento esistente.
Nella finestra di dialogo Aggiungi elemento esistente passare alla cartella ContosoMoving e quindi aprire la cartella Sample Resources.
Selezionare il file lightswitch.bing-maps.js e quindi scegliere il pulsante Aggiungi.
Aprire il file default.htm e quindi nell'editor del codice aggiungere un riferimento all'inizio del blocco di riferimenti allo script:
```
<script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
```

Al termine del blocco dei riferimenti allo script, aggiungere un riferimento al file JavaScript:

<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

In Esplora soluzioni aprire la schermata ViewAppointment.
In Progettazione schermata aprire il menu di scelta rapida per il nodo Schede, quindi scegliere Aggiungi scheda.
Nella finestra Proprietà impostare il valore della proprietà Nome su Map.
Aprire il menu di scelta rapida per il nodo Layout righe | Map e quindi scegliere Aggiungi controllo personalizzato.

Verrà visualizzata la finestra di dialogo Aggiungi controllo personalizzato.
Nella casella di testo Specificare i dati per il nuovo controllo personalizzato immettere Appointment e quindi scegliere OK.
Nella finestra Proprietà scegliere il collegamento ipertestuale Modifica codice Render.

Nell'editor del codice aggiungere i metodi di utilità seguenti prima della funzione Appointment_render:

function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,


        height: "400"
    });
};

Aggiungere il codice seguente alla funzione Appointment_render:

updateMap(element, contentItem);
mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

Questo codice associa i campi dell'appuntamento al controllo mappa quando viene eseguito il rendering della schermata.

Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.
Nel client in esecuzione toccare un appuntamento.
Nella schermata appointment detail toccare la scheda Map per visualizzare una mappa dell'indirizzo del cliente.

Aggiungere personalizzazione

A questo punto il titolo del client verrà cambiato in qualcosa di più significativo di MobileClient e verrà inoltre aggiunto il logo aziendale di Contoso Moving per personalizzare il client.

Per modificare il titolo

In Esplora soluzioni aggiungere il file default.htm e quindi, nell'editor del codice, sostituire l'elemento <title>MobileClient</title> con il codice seguente:
```
<title>Contoso Moving Mobile</title>
```

Per aggiungere un'icona

In Esplora soluzioni espandere i nodi Content e Images.
Eliminare il file user-logo.png.
Aprire il menu di scelta rapida per il nodo Images, scegliere Aggiungi e quindi Elemento esistente.
Nella finestra di dialogo Aggiungi elemento esistente passare alla cartella ContosoMoving e quindi aprire la cartella Sample Resources.
Selezionare il file user-logo.png e quindi scegliere il pulsante Aggiungi.

Nota

È anche possibile personalizzare l'immagine visualizzata nella schermata iniziale sostituendo il file user-splash-screen.png.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.

Nota

Per visualizzare le modifiche potrebbe essere necessario cancellare la cache del browser.

Modificare il tema

I fogli di stile CSS (Cascading Style Sheets) consentono di definire il tema di un client. È possibile modificare il tema predefinito per cambiare l'aspetto del client oppure sostituire il tema cambiando il file con estensione css. A questo scopo si userà uno strumento Web, ThemeRoller, per creare un file css con un tema personalizzato.

Per passare da un tema all'altro

In Esplora soluzioni aprire il file default.htm e quindi, nell'editor del codice, sostituire"light" nelle due righe seguenti <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />, <link rel="stylesheet" type="text/css" href="Content/msls-light.css" />con dark.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.

Per personalizzare un tema esistente

Nel Web browser passare al sito Web ThemeRoller.
Nella barra degli strumenti di ThemeRoller scegliere il pulsante Import or upgrade.

Verrà visualizzata la finestra di dialogo Import Theme.
In Visual Studio, in Esplora soluzioni, selezionare Visualizzazione file nell'elenco sulla barra degli strumenti.
Espandere il nodo Content e quindi aprire il file dark-theme.css.
Nell'editor del codice copiare l'intero contenuto del file.
In ThemeRoller incollare il contenuto del file dark-theme.css nella finestra di dialogo Import Theme e quindi scegliere il pulsante Import.
Nel riquadro sinistro scegliere la scheda Global e quindi espandere il nodo Corner Radii.
Nella casella di testo Group immettere 0.8em.
Nella casella di testo Button immettere 1.5em.

Gli elementi dell'interfaccia utente nel riquadro destro hanno ora angoli arrotondati.
Nel riquadro destro trascinare un colore dalla tavolozza dei colori nell'area di sfondo di Swatch A.
Trascinare un altro colore sull'elemento Radio.

Anche tutti gli elementi correlati cambiano colore. Quando ci si posiziona su un elemento, il suo colore cambia in un colore complementare, a indicare il colore della selezione.
Nella barra degli strumenti di ThemeRoller scegliere il pulsante Download.
Nella finestra di dialogo Download Theme assegnare al tema il nome my-theme, quindi scegliere il pulsante Download Zip.
Estrarre il contenuto del file compresso in una cartella locale.
In Esplora soluzioni aprire il menu di scelta rapida per il nodo Content, scegliere Aggiungi, quindi Elemento esistente.
Nella finestra di dialogo Aggiungi elemento esistente passare alla cartella in cui sono stati estratti i file, selezionare il file my-theme.css e quindi scegliere il pulsante Add.
Aprire il file default.htm, individuare la riga <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> nell'editor del codice e sostituire "dark-theme" con my-theme.
Nella barra dei menu scegliere Debug, Avvia debug per eseguire il client.

Passaggi successivi

L'applicazione client per dispositivi mobili è pronta. Per testarla su un dispositivo mobile, pubblicarla in Internet Information Services (IIS) o in Microsoft Azure.

Vedere anche

Altre risorse

Schermate del client HTML per applicazioni LightSwitch

Procedura: distribuire un'applicazione LightSwitch a tre livelli

Procedura: Ospitare un'applicazione LightSwitch in Microsoft Azure

Condividi tramite