Procedura: modificare una schermata HTML tramite codice
Quando si progettano schermate HTML per un'applicazione LightSwitch, si utilizzano principalmente finestre di progettazione e finestre degli strumenti, ma è anche possibile usare il codice per modificare tali schermate in modi specifici. Utilizzando le API di LightSwitch JavaScript, è possibile eseguire le seguenti attività correlate ai dati.
Impostare un valore predefinito in una schermata di immissione dati
Quando si crea una schermata di immissione dati, è possibile popolare alcuni campi con valori predefiniti. È possibile ad esempio impostare il valore predefinito di un campo data sulla data corrente. Per impostare i valori predefiniti in qualsiasi schermata Aggiungi/Modifica schermata dei dettagli destinata a un'entità, scrivere il codice nel metodo created di tale entità.
Per impostare i valori predefiniti
In Entity Designer scegliere la scheda HTMLClient sulla barra Prospettiva.
Nell'elenco Scrivi codice scegliere created.
Nell'editor di codice impostare i valori iniziali aggiungendo codice al metodo created:
entity.OrderDate = new Date(); entity.OrderStatus = 'New';In ogni schermata Aggiungi/Modifica schermata dei dettagli creata per l'entità verranno automaticamente visualizzati tali valori predefiniti.
Formattare un numero
Poiché alcuni dispositivi mobili hanno uno schermo con dimensioni limitate, potrebbe essere necessario formattare i numeri per mostrare un livello di precisione inferiore. Nell'esempio seguente viene illustrato come formattare un numero archiviato come Double in modo che siano visualizzate solo due posizioni decimali.
Per formattare un numero
In Progettazione schermata scegliere il nodo da formattare.
Sulla barra degli strumenti aprire l'elenco Scrivi codice, quindi scegliere il metodo postRender.
Nell'Editor di codice aggiungere il seguente codice al metodo postRender:
contentItem.dataBind("value", function (value) { if (value) { $(element).text(value.toFixed(2)); } });
Formattare una data
Per modificare il formato di visualizzazione di una data, è necessario usare una libreria JavaScript come Moment.js. Dopo aver aggiunto la libreria al progetto, aggiungere un riferimento nel file default.htm, quindi scrivere il codice nel metodo Render o postRender.
Per aggiungere la libreria
In Esplora soluzioni aprire il menu di scelta rapida per il nodo HTMLClient, quindi scegliere Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti di NuGet scegliere il nodo Online.
Nella casella di testo Cerca online immettere moment.js.
Scegliere il pulsante Installa per installare la libreria di Moment.js, quindi scegliere Chiudi.
Per aggiungere un riferimento
In Esplora soluzioni espandere il nodo HTMLClient, quindi aprire il file default.htm.
Nell'editor di codice aggiungere il seguente tag di script dopo l'ultimo tag </script>:
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
Per formattare le date
In Esplora soluzioni aprire la schermata in cui si desidera formattare una data.
In Progettazione schermata scegliere il nodo in cui si desidera applicare il formato della data.
Sulla barra degli strumenti aprire l'elenco Scrivi codice, quindi scegliere il metodo postRender.
Nell'Editor di codice aggiungere il seguente codice al metodo postRender:
contentItem.dataBind("value", function (value) { if (value) { $(element).text(moment(value).format("DD/MM/YYYY")); } });
Modificare il colore di sfondo e il tipo di carattere per gli elementi dell'elenco
L'aspetto di un controllo ListView è determinato da un foglio di stile CSS e lo stile è abbastanza complesso. Anziché tentare di modificare il foglio di stile CSS, è possibile usare il metodo postRender per modificare i colori nel codice. Si noti che non è possibile modificare lo stile del controllo ListView stesso, mentre è possibile modificare lo stile di ogni elemento di elenco mediante l'elemento padre RowTemplate. Per ogni elemento di elenco è definito un elemento background-image, pertanto sarà necessario specificare un elemento background-image prima di applicare un nuovo colore di sfondo.
Per modificare i colori
In Progettazione schermata scegliere il nodo Layout righe(o Layout colonne) per un elenco.
Nella finestra Proprietà scegliere il collegamento Modifica codice PostRender.
Nell'Editor di codice aggiungere il seguente codice al metodo postRender:
$(element).parent().css({ "background-color": "green", "background-image": "none", color: "yellow" });
Contrassegnare i campi come obbligatori
Una convenzione comune per visualizzare i campi obbligatori su uno schermo è quella di fornire un indizio visivo, ad esempio utilizzando un colore del carattere diverso e visualizzando un asterisco accanto al nome del campo.
Per evidenziare un campo obbligatorio
In Progettazione schermata scegliere il campo da contrassegnare come obbligatorio.
Nella finestra Proprietà scegliere il collegamento Modifica codice PostRender.
Nell'Editor di codice aggiungere il seguente codice al metodo postRender:
$(element).parent().css('color', 'red'); $(element).parent().find("label")[0].innerHTML += " *"
Convalidare i dati su una schermata
Fornendo una logica di convalida personalizzata, è possibile garantire che solo i dati validi vengano salvati in un'origine dati. È possibile aggiungere codice di convalida nel metodo beforeApplyChanges, chiamato quando l'utente tocca il pulsante Salva in una schermata Aggiungi/Modifica. Nell'esempio seguente un messaggio informerà l'utente che immette un punto esclamativo nel campo ContactName che in tale campo il carattere non è consentito.
Per convalidare i dati
In Progettazione schermata scegliere beforeApplyChanges in Scrivi codice.
Nell'editor di codice aggiungere il codice seguente, sostituendo Contact con il nome dell'entità e ContactName con il nome del campo stringa da convalidare:
if (screen.Contact.ContactName.indexOf('!') != -1) { screen.findContentItem("ContactName").validationResults = [ new msls.ValidationResult( screen.Contact.details.properties.contactName, "Contact Name cannot contain the character '!'.") ]; return false; }
Eliminare un elemento da una schermata o da un popup
In LightSwitch sono disponibili metodi incorporati per aggiungere e modificare elementi in una schermata HTML, ma non per eliminarli. È possibile creare facilmente il proprio metodo per rimuovere elementi da una schermata o da un popup.
Per eliminare un elemento
In Progettazione schermata scegliere il pulsante Aggiungi elemento di dati sulla barra degli strumenti.
Nella finestra di dialogo Aggiungi elemento di dati scegliere il pulsante di opzione Metodo, quindi assegnare un nome al metodo.
Aprire il menu di scelta rapida del metodo e scegliere Modifica codice Execute.
Nell'editor di codice aggiungere il codice seguente, sostituendo myScreen con il nome della schermata ed entrambe le istanze di customers con il nome dell'entità:
myapp.MyScreen.DeleteSelected_execute = function (screen) { screen.getCustomers().then(function (customers) { customers.deleteSelected(); }); };Il metodo è disponibile nella finestra di dialogo Aggiungi pulsante per qualsiasi schermata o popup contenente l'entità.
Creare una selezione modale personalizzata utilizzando un popup
È possibile consentire agli utenti di selezionare un elemento da un elenco se si visualizza una finestra di dialogo modale e questa operazione può essere effettuata agevolmente aggiungendo una query di schermata e un popup. In questo esempio è presente una schermata Aggiungi/Modifica schermata dei dettagli denominata AddOrders, basata su un'entità OrderDetails e su una seconda entità correlata denominata Products.
Per creare una selezione modale
In Progettazione schermata scegliere il pulsante Aggiungi elemento di dati sulla barra degli strumenti.
Nella finestra di dialogo Aggiungi elemento di dati scegliere il pulsante di opzione Query, quindi scegliere Products dall'elenco.
La query Products viene visualizzata nel riquadro sinistro di Progettazione schermata.
Nella struttura ad albero del contenuto aprire il menu di scelta rapida per il nodo Popup, quindi scegliere Aggiungi popup.
Nell'elenco Aggiungi scegliere Products.
Sulla barra degli strumenti scegliere created nell'elenco Scrivi codice.
Nell'Editor di codice aggiungere il codice seguente al metodo created:
myapp.AddOrders.created = function (screen) { screen.findContentItem("Products").dataBind("value.selectedItem", function (newValue) { if (newValue !== undefined && newValue !== null) { //Whenever selectedItem for Products changes, update the Product value on the main page screen.Order_Detail.setProduct(screen.Products.selectedItem); //Close popup, if one is open. screen.closePopup(); } }); };In Progettazione schermata aprire il menu di scelta rapida per il nodo Barra dei comandi, quindi scegliere Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante fare clic su OK.
(Facoltativo) Per cancellare il campo, aggiungere un metodo di schermata con il codice seguente:
myapp.AddOrders.Clear_execute = function (screen) { //Clear the selection for Product. (Useful for 0...1 to many relationships.) screen.Order_Detail.setProduct(undefined); };
Allineare un popup al centro dello schermo
La posizione predefinita di un popup è la parte inferiore di una schermata o la parte inferiore destra per le schermate più ampie. Nelle schermate di grandi dimensioni la posizione potrebbe rendere difficile la visualizzazione del popup. Nell'esempio seguente il popup viene posizionato al centro della schermata in modo che sia più visibile.
Per centrare un popup
In Progettazione schermata scegliere il nodo del pulsante che avvia il popup.
Nella finestra Proprietà scegliere il collegamento Toccare in Azioni.
Nella finestra di dialogo Modifica azione Toccare scegliere il pulsante di opzione Scrivi metodo personale, assegnargli un nome, quindi scegliere OK.
Nella finestra Proprietà scegliere il collegamento Modifica codice Execute.
Nell'Editor di codice aggiungere il seguente codice al metodo execute:
// Note:If using JQuery Mobile 1.3 (or higher) use // "popupcreate" rather than "popupbeforeposition" $(window).one("popupbeforeposition", function (e) { $(e.target).popup({ positionTo: "window" }); }); // Show the Popup screen.showPopup("Popup1");
Visualizzare una finestra di messaggio e rispondere a una selezione utente
Tramite la visualizzazione di una finestra di messaggio, è possibile offrire agli utenti una scelta e quindi eseguire un'azione in base alle relative selezioni. Nell'esempio seguente viene visualizzato un messaggio diverso in risposta a ciascuna opzione di una finestra di messaggio Sì/No/Annulla. Nel codice è possibile sostituire il codice di avviso con codice per eseguire un'azione personalizzata, ad esempio visualizzare schermate diverse in base alla scelta dell'utente.
Per visualizzare una finestra di messaggio
In Progettazione schermata aprire il menu di scelta rapida per il nodo Barra dei comandi, quindi scegliere Aggiungi pulsante.
Nella finestra di dialogo Aggiungi pulsante selezionare il pulsante di opzione Scrivi metodo personale, quindi assegnare un nome al metodo ShowMessageBox.
Nell'Editor di codice aggiungere il seguente codice al metodo ShowMessageBox_execute:
msls.showMessageBox("Please choose the appropriate button", { title: "This is a message box", buttons: msls.MessageBoxButtons.yesNoCancel }).then(function (result) { if (result === msls.MessageBoxResult.yes) { alert("Yes button was chosen"); } else if (result === msls.MessageBoxResult.no) { alert("No button was chosen"); } else if (result === msls.MessageBoxResult.cancel) { alert("Please choose either Yes or No"); } });
Impostare in modo dinamico il titolo della schermata
Può essere utile modificare il titolo della schermata in base a informazioni non disponibili in fase di progettazione, ad esempio il nome del cliente attualmente selezionato. Nell'esempio di codice seguente viene visualizzato in modo dinamico il titolo della schermata denominata ViewCustomer, che si basa su un'entità denominata Customer.
Per impostare il titolo della schermata
In Progettazione schermata scegliere created nell'elenco Scrivi codice.
Nell'Editor di codice aggiungere il codice seguente al metodo created:
myapp.ViewCustomer.created = function (screen) { var name; name = screen.Customer.CompanyName; screen.details.displayName = "Information about: " + name; };
Modificare il titolo di un'applicazione
Per impostazione predefinita, il nome del progetto viene visualizzato come titolo dell'applicazione nella schermata iniziale, nella barra del titolo o nella scheda del browser. È possibile specificare un titolo diverso modificando il file default.htm per il progetto.
Per modificare il titolo
In Esplora soluzioni, sotto il nodo HTMLClient aprire il menu di scelta rapida del file default.htm, quindi scegliere Apri.
Nell'editor di codice individuare l'elemento <title> e sostituire il valore esistente con il titolo:
Questa stringa verrà visualizzata nella barra del titolo o nella scheda del browser.
Individuare l'elemento <div> e sostituire il valore esistente con il titolo.
Questa stringa verrà visualizzata nella schermata iniziale.
Abilitare o disabilitare un pulsante
È spesso necessario abilitare o disabilitare un pulsante in base a determinati criteri. È possibile ad esempio disabilitare un pulsante di avvio dello schermo per determinati utenti oppure abilitare un pulsante Aggiungi solo se è necessario un valore. Nel primo esempio viene illustrato come disabilitare un pulsante impostando la proprietà IsEnabled dal codice.
Nel secondo esempio viene illustrato un approccio costituito da due passaggi basato sul metodo CanExecute. I dati vengono caricati in modo asincrono in LightSwitch, ma i metodi CanExecute per i pulsanti sono sincroni. Non è possibile pertanto abilitare un pulsante in base ai dati caricati in un solo passaggio, ma è possibile implementare un metodo in due passaggi utilizzando la proprietà IsLoaded.
Per disabilitare un pulsante utilizzando la proprietà IsEnabled
In Progettazione schermata scegliere il pulsante Aggiungi elemento di dati sulla barra degli strumenti.
Nella finestra di dialogo Aggiungi elemento di dati scegliere il pulsante di opzione Metodo, quindi assegnare un nome al metodo.
Aprire il menu di scelta rapida del metodo e scegliere Modifica codice Execute.
Nell'editor di codice aggiungere il codice seguente sostituendo MyButton con il nome del pulsante:
screen.findContentItem("MyButton").isEnabled = false;Il metodo può essere chiamato dal codice ogni volta che è necessario disabilitare o abilitare il pulsante.
Suggerimento
Per visualizzare o nascondere un pulsante, utilizzare la proprietà IsVisible.
Per abilitare un pulsante utilizzando la proprietà IsLoaded
In Progettazione schermata scegliere il pulsante Aggiungi elemento di dati sulla barra degli strumenti.
Nella finestra di dialogo Aggiungi elemento di dati scegliere il pulsante di opzione Metodo, quindi assegnare un nome al metodo.
Aprire il menu di scelta rapida del metodo e scegliere Modifica codice CanExecute.
Nell'editor di codice aggiungere il codice seguente, sostituendo Orders con il nome dell'entità, Photo con il nome della proprietà di entità e GetPhoto con il nome della funzione da eseguire:
var result = false; if (!screen.Order.details.properties.Photo.isLoaded) { screen.Order.getPhoto(); } else { screen.Order.getPhoto().then(function (ph) { result = !ph; }); } return result;Il metodo CanExecute viene chiamato quando viene creata la schermata. Nel primo passaggio il codice verifica se la proprietà Photo è già stata caricata. In caso contrario, il codice carica i dati e la funzione termina. Dopo che i dati sono stati caricati, viene chiamato nuovamente il metodo CanExecute e viene eseguito il branch else. In questo caso, la funzione GetPhoto viene eseguita in modo sincrono poiché i dati sono già caricati, con la garanzia di un risultato valido.
Personalizzare il comando Salva per salvare in più origini dati
È possibile salvare gli aggiornamenti da una schermata in più origini dati tramite l'oggetto WinJs Promise per personalizzate il comando incorporato Salva.
Per salvare in più origini dati
In Progettazione schermata scegliere il pulsante Scrivi codice sulla barra degli strumenti.
Nell'editor di codice aggiungere il codice seguente al metodo onsavechanges e sostituire NorthwindData e ApplicationData con i nomi delle origini dati.
myapp.onsavechanges = function (e) { var promises = []; promises.push(myapp.activeDataWorkspace.NorthwindData.saveChanges()); promises.push(myapp.activeDataWorkspace.ApplicationData.saveChanges()); e.detail.promise = WinJS.Promise.join(promises); };Se sono necessarie più origini dati, è possibile aggiungere una riga promises.push… per ogni origine.
Restituire lo stato attivo a un elemento selezionato in un elenco
Dopo lo spostamento da un elemento di elenco in una schermata Visualizza o Modifica, il comportamento predefinito prevede il ripristino dello stato attivo per il primo elemento dell'elenco. È spesso opportuno ripristinare lo stato attivo per l'elemento di elenco che ha attivato la schermata, soprattutto in elenchi di grandi dimensioni che richiedono lo scorrimento. È possibile modificare il comportamento per tornare all'elemento di elenco precedentemente selezionato associandolo a Custom Method e utilizzando il metodo JQuery scrollTop.
Per impostare lo stato attivo
In Progettazione schermata scegliere il nodo Elenco in cui si desidera implementare il comportamento.
Nella finestra Proprietà scegliere il collegamento Toccare in Azioni.
Nella finestra di dialogo Modifica azione Toccare scegliere il pulsante di opzione Scrivi metodo personale, quindi scegliere OK.
Nella finestra Proprietà scegliere il collegamento Modifica codice Execute.
Nell'Editor di codice aggiungere il seguente codice al metodo Tap_execute:
var scrollTopPosition = $(window).scrollTop(); myapp.showViewOrder(screen.Orders.selectedItem, { afterClosed: function () { $(window).scrollTop(scrollTopPosition); } });
Usare un controllo di JQuery Mobile
In Progettazione schermata è disponibile un set limitato di controlli per la visualizzazione dei dati. È tuttavia possibile aggiungere agevolmente controlli JQuery Mobile per arricchire l'interfaccia utente. La libreria JQuery Mobile Foundation contiene un'ampia gamma di controlli ottimizzati per i dispositivi mobili, inclusi i dispositivi di scorrimento, i pulsanti di opzione, le caselle di controllo e molti altri. Vedere JQuery Mobile Framework.
Nell'esempio seguente viene aggiunto un dispositivo di scorrimento per impostare un valore numerico in un controllo casella di testo.
Per aggiungere un dispositivo di scorrimento
In Progettazione schermata scegliere il nodo per un campo numerico.
Sostituire il controllo Casella di testo con un Controllo personalizzato.
Nella finestra Proprietà impostare la proprietà Larghezza su Adatta a contenitore.
Scegliere il collegamento Modifica codice Render e nell'editor di codice aggiungere il codice seguente al metodo render:
createSlider(element, contentItem, 0, 100);Nota
I valori predefiniti per il dispositivo di scorrimento sono compresi tra 0 e 100.Se necessario, sostituirli con valori appropriati per l'applicazione in uso.
Aggiungere la funzione seguente al file di codice della schermata:
function createSlider(element, contentItem, min, max) { // Generate the input element.var value = contentItem.value || 0, $element = $(element) .append('<input type="range" min="' + min + '" max="' + max + '" value="' + value + '"/>') .on("slidestop", function () { contentItem.value = $element.find("input").val(); });
Personalizzare un controllo FlipSwitch
Il controllo FlipSwitch che visualizza valori Boolean offre solo due opzioni per il testo visualizzato, ovvero Sì/No oppure Attivato/Disattivato. Per visualizzare valori diversi, è possibile creare un controllo personalizzato basato sul controllo FlipSwitch. Nell'esempio seguente viene creato un controllo True/False.
Per personalizzare il controllo
In Progettazione schermata scegliere il nodo per un campo Boolean.
Modificare il tipo di controllo da FlipSwitch in Controllo personalizzato.
Nella finestra Proprietà scegliere il collegamento Modifica codice Render.
Nell'editor di codice aggiungere il codice seguente al metodo di rendering:
createBooleanSwitch(element, contentItem);Aggiungere la funzione seguente al file di codice della schermata:
function createBooleanSwitch(element, contentItem) { var $flipSwitch = $('<select data-role="slider"></select>').appendTo($(element)); $('<option value="false">false</option>').appendTo($flipSwitch); $('<option value="true">true</option>').appendTo($flipSwitch); // set select value to match the original contentItem.value $flipSwitch.val((contentItem.value) ? "true" : "false"); // add listener to update contentItem's value if slider changes $flipSwitch.change(function () { contentItem.value = ($flipSwitch.val() == "true"); }); // visually refresh the slider. $flipSwitch.slider().slider("refresh"); };Nota
Può essere necessario impostare la proprietà Larghezza su un valore pari o maggiore di 150 per far sì che il controllo venga visualizzato correttamente.
Implementare un controllo CheckBox
Il tipo di controllo predefinito per un tipo di dati Boolean è il controllo FlipSwitch, ma è possibile sostituire facilmente un controllo CheckBox con uno personalizzato.
Per visualizzare un controllo CheckBox
In Progettazione schermata scegliere il nodo per un campo Boolean e modificare il tipo di controllo da FlipSwitch in Controllo personalizzato.
Nella finestra Proprietà, nella sezione Altezza scegliere Min e immettere 100. Questa operazione è necessaria perché il controllo CheckBox è più alto di un controllo standard TextBox. Se il form contiene altri tipi di controllo, potrebbe essere necessario modificare questo valore.
Nella sezione Generale scegliere il collegamento Modifica codice Render.
Nell'Editor di codice aggiungere il seguente codice al metodo render:
// Create the checkbox and add it to the DOM. var checkbox = $("<input type='checkbox'/>") .css({ height: 20, width: 20, margin: "10px" }) .appendTo($(element)); // Determine if the change was initiated by the user. var changingValue = false; checkbox.change(function () { changingValue = true; contentItem.value = checkbox[0].checked; changingValue = false; }); contentItem.dataBind("value", function (newValue) { if (!changingValue) { checkbox[0].checked = newValue; } });
Se viene visualizzato CheckBox per un campo obbligatorio in una schermata Aggiungi/Modifica, si consiglia inoltre di impostare un valore iniziale per il controllo. In caso contrario l'utente potrebbe visualizzare un errore di convalida.
Per impostare un valore iniziale
In Entity Designer scegliere la scheda HTMLClient sulla barra Prospettiva.
Nell'elenco Scrivi codice scegliere created.
Nell'editor di codice impostare i valori iniziali aggiungendo codice al metodo created:
entity.FieldName = new Boolean(); entity.FieldName = 'true';Sostituire FieldName con il nome del campo Boolean. Per inizializzare il controllo su uno stato deselezionato, sostituire true con false.
Eseguire l'override di un controllo personalizzato
I controlli personalizzati sono basati sul framework JQuery Mobile e il framework determina automaticamente alcuni controlli in modo che vengano ottimizzati per la visualizzazione sui dispositivi mobili. In alcuni casi è possibile eseguire l'override dell'aspetto per fornire uno stile più tradizionale. I pulsanti di JQuery Mobile, ad esempio, sono più grandi di un controllo pulsante tradizionale. È possibile usare l'attributo data-role="none" per eseguire l'override dello stile e visualizzare un pulsante standard.
Per applicare l'attributo
In Progettazione schermata scegliere il nodo del controllo personalizzato.
Nella finestra Proprietà scegliere il collegamento Modifica codice Render.
Aggiungere al metodo render il codice seguente:
var $element = $(element); var $textbox1 = $('<input type="text" data-role="none"/>'); $element.append($textbox1);Nota
Sostituire textbox1 con il nome del controllo personalizzato e sostituire “text” con il tipo di controllo.
Ottenere la posizione di un dispositivo
È possibile attivare mapping e scenari basati su prossimità tramite API di georilevazione per determinare la posizione di un determinato dispositivo. Nell'esempio seguente viene illustrato come determinare le coordinate di un'entità denominata MyLocation con proprietà di tipo Double denominate Latitude e Longitude.
Per ottenere la posizione
In Progettazione schermata scegliere il pulsante Scrivi codice sulla barra degli strumenti.
Nell'editor di codice aggiungere il metodo seguente:
myapp.AddEditMyLocation.GetGeolocation_execute = function (screen) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (pos) { screen.MyLocation.latitude = pos.coords.latitude.toString(); screen.MyLocation.longitude = pos.coords.longitude.toString(); }); } else { alert("Geolocation not supported"); } };
Visualizzare una località su una mappa
Per aggiungere facilmente la funzionalità di mapping, ottenere una chiave per sviluppatore gratuita da Bing Maps SDK, quindi creare un controllo personalizzato che chiama il servizio Web di Bing Maps.
Nell'esempio seguente le località dei clienti vengono mostrate come puntine su una mappa. Toccando queste puntine è possibile visualizzare i dettagli su ciascun cliente. Questo esempio richiede una schermata denominata Ricerca clienti da associare a un'entità Clienti con i campi Indirizzo, Città e Paese. È necessario inoltre che un popup denominato Dettagli sia presente nella schermata Ricerca clienti.
Per creare il controllo personalizzato
In Esplora soluzioni scegliere il nodo Script, quindi aggiungere un file JavaScript denominato lightswitch.bing-maps.js.
Nell'editor di codice aggiungere il codice seguente a tale file:
/// <reference path="jquery-1.7.1.js" /> /// <reference path="jquery.mobile-1.1.1.js" /> /// <reference path="msls-1.0.0.js" /> (function ($) { var _credentialsKey = "Ao75sYhQSfLgssT0QkO9n22xt0lgxzntrZ1xpCwLOC-kGhI584OYED3viFXLIWgC"; // load the directions module only once per session Microsoft.Maps.loadModule('Microsoft.Maps.Directions'); $.widget("msls.lightswitchBingMapsControl", { options: { mapType: Microsoft.Maps.MapTypeId.road, zoom: 3, showDashboard: false }, _create: function () { }, _init: function () { this.createMap(); }, destroy: function () { this._destroyBingMapsControl(); }, createMap: function () { this.htmlMapElement = this.element[0]; // create empty map this.map = new Microsoft.Maps.Map(this.htmlMapElement, { credentials: _credentialsKey, mapTypeId: this.options.mapType, zoom: this.options.zoom, showDashboard: this.options.showDashboard }); }, addPinAsync: function (street, city, country, i, callback) { var widgetInstance = this; // construct a request to the REST geocode service using the widget's // optional parameters var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" + street + "," + city + "," + country + "?key=" + _credentialsKey; // make the ajax request to the Bing Maps geocode REST service $.ajax({ url: geocodeRequest, dataType: 'jsonp', async: true, jsonp: 'jsonp', error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus + " " + errorThrown); }, success: function (result) { var coordinates = null; if (result && result.resourceSets && (result.resourceSets.length > 0) && result.resourceSets[0].resources && (result.resourceSets[0].resources.length > 0)) { // create a location based on the geocoded coordinates coordinates = result.resourceSets[0].resources[0].point.coordinates; widgetInstance._createPinFromCoordinates(coordinates, i, callback); } } }); }, _createPinFromCoordinates: function(coordinates, i, callback) { var location = new Microsoft.Maps.Location(coordinates[0], coordinates[1]); var pin = new Microsoft.Maps.Pushpin(location, { text: '' + i + '' }); Microsoft.Maps.Events.addHandler(pin, 'click', callback); this.map.entities.push(pin); }, resetMap: function () { this.map.entities.clear(); }, _handleError: function (error) { alert("An error occurred. " + error.message); }, _destroyBingMapsControl: function () { if (this.map != null) { this.map.dispose(); this.map = null; } } }); }(jQuery));Importante
Sostituire il valore per var _credentialsKey con la propria chiave di sviluppatore di Bing Maps.
Per aggiungere una mappa a una schermata
In Progettazione schermata scegliere il nodo in cui si desidera aggiungere una mappa, quindi nel menu di scelta rapida scegliere Aggiungi controllo personalizzato.
Nella finestra Proprietà modificare il valore del campo Nome per il controllo in Mappa, quindi scegliere il collegamento Modifica codice Render.
Nell'Editor di codice aggiungere il seguente codice al metodo render:
/// <reference path="../GeneratedArtifacts/viewModel.js" /> var mapDiv; var current = 0; var step = 15; myapp.BrowseCustomers.Customer_render = function (element, contentItem) { mapDiv = $('<div />').appendTo($(element)); $(mapDiv).lightswitchBingMapsControl(); var visualCollection = contentItem.value; if (visualCollection.isLoaded) { showItems(current, step, contentItem.screen); } else { visualCollection.addChangeListener("isLoaded", function () { showItems(current, step, contentItem.screen); }); visualCollection.load(); } }; function showItems(start, end, screen) { $(mapDiv).lightswitchBingMapsControl("resetMap"); $.each(screen.Customers.data, function (i, customer) { if (i >= start && i <= end) { $(mapDiv).lightswitchBingMapsControl("addPinAsync", customer.Address, customer.City, customer.Country, i + 1, function () { screen.Customers.selectedItem = customer; screen.showPopup("Details"); }); } }); };In Esplora soluzioni passare a Visualizzazione file.
Nel nodo HTMLClient aprire il file default.htm.
Nell'editor di codice aggiungere il seguente riferimento all'inizio del blocco di riferimenti allo script:
<script type="text/javascript" charset="utf8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>Al termine del blocco dei riferimenti allo script, aggiungere un riferimento al file JavaScript:
<script type="text/javascript" charset="utf8" src="Scripts/lightswitch.bing-maps.js"></script>
Visualizzare un tastierino numerico su un dispositivo
È possibile consentire agli utenti di immettere informazioni numeriche o di altro tipo mediante una tastiera su schermo personalizzata. Nell'esempio seguente viene illustrato come visualizzare il tastierino numerico quando un utente attiva un controllo Casella di testo.
Per visualizzare un tastierino numerico
In Progettazione schermata scegliere un nodo Casella di testo per un campo che deve contenere dati numerici.
Nella finestra Proprietà scegliere il collegamento Modifica codice PostRender.
Nell'Editor di codice aggiungere il seguente codice al metodo PostRender:
$(element).find("input").get(0).type = "number";Nota
È possibile usare la stessa tecnica per visualizzare una tastiera per un altro tipo di input, ma non è possibile visualizzare una tastiera per il tipo di input color in un client HTML di un'applicazione LightSwitch.
Modificare l'interfaccia utente per fattori di forma differenti
È possibile verificare che l'applicazione funzioni correttamente in vari dispositivi mobili se si personalizza l'interfaccia in base alla dimensione dello schermo. È possibile ad esempio visualizzare l'indirizzo completo di un cliente su un tablet, ma nascondere le stesse informazioni su un telefono per ridurre lo scorrimento.
Per nascondere un elemento dell'interfaccia utente in alcuni dispositivi
In Progettazione schermata scegliere il nodo da nascondere, espandere l'elenco Scrivi codice, quindi scegliere il metodo postRender.
Nell'editor di codice aggiungere il seguente codice:
$(element).addClass("hidden-on-phone");In Esplora soluzioni passare a Visualizzazione file, quindi espandere il nodo Contenuto del progetto HTMLClient.
Aprire il file user-customizations.css.
Nell'editor di codice aggiungere il codice seguente alla fine della sezione @media.
.hidden-on-phone { display: none; }Questo codice viene aggiunto alla query sui supporti esistente che determina l'orientamento dello schermo. Quando l'applicazione viene visualizzata su un telefono, il campo non viene visualizzato.
È inoltre possibile visualizzare schermate home diverse su telefoni e tablet aggiungendo codice JavaScript al file default.htm.
Per visualizzare schermate home diverse su dispositivi differenti
In Esplora soluzioni scegliere il nodo HTMLClient, quindi aprire il file default.htm.
Nell'editor di codice sostituire l'elemento dello script che contiene la funzione msls.run() con il codice seguente:
<script type="text/javascript"> $(document).ready(function () { if ($.mobile.media("screen and (max-width: 400px) and (orientation: portrait), \ screen and (max-width: 640px) and (max-height: 400px) and (orientation: landscape)")) { var screen = "BrowseCustomersSmall"; } else { var screen = "BrowseCustomers"; } msls._run(screen) .then(null, function failure(error) { alert(error); }); }); </script>Sostituire BrowseCustomersSmall con il nome della schermata per i cellulari e sostituire BrowseCustomers con il nome della schermata per i tablet.
Eseguire il rendering dei dati HTML direttamente su uno schermo
In alcuni database il codice HTML viene archiviato nei campi dati String. Nell'applicazione LightSwitch le informazioni verranno interpretate come stringhe regolari e il codice HTML non elaborato verrà elaborato in un controllo Testo in una schermata, con tag e tutti gli altri elementi. È possibile eseguire il rendering del codice HTML effettivo sullo schermo tramite un controllo personalizzato e il metodo render.
Avviso
Per evitare un rischio per la sicurezza, adottare questo approccio solo se si è certi che il codice HTML proviene da una fonte attendibile.
Per eseguire il rendering del codice HTML su una schermata
In Progettazione schermata scegliere il nodo che rappresenta il campo HTML, quindi modificare il tipo di controllo in Controllo personalizzato.
Nella finestra Proprietà scegliere il collegamento Modifica codice Render.
Nell'Editor di codice aggiungere il seguente codice al metodo render:
element.innerHTML = contentItem.stringValue;
Visualizzare un titolo in un popup
I popup forniscono un modo rapido e semplice per visualizzare o fornire informazioni senza che sia necessario passare a un'altra schermata. A differenza delle schermate non contengono un titolo, ma può essere utile visualizzare un titolo o altro testo statico in un popup. Nell'esempio seguente viene illustrato come visualizzare un titolo e personalizzarne il tipo di carattere.
Per aggiungere un titolo
In Progettazione schermata scegliere il pulsante Aggiungi elemento di dati sulla barra degli strumenti.
Nella finestra di dialogo Aggiungi elemento di dati aggiungere una Proprietà locale di tipo String.
In Progettazione schermata aggiungere la proprietà locale a Popup, quindi modificare il tipo di controllo in Testo.
Nella finestra Proprietà impostare la proprietà LabelPosition su Nessuna.
In Progettazione schermata aprire l'elenco Scrivi codice, quindi scegliere il metodo postRender.
Nell'Editor di codice aggiungere il seguente codice al metodo postRender:
element.textContent = "This is the title"; $(element).css("font-size", "23px"); $(element).css("font-weight", "bold");
Copiare informazioni in una nuova schermata
Nelle applicazioni di immissione dati è spesso necessario duplicare alcune informazioni da una schermata di immissione a quella successiva. È possibile implementare facilmente una funzione di copia mediante il metodo beforeShown per un form. Nell'esempio seguente un pulsante Copia viene aggiunto alla schermata AddEditCustomers, aprendo una nuova schermata prepopolata con il paese e l'area per il cliente corrente.
Per copiare le informazioni
In Progettazione schermata scegliere il nodo Barra dei comandi per la schermata AddEdit in cui si desidera aggiungere un pulsante Copia.
Sulla barra degli strumenti scegliere il pulsante Aggiungi elemento di layout, quindi scegliere Pulsante.
Nella finestra di dialogo Aggiungi pulsante scegliere il pulsante di opzione Scrivi metodo personale, assegnare un nome al metodo Copy, quindi scegliere OK.
Nel riquadro sinistro scegliere il nodo Copia, quindi sulla barra degli strumenti aprire l'elenco Scrivi codice e scegliere Copy_execute.
Nell'editor di codice aggiungere il codice seguente al metodo Copy_execute:
myapp.showAddEditCustomer(null, { beforeShown: function (addNewScreen) { var copied_item = screen.Customer; var new_item = new myapp.Customer; new_item.Country = copied_item.Country; new_item.Region = copied_item.Region; addNewScreen.Customer = new_item; } })
Modificare la navigazione nella schermata durante il salvataggio
Il comportamento predefinito del pulsante Salva in una schermata Aggiungi/Modifica prevede la chiusura della schermata e la visualizzazione della schermata precedente. In alcuni casi è possibile passare a una schermata diversa, ad esempio una schermata Visualizza che mostra i dati appena aggiunti in un formato diverso. A tale scopo è possibile scrivere codice nel metodo afterClosed del pulsante che avvia la schermata Aggiungi/Modifica. Nell'esempio seguente un pulsante Aggiungi e visualizza ordine viene aggiunto a una schermata, modificando il comportamento in modo da visualizzare una schermata Visualizza dopo il salvataggio.
Per passare a una nuova schermata
In Progettazione schermata scegliere il nodo Barra dei comandi per la schermata Sfoglia in cui si desidera aggiungere un pulsante.
Sulla barra degli strumenti scegliere il pulsante Aggiungi elemento di layout, quindi scegliere Pulsante.
Nella finestra di dialogo Aggiungi pulsante scegliere il pulsante di opzione Scrivi metodo personale, assegnare un nome al metodo AddAndViewOrder, quindi scegliere OK.
Nel riquadro sinistro scegliere il nodo AddAndViewOrder, quindi sulla barra degli strumenti aprire l'elenco Scrivi codice e scegliere AddAndViewOrder _execute.
Nell'editor di codice aggiungere il codice seguente al metodo AddAndViewOrder_execute:
myapp.showAddEditOrder(null, { beforeShown: function (AddEditScreen) { // Create a new order here. var newOrder = new myapp.Order(); AddEditScreen.Order = newOrder; }, afterClosed: function (addEditScreen, navigationAction) { // If the user commits the change, show the View screen if (navigationAction === msls.NavigateBackAction.commit) { var newOrder = addEditScreen.Order; myapp.showViewOrder(newOrder); } } })Si noti che il codice gestisce inoltre la creazione di un nuovo ordine nella funzione beforeShown. In questo modo viene eseguito l'override del comportamento del form AddEdit predefinito e viene gestito il caso in cui un utente elimini le modifiche.
Disabilitare l'aggiunta di segnalibri
La funzionalità di aggiunta di segnalibri per le schermate dei client HTML consente a un utente di copiare l'URL di un'istanza di schermata specifica e di tornare a tale istanza successivamente. L'URL è parzialmente basato sulla chiave primaria dell'entità della schermata, pertanto se la chiave primaria contiene informazioni riservate, ad esempio un SSN, è possibile impedire agli utenti di visualizzarle disabilitando la funzionalità di aggiunta di segnalibri. Il codice seguente disabilita l'aggiunta di segnalibri rimuovendo dall'URL l'identificatore di entità, ovvero la parte compresa tra il nome della schermata e l'ID sessione.
Per disabilitare l'aggiunta di segnalibri
In Esplora soluzioni scegliere il file default.htm nel nodo HTMLClient e aprirlo.
Nell'Editor di codice individuare la riga $(document).ready(function () { e aggiungere sotto la seguente riga di codice:
msls.application.options.disableUrlScreenParameters = true;L'identificatore di entità verrà rimosso dall'URL e gli utenti non potranno più aggiungere segnalibri per le schermate.