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

Utilizzando Microsoft LightSwitch per Visual Studio, aggiornamento 2, è possibile creare un client di HTML in cui gli utenti mobili possono visualizzare, aggiungere e aggiornare i dati dalle posizioni remote tramite i dispositivi moderni e orientati a tocco come telefoni e vengono compresse.In questa procedura dettagliata, verrà creato un client per un'azienda spostamento romanzata, spostanteti, in modo che il personale del servizio clienti è più possibile prevedere il numero di persone, autocarro e caselle ogni processo richiederà.

In Contoso, le utilità di pianificazione superano la maggior parte del tempoufficio, parlando con clienti potenziali in persona o di telefono e disposizione le visite di seguito.Questi lavoratori utilizzano un client desktop dettagliato basato su Silverlight e che consentono l'immissione di dati rispetto ad supporta con la tastiera e il mouse.Al contrario, gli specialisti di pianificazione trasferire qualsiasi giorno, utilizzando una visita di seguito in diverse posizioni e informazioni di registrazione come la dimensione, il contenuto e i requisiti della voce di ogni spazio.Questi utente mobili richiesto un client che non solo mostra le informazioni su ciascuna visita di seguito da utilità di pianificazione ma supporta anche fornire i tipi di dati specifici, l'acquisizione di immagini e avvisare il team di spostamento sulle restrizioni di parcheggio o altri dettagli.

Il client desktop per le utilità di pianificazione è già stato compilato.Viene compilato il client mobile che gli specialisti di pianificazione utilizzato per tenere traccia degli appuntamenti che le utilità di pianificazione da e fornire i dettagli su ogni operazione.

Prerequisiti

• Scaricare e installare Microsoft LightSwitch per Visual Studio, aggiornamento 2.

• Scaricare l'applicazione di esempio ContosoMoving.

• Installare l'estensione dell'amministratore del pacchetto di NuGet, come nella procedura seguente viene illustrato.

Per installare l'estensione di NuGet

1. Sulla barra dei menu, scegliere Strumenti, Estensioni e aggiornamenti.

2. Nella finestra di dialogo Estensioni e aggiornamenti, selezionare il nodo Online.

3. Nella casella di testo Cerca Visual Studio Gallery, immettere NuGet.

4. Nell'elenco di risultati, scegliere Gestione pacchetti NuGetquindi scegliere il pulsante Download.

   [!NOTA]

   È necessario riavviare Visual Studio per rendere disponibile l'estensione.

Introduzione

Prima di compilare il client mobile, si creeranno dati di esempio per il client desktop, scaricato.

Per creare dati di esempio

1. Sulla barra dei menu scegliere File, Apri, Progetto/Soluzione.

2. Individuare il file di ContosoMoving.sln che scaricato e lo si apre.

3. Nella barra del menu, scegliere Debug, Avvia debug.

4. Nel client in esecuzione, sulla barra dei menu, scegliere Dati di esempio, Crea dati di esempio.

5. Nella barra degli strumenti nello schermo Crea dati di esempio, scegliere il pulsante Aggiungi tutti i dati di esempio.

   I dati di esempio vengono creati per Stato, Dipendente, Clientee le entità appuntamento.

6. Nella barra degli strumenti, scegliere il pulsante Salva.

7. Sulla barra dei menu, scegliere Pagina iniziale.

8. Nella barra degli strumenti, scegliere il pulsante Refresh.

   Un elenco di appuntamenti imminenti per tutti i dipendenti visualizzato ed esplorare altri schermi nel client desktop.

Aggiungere un client mobile

Aggiungere quindi un progetto client di HTML alla soluzione esistente.

Per aggiungere un progetto client HTML

1. In Esplora soluzioni, selezionare il nodo ContosoMoving.

2. Sulla barra dei menu, scegliere Progetto, Aggiungi client.

3. Nella finestra di dialogo Aggiungi client, scegliere Client HTML, denominarlo MobileClientquindi scegliere il pulsante OK.

