Procedura: aggiungere un controllo personalizzato a una schermata HTML per un'applicazione LightSwitch
È possibile aggiungere controlli HTML personalizzati a una schermata in un client per un'applicazione di LightSwitch. Con i controlli personalizzati, è possibile visualizzare o raccogliere informazioni in modalità che vanno oltre le funzionalità dei controlli HTML incorporati per LightSwitch.
Riferimento ai controlli personalizzati
Per utilizzare un controllo personalizzato in una schermata, è necessario innanzitutto aggiungere un riferimento di file al progetto, quindi aggiungere un tag di script nel file default.htm.
Per fare riferimento a un controllo personalizzato
In Esplora soluzioni aprire il menu di scelta rapida per la cartella Script, scegliere Aggiungi, quindi Elemento esistente.
Selezionare il file JavaScript (con estensione .js) per il controllo personalizzato, quindi selezionare il pulsante Aggiungi.
Nota
Alcuni controlli personalizzati richiedono che venga fatto riferimento anche a file di supporto aggiuntivi.Consultare la documentazione relativa al controllo personalizzato per tutti i requisiti.
Nella sezione <script> del file default.htm per il progetto, aggiungere un tag script simile al seguente esempio, dove MyControl è il nome del controllo personalizzato:
<script type=”text/javascript” src=”Scripts/MyControl.js” charset=”utf-8”></script>
Aggiunta di nuovi controlli e sostituzione dei controlli esistenti
È possibile aggiungere un nuovo controllo personalizzato a una schermata o sostituire un controllo HTML esistente in LightSwitch.
Per aggiungere un controllo personalizzato a una schermata
In Albero del contento della schermata scegliere qualsiasi gruppo.
Sulla barra degli strumenti Progettazione schermata, nell'elenco Aggiungi elemento di layout, scegliere Controllo personalizzato.
Verrà visualizzata la finestra di dialogo Aggiungi controllo personalizzato.
Nella casella di testo Specifica i dati del nuovo controllo personalizzato, immettere l'elemento o la raccolta da associare al controllo.
Ad esempio, immettere Customers.selectedItem.PostalCode per l'associazione al codice postale di un cliente o immettere Customers.selectedItem per l'associazione all'intero record cliente.
Aggiungere il codice che associa i dati a una proprietà specifica del controllo.
Per ulteriori informazioni, vedere Associazione di dati a una proprietà del controllo personalizzato più avanti in questo argomento.
Per sostituire un controllo esistente con un controllo personalizzato
In Albero del contenuto della schermata scegliere il controllo che si desidera sostituire.
Nella finestra Proprietà, aprire l'elenco Tipo di controllo, quindi scegliere Controllo personalizzato.
Aggiungere il codice che associa i dati a una proprietà specifica del controllo.
Per ulteriori informazioni, vedere Associazione di dati a una proprietà del controllo personalizzato più avanti in questo argomento.
Associazione dei dati a una proprietà del controllo personalizzato
È necessario associare i dati specificati nella finestra di dialogo Aggiungi controllo personalizzato a una proprietà specifica del controllo personalizzato.
Per associare i dati a una proprietà del controllo personalizzato
In Albero del contenuto della schermata scegliere il controllo di personalizzazione.
Nella finestra Proprietà scegliere il collegamento ipertestuale Modifica codice render.
Nell'editor di codice aggiungere il codice simile al seguente esempio al metodo di rendering:
createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);Il codice esegue il rendering del controllo in fase di esecuzione. Sostituire MyControl con il nome del controllo e modificare i parametri max-height e max-width secondo le necessità.
Aggiungere il codice per eventuali funzionalità aggiuntive che il controllo richiede. Consultare la documentazione relativa al controllo personalizzato per tutti i requisiti.