Condividi tramite


Procedura dettagliata: creazione dell'applicazione di Vision Clinic in LightSwitch

In questa procedura dettagliata viene illustrato il processo completo di creazione di un'applicazione in LightSwitch. Verranno usate molte delle funzionalità di LightSwitch per creare un'applicazione fittizia Vision Clinic. Nell'applicazione sono incluse funzionalità per pianificare appuntamenti e creare fatture.

Prerequisiti

Scaricare il database PrescriptionContoso dalla raccolta di codici di MSDN.

Passaggi

  • Creazione di un progetto

    Creare il progetto di applicazione.

  • Definire le tabelle

    Aggiungere le entità Patient, Invoice e Invoice Detail.

  • Creare un elenco di scelte

    Creare un elenco di valori.

  • Definire una relazione

    Collegare le tabelle correlate.

  • Aggiungere un'altra entità

    Aggiungere l'entità Appointment.

  • Creare una schermata

    Creare una schermata per visualizzare le informazioni su qualsiasi paziente.

  • Esecuzione dell'applicazione

    Eseguire l'applicazione e immettere i dati.

  • Connettersi a un database

    Connettersi a un database esterno.

  • Apportare modifiche alle entità

    Modificare le entità Products e Product Rebate.

  • Creare una schermata di elenco e dettagli

    Creare una schermata per visualizzare i prodotti.

  • Modificare il layout della schermata

    Modificare il layout della schermata Product List.

  • Apportare modifiche in fase di esecuzione

    Apportare modifiche nell'applicazione in esecuzione.

  • Creare una query

    Creare una query con parametri e associarla a una schermata.

  • Aggiungere un campo calcolato

    Creare un campo calcolato e aggiungerlo a una schermata.

  • Creare una relazione tra database

    Creare una relazione virtuale tra le entità in database diversi.

  • Creare la schermata Invoices

    Creare una schermata per visualizzare le fatture.

  • Modificare la schermata Invoices

    Modificare il layout della schermata Invoices nell'applicazione in esecuzione.

  • Aggiungere la logica della schermata

    Scrivere il codice per calcolare le date.

  • Aggiungere altri campi calcolati

    Creare più campi calcolati e aggiungerli alla schermata Invoices.

  • Aggiungere un client mobile

    Aggiungere schermate per visualizzare pazienti e appuntamenti in un dispositivo mobile.

Creazione di un progetto

Il primo passaggio per la creazione di un'applicazione LightSwitch consisterà nel creare un progetto per l'applicazione in questione.

Per creare un progetto

  1. Nella barra dei menu scegliere File, Nuovo progetto.

    Verrà visualizzata la finestra di dialogo Nuovo progetto.

  2. Nell'elenco Modelli installati espandere il nodo Visual Basic o Visual C#, quindi scegliere il nodo LightSwitch.

  3. Nel riquadro centrale selezionare il modello Applicazione desktop LightSwitch.

  4. Nella casella di testo Nome immettere Vision Clinic, quindi scegliere OK.

    Verrà visualizzata la Finestra di progettazione Vision Clinic; le cartelle necessarie per il progetto verranno aggiunte alla finestra Esplora soluzioni.

    Il progetto Vision Clinic

Definire le tabelle

In LightSwitch, le tabelle vengono definite entità; tramite queste tabelle viene modellato l'oggetto rappresentato dai dati (in questo caso una raccolta di pazienti). Nelle applicazioni LightSwitch si usa un modello "form su dati", vale a dire form o schermate in cui vengono visualizzati i dati di una o più origini. In LightSwitch è incluso un database intrinseco in cui è possibile archiviare i dati per l'applicazione. Nel passaggio successivo verrà creata una tabella di database per archiviare le informazioni sui pazienti.

Per creare l'entità Patient

  1. Nella finestra Finestra di progettazione Vision Clinic scegliere il collegamento Crea nuova tabella.

    Verrà visualizzato Data Designer. In Solution Explorer verrà visualizzato un nodo Table1Items sotto il nodo Origini dati nel progetto Vision Clinic.Server.

  2. Nella finestra Proprietà assegnare alla tabella il nome Patient, quindi premere INVIO.

    Il nome nella barra del titolo di Data Designer cambierà in "Patient" e il nome in Esplora soluzioni in "Patients.lsml".

  3. Nella colonna Nome di Data Designer scegliere il collegamento <Aggiungi proprietà>, immettere il nome, quindi premere INVIO.

    Si noti che il tipo di dati corretto, String, viene visualizzato nella colonna Tipo ed è selezionata la casella di controllo Obbligatorio. Gli utenti devono specificare un nome per ogni paziente.

  4. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere Street.

  5. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere Street2.

  6. Nella colonna Obbligatorio deselezionare la casella di controllo.

    La seconda riga di un indirizzo è facoltativa.

  7. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere City.

  8. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere State.

  9. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere Zip.

  10. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere PrimaryPhone.

  11. Nella colonna Tipo aprire l'elenco, quindi scegliere PhoneNumber.

    PhoneNumber è un tipo aziendale personalizzato che rappresenta un modello comune per l'immissione e la formattazione dei numeri di telefono.

  12. Nella colonna Obbligatorio deselezionare la casella di controllo.

  13. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere SecondaryPhone.

  14. Nella colonna Tipo aprire l'elenco, quindi scegliere PhoneNumber.

  15. Nella colonna Obbligatorio deselezionare la casella di controllo.

  16. Nella colonna Nome scegliere il collegamento <Aggiungi campo>, quindi immettere Email.

  17. Nella colonna Tipo aprire l'elenco, quindi scegliere EmailAddress.

    EmailAddress è un altro tipo aziendale personalizzato che rappresenta un indirizzo di posta elettronica formattato in modo corretto.

  18. Nella colonna Obbligatorio deselezionare la casella di controllo.

  19. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere PolicyNumber.

  20. Nella finestra Proprietà impostare la proprietà Lunghezza massima su 12.

    Questo valore impedirà agli utenti di immettere un numero di polizza contenente più di 12 caratteri.

    L'entità Patient

  21. Nella finestra Proprietà deselezionare la casella di controllo Abilita proprietà create/modificate.

    È possibile usare le proprietà di creazione e modifica per creare un audit trail per la tabella alla scopo di tenere traccia dell'autore di un record e di chi vi ha apportato la modifica più recente. Non sono tuttavia necessarie per questa entità.

  22. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Successivamente, verranno create altre due entità per rappresentare una fattura e le relative voci.