4. Nella finestra di dialogo di aggiornamento del progetto che viene visualizzata, scegliere il pulsante OK.

   Il progetto viene aggiornato a Microsoft LightSwitch per Visual Studio, aggiornamento 2e un rapporto di migrazione viene visualizzata nel browser.La struttura di file della soluzione viene modificata e non è più possibile aprire la soluzione in un computer che non dispone di tale versione di LightSwitch installato.

   In Esplora soluzioni, il nodo Origini dati è stato rinominato Server, il nodo Schermate è stato rinominato Cliente un nodo è stato aggiunto e MobileClientdenominato.Il nodo MobileClient è contrassegnato come client Avvio, pertanto verrà visualizzata quando si esegue il debug dell'applicazione.È possibile modificare il client Avvio aprendo il menu di scelta rapida per qualsiasi nodo client e scegliendo Imposta come client StartUp.

Creare schermate e definire la navigazione

Una volta creata una schermata della home page e i dettagli dello schermo, definire la navigazione tra le schermate e creare una finestra di dialogo modale.I client mobili utilizzano un modello diverso di navigazione che i client desktop.In genere, solo uno schermo è visibile alla volta in un client mobile e le modifiche vengono applicate quando si passa da uno schermo a un altro.

Per creare una schermata della home page

1. In Esplora soluzioni, selezionare il nodo MobileClient.

2. Sulla barra dei menu, scegliere Progetto, Aggiungi schermata.

3. Nella finestra di dialogo Aggiungi nuovo schermata, scegliere il modello Sfoglia schermata dati.

4. Nella casella di testo Nome schermata, immettere Home.

5. Nell'elenco Dati della schermata, scegliere UpcomingAppointmentsquindi scegliere il pulsante OK.

Per personalizzare la schermata della home page

1. Nella finestra di progettazione dello schermo, selezionare il nodo appuntamento quindi scegliere Layout righe nell'elenco a discesa.

2. Nel nodo Layout righe | appuntamento, eliminare tutti i nodi ad eccezione Data di inizio e Cliente.

3. Sulla barra dei menu, scegliere Avvia debug.

   Il client mobile verrà visualizzata nel browser.

   In questa fase, vengono visualizzati solo gli appuntamenti.Si aggiungerà quindi una visualizzazione dettagli in modo che i dettagli appuntamento vengano visualizzati quando un utente tocca un appuntamento.

Per creare uno schermo dettagli

1. In Esplora soluzioni, selezionare il nodo MobileClient.

2. Sulla barra dei menu, scegliere Progetto, Aggiungi schermata.

3. Nella finestra di dialogo Aggiungi nuovo schermata, scegliere il modello Visualizza schermata dettagli.

4. Nella casella di testo Nome schermata, immettere ViewAppointmentDetail.

5. Nell'elenco Dati della schermata, scegliere appuntamento.

6. Selezionare Dettagli appuntamenti, AppointmentPhotos appuntamentie le caselle di controllo Stanze appuntamenti quindi scegliere il pulsante OK.

   Nella finestra di progettazione dello schermo, un layout Tabulazioni viene creato e tipi diversi di dati sono organizzati da tabulazioni.

Per personalizzare lo schermo dettagli

1. In Esplora soluzioni, aprire la finestra ViewAppointmentDetail.

2. Nella finestra di progettazione dello schermo, selezionare il nodo Layout righe | DETTAGLI.

3. Eliminare Data di inizio, Data di fine, Note, Tipo di spostamento, Dipendentee i nodi Cliente.

4. Aprire il menu di scelta rapida del nodo Tabulazioni quindi scegliere Aggiungi scheda.

5. Nella finestra Proprietà, impostare il valore della proprietà Nome a Note.

6. Nella finestra di progettazione dello schermo, selezionare il nodo Layout righe | Note, espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

   La finestra di dialogo Aggiungi dati schermata viene visualizzato.

7. Nella casella di testo Specifica i dati video da aggiungere, immettere Appointment.Notesquindi scegliere il pulsante OK.

8. Scegliere il nodo Note quindi scegliere il controllo Area testo nell'elenco a discesa.

9. Nella finestra Proprietà, impostare il valore della proprietà Altezza a Allunga a container.

10. Scegliere il nodo Layout righe | DETTAGLI, espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

    La finestra di dialogo Aggiungi dati schermata viene visualizzato.

11. Nella casella di testo Specifica i dati video da aggiungere, immettere Customer.Phonequindi scegliere il pulsante OK.

