Personalizzazione dell'aspetto di una schermata in un'applicazione LightSwitch

Articolo
06/10/2015

In questa lezione sarà illustrato come modificare il layout e l'aspetto delle schermate in LightSwitch. Le schermate in LightSwitch sono diverse dai form negli strumenti di sviluppo tradizionali perché il layout è predefinito. È possibile che la schermata sia operativa senza alcuna modifica o codice. Tuttavia, se si desidera personalizzare o migliorare una schermata, vi sono diverse modalità disponibili a tale scopo.

Personalizzare la schermata

È possibile usare Progettazione schermata per personalizzare una schermata in molti modi. Ad esempio, è possibile modificare il nome visualizzato, cambiare l'ordine di visualizzazione dei campi oppure modificare il tipo di controllo usato per presentare un campo.

Per modificare i nomi visualizzati

In Esplora soluzioni aprire il menu di scelta rapida per il nodo BrowseContactLists.lsml e scegliere Apri.
Nel riquadro centrale di Progettazione schermata scegliere il nodo Schermata | ContactLists più in alto.
Nella finestra Proprietà scegliere la proprietà Nome visualizzato, quindi immettere Northwind Contacts.
In Esplora soluzioni aprire il menu di scelta rapida per il nodo AddEditContactList.lsml e scegliere Apri.
Nel riquadro centrale di Progettazione schermata scegliere il nodo Schermata | ContactLists più in alto.
Nella finestra Proprietà scegliere la proprietà Nome visualizzato, quindi immettere ContactInformation.
In Progettazione schermata scegliere il nodo ContactName.
Nella finestra Proprietà scegliere la proprietà Nome visualizzato, quindi immettere Name.
Ripetere il processo per ContactCompany, ContactState, ContactPhone e ContactEmail, cambiando i nomi visualizzati in Company, State, Phone e Email, rispettivamente.

Per modificare i controlli e l'ordine di visualizzazione

In Esplora soluzioni aprire il menu di scelta rapida per il nodo BrowseOrders.lsml, quindi scegliere Apri.
Nel riquadro centrale di Progettazione schermata scegliere il nodo Elenco icone | Orders più in alto.
Espandere l'elenco di controlli Elenco icone, quindi scegliere Tabella.

Per la visualizzazione degli ordini sarà usato il formato tabella, invece dell'elenco icone predefinito.
In Esplora soluzioni aprire il menu di scelta rapida per il nodo ViewContactList.lsml e scegliere Apri.
Nel riquadro centrale di Progettazione schermata scegliere il nodo ContactPhone, espandere l'elenco di icone, quindi fare clic su Testo.

Il numero di telefono sarà visualizzato come testo normale, invece del collegamento ipertestuale visualizzato dal controllo Visualizzatore numero di telefono predefinito.
Scegliere il nodo ContactState, quindi trascinarlo sotto il nodo ContactCompany.

Per aggiungere una scheda con informazioni correlate

In Esplora soluzioni aprire il menu di scelta rapida per il nodo ViewContactList.lsml e scegliere Apri.
Nel riquadro centrale di Progettazione schermata scegliere il nodo Schede più in alto quindi scegliere il nodo Aggiungi scheda.

Una nuova tabella sarà aggiunta alla schermata.
Scegliere il nodo Layout righe | Gruppo (Scheda). Nella finestra Proprietà scegliere la proprietà Nome e immettere CustomerInformation.
Espandere l'elenco Aggiungi, quindi scegliere Altri dati della schermata.

Sarà visualizzata la finestra di dialogo Aggiungi dati schermata.
Nella casella Specificare i dati della schermata da aggiungere della finestra di dialogo Aggiungi dati schermata immettere Contact.Customer, quindi fare clic su OK.

Per visualizzare le modifiche

Eseguire l'applicazione. Si noti che il titolo nella schermata principale è ora Northwind Contacts.
Aprire la schermata BrowseOrders. Come si può notare, gli ordini sono ora visualizzati in una tabella.
Tornare alla schermata principale, scegliere il riquadro per il contatto Elizabeth Lincoln, quindi nella schermata Visualizza scegliere la scheda Customer Information.

Si noti che sono visualizzate le informazioni disponibili nella tabella Northwind Customers.
Tornare alla schermata principale, scegliere il riquadro per Howard Snyder, quindi scegliere la scheda Customer Information.

Si noti che non sono visualizzate informazioni. Nella tabella Northwind Customers non è presente alcun record corrispondente.
Scegliere la scheda Dettagli, quindi fare clic su Modifica per aprire la schermata Modifica.

Si noti che il titolo è ora Contact Information e che i nomi visualizzati per i campi sono stati aggiornati.
Chiudere la finestra di dialogo, quindi chiudere l'applicazione.

Informazioni dettagliate

In questa lezione sono stati presentati alcuni modi per modificare l'aspetto dello schermo. Nella lezione è stata inoltre illustrata la correlazione di Albero del contenuto della schermata in Progettazione schermata con l'interfaccia utente nella schermata in esecuzione.

Quando sono state modificate le proprietà Nome visualizzato, è stato modificato il testo dell'interfaccia utente visualizzato all'utente. Come probabilmente si ricorderà, la proprietà Nome visualizzato per un altro campo è stata modificata in Entity Designer in una lezione precedente. Quando si imposta Nome visualizzato in Entity Designer, la modifica è propagata in tutte le schermate. Quando si imposta questa proprietà solo in Progettazione schermata, sarà modificata solo la schermata in uso.

Quando il tipo di controllo per il campo ContactPhone è stato modificato da un controllo Visualizzatore numero di telefono a un controllo Testo, si è probabilmente notato che l'elenco dei controlli disponibili per ogni campo include solo i controlli adatti al tipo di dati sottostanti del campo. Ad esempio, per un campo con tipo di dati Text, è possibile scegliere un controllo Casella di testo, Area testo o Testo. L'elenco contiene anche una voce per Controllo personalizzato, che permette di creare un controllo JavaScript personalizzato. Vedere Procedura: aggiungere un controllo personalizzato a una schermata HTML per un'applicazione LightSwitch.

Oltre a trascinare un campo, in questo caso il campo ContactState, in una posizione diversa dell'elenco, è possibile trascinare campi dal riquadro sinistro di Progettazione schermata al riquadro centrale. Ad esempio, se si elimina accidentalmente il campo ContactState, è possibile trascinarlo di nuovo dall'elenco Contact nel riquadro sinistro.

Quando è stata aggiunta la scheda Customer Information, è stata usata la relazione creata nella lezione Definizione di relazioni in un'applicazione LightSwitch per l'inserimento di informazioni correlate sui clienti. La possibilità di creare correlazioni tra i dati da origini diverse è una funzionalità molto utile di LightSwitch.