Per creare le entità Invoice e InvoiceDetail

  1. In Esplora soluzioni scegliere il nodo Data Sources, quindi nella barra dei menu scegliere Progetto, Aggiungi tabella.

    Verrà visualizzata una nuova istanza di Data Designer.

  2. Nella finestra Proprietà impostare la proprietà Nome su Invoice, quindi premere INVIO.

  3. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, immettere InvoiceDate, quindi premere TAB.

  4. Nella colonna Tipo aprire l'elenco, quindi scegliere DateTime.

  5. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, immettere InvoiceDue, quindi premere TAB.

  6. Nella colonna Tipo aprire l'elenco, quindi scegliere DateTime.

  7. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, immettere InvoiceStatus, quindi premere TAB.

  8. Nella colonna Tipo aprire l'elenco, quindi scegliere Integer.

  9. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, immettere ShipDate, quindi premere TAB.

  10. Nella colonna Tipo aprire l'elenco, quindi scegliere DateTime.

    L'entità Invoice

  11. In Esplora soluzioni scegliere il nodo Data Sources, quindi nella barra dei menu scegliere Progetto, Aggiungi tabella.

  12. Nella finestra Proprietà impostare la proprietà Nome su InvoiceDetail, quindi premere INVIO.

  13. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, immettere Quantity, quindi premere TAB.

  14. Nella colonna Tipo aprire l'elenco, quindi scegliere Integer.

  15. Nella colonna Nome scegliere il collegamento <Aggiungi proprietà>, quindi immettere UnitPrice.

  16. Nella colonna Tipo aprire l'elenco, quindi scegliere Money.

    Money è un altro tipo aziendale personalizzato con cui viene rappresentata e formattata correttamente la valuta.

    L'entità InvoiceDetails

  17. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  18. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare un elenco di scelte

Nel passaggio successivo verrà creato un elenco di scelte per l'entità Invoice. Con un elenco di scelte è possibile presentare all'utente un set fisso di valori da cui scegliere.

Per creare un elenco di scelte

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Invoices.lsml, quindi scegliere Apri.

  2. In Data Designer scegliere il campo InvoiceStatus.

  3. Nella finestra Proprietà scegliere il collegamento Elenco di scelte.

    La finestra di dialogo Elenco scelte

  4. Nella finestra di dialogo Elenco di scelte immettere i valori seguenti, quindi fare clic su OK.

    Valore

    Nome visualizzato

    0

    Active

    1

    Paid

    2

    Overdue

    Quando viene visualizzato questo campo, l'utente può aprire un elenco e scegliere uno dei tre valori di Nome visualizzato immessi.

  5. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Definire una relazione

Nel passaggio successivo verranno definite le relazioni tra le entità Patient, Invoice e InvoiceDetail.

Per definire le relazioni

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Invoices.lsml, quindi scegliere Apri.

  2. Nella barra degli strumenti di Data Designer scegliere Relazione.

    Verrà visualizzata la finestra di dialogo Aggiungi nuova relazione.

  3. Nella riga Nome: selezionare la colonna A, aprire l'elenco, selezionare Patient, quindi scegliere OK.

    Verrà creata una relazione di tipo uno a molti tra le entità Patient e Invoice. A un paziente possono essere associate più fatture.

  4. Nella barra degli strumenti di Data Designer scegliere Relazione.

    Verrà aperta la finestra di dialogo Aggiungi nuova relazione.

  5. Nella riga Nome: selezionare la colonna A, aprire l'elenco e scegliere InvoiceDetail.

  6. Nella riga Molteplicità: selezionare la colonna Da, aprire l'elenco e scegliere Uno.

  7. Nella riga Molteplicità: selezionare la colonna A, aprire l'elenco e scegliere Molti, quindi fare clic su OK.

    Verrà creata una relazione di tipo uno a molti tra le entità Invoice e InvoiceDetail. A una fattura possono essere associati più dettagli.

    La relazione tra Invoice e InvoiceDetail

  8. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare l'entità Appointment

Nel passaggio successivo verranno aggiunte una o più entità per rappresentare un appuntamento, quindi verranno aggiunti una relazione e un elenco di scelte.