12. Scegliere il nodo Telefono quindi scegliere il controllo Editor numero telefonico nell'elenco a discesa.

13. Espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

    La finestra di dialogo Aggiungi dati schermata viene visualizzato.

14. Nella casella di testo Specifica i dati video da aggiungere, immettere Customer.Emailquindi scegliere il pulsante OK.

15. Scegliere il nodo Posta elettronica e quindi scegliere il controllo Editor di indirizzo posta elettronica nell'elenco a discesa.

Per definire la navigazione

1. In Esplora soluzioni, aprire la finestra Pagina iniziale.

2. Nella finestra di progettazione dello schermo, selezionare il nodo Elenco | Upcoming Appointments.

3. Nella finestra Proprietà, scegliere la proprietà Tocco elemento e quindi scegliere il collegamento Nessuno.

4. Nella finestra di dialogo Modifica tocco elemento, scegliere il pulsante di opzione Seleziona un metodo esistente e quindi scegliere showViewAppointmentDetail nell'elenco a discesa.

5. Nell'elenco Operazione, scegliere Salva.

6. Nella casella di testo appuntamento, immettere UpcomingAppointments.selectedItemquindi scegliere il pulsante OK.

7. Sulla barra dei menu, scegliere Avvia debug per eseguire il client mobile.

   In ogni appuntamento, una freccia indica che è possibile passare a un altro schermo.

8. Toccare un appuntamento per visualizzare lo schermo ViewAppointmentDetail.

Per creare una finestra di dialogo modale

1. In Esplora soluzioni, aprire la finestra ViewAppointmentDetail.

2. Nella finestra di progettazione dello schermo, selezionare il nodo Finestre di dialogo quindi selezionare il nodo Aggiungi finestra di dialogo.

3. Nella finestra Proprietà, impostare il valore della proprietà Nome a EditContactInformation.

4. Espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

   La finestra di dialogo Aggiungi dati schermata viene visualizzato.

5. Nella casella di testo Specifica i dati video da aggiungere, immettere Appointment.Customer.FirstNamequindi scegliere il pulsante OK.

6. Espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

   La finestra di dialogo Aggiungi dati schermata viene visualizzato.

7. Nella casella di testo Specifica i dati video da aggiungere, immettere Appointment.Customer.LastNamequindi scegliere il pulsante OK.

8. Espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

   La finestra di dialogo Aggiungi dati schermata viene visualizzato.

9. Nella casella di testo Specifica i dati video da aggiungere, immettere Appointment.Customer.Phonequindi scegliere il pulsante OK.

10. Scegliere il nodo Telefono quindi scegliere il controllo Editor numero telefonico nell'elenco a discesa.

11. Espandere il nodo Aggiungi quindi scegliere Altri dati della schermata.

    La finestra di dialogo Aggiungi dati schermata viene visualizzato.

12. Nella casella di testo Specifica i dati video da aggiungere, immettere Appointment.Customer.Emailquindi scegliere il pulsante OK.

13. Scegliere il nodo Posta elettronica e quindi scegliere il controllo Editor di indirizzo posta elettronica nell'elenco.

14. Nel riquadro, nel trascinamento Via, in Città, in Statoe in CodicePostale a sinistra nel nodo della posta elettronica.

    La sezione risultante Finestre di dialogo sarà simile alla figura seguente.

    

    [!NOTA]

    Anziché trascinare, è inoltre possibile aggiungere Via, Città, Statoe i campi CodicePostale utilizzando gli stessi passaggi dei campi cognome e nome.

Per visualizzare la finestra di dialogo

1. In Esplora soluzioni, aprire la finestra ViewAppointmentDetail.

2. Nella finestra di progettazione dello schermo, aprire il menu di scelta rapida del nodo Layout righe | DETTAGLI quindi scegliere Aggiungi pulsante.

3. Nella finestra di dialogo Aggiungi pulsante, scegliere il pulsante di opzione Seleziona un metodo esistente, selezionare ShowDialog nell'elenco e quindi scegliere il pulsante OK.

4. Scegliere il nodo Mostra informazioni di modifica contatto.

5. Nella finestra Proprietà, impostare il valore della proprietà Nome a Modifica.

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

7. Nel client mobile in esecuzione, toccare un appuntamento per aprire una schermata Visualizza dettagli appuntamento.

8. Toccare il pulsante Modifica per visualizzare la finestra di dialogo.

   OK e i pulsanti Annulla sono inclusi automaticamente.

Personalizzare l'interfaccia utente

È possibile personalizzare l'interfaccia utente del client non solo modificando le impostazioni della finestra di progettazione dello schermo ma anche aggiunta di controlli personalizzati e scrive codice JavaScript.

Per applicare formattazione personalizzata mediante le librerie JavaScript

1. In Esplora soluzioni, aprire la finestra Pagina iniziale.

2. Nella finestra di progettazione dello schermo, selezionare il nodo Layout righe | appuntamento e quindi scegliere Controllo personalizzato nell'elenco.

3. Nell'elenco Scrivi codice, scegliere il metodo RowTemplate_render.

4. Nell'editor di codice, aggiungere il seguente codice per la funzione di 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 utilizza la variabile membro di contentItem.value per determinare la visualizzazione e il metodo di format per definire la formattazione.

5. In Esplora soluzioni, scegliere Visualizzazione file dall'elenco nella barra degli strumenti.

6. Nel menu di scelta rapida del nodo MobileClient, scegliere Gestisci pacchetti NuGet.

7. Nella finestra di dialogo Gestisci pacchetti NuGet, selezionare il nodo Online.

8. Nella casella di testo Cerca online, immettere moment.js.

9. Scegliere il pulsante Installa per installare la libreria di Moment.js quindi scegliere il pulsante Chiudi.

10. In Esplora soluzioni, espandere il nodo MobileClient quindi aprire il file default.htm.

11. Nell'editor di codice, aggiungere il seguente script tag dopo l'ultimo tag di </script> :

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

    Questo tag aggiunge un riferimento alla raccolta di moment.js.

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

    Un appuntamento viene formattato e il tempo e il numero di telefono aggiunti.

Per modificare il layout

1. In Esplora soluzioni, scegliere Visualizzazione logica nell'elenco nella barra degli strumenti e viene aperto lo schermo Pagina iniziale.

2. Nella finestra di progettazione dello schermo, selezionare il nodo Elenco | Upcoming Appointments quindi scegliere Elenco icone nell'elenco a discesa.

3. Scegliere il nodo Controllo personalizzato | appuntamento.

4. Nella finestra Proprietà, impostare il valore della proprietà Larghezza a 280 pixel.

5. Nella finestra Proprietà, impostare il valore della proprietà Altezza a 80 pixel.

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

   Gli appuntamenti imminenti le visualizzazioni della home page in un layout basato su sezione.Modificare la larghezza della finestra del browser per illustrare il layout delle sezioni si adatti in modo dinamico per fare un buon l'utilizzo di spazio orizzontale disponibile.In questa dimostrazione del layout dell'elenco può variare in base all'orientamento e le dimensioni dello schermo di un dispositivo mobile.

Per aggiungere un titolo dinamico dello schermo

1. In Esplora soluzioni, aprire la finestra ViewAppointmentDetail.

2. Nella finestra di progettazione dello schermo, selezionare il nodo Layout righe | DETTAGLI.

3. Nell'elenco Scrivi codice, scegliere Details_postRender.

4. Nell'editor di codice, aggiungere il codice JavaScript seguente:

   myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
       contentItem.dataBind("value.Customer.FirstName", function () {
           formatAppointmentScreenTitle(contentItem);
       });
   
       contentItem.dataBind("value.Customer.LastName", function () {
           formatAppointmentScreenTitle(contentItem);
       });
   
       function formatAppointmentScreenTitle(contentItem) {
           contentItem.screen.details.displayName = contentItem.value.Customer.FirstName + " " +
           contentItem.value.Customer.LastName + " " +
           moment(contentItem.value.StartDate).format("h:mma") + " - " +
           moment(contentItem.value.EndDate).format("h:mma");
       };
   };
   

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

   Gli schermi di appuntamento- dettaglio mostrano il nome del cliente e l'ora di fine e di fine per un appuntamento.

Pubblicare il client

Fino a questo punto, si è verificato il client viene visualizzata nel browser locale.Per accedere al client da un dispositivo mobile, è necessario pubblicarla su Internet Information Services (IIS).

[!NOTA]

È inoltre possibile pubblicare un client mobile a Windows Azure come qualsiasi applicazione di LightSwitch.Per ulteriori informazioni, vedere Procedura: ospitare un'applicazione in Windows Azure.

Per configurare il server

1. Nel server in cui verrà distribuita l'applicazione, aprire Gestione Internet Information Services (IIS).

2. Nel riquadro Connessioni, espandere il nodo del server e quindi scegliere il nodo Sito Web predefinito.

3. Aprire il menu di scelta rapida del nodo Sito Web predefinito e quindi scegliere Aggiungi applicazione.

   Verrà visualizzata la finestra di dialogo Aggiungi applicazione.

4. Nella casella di testo Alias, immettere ContosoMoving.

5. Nella casella di testo Percorso fisico, immettere un percorso per i file client, ad esempio C:\inetpub\wwwroot\Contoso) e quindi scegliere il pulsante OK.

6. Nel riquadro centrale, aprire il menu di scelta rapida per l'icona Autenticazione quindi scegliere Apri funzionalità.

7. Nel riquadro Autenticazione, impostare i seguenti valori:

   Nome	Stato
   L'autenticazione anonima	Enabled
   Rappresentazione ASP.NET	Disabled
   Autenticazione basata su form	Enabled
   Autenticazione di Windows	Disabled

Per pubblicare il client

1. Nell'elenco Debug sulla barra degli strumenti, scegliere Versione.

2. In Esplora soluzioni, selezionare il nodo ContosoMoving.

3. Sulla barra dei menu, scegliere Compila, Pubblica ContosoMoving.

   Viene visualizzata la Pubblicazione guidata applicazione LightSwitch.

4. Nella pagina Tipo di applicazione, scegliere il pulsante di opzione Applicazione completa e quindi scegliere il pulsante Avanti.

5. Nella pagina Configurazione server applicazioni, scegliere il pulsante di opzione Server IIS.

6. Nella pagina Pubblica output, scegliere il pulsante di opzione Pubblica in un server remoto adesso.

7. Nella casella di testo URL servizio, immettere l'url per il server che esegue IIS in cui si desidera pubblicare il client.

8. Nella casella di testo Sito/applicazione, immettere Sito Web predefinito o ContosoMoving.

9. Nella casella di testo Nome utente, il nome di un utente che dispone di autorizzazioni amministrative per il server che esegue IIS.

10. Nella casella di testo Password, digitare la password per l'utente e scegliere quindi il pulsante Avanti.

11. Nella pagina Impostazioni di sicurezza, nella scheda Amministratore applicazione, immettere Nome utente, in Nome completoe in Password per l'utente che inizialmente disporrà di accesso come amministratore al client.

    Importante
    Saranno necessarie le credenziali di accesso al client dopo la pubblicazione.

12. Nella scheda HTTPS, scegliere il pulsante di opzione No, HTTPS non è richiesto quindi scegliere il pulsante Avanti.

    La pagina Connessioni dati viene visualizzata.

13. Nella casella di testo Specificare la connessione utente, immettere la stringa di connessione per il database SQL Server che ospiterà i dati.

    Questo database può trovarsi nello stesso server IIS o in un server diverso.

    Suggerimento
    È possibile scegliere il pulsante con i puntini di sospensione per aprire la finestra di dialogo Proprietà connessione e per immettere le proprietà per costruire la stringa di connessione.

14. Nella casella di testo Pubblica schema database, immettere la stessa stringa di connessione.

15. Scegliere il pulsante Pubblica per pubblicare l'applicazione.

Per esaminare il client

1. Nella barra degli indirizzi di un browser, immettere http://IISServer/contosomoving/clientIISServer, dove è il nome del server in cui è stato pubblicato il client.

2. Le caselle di testo Password e Nome utente, immettere le credenziali specificate per l'amministratore client e quindi scegliere il pulsante Accedi.

3. Sulla barra dei menu, scegliere Dati di esempio, Crea dati di esempio.

   [!NOTA]

   I dati immessi in fase di progettazione non vengono pubblicati, pertanto è necessario aggiungere dati di esempio al database di produzione.

4. Nella schermata Crea dati di esempio, scegliere il pulsante della barra degli strumenti Aggiungi tutti i dati di esempio.

   I dati di esempio vengono creati per Stato, Dipendente, Clientee le entità appuntamento.

5. Nella barra degli strumenti, scegliere il pulsante Salva.

6. Nella barra degli indirizzi del browser, immettere http://IISServer/contosomoving/mobileclientIISServer, dove è il nome del server in cui è stato pubblicato il client.

7. Una volta richiesti un nome utente e una password, immettere ACarter come utente e in pass@word1 come la password.

   Gli appuntamenti imminenti ad ADAM Carter visualizzati.

Aggiungere un controllo personalizzato alle fotografie di carico

Lo schermo dettagli appuntamento dispone di una scheda Foto appuntamenti in modo da adottare uno specialista di pianificazione per lo spostamento di Contoso le immagini di un sito del cliente per stimare il processo con maggiore precisione.Per abilitare questa attività, verrà aggiunto un controllo personalizzato al client.

Per aggiungere un controllo personalizzato

1. In Esplora soluzioni, scegliere Visualizzazione file nell'elenco nella barra degli strumenti.

2. Aprire il menu di scelta rapida del nodo Script, scegliere Aggiungiquindi scegliere Elemento esistente.

3. Nella finestra di dialogo Aggiungi elemento esistente, passare a ContosoMoving la cartella, aprire la cartella RISORSE quindi le cartelle ImageUploader.

4. Selezionare i file Caricatore immagine e base64-file-encoder quindi scegliere il pulsante Aggiungi.

5. Aprire il file di default.htm quindi, nell'editor di codice, aggiungere il seguente riferimento a image-uploader.js al termine del blocco a script:

   <script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
   

6. In Esplora soluzioni, scegliere Visualizzazione logica nell'elenco nella barra degli strumenti e aprire quindi la schermata ViewAppointmentDetail.

7. Nella finestra di progettazione dello schermo, selezionare il nodo Foto appuntamenti e scegliere Layout colonne nell'elenco.

8. Aprire il menu di scelta rapida del nodo Finestre di dialogo e scegliere Aggiungi finestra di dialogo.

9. Nella finestra Proprietà, impostare il valore della proprietà Nome a ImageUploader.

10. Impostare il valore delle proprietà Larghezza e Altezza a Allunga a container.

11. Nel riquadro sinistro della finestra di progettazione dello schermo, espandere il nodo AppointmentPhotos quindi trascinare il nodo Elemento selezionato il nodo Layout righe | Caricatore immagine nel riquadro centrale.

12. Eliminare il nodo appena aggiunto appuntamento.

13. Scegliere il nodo Immagine quindi scegliere Controllo personalizzato nell'elenco.

14. Nella finestra Proprietà, scegliere il collegamento ipertestuale Modifica codice rendering.

15. Nell'editor di codice, aggiungere il codice seguente alla funzione di Picture1_render:

    createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
    

    Questo codice consente di inizializzare il controllo personalizzato di ImageUploader quando lo schermo viene eseguito il rendering.

16. Nella finestra di progettazione dello schermo, aprire il menu di scelta rapida del nodo Layout righe | Foto appuntamenti quindi scegliere Aggiungi pulsante.

17. Nella finestra di dialogo Aggiungi pulsante, scegliere il pulsante di opzione Seleziona un metodo esistente.

18. Nell'elenco showDialog, scegliere AppointmentPhotos.AddAndEditNew.

19. Nell'elenco Passa a, scegliere Caricatore immaginee quindi scegliere il pulsante OK.

20. Trascinare il pulsante Aggiungi foto appuntamento in modo che venga visualizzata sul nodo Elenco | Foto appuntamenti.

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

22. Nel client in esecuzione, toccare un appuntamento.

23. Su lo schermo dettaglio appuntamento, tocchi la scheda Foto appuntamenti.

24. Toccare il pulsante Aggiungi foto appuntamento per aprire la finestra di dialogo Caricatore immagine.

    

Eseguire il mapping dell'indirizzo di un cliente

Lo specialista di pianificazione deve essere in grado di trovare il sito del cliente, pertanto seguente si aggiungerà la funzionalità di mapping tramite un controllo del mapping di Bing.

Per aggiungere un controllo di mapping

1. In Esplora soluzioni, scegliere Visualizzazione file nell'elenco nella barra degli strumenti.

2. Aprire il menu di scelta rapida del nodo Script, scegliere Aggiungiquindi scegliere Elemento esistente.

3. Nella finestra di dialogo Aggiungi elemento esistente, passare a ContosoMoving la cartella e aprire quindi la cartella RISORSE.

4. Scegliere il file lightswitch.bing-maps.js quindi scegliere il pulsante Aggiungi.

5. Aprire il file di default.htm quindi, nell'editor di codice, aggiungere un riferimento all'inizio del blocco a script:

   <script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
   

6. Al termine del blocco a script, aggiungere un riferimento al file JavaScript:

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

7. In Esplora soluzioni, scegliere Visualizzazione logica dall'elenco nella barra degli strumenti e aprire quindi la schermata ViewAppointmentDetail.

8. Nella finestra di progettazione dello schermo, aprire il menu di scelta rapida del nodo Tabulazioni quindi scegliere Aggiungi scheda.

9. Nella finestra Proprietà, impostare il valore della proprietà Nome a Mapping.

10. Trascinare il nodo Layout righe | Mappa in modo che venga visualizzata sul nodo Layout righe | Note.

11. Aprire il menu di scelta rapida del nodo Layout righe | Mappa quindi scegliere Aggiungi controllo personalizzato.

    La finestra di dialogo Aggiungi controllo personalizzato viene visualizzato.

12. Nella casella di testo Specifica i dati per il nuovo controllo personalizzato, immettere Appuntamentoquindi scegliere il pulsante OK.

13. Nella finestra Proprietà, scegliere il collegamento ipertestuale Modifica codice rendering.

14. Nell'editor di codice, aggiungere i seguenti metodi di utilità prima che la 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,
            width: "600",
            height: "400"
        });
    };
    

15. Aggiungere il codice seguente alla funzione Appointment_render :

    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 di nomina al controllo del mapping allo schermo viene eseguito il rendering.

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

17. Nel client in esecuzione, toccare un appuntamento.

18. Su lo schermo dettaglio appuntamento, tocchi la scheda Mappa per visualizzare una mappa dell'indirizzo di un cliente.

Aggiungere le proprie

A questo punto è possibile modificare il titolo del client con nomi più significativi di MobileClient e aggiunto un logo aziendale in movimento di Contoso per personalizzare il client.

Per modificare il titolo

1. In Esplora soluzioni, scegliere Visualizzazione file dall'elenco nella barra degli strumenti.

2. Aprire il file di default.htm quindi, nell'editor di codice, sostituire l'elemento di <title>MobileClient</title> con il codice seguente:

   <title>Contoso Moving Mobile</title>
   

Per aggiungere un'icona

1. In Esplora soluzioni, espandere i nodi immagini e Contenuto.

2. Eliminare i file user-splash-screen.png e user-logo.png.

3. Aprire il menu di scelta rapida del nodo immagini, scegliere Aggiungiquindi scegliere Elemento esistente.

4. Nella finestra di dialogo Aggiungi elemento esistente, passare a ContosoMoving la cartella e aprire quindi la cartella RISORSE.

5. Scegliere il file logo.png quindi scegliere il pulsante Aggiungi.

6. In Esplora soluzioni, scegliere dal menu di scelta rapida del nodo logo.png, scegliere Rinominaquindi immettere user-logo.png.

7. Aprire il menu di scelta rapida del nodo immagini, scegliere Aggiungiquindi scegliere Elemento esistente.

8. Nella finestra di dialogo Aggiungi elemento esistente, selezionare il file logo.png quindi scegliere il pulsante Aggiungi.

9. In Esplora soluzioni, scegliere dal menu di scelta rapida del nodo logo.png, scegliere Rinominaquindi immettere user-splash-screen.png.

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

    [!NOTA]

    Potrebbe essere necessario rimuovere la cache del browser prima che le modifiche vengano visualizzati.

Modificare il tema

Fogli di stile CSS (CSS) per definire il tema di un client.È possibile modificare il tema predefinito per modificare l'aspetto del client, oppure sostituire del tema modificando il file CSS.Utilizzare uno strumento Web, ThemeRoller, per creare il file di a.css con un tema personalizzato.

Per passare tra i temi

1. In Esplora soluzioni, scegliere Visualizzazione file dall'elenco nella barra degli strumenti.

2. Aprire il file di default.htm quindi, nell'editor di codice, sostituire la riga <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> con il codice seguente:

   <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" />
   

3. In Esplora soluzioni, espandere il nodo Contenuto quindi aprire il file user-customization.css.

4. Individuare il file il commento /* if light theme change ‘white’ to ‘black */*/quindi msls-white-icons di sostituzione con la stringa seguente in ciascuna delle quattro occorrenze:

   msls-black-icons
   

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

Per personalizzare un tema esistente

1. Nel browser, ThemeRoller passare al sito Web.

2. Nella barra degli strumenti di ThemeRoller, scegliere il pulsante Importa o aggiorna.

   La finestra di dialogo Importa tema viene visualizzato.

3. In Visual Studio, in Esplora soluzioni, scegliere Visualizzazione file dall'elenco nella barra degli strumenti.

4. Espandere il nodo Contenuto quindi aprire il file light-theme.css.

5. Nell'editor di codice, copiare l'intero contenuto del file.

6. In ThemeRoller, incollare il contenuto del file light-theme.css nella finestra di dialogo Importa tema e quindi scegliere il pulsante Importa.

7. Nel riquadro sinistro, scegliere la scheda Globale quindi espandere il nodo Corner Radii.

8. Nella casella di testo Gruppo, immettere 0.8em.

9. Nella casella di testo Button, immettere 1.5em.

   Gli elementi di interfaccia utente nel riquadro destro ora hanno angoli arrotondati.

10. Nella scheda B, scegliere il collegamento Elimina.

    LightSwitch utilizza le impostazioni Campione A e solo Globale.Se si rimuovono i campioni aggiuntivi, le dimensioni ridotte del file CSS.

11. Ripetere la procedura per rimuovere i campioni aggiuntivi.

12. Nel riquadro destro, trascinare un colore dalla tavolozza dei colori nell'area in background Campione A.

13. Trascinare un altro colore dell'elemento Pulsante di opzione 1.

    Il colore degli elementi correlati della modifica.Quando si indica un elemento, cambia a un colore complementare, indicando il colore di selezione.

14. Nella barra degli strumenti di ThemeRoller, scegliere il pulsante Download.

15. Nella finestra di dialogo Scarica tema, scegliere il pulsante Scarica zip.

16. Estrarre il contenuto del file appiattito in una cartella locale.

17. In Esplora soluzioni, scegliere dal menu di scelta rapida del nodo Contenuto, scegliere Aggiungiquindi scegliere Elemento esistente.

18. Nella finestra di dialogo Aggiungi elemento esistente, individuare la cartella in cui si estrae i file, scegliere il file my-item.css quindi scegliere il pulsante Aggiungi.

19. Aprire il file di default.htm, individuare la riga <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> nell'editor di codice e quindi sostituire la riga con il codice seguente:

    <link rel="stylesheet" type="text/css" href="Content/my-theme.css" charset="utf-8" />
    

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

Pubblicare il client

Ora che il client è completo, lo ristamperete a IIS.

Per ripubblicare il client

1. In Esplora soluzioni, selezionare il nodo ContosoMoving.

2. Sulla barra dei menu, scegliere Compila, Pubblica ContosoMoving.

3. In Pubblicazione guidata applicazione LightSwitch, scegliere il pulsante Pubblica per pubblicare il client.

4. Nella barra degli indirizzi del browser, immettere http://IISServer/contosomoving/mobileclientIISServer, dove è il nome del server in cui è stato pubblicato il client.

5. Una volta richiesti un nome utente e una password, immettere ACarter come utente e in pass@word1 come la password.

   Il client riflette le modifiche più recenti apportate.

   [!NOTA]

   Potrebbe essere necessario cancellare la cache del browser.

Vedere anche

Altre risorse

Schermate del client HTML per applicazioni LightSwitch