Per aggiungere l'entità Appointment

  1. In Esplora soluzioni scegliere il nodo Data Sources, quindi nella barra dei menu scegliere Progetto, Aggiungi tabella.

  2. Nella finestra Proprietà scegliere la casella di testo Nome, quindi immettere Appointment.

  3. In Data Designer scegliere il testo segnaposto <Aggiungi proprietà> nella colonna Nome, quindi immettere AppointmentTime.

  4. Nella colonna Tipo aprire l'elenco, quindi scegliere DateTime.

  5. In Data Designer scegliere il testo segnaposto <Aggiungi proprietà> nella colonna Nome, quindi immettere AppointmentDate.

  6. Nella colonna Tipo aprire l'elenco, quindi scegliere Date.

  7. Nella colonna Nome scegliere il testo segnaposto <Aggiungi proprietà>, quindi immettere AppointmentType.

  8. Nella colonna Tipo aprire l'elenco, quindi scegliere Short Integer.

  9. Nella colonna Nome scegliere il testo segnaposto <Aggiungi proprietà>, quindi immettere DoctorNotes.

  10. Accettare il tipo predefinito, Stringa, e deselezionare la casella di controllo Obbligatorio.

  11. Nella barra degli strumenti di Data Designer scegliere Relazione.

  12. Nella finestra di dialogo Aggiungi nuova relazione scegliere la colonna A nella riga Nome:.

  13. Aprire l'elenco, scegliere Patient, quindi fare clic su OK.

    Verrà creata una relazione di tipo uno a molti tra le entità Patient e Appointment. A ogni paziente possono essere associati più appuntamenti.

  14. In Data Designer scegliere il campo AppointmentType.

  15. Nella finestra Proprietà scegliere il collegamento Elenco di scelte.

  16. Nella finestra di dialogo Elenco di scelte immettere i seguenti valori, quindi fare clic su OK.

    Valore

    Nome visualizzato

    0

    Annual

    1

    Follow-up

    2

    Emergency

    L'entità Appointment

  17. Nella barra Prospettiva scegliere la scheda DesktopClient.

  18. Nella finestra Proprietà aprire l'elenco per Proprietà di riepilogo, quindi scegliere AppointmentTime.

    Tramite questa proprietà viene definito il campo che verrà mostrato quando viene visualizzato un elenco di appuntamenti.

  19. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare una schermata

Nella procedura successiva verrà creata una schermata per visualizzare un elenco di pazienti.

Per creare una schermata

  1. In Esplora soluzioni scegliere il nodo Schermate, quindi nella barra dei menu scegliere Progetto, Aggiungi schermata.

    Verrà aperta la finestra di dialogo Aggiungi nuova schermata.

  2. Nell'elenco Selezionare un modello di schermata scegliere Schermata di griglia modificabile.

  3. Nella casella di testo Nome schermata immettere PatientList.

  4. Nell'elenco Dati della schermata scegliere Patients, quindi fare clic su OK.

    Definizione della schermata PatientList

    Verrà visualizzato Progettazione schermata in cui viene visualizzata una rappresentazione gerarchica del layout della schermata.

  5. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare una schermata Appointment

Nella procedura successiva verrà creata una schermata per pianificare gli appuntamenti.

Per creare la schermata

  1. Nel progetto Vision Clinic.Server in Esplora soluzioni aprire il menu di scelta rapida del nodo Appointments.lsml, quindi scegliere Apri.

  2. Nella barra Prospettiva scegliere la scheda DesktopClient, quindi nella barra degli strumenti scegliere Schermata.

  3. Nell'elenco Selezionare un modello di schermata della finestra di dialogo Aggiungi nuova schermata scegliere Schermata nuovi dati.

  4. Nell'elenco Dati della schermata scegliere Appointment, quindi fare clic su OK.

  5. Nel riquadro centrale di Progettazione schermata scegliere il nodo AppointmentTime.

  6. Nella finestra Proprietà deselezionare la casella di controllo Mostra data.

    Con questa modifica verrà visualizzata solo la sezione relativa all'orario del controllo Selezione data e ora.

Eseguire l'applicazione e immettere i dati

Si dispone ora di un'applicazione funzionante. Nel passaggio successivo essa verrà eseguita e usata per immettere alcuni dati.

Per eseguire l'applicazione

  1. Premere F5 per avviare l'applicazione.

  2. Nell'applicazione in esecuzione scegliere la schermata PatientList, quindi il pulsante di aggiunta (+).

    Verrà visualizzata la finestra di dialogo Add New Patient.

  3. Immettere i dati relativi a un nuovo paziente e un valore non valido nel campo Email (ad esempio john#example.com).

    Indirizzo di posta elettronica non valido

    Quando ci si sposta dal campo viene visualizzato un bordo rosso. Il tipo aziendale EmailAddress dispone di regole di convalida incorporate in grado di rilevare un indirizzo di posta elettronica in formato non corretto.

  4. Correggere l'errore, completare l'immissione dei dati, quindi fare clic su OK.

    Nella barra degli strumenti dell'applicazione il pulsante Salva è ora abilitato.

  5. Aggiungere più pazienti.

  6. Scegliere Salva per salvare i dati.

    A questo punto è possibile riorganizzare le colonne nella griglia PatientList e impostare l'ordinamento in base a una qualsiasi colonna.

  7. Nella barra dei menu scegliere Attività, Create New Appointment.

    Verrà visualizzata la schermata Create New Appointment.

  8. Immettere i dati per un appuntamento, scegliere un paziente dall'appositoelenco e un'ora successiva della giornata odierna.

  9. Aggiungere più appuntamenti per la giornata, quindi scegliere Salva per salvare i dati.

  10. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

Connettersi a un database

Nel passaggio successivo ci si connetterà a un database esterno contenente informazioni sui prodotti.

Nota

Prima di eseguire questa operazione, è necessario scaricare il database PrescriptionContoso dalla raccolta di codici di MSDN, quindi installare il database seguendo le istruzioni disponibili nel file Install.htm.

Per associare un'origine dati

  1. In Esplora soluzioni scegliere il nodo Origini dati.

  2. Nella barra dei menu scegliere Progetto, Aggiungi origine dati.

  3. Nell'Associazione guidata origine dati scegliere l'icona Database, quindi fare clic su Avanti.

    Verrà aperta la finestra di dialogo Scegli origine dati.

    Nota

    Se precedentemente è stata eseguita la connessione a un database in Visual Studio, questa finestra di dialogo non viene visualizzata ed è possibile ignorare il passaggio successivo.

  4. Scegliere Microsoft SQL Server dall'elenco, quindi fare clic su Continua.

  5. Nella finestra di dialogo Proprietà connessione immettere i valori nella tabella seguente, quindi fare clic su OK.

    Campo

    Valore

    Nome server

    (localdb)\v11.0

    Accesso al server

    Uso dell'autenticazione di Windows

    Seleziona o immetti nome di database

    C:\Temp\PrescriptionContoso.mdf

    Proprietà di connessione

    Verrà visualizzata la pagina della procedura guidata Seleziona oggetti di database.

  6. Espandere il nodo Tabelle, selezionare le tabelle Product e ProductRebate, quindi fare clic su Fine.

    L'origine dati C_TEMP_PRESCRIPTIONCONTOSO_MDFData verrà aggiunta al progetto e verranno create le entità per le tabelle Products e ProductRebates.

  7. In Esplora soluzioni aprire il menu di scelta rapida del nodo C_TEMP_PRESCRIPTIONCONTOSO_MDFData, scegliere Rinomina, quindi immettere PrescriptionContoso.

  8. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Modificare le entità Products e ProductRebate

Nel passaggio successivo verranno modificate le entità ProductRebate e Products.

Per modificare le entità ProductRebate e Products

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo ProductRebates.lsml, quindi scegliere Apri.

  2. Scegliere il campo Rebate, quindi modificarne il Tipo in Money.

  3. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  4. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Products.lsml, quindi scegliere Apri.

  5. In Data Designer scegliere il campo MSRP, quindi modificarne il Tipo in Money.

  6. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  7. Scegliere il campo ProductImage, quindi modificarne il Tipo in Image.

  8. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare una schermata di elenco e dettagli

Nel passaggio successivo verrà creata una schermata per visualizzare le informazioni sui prodotti.

Per creare una schermata di elenco e dettagli

  1. Nella barra Prospettiva di Data Designer selezionare la scheda DesktopClient, quindi nella barra degli strumenti fare clic su Schermata.

    Verrà aperta la finestra di dialogo Aggiungi nuova schermata.

  2. Nell'elenco Selezionare un modello di schermata scegliere Schermata di elenco e dettagli.

  3. Nella casella di testo Nome schermata immettere ProductList.

  4. Nell'elenco Dati della schermata scegliere PrescriptionContoso.Products.

  5. Nell'elenco Dati aggiuntivi da includere selezionare le caselle di controllo Product Details e Product ProductRebates, quindi scegliere OK.

Modificare il layout della schermata

Nel passaggio successivo verrà modificato il layout della schermata ProductList.

Per personalizzare il layout

  1. In Albero del contenuto della schermata di Progettazione schermata scegliere il nodo Layout righe |Product Details.

  2. Nell'elenco Layout righe scegliere Immagine e testo.

  3. Nell'elenco per ogni campo sotto il nodo Immagine e testo scegliere i seguenti valori:

    Campo

    Valore

    (PICTURE)

    Product Image

    (TITLE)

    Nome prodotto

    (SUBTITLE)

    MSRP

    (DESCRIPTION)

    Descrizione

    Layout delle immagini e del testo

  4. Premere F5 per eseguire l'applicazione e visualizzare i risultati.

  5. Nella barra dei menu dell'applicazione in esecuzione scegliere Attività, Product List per visualizzare la schermata ProductList.

    Tenere aperta l'applicazione. Nel passaggio successivo verranno apportate modifiche nell'applicazione in esecuzione.

Modifiche nell'applicazione in esecuzione

Nel passaggio successivo verrà modificata la schermata Product List mentre l'applicazione è in esecuzione.

Per personalizzare una schermata in fase di esecuzione

  1. Nell'angolo in basso a destra della schermata Product List selezionare il collegamento Progetta schermata.

  2. Nel riquadro sinistro scegliere il nodo Griglia dati | Product Rebates.

  3. Nella finestra Proprietà impostare la proprietà Nome visualizzato su Contoso Rebates.

    Il nome cambierà anche nella finestra dell'applicazione.

  4. Scegliere il campo MSRP, quindi impostare la proprietà Descrizione su Suggested price before any rebates.

    Personalizzazione in fase di progettazione

  5. Scegliere Salva per tornare all'applicazione in esecuzione e visualizzare le modifiche.

    È ad esempio possibile puntare al campo MSRP per visualizzare la descrizione.

  6. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  7. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creazione di una query

Nel passaggio successivo verrà creata una query con parametri che verrà associata a una schermata.

Per creare una query con parametri

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Products, quindi scegliere Aggiungi query.

    Verrà visualizzato Progettazione query.

  2. Nella finestra Proprietà scegliere la casella di testo Nome, quindi immettere RelatedProducts.

  3. In Progettazione query scegliere il collegamento Aggiungi filtro.

    Alla sezione Filtro verrà aggiunta una condizione di filtro.

  4. Nel secondo elenco selezionare Categoria.

  5. Nel quarto elenco scegliere Parametro.

  6. Nel quinto elenco selezionare Aggiungi nuovo.

    Una nuova entità Parameter denominata Category di tipo String verrà aggiunta alla sezione Parametri.

    La query RelatedProducts

  7. In Esplora soluzioni aprire il menu di scelta rapida per il nodo ProductList.lsml, quindi scegliere Apri.

  8. Nella barra degli strumenti di Progettazione schermata scegliere Aggiungi elemento di dati.

  9. Nella finestra di dialogo Aggiungi elemento di dati selezionare Query.

  10. Nella colonna Nome selezionare PrescriptionContoso.RelatedProducts, quindi fare clic su OK.

    Nel riquadro sinistro verrà visualizzato un nodo RelatedProducts.

  11. In Parametri query selezionare il nodo Categoria.

  12. Nella finestra Proprietà impostare la proprietà Associazione parametro su Products.SelectedItem.Category.

  13. Nel riquadro centrale espandere il nodo Aggiungi sotto il nodo Griglia dati |Contoso Rebates, quindi scegliere Related Products.

    Aggiunta di prodotti correlati

  14. Premere F5 per eseguire l'applicazione e visualizzare i risultati.

    Se viene aperta la schermata Product List verrà visualizzato un elenco di prodotti correlati per ogni prodotto selezionato.

  15. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  16. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Aggiungere un campo calcolato

Nel passaggio successivo verrà aggiunto un campo in cui viene usato un valore calcolato. Il valore calcolato sarà il prezzo di un prodotto dopo aver applicato un importo di sconto.

Per aggiungere un campo calcolato

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo dell'entità Products.lsml, quindi scegliere Apri.

  2. Nella barra Prospettiva di Data Designer scegliere la scheda Server.

  3. Scegliere il collegamento <Aggiungi proprietà>, immettere CurrentPrice, quindi premere TAB.

  4. Nella colonna Tipo aprire l'elenco, quindi scegliere Money.

    Nella sezione Generale della finestra Proprietà la casella di controllo Calcolato è selezionata per impostazione predefinita.

  5. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  6. Nella finestra Proprietà scegliere il collegamento Modifica metodo.

    Verrà aperto l'Editor di codice e visualizzato il metodo CurrentPrice_Compute.

  7. Aggiungere il codice seguente al gestore eventi:

    Dim rebates As Decimal
        For Each item In ProductRebates
            If item.RebateStart <= Date.Today And item.RebateEnd >= Date.Today Then
                rebates = rebates + item.Rebate
            End If
        Next
    
        result = Me.MSRP - rebates
    
    decimal rebates = default(decimal);
    
    
                foreach (var item in ProductRebates)
                {
                    if (item.RebateStart <= System.DateTime.Today && item.RebateEnd >= System.DateTime.Today)
                    {
                        rebates += item.Rebate.Value;
                    }
                }
    
                result = this.MSRP - rebates;
    

    Codice per calcolare il prezzo corrente

  8. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Nella procedura successiva il campo calcolato verrà aggiunto alla schermata ProductList.

Per aggiungere un campo calcolato a una schermata

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo della schermata ProductList.lsml, quindi scegliere Apri.

  2. Nel riquadro sinistro di Progettazione schermata spostare il nodo CurrentPrice sotto il nodo (Description) | Description nel riquadro centrale.

    Current Price al termine dell'operazione di trascinamento

  3. Premere F5 per eseguire l'applicazione e visualizzare i risultati.

  4. Nella schermata ProductList modificare il campo Rebate o MSRP.

    Il valore di CurrentPrice verrà ricalcolato.

  5. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  6. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare una relazione tra database

Nel passaggio successivo verrà creata una relazione virtuale tra entità in due database e verranno visualizzati i dati da due origini in una singola schermata di elenco e dettagli.

Per creare una relazione tra database

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo InvoiceDetails.lsml, quindi scegliere Apri.

  2. Nella barra degli strumenti di Data Designer scegliere Relazione.

    Verrà aperta la finestra di dialogo Aggiungi nuova relazione.

  3. Nella colonna A selezionare il campo Nome, aprire l'elenco e scegliere Product.

    Nella parte inferiore della finestra di dialogo verrà visualizzata una nuova sezione. Nella sezione vengono mostrati i campi correlati nelle due entità. Se necessario, è possibile modificare i campi correlati in un altro campo dello stesso tipo di dati oppure definire più campi correlati come chiavi.

    Una relazione tra database

  4. Scegliere OK per salvare la relazione.

    Nella finestra di progettazione la nuova relazione viene mostrata come una linea tratteggiata. Questa linea indica che le entità si trovano in origini dati diverse. In questo caso InvoiceDetails si trova nel database intrinseco e Products nel database PrescriptionContoso.

  5. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Creare una schermata per visualizzare le fatture

Nel passaggio successivo verrà creata una schermata per visualizzare le fatture.

Per creare una schermata

  1. In Esplora soluzioni scegliere il nodo Schermate, quindi nella barra dei menu scegliere Progetto, Aggiungi schermata.

    Verrà aperta la finestra di dialogo Aggiungi nuova schermata.

  2. Nell'elenco Selezionare un modello di schermata scegliere Schermata di elenco e dettagli.

  3. Nella casella di testo Nome schermata immettere InvoiceScreen.

  4. Nell'elenco Dati della schermata scegliere Invoices.

  5. Nell'elenco Dati aggiuntivi da includere scegliere Invoice Details e Invoice InvoiceDetails, quindi fare clic su OK.

    Il layout di InvoiceScreen

  6. Espandere il nodo Riga griglia dati | Invoice Detail, quindi eliminare il nodo Product Product ID.

  7. Per riordinare i campi, spostare i nodi Quantity e UnitPriceProduct sotto il nodo Product.

  8. Premere F5 per eseguire l'applicazione.

  9. Nella barra dei menu scegliere Attività, Invoice Screen per visualizzare la schermata.

  10. Nel riquadro Invoices fare clic sul pulsante di aggiunta (+), quindi immettere alcuni dati della fattura.

    Il campo InvoiceStatus dispone di un elenco di valori, mentre nel campo Patient è incluso un pulsante con il quale viene aperta una finestra di dialogo in cui sono elencati i pazienti.

  11. Nel riquadro Invoice Details fare clic sul pulsante di aggiunta +, quindi immettere alcuni dati di dettaglio della fattura.

    Il campo Product fornisce un elenco di prodotti provenienti dal database PrescriptionContoso.

  12. Fare clic su Salva per salvare i dati della fattura e mantenere l'applicazione aperta.

    Nella procedura successiva verranno apportate modifiche nell'applicazione in esecuzione.

Modificare la schermata Invoices

Nel passaggio successivo verrà modificata la schermata Invoices nell'applicazione in esecuzione.

Per modificare una schermata nell'applicazione in esecuzione

  1. Nell'angolo in basso a destra della schermata Invoice Screen scegliere il collegamento Progetta schermata.

  2. Nel riquadro sinistro scegliere il nodo Elenco | Invoices, aprire Elenco, quindi scegliere DataGrid.

  3. Selezionare il nodo Patient, quindi fare clic sulla freccia MoveUp nel margine sinistro per spostare il nodo sopra il nodo Invoice Date.

    La schermata Invoice personalizzata

  4. Scegliere Salva per tornare all'applicazione in esecuzione e visualizzare le modifiche.

  5. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  6. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Definire la logica della schermata

Nel passaggio successivo verrà aggiunto il codice per definire la logica predefinita per le date delle fatture.

Per definire la logica della schermata

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Invoices.lsml, quindi scegliere Apri.

  2. Nella barra degli strumenti di Data Designer aprire l'elenco Scrivi codice, quindi scegliere Invoice_Created.

    Verrà visualizzato l'Editor di codice con il metodo Invoice_Created.

  3. Nel metodo Invoice_Created aggiungere il codice seguente per impostare il comportamento predefinito per le date:

    InvoiceDate = Date.Today
    InvoiceDue = Date.Today.AddDays(30)
    ShipDate = Date.Today.AddDays(3)
    
    InvoiceDate = System.DateTime.Today;
    InvoiceDue = System.DateTime.Today.AddDays(30);
    ShipDate = System.DateTime.Today.AddDays(3);
    
  4. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Invoices.lsml, quindi scegliere Apri.

  5. In Data Designer scegliere il campo InvoiceDate.

  6. Nella barra degli strumenti aprire l'elenco Scrivi codice, quindi scegliere InvoiceDate_Changed.

  7. Nel metodo InvoiceDate_Changed aggiungere il codice seguente per aggiornare le date quando viene modificato il valore di InvoiceDate:

    InvoiceDue = InvoiceDate.AddDays(30)
    ‘ If the ShipDate is earlier than the new InvoiceDate, update it.
    If ShipDate < InvoiceDate Then
        ShipDate = InvoiceDate.AddDays(2)
    End If
    
    InvoiceDue = InvoiceDate.AddDays(30); 
        // If the ShipDate is earlier than the new InvoiceDate, update it
    if (ShipDate < InvoiceDate)
        {
            ShipDate = InvoiceDate.AddDays(2);
        }
    
  8. In Esplora soluzioni aprire il menu di scelta rapida per il nodo InvoiceDetails.lsml, quindi scegliere Apri.

  9. In Data Designer scegliere il campo Product.

  10. Nella barra degli strumenti aprire l'elenco Scrivi codice, quindi scegliere Product_Changed.

  11. Nell'Editor di codice aggiungere il codice seguente per impostare il prezzo unitario e la quantità predefinita:

    UnitPrice = Product.CurrentPrice
    Quantity = 1
    
    UnitPrice = Product.CurrentPrice;
    
    Quantity = 1;
    
  12. Premere F5 per eseguire l'applicazione, aprire la schermata Invoice e aggiungere una fattura.

    I campi relativi a data, prezzo e quantità vengono ora aggiornati automaticamente.

  13. Scegliere Salva per salvare le modifiche.

  14. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  15. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Aggiungere altri campi calcolati

Nel passaggio successivo verranno aggiunti i campi calcolati per SubTotal, Tax e Totals alle entità InvoiceDetails e Invoices.

Per aggiungere campi calcolati

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo InvoiceDetails.lsml, quindi scegliere Apri.

  2. In Data Designer scegliere il collegamento <Aggiungi proprietà>, immettere SubTotal, quindi premere TAB.

  3. Nella colonna Tipo aprire l'elenco, quindi scegliere Money.

  4. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  5. Nella sezione Proprietà generali della finestra Proprietà selezionare la casella di controllo Calcolato, quindi scegliere il collegamento Modifica metodo.

    Verrà visualizzato l'Editor di codice con il metodo SubTotal_Compute.

  6. Aggiungere il codice seguente per calcolare il valore di SubTotal:

    result = Quantity * UnitPrice
    
    result = Quantity * UnitPrice;
    
  7. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Invoices.lsml, quindi scegliere Apri.

  8. In Data Designer scegliere il collegamento <Aggiungi proprietà>, immettere Tax, quindi premere TAB.

  9. Nella colonna Tipo aprire l'elenco, quindi scegliere Money.

  10. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  11. Nella finestra Proprietà selezionare la casella di controllo Calcolato, quindi selezionare il collegamento Modifica metodo.

    Verrà visualizzato l'Editor di codice con il metodo Tax_Compute.

  12. Sostituire il metodo Tax_Compute con il seguente codice per calcolare il valore di Tax.

    Private Sub Tax_Compute(ByRef result As Decimal)
        result =  GetSubTotal() * 0.095
    End Sub
    Protected Function GetSubTotal() As Decimal
        GetSubtotal = 0
        For Each item In InvoiceDetails
            GetSubTotal = GetSubTotal + item.SubTotal
        Next
    End Function
    
    partial void Tax_Compute(ref decimal result)
        {
            result = GetSubTotal() * (decimal)0.095;
        }
    protected decimal GetSubTotal()
        {
            return this.InvoiceDetails.Sum(i => i.SubTotal);
        }
    
  13. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Invoices.lsml, quindi scegliere Apri.

  14. In Data Designer scegliere il collegamento <Aggiungi proprietà>, immettere Total, quindi premere TAB.

  15. Nella colonna Tipo aprire l'elenco, quindi scegliere Money.

  16. Nella finestra Proprietà immettere $ nella casella di testo Simbolo di valuta.

  17. Nella finestra Proprietà selezionare la casella di controllo Calcolato, quindi selezionare il collegamento Modifica metodo.

    Verrà visualizzato l'Editor di codice con il metodo Total_Compute.

  18. Aggiungere il codice seguente per calcolare il valore di Total:

    result = GetSubTotal() + Tax
    
    result = GetSubTotal() + Tax;
    
  19. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Nel passaggio successivo verranno aggiunti i nuovi campi alla schermata Invoices.

Per aggiungere campi a una schermata

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo InvoiceScreen.lsml, quindi scegliere Apri.

  2. Nel riquadro centrale espandere il nodo Layout righe | Invoice Details, espandere l'elenco Aggiungi , quindi scegliere Tax.

    Il campo Tax verrà visualizzato nella sezione Vertical Stack | InvoiceDetails.

  3. Aprire nuovamente l'elenco Aggiungi, quindi scegliere il campo Total.

  4. Premere F5 per eseguire l'applicazione e visualizzare la schermata Invoice Screen.

    I campi Tax e Total sono ora visualizzati per ogni riga della fattura.

  5. Scegliere il collegamento Progetta schermata per passare alla modalità personalizzazione.

  6. Nel riquadro sinistro espandere il nodo Riga griglia dati | Invoice Detail, espandere l'elenco Aggiungi , quindi scegliere SubTotal.

  7. Selezionare Salva per salvare la modifica.

    Verrà quindi visualizzato un campo SubTotal nella griglia Invoice Details.

    La schermata Invoice aggiornata

  8. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  9. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Aggiungere un client mobile

Le schermate create finora sono ottimizzate per l'immissione di dati in un computer desktop. Alcune attività dell'applicazione Vision Clinic, ad esempio la visualizzazione di informazioni sui pazienti e dei prossimi appuntamenti, sono più indicate per i dispositivi mobili. È possibile usare LightSwitch per creare schermate che gli utenti possono visualizzare nei browser disponibili nella maggior parte dei tablet e dei telefoni. Nel prossimo passaggio verranno create schermate client HTML per l'esplorazione di pazienti e appuntamenti.

Per aggiungere un progetto client HTML

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Vision Clinic, quindi scegliere Aggiungi client.

  2. Nella finestra di dialogo Aggiungi client scegliere Client HTML, quindi fare clic su OK.

    Alla soluzione verrà aggiunto un progetto VisionClinic.HTMLClient.

Per aggiungere una schermata di esplorazione dei pazienti

  1. Nel progetto Vision Clinic.Server in Esplora soluzioni aprire il menu di scelta rapida per il nodo Patients.lsml, quindi scegliere Apri.

  2. Nella barra Prospettiva scegliere la scheda HTMLClient, quindi nella barra degli strumenti scegliere Schermata.

    Verrà aperta la finestra di dialogo Aggiungi nuova schermata.

  3. Nell'elenco Selezionare un modello di schermata scegliere Schermata sfoglia dati.

  4. Nell'elenco Dati della schermata scegliere Patients, quindi fare clic su OK.

Per personalizzare la schermata di esplorazione

  1. In Albero del contenuto della schermata in Progettazione schermata scegliere il nodo Elenco |Patients.

  2. In Elenco scegliere Elenco icone.

    Tramite questa opzione verrà visualizzato un riquadro per ogni paziente. Per impostazione predefinita, nel riquadro vengono visualizzati tutti i campi relativi al paziente.

  3. Nel nodo Layout righe | Patient eliminare tutti i campi eccetto First Name, Last Name e Policy Number.

  4. Nel progetto Vision Clinic.HTMLClient in Esplora soluzioni aprire il menu di scelta rapida per il nodo BrowsePatients.lsml, quindi scegliere Imposta come schermata iniziale.

  5. Premere F5 per eseguire l'applicazione.

    Se si ridimensiona la finestra del browser, la disposizione dei riquadri cambia a seconda dell'ampiezza della finestra in modo da ottimizzare la visualizzazione per schermi di dispositivi di piccole dimensioni come i telefoni.

  6. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  7. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

    Nei passaggi successivi verrà aggiunta una schermata per visualizzare i dettagli sui pazienti.

Per aggiungere una schermata dei dettagli

  1. In Albero del contenuto della schermata in Progettazione schermata scegliere il nodo Elenco icone |Patients.

  2. Nella sezione Azioni della finestra Proprietà scegliere il collegamento Tocco elemento: nessuno.

  3. Nella finestra di dialogo Modifica azione ItemTap espandere l'elenco ShowTab, selezionare viewSelected, quindi fare clic su OK.

  4. Nella finestra di dialogo Aggiungi nuova schermata accettare i valori predefiniti, quindi fare clic su OK.

  5. Premere F5 per eseguire l'applicazione.

  6. Nella schermata Browse Patients scegliere un paziente per aprire la schermata View Patient.

    Si noti che i campi Primary Phone, Secondary Phone ed Email sono collegamenti ipertestuali. Questi campi si basano sui tipi aziendali personalizzati e i controlli personalizzati di questi tipi offrono la possibilità incorporata di avviare una chiamata telefonica o di inviare un messaggio di posta elettronica.

  7. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  8. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

    Successivamente, verrà aggiunta una schermata basata su query per visualizzare gli appuntamenti in programma.

Per creare una query

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Appointments.lsml, quindi scegliere Aggiungi query.

  2. Nella finestra Proprietà immettere UpcomingAppointments nella casella di testo Nome.

  3. In Progettazione query scegliere il collegamento Aggiungi filtro.

  4. Nel terzo elenco scegliere >= (è maggiore o uguale a).

  5. Nel quarto elenco scegliere Globale.

  6. Nel quinto elenco scegliere Oggi.

  7. Scegliere nuovamente il collegamento Aggiungi filtro.

  8. Nel secondo elenco scegliere AppointmentTime.

  9. Nel terzo elenco scegliere >= (è maggiore o uguale a).

  10. Nel quarto elenco scegliere Globale.

  11. Nel quinto elenco scegliere Ora.

  12. Scegliere il collegamento Aggiungi ordinamento, quindi accettare i valori predefiniti AppointmentDate e Crescente.

  13. Scegliere di nuovo il collegamento Aggiungi ordinamento, quindi accettare i valori predefiniti AppointmentTime e Crescente.

    Query sugli appuntamenti imminenti

  14. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Per creare una schermata degli appuntamenti

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Appointments.lsml, quindi scegliere Apri.

  2. Nella barra Prospettiva di Data Designer scegliere la scheda HTMLClient.

  3. Nella finestra Proprietà aprire l'elenco Proprietà di riepilogo e scegliere AppointmentTime.

  4. Nella barra degli strumenti di Data Designer scegliere Schermata.

  5. Nell'elenco Selezionare un modello di schermata della finestra di dialogo Aggiungi nuova schermata scegliere Schermata sfoglia dati.

  6. Nell'elenco Dati della schermata scegliere UpcomingAppointments, quindi fare clic su OK.

Per creare una schermata dei dettagli degli appuntamenti

  1. In Albero del contenuto della schermata in Progettazione schermata scegliere il nodo Elenco |Upcoming Appointments.

  2. Nella sezione Azioni della finestra Proprietà scegliere il collegamento Tocco elemento: nessuno.

  3. Nella finestra di dialogo Modifica azione ItemTap espandere l'elenco ShowTab, selezionare viewSelected, quindi fare clic su OK.

  4. Nella finestra di dialogo Aggiungi nuova schermata accettare i valori predefiniti, quindi fare clic su OK.

Per aggiungere la navigazione schermata

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo Vision Clinic.HTMLClient, quindi scegliere Modifica navigazione schermata.

  2. In Progettazione applicazione scegliere il collegamento Includi schermata, quindi Browse Patients.

  3. Scegliere nuovamente il collegamento Includi schermata, quindi Browse Upcoming Appointments.

  4. Premere F5 per eseguire l'applicazione.

  5. Nella schermata Browse Patients scegliere la freccia GIÙ accanto alla barra del titolo, quindi scegliere Browse Upcoming Appointments per aprire la schermata Appointments.

    Barra del titolo con menu di navigazione a discesa

    Si noti che la schermata Appointments presenta ora un pulsante Indietro che consente di tornare alla schermata Patients. Si noti inoltre che ridimensionando la finestra del browser, il menu di navigazione rimane disponibile ma il titolo viene troncato. Sarà possibile risolvere questo problema aggiungendo codice JavaScript nella procedura finale.

  6. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  7. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Per modificare il titolo della schermata

  1. In Esplora soluzioni aprire il menu di scelta rapida per il nodo BrowseUpcomingAppointments.lsml, quindi scegliere Apri.

  2. Nella barra degli strumenti di Progettazione schermata aprire l'elenco Scrivi codice, quindi scegliere created.

  3. Nell'Editor di codice aggiungere il codice seguente al metodo created:

    screen.details.displayName = "Appointments";
    
  4. Premere F5 per eseguire l'applicazione.

  5. Nella schermata Browse Patients scegliere la freccia GIÙ accanto alla barra del titolo, quindi scegliere Browse Upcoming Appointments per aprire la schermata Appointments.

    Si noti che il titolo è ora Appointments.

  6. Nell'angolo superiore destro dell'applicazione in esecuzione scegliere Chiudi per tornare alla modalità progettazione.

  7. Nella barra dei menu scegliere File, Salva tutto per salvare il lavoro.

Con questo passaggio si conclude la procedura dettagliata per la creazione dell'applicazione Vision Clinic. A questo punto si dovrebbe aver acquisito una conoscenza di base del processo completo per la creazione di un'applicazione LightSwitch.

È quindi possibile pubblicare l'applicazione in Internet Information Services (IIS) o Microsoft Azure per renderla disponibile ad altri utenti.

In questa procedura dettagliata sono state illustrate le funzionalità di base di LightSwitch che può tuttavia essere usato per realizzare molto di più. Iniziando a creare le proprie applicazioni, sarà possibile apprendere altre funzionalità nella documentazione del prodotto.

Vedere anche

Concetti

Presentazione guidata di LightSwitch

Visual Studio LightSwitch

Altre risorse

Guida introduttiva a LightSwitch