Compartir a través de


Cómo: Modificar una pantalla HTML usando código

Cuando se diseñan pantallas HTML para una aplicación de LightSwitch, se usan principalmente diseñadores y ventanas de herramientas, pero también se puede usar código para modificar esas pantallas de maneras concretas. Con las API de JavaScript para LightSwitch, puede realizar las siguientes tareas relacionadas con datos.

Establecer un valor predeterminado en una pantalla de entrada de datos

Al crear una pantalla de entrada de datos, puede que desee rellenar algunos campos con valores predeterminados. Por ejemplo, puede establecer el valor predeterminado de un campo de fecha en la fecha actual. Para establecer valores predeterminados en cualquier Pantalla Agregar/Editar detalles destinada a una entidad, escriba código en el método created de esa entidad.

Para definir valores predeterminados

  1. En Entity Designer, en la barra Perspectiva, elija la pestaña HTMLClient.

  2. En la lista Escribir código, elija created.

  3. En el Editor de código, establezca los valores iniciales agregando código al método created:

    entity.OrderDate = new Date();
    entity.OrderStatus = 'New';
    

    Cualquier Pantalla Agregar/Editar detalles que se cree para la entidad mostrará automáticamente estos valores predeterminados.

Dar formato a un número

Dado que el espacio de la pantalla de algunos dispositivos móviles es limitado, puede que desee dar formato a los números para mostrar menos precisión. En el ejemplo siguiente se muestra cómo dar formato a un número almacenado como Double para mostrar solo dos posiciones decimales.

Para dar formato a un número

  1. En el Diseñador de pantallas, elija el nodo del número al que desea dar formato.

  2. En la barra de herramientas, abra la lista Escribir código y, a continuación, elija el método postRender.

  3. En el Editor de código, agregue el siguiente código al método postRender:

    contentItem.dataBind("value", function (value) {
            if (value) {
                $(element).text(value.toFixed(2));
            }
        });
    

Dar formato a una fecha

Para cambiar el formato de presentación de una fecha es necesario usar una biblioteca de JavaScript, como Moment.js. Después de agregar la biblioteca al proyecto, agregue una referencia en el archivo default.htm y, a continuación, escriba código en el método Render o postRender.

Para agregar la biblioteca

  1. En el Explorador de soluciones, abra el menú contextual del nodo HTMLClient y, a continuación, elija Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, elija el nodo En línea.

  3. En el cuadro de texto Buscar en línea, escriba moment.js.

  4. Elija el botón Instalar para instalar la biblioteca Moment.js y después elija el botón Cerrar.

Para agregar una referencia

  1. En el Explorador de soluciones, expanda el nodo HTMLClient y, después, abra el archivo default.htm.

  2. En el editor de código, agregue la siguiente etiqueta de script después de la última etiqueta </script>:

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

Para dar formato a las fechas

  1. En el Explorador de soluciones, abra la pantalla donde desea dar formato a una fecha.

  2. En el Diseñador de pantallas, elija el nodo donde desea aplicar el formato de fecha.

  3. En la barra de herramientas, abra la lista Escribir código y, a continuación, elija el método postRender.

  4. En el Editor de código, agregue el siguiente código al método postRender:

    contentItem.dataBind("value", function (value) {
            if (value) {
                $(element).text(moment(value).format("DD/MM/YYYY"));
            }
        });
    

Cambiar el color de fondo y de fuente para elementos de lista

La apariencia de un control ListView viene determinada por una hoja de estilos en cascada (CSS) y su estilo es bastante complejo. En lugar de intentar editar la hoja CSS, puede usar el método postRender para cambiar los colores del código. Tenga en cuenta que no puede cambiar el estilo de ListView en sí, pero puede cambiar el estilo de cada Elemento de lista a través de su elemento primario, RowTemplate. Cada Elemento de lista tiene definido un objeto background-image, por lo que deberá especificar ese background-image antes de aplicar un nuevo background-color.

Para cambiar los colores

  1. En el diseñador de pantallas, elija el nodo Diseño de filas (o Diseño de columnas) para una lista.

  2. En la ventana Propiedades, elija el vínculo Editar código posterior a la representación.

  3. En el Editor de código, agregue el siguiente código al método postRender:

    $(element).parent().css({
                "background-color": "green",
                "background-image": "none",
                color: "yellow"
            });
    

Marcar campos como obligatorios

Una convención común para mostrar campos obligatorios en una pantalla es proporcionar una pista visual, como utilizar otro color de fuente y mostrar un asterisco junto al nombre de campo.

Para resaltar un campo obligatorio

  1. En el diseñador de pantallas, elija el campo que se marcará como obligatorio.

  2. En la ventana Propiedades, elija el vínculo Editar código posterior a la representación.

  3. En el Editor de código, agregue el siguiente código al método postRender:

    $(element).parent().css('color', 'red'); $(element).parent().find("label")[0].innerHTML += " *"
    

Validar datos en una pantalla

Si proporciona lógica de validación personalizada, puede garantizar que solo se guarden datos válidos en un origen de datos. Puede agregar código de validación en el método beforeApplyChanges, al que se llama cuando el usuario puntea en el botón Guardar en una pantalla Agregar/Editar. En el ejemplo siguiente, un mensaje notificará a un usuario que escribe un signo de admiración en el campo ContactName que dicho carácter no está admitido en ese campo.

Para validar datos

  1. En el Diseñador de pantallas, en la lista Escribir código, elija beforeApplyChanges.

  2. En el Editor de código, agregue el código siguiente, reemplazando Contact por el nombre de la entidad y ContactName por el nombre del campo de cadena que desea validar:

    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;
    
        }
    

Eliminar un elemento de una pantalla o un menú emergente

LightSwitch proporciona métodos integrados para agregar y editar elementos en una pantalla HTML, pero no para eliminarlos. Puede crear fácilmente su propio método para eliminar elementos de una pantalla o un menú emergente.

Para eliminar un elemento

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Agregar elemento de datos.

  2. En el cuadro de diálogo Agregar elemento de datos, elija el botón de opción Método y, a continuación, escriba un nombre para el método.

  3. Abra el menú contextual del método y elija Editar código de ejecución.

  4. En el Editor de código, agregue el código siguiente, reemplazando myScreen por el nombre de la pantalla y ambas instancias de customers por el nombre de la entidad:

    myapp.MyScreen.DeleteSelected_execute = function (screen) {
        screen.getCustomers().then(function (customers) {
            customers.deleteSelected();
        });
    };
    

    El método estará disponible en el cuadro de diálogo Botón Agregar para cualquier pantalla o menú emergente que muestre la entidad.

Crear un selector modal personalizado mediante un menú emergente

Puede permitir que los usuarios elijan un elemento de una lista si muestra un cuadro de diálogo modal, lo cual puede conseguirse fácilmente agregando una consulta de pantalla y un menú emergente. En este ejemplo, tenemos una Pantalla Agregar/Editar detalles denominada AddOrders que está basada en una entidad OrderDetails y una segunda entidad relacionada denominada Products.

Para crear un selector modal

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Agregar elemento de datos.

  2. En el cuadro de diálogo Agregar elemento de datos, elija el botón de opción Consulta y, a continuación, seleccione Products en la lista.

    La consulta Products aparece en el panel izquierdo del Diseñador de pantallas.

  3. En el árbol de contenido, abra el menú contextual del nodo Emergente y, a continuación, elija Agregar emergente.

  4. En la lista Agregar, elija Products.

  5. En la barra de herramientas, en la lista Escribir código, elija created.

  6. En el Editor de código, agregue el siguiente código al método 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();
                }
            });
        };
    
  7. En el Diseñador de pantallas, abra el menú contextual del nodo Barra de comandos y, después, elija Botón Agregar.

  8. En el cuadro de diálogo Botón Agregar, elija el botón Aceptar.

  9. (Opcional) Para borrar el campo, agregue un método de pantalla con el código siguiente:

    myapp.AddOrders.Clear_execute = function (screen) {
        //Clear the selection for Product. (Useful for 0...1 to many relationships.) 
        screen.Order_Detail.setProduct(undefined);
    };
    

Centrar un elemento emergente en una pantalla

La ubicación predeterminada de un elemento emergente es la parte inferior de una pantalla y, para pantallas más anchas, la parte inferior derecha. En las pantallas grandes, la ubicación puede dificultar la apreciación de dicho elemento. El ejemplo siguiente coloca el elemento emergente en el centro de la pantalla, haciéndolo así más notable.

Para centrar un elemento emergente

  1. En el diseñador de pantallas, elija el nodo de botón que inicia el elemento emergente.

  2. En la ventana Propiedades, en Acciones elija el vínculo Puntear.

  3. En el cuadro de diálogo Editar acción Puntear, elija el botón de opción Escribir mi propio método, asígnele un nombre y elija el botón Aceptar.

  4. En la ventana Propiedades, elija el vínculo Editar código de ejecución.

  5. En el Editor de código, agregue el siguiente código al método 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");
    

Mostrar un cuadro de mensaje y responder a una selección de usuario

Si muestra un cuadro de mensaje, puede ofrecer a los usuarios una opción y realizar una acción en función de sus selecciones. En el ejemplo siguiente se muestra un mensaje diferente como respuesta a cada una de las opciones de un cuadro de mensaje Yes/No/Cancel. En su código propio, puede reemplazar el código de alerta por código que realice su propia acción, por ejemplo, mostrar distintas pantallas en función de la elección del usuario.

Para mostrar un cuadro de mensaje

  1. En el Diseñador de pantallas, abra el menú contextual del nodo Barra de comandos y, después, elija Botón Agregar.

  2. En el cuadro de diálogo Botón Agregar, elija el botón de opción Escribir mi propio método y denomine el método ShowMessageBox.

  3. En el Editor de código, agregue el siguiente código al método 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");
    
            }
    
        });
    

Establecer el título de la pantalla dinámicamente

Puede que desee cambiar el título de la pantalla en función de la información no disponible en tiempo de diseño, como el nombre del cliente actualmente seleccionado. El ejemplo de código siguiente muestra dinámicamente el título de una pantalla denominada ViewCustomer que se basa en una entidad denominada Customer.

Para establecer el título de la pantalla

  1. En el Diseñador de pantallas, en la lista Escribir código, elija created.

  2. En el Editor de código, agregue el siguiente código al método created:

    myapp.ViewCustomer.created = function (screen) {
    
    var name;
    
        name = screen.Customer.CompanyName;
        screen.details.displayName = "Information about: " + name;
    };
    

Cambiar el título de una aplicación

De forma predeterminada, el nombre del proyecto aparece como título de la aplicación en la pantalla de presentación y en la barra de título o la pestaña del explorador. Para especificar otro título, modifique el archivo default.htm del proyecto.

Para cambiar el título

  1. En el Explorador de soluciones, en el nodo HTMLClient, abra el menú contextual del archivo default.htm y, a continuación, elija Abrir.

  2. En el Editor de código, busque el elemento <title> y reemplace el valor existente por el título que desee.

    La cadena aparecerá en la barra de título o en la pestaña del explorador.

  3. Busque el elemento <div> y reemplace el valor existente por el título que desee.

    La cadena aparecerá en la pantalla de presentación.

Habilitar o deshabilitar un botón

A menudo es necesario habilitar o deshabilitar un botón en función de ciertos criterios. Por ejemplo, puede deshabilitar un botón de inicio de pantalla para determinados usuarios o bien habilitar un botón para agregar solamente si un valor es necesario. En el primer ejemplo se muestra cómo deshabilitar un botón estableciendo la propiedad IsEnabled desde el código.

En el segundo ejemplo se muestra un enfoque de dos pasos basado en el método CanExecute. Los datos se cargan de forma asincrónica en LightSwitch, pero los métodos CanExecute para los botones son sincrónicos. Por consiguiente, no se puede habilitar un botón basado en datos cargados en un solo paso, pero se puede implementar un método de dos pasos mediante la propiedad IsLoaded.

Para deshabilitar un botón mediante la propiedad IsEnabled

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Agregar elemento de datos.

  2. En el cuadro de diálogo Agregar elemento de datos, elija el botón de opción Método y, a continuación, escriba un nombre para el método.

  3. Abra el menú contextual del método y elija Editar código de ejecución.

  4. En el Editor de código, agregue el código siguiente, reemplazando MyButton por el nombre del botón:

    screen.findContentItem("MyButton").isEnabled = false;
    

    El método se puede llamar desde el código siempre que sea necesario deshabilitar o habilitar el botón.

    Sugerencia

    Para mostrar u ocultar un botón, use la propiedad IsVisible.

Para habilitar un botón mediante la propiedad IsLoaded

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Agregar elemento de datos.

  2. En el cuadro de diálogo Agregar elemento de datos, elija el botón de opción Método y, a continuación, escriba un nombre para el método.

  3. Abra el menú contextual del método y elija Editar código de CanExecute.

  4. En el Editor de código, agregue el código siguiente, reemplazando Orders por el nombre de la entidad, Photo por el nombre de la propiedad de entidad y GetPhoto por el nombre de la función que desea ejecutar:

    var result = false; 
    if (!screen.Order.details.properties.Photo.isLoaded) { 
    screen.Order.getPhoto(); 
    } else { 
    screen.Order.getPhoto().then(function (ph) { 
    result = !ph; 
    }); 
    } 
    return result; 
    

    Cuando se crea la pantalla, se llama al método CanExecute. En el primer paso, el código comprueba si la propiedad Photo ya está cargada. Si no es así, el código carga los datos y la función finaliza. Una vez cargados los datos, se llama de nuevo al método CanExecute y se ejecuta la bifurcación else. Esta vez, la función GetPhoto se ejecuta de forma sincrónica porque los datos ya están cargados, lo que garantiza un resultado válido.

Personalizar el comando Guardar para guardar en varios orígenes de datos

Puede guardar las actualizaciones de una pantalla en varios orígenes de datos mediante el objeto Promise de WinJS a fin de personalizar el comando Guardar integrado.

Para guardar en varios orígenes de datos

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Escribir código.

  2. En el Editor de código, agregue el código siguiente al método onsavechanges, reemplazando NorthwindData y ApplicationData por los nombres de los orígenes de datos:

    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);
    
    };
    

    Si necesita más orígenes de datos, agregue una línea promises.push… para cada origen.

Devolver el foco a un elemento seleccionado en una lista

Después de navegar desde un elemento de lista a una pantalla Ver o Editar, el comportamiento predeterminado es devolver el foco al primer elemento de la lista. Con frecuencia, es conveniente devolver el foco al elemento de lista que inició la pantalla, especialmente en listas grandes que requieren desplazamiento. Puede modificar el comportamiento para volver al elemento de lista seleccionado anteriormente mediante un enlace a Custom Method y el uso el método scrollTop de JQuery.

Para establecer el foco

  1. En el diseñador de pantallas, elija el nodo Lista donde desea implementar el comportamiento.

  2. En la ventana Propiedades, en Acciones elija el vínculo Puntear.

  3. En el cuadro de diálogo Editar acción Puntear, elija el botón de opción Escribir mi propio método y, después, el botón Aceptar.

  4. En la ventana Propiedades, elija el vínculo Editar código de ejecución.

  5. En el Editor de código, agregue el siguiente código al método Tap_execute:

    var scrollTopPosition = $(window).scrollTop();
        myapp.showViewOrder(screen.Orders.selectedItem, {
            afterClosed: function () {
                $(window).scrollTop(scrollTopPosition);
            }
        });
    

Usar un control de JQuery Mobile

El Diseñador de pantallas ofrece un conjunto limitado de controles para mostrar datos, pero puede agregar fácilmente controles de JQuery Mobile para obtener una experiencia optimizada de interfaz de usuario. La biblioteca de JQuery Mobile Foundation contiene una gran variedad de controles optimizados para dispositivos móviles, incluidos controles deslizantes, botones de radio y casillas, entre otros. Consulte jQuery Mobile Framework.

En el ejemplo siguiente se agrega un control deslizante para establecer un valor numérico en un control de cuadro de texto.

Para agregar un control deslizante

  1. En el Diseñador de pantallas, elija el nodo de un campo numérico.

  2. Reemplace el control Cuadro de texto por Control personalizado.

  3. En la ventana Propiedades, establezca la propiedad Ancho en Ajustar a contenedor.

  4. Elija el vínculo Editar código de representación y, en el Editor de código, agregue el código siguiente al método render:

    createSlider(element, contentItem, 0, 100);
    

    Nota

    Los valores predeterminados del control deslizante están comprendidos entre 0 y 100.Si es necesario, reemplácelos por valores adecuados para su aplicación.

  5. Agregue la siguiente función al archivo de código de la pantalla:

    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();
                });
    

Personalizar un control FlipSwitch

El control FlipSwitch, que muestra valores Boolean, solo proporciona dos opciones para el texto que se muestra: /No o Activado/Desactivado. Si desea mostrar otros valores, puede crear un control personalizado basado en el control FlipSwitch. En el ejemplo siguiente se crea un control True/False.

Para personalizar el control

  1. En el Diseñador de pantallas, elija el nodo para un campo Boolean.

  2. Cambie el tipo de control de FlipSwitch a Control personalizado.

  3. En la ventana Propiedades, elija el vínculo Editar código de representación.

  4. En el editor de código, agregue el siguiente código al método de representación:

    createBooleanSwitch(element, contentItem);
    
  5. Agregue la siguiente función al archivo de código de la pantalla:

    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

    Puede que sea necesario establecer la propiedad Ancho en un valor de 150 o superior para que el control aparezca correctamente.

Implementar un control CheckBox

El tipo de control predeterminado para un tipo de datos Boolean es el control FlipSwitch, pero puede sustituir fácilmente un control CheckBox usando un control personalizado.

Para mostrar un CheckBox

  1. En el diseñador de pantallas, elija el nodo para un campo Boolean y cambie el tipo de control de FlipSwitch a Control personalizado.

  2. En la sección Alto de la ventana Propiedades, elija Mín. y escriba 100. Es necesario realizar esta acción porque el control CheckBox es más alto que un control TextBox estándar. Si el formulario usa otros tipos de control, puede que sea necesario ajustar este valor.

  3. En la sección General, elija el vínculo Editar código de representación.

  4. En el Editor de código, agregue el siguiente código al método 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;
            }
        });
    

Si se muestra un control CheckBox para un campo obligatorio en una pantalla Agregar/Editar, tendrá que establecerse un valor inicial para el control; de lo contrario, puede que el usuario obtenga un error de validación.

Para establecer un valor inicial

  1. En Entity Designer, en la barra Perspectiva, elija la pestaña HTMLClient.

  2. En la lista Escribir código, elija created.

  3. En el Editor de código, establezca los valores iniciales agregando código al método created:

    entity.FieldName = new Boolean();
        entity.FieldName = 'true';
    

    Reemplace FieldName por el nombre del campo Boolean. Para inicializar el control en un estado desactivado, reemplace true por false.

Reemplazar la apariencia de un control personalizado

Los controles personalizados se basan en el marco de JQuery Mobile, que diseña ciertos controles automáticamente de forma que se optimicen al aparecer en dispositivos móviles. En algunos casos, puede que desee reemplazar la apariencia para ofrecer un estilo más tradicional. Por ejemplo, los botones de JQuery Mobile son más grandes que un control de botón tradicional. Puede usar el atributo data-role="none" para reemplazar el estilo y mostrar un botón normal.

Para aplicar el atributo

  1. En el diseñador de pantallas, elija el nodo de control personalizado.

  2. En la ventana Propiedades, elija el vínculo Editar código de representación.

  3. Agregue el código siguiente al método render:

    var $element = $(element);
        var $textbox1 = $('<input type="text" data-role="none"/>');
        $element.append($textbox1);
    

    Nota

    Reemplace textbox1 por el nombre del control personalizado y “text” por el tipo de control.

Obtener la ubicación de un dispositivo

Puede habilitar escenarios basados en la proximidad en los que se usen mapas si utiliza las API de ubicación geográfica para determinar la ubicación actual de un dispositivo determinado. En el ejemplo siguiente se determinan las coordenadas de una entidad denominada MyLocation con propiedades de tipo Double denominadas Latitude y Longitude.

Para obtener la ubicación

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Escribir código.

  2. En el Editor de código, agregue el método siguiente:

    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"); 
    } 
    }; 
    

Mostrar una ubicación en un mapa

Para agregar fácilmente la función de mapas, obtenga una clave de desarrollador gratuita en el SDK de Mapas de Bing y cree un control personalizado que llame al servicio web de Mapas de Bing.

En el ejemplo siguiente se muestran ubicaciones de los clientes en forma de marcadores en un mapa; para ver los detalles de cada cliente, se debe puntear en el marcador. Este ejemplo requiere que una pantalla denominada BrowseCustomers se adjunte a una entidad Customers que tenga los campos Address, City y Country; además, la pantalla BrowseCustomers debe contar con un elemento emergente denominado Details.

Para crear el control personalizado

  1. En el Explorador de soluciones, elija el nodo Scripts y, a continuación, agregue un archivo JavaScript denominado lightswitch.bing-maps.js.

  2. En el Editor de código, agregue el siguiente código al archivo:

    /// <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

    Reemplace el valor de var _credentialsKey por su propia clave de desarrollador para Bing Maps.

Para agregar un mapa a una pantalla

  1. En el Diseñador de pantallas, elija el nodo donde desee agregar un mapa y, a continuación, en el menú contextual, elija Agregar control personalizado.

  2. En la ventana Propiedades, cambie el Nombre del control por Mapa y, a continuación, elija el vínculo Editar código de representación.

  3. En el Editor de código, agregue el siguiente código al método 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");
                    });
            }
        });
    };
    
  4. En el Explorador de soluciones, cambie a Ver archivo.

  5. Bajo el nodo HTMLClient, abra el archivo default.htm.

  6. En el Editor de código, agregue la siguiente referencia al principio del bloque de referencias de script:

    <script type="text/javascript" charset="utf­8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
  7. Al final del bloque de referencias de script, agregue una referencia al archivo JavaScript:

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

Mostrar un teclado numérico en un dispositivo

Puede permitir que los usuarios escriban tipos numéricos u otros tipos de información mediante un teclado en pantalla personalizado. En el ejemplo siguiente se indica cómo mostrar un teclado numérico cuando un usuario activa un control Text Box.

Para mostrar un teclado numérico

  1. En el Diseñador de pantallas, elija un nodo Cuadro de texto para un campo que deba contener datos numéricos.

  2. En la ventana Propiedades, elija el vínculo Editar código posterior a la representación.

  3. En el Editor de código, agregue el siguiente código al método PostRender:

    $(element).find("input").get(0).type = "number";
    

    Nota

    Puede usar la misma técnica para mostrar un teclado para un tipo diferente de entrada, pero no puede mostrar un teclado para el tipo de entrada color en un cliente HTML de una aplicación de LightSwitch.

Ajustar la interfaz de usuario para diversos factores de forma

Para asegurarse de que la aplicación funcione bien en diversos dispositivos móviles, personalice la interfaz en función del tamaño de la pantalla. Por ejemplo, puede mostrar la dirección completa de un cliente en una tableta, pero ocultar la misma información en un teléfono para reducir el desplazamiento por la pantalla.

Para ocultar un elemento de interfaz de usuario en determinados dispositivos

  1. En el Diseñador de pantallas, elija el nodo que desea ocultar, expanda la lista Escribir código y, a continuación, elija el método postRender.

  2. En el Editor de códigos, agregue el siguiente código:

    $(element).addClass("hidden-on-phone");
    
  3. En el Explorador de soluciones, cambie a Ver archivo y, a continuación, expanda el nodo Contenido del proyecto HTMLClient.

  4. Abra el archivo user-customizations.css.

  5. En el Editor de código, agregue el siguiente código al final de la sección @media:

    .hidden-on-phone {
           display: none;
       }
    

    Este código se agrega a la consulta de medios existente, que determina la orientación de la pantalla. Cuando la aplicación aparece en un teléfono, el campo no se mostrará.

También puede mostrar diferentes pantallas de inicio en los teléfonos y las tabletas mediante la adición de código JavaScript en el archivo default.htm.

Para mostrar pantallas de inicio diferentes en los distintos dispositivos

  1. En el Explorador de soluciones, elija el nodo HTMLClient y abra el archivo default.htm.

  2. En el Editor de código, reemplace el elemento de script que contiene la función msls.run() por el código siguiente:

    <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>
    

    Reemplace BrowseCustomersSmall por el nombre de la pantalla para teléfonos y BrowseCustomers por el de la pantalla para tabletas.

Presentar datos HTML directamente en una pantalla

Algunas bases de datos almacenan el código HTML en campos de datos String. La aplicación de LightSwitch interpreta esa información como si se tratara de cadenas normales y muestra HTML sin formato en un control Text de una pantalla, incluidas las etiquetas y demás elementos. Puede presentar el código HTML en sí en la pantalla mediante un control personalizado y el método render.

Advertencia

Para evitar riesgos para la seguridad, adopte este enfoque solamente si está seguro de que el código HTML procede de un origen de confianza.

Para presentar HTML en una pantalla

  1. En el Diseñador de pantallas, elija el nodo que representa el campo HTML y, a continuación, cambie el tipo de control a Control personalizado.

  2. En la ventana Propiedades, elija el vínculo Editar código de representación.

  3. En el Editor de código, agregue el siguiente código al método render:

    element.innerHTML = contentItem.stringValue;
    

Mostrar un título en un elemento emergente

Los elementos emergentes son una forma rápida y fácil de ver o escribir información sin necesidad de navegar a otra pantalla. A diferencia de las pantallas, no muestran un título, si bien es posible que el usuario desee que aparezca tanto un título como otro tipo de texto estático. En el ejemplo siguiente se indica cómo mostrar un título y personalizar la fuente.

Para agregar un título

  1. En la barra de herramientas del Diseñador de pantallas, elija el botón Agregar elemento de datos.

  2. En el cuadro de diálogo Agregar elemento de datos, agregue una Propiedad local de tipo String.

  3. En el Diseñador de pantallas, agregue la propiedad local a Elemento emergente y, a continuación, cambie el tipo de control a Text.

  4. En la ventana Propiedades, establezca la propiedad LabelPosition en None.

  5. En el Diseñador de pantallas, abra la lista Escribir código y, a continuación, elija el método postRender.

  6. En el Editor de código, agregue el siguiente código al método postRender:

    element.textContent = "This is the title";
        $(element).css("font-size", "23px");
        $(element).css("font-weight", "bold");
    

Copiar información en una nueva pantalla

En las aplicaciones de entrada de datos suele ser necesario duplicar parte de la información de una pantalla de entrada a la siguiente. Puede implementar fácilmente una función de copia mediante el método beforeShown para un formulario. En el ejemplo siguiente, se agrega un botón Copiar a una pantalla AddEditCustomers, abriendo una nueva pantalla previamente rellenada con los datos Country y Region del cliente actual.

Para copiar información

  1. En el Diseñador de pantallas, elija el nodo Barra de comandos para la pantalla AddEdit donde desea agregar un botón Copiar.

  2. En la barra de herramientas, elija el botón Agregar elemento de diseño y después Botón.

  3. En el cuadro de diálogo Botón Agregar, elija el botón de opción Escribir mi propio método, asigne al método el nombre Copy y elija el botón Aceptar.

  4. En el panel izquierdo, elija el nodo Copy y, a continuación, en la barra de herramientas, abra la lista Escribir código y elija Copy_execute.

  5. En el Editor de código, agregue el siguiente código al final del método 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;
            }
        })
    

Cambiar la navegación de pantalla al guardar

El comportamiento predeterminado del botón Guardar en una pantalla Agregar/Editar es cerrar la pantalla y volver a la pantalla desde la que se inició. En algunos casos, puede que desee navegar a otra pantalla, por ejemplo, una pantalla Ver, en la que los datos agregados recientemente se muestren con un formato diferente. Para ello, escriba código en el método afterClosed del botón que inicia la pantalla Agregar/Editar. En el ejemplo siguiente, se agrega un botón Add and View Order a una pantalla y se modifica el comportamiento para mostrar una pantalla Ver después de guardar.

Para navegar a una nueva pantalla

  1. En el Diseñador de pantallas, elija el nodo Barra de comandos para la pantalla Examinar en la que desea agregar un botón.

  2. En la barra de herramientas, elija el botón Agregar elemento de diseño y después Botón.

  3. En el cuadro de diálogo Botón Agregar, elija el botón de opción Escribir mi propio método, asigne al método el nombre AddAndViewOrder y elija el botón Aceptar.

  4. En el panel izquierdo, elija el nodo AddAndViewOrder y, a continuación, en la barra de herramientas, abra la lista Escribir código y elija AddAndViewOrder_execute.

  5. En el Editor de código, agregue el siguiente código al método 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);
                }
            }
        })
    

    Tenga en cuenta que el código también controla la creación de un nuevo pedido en la función beforeShown. Esto reemplaza al comportamiento predeterminado del formulario AddEdit y controla el caso en el que un usuario descarta cambios.

Deshabilitar marcadores

La característica de marcadores para pantallas de clientes HTML permite a un usuario copiar la URL de una instancia de pantalla específica y devolverla a dicha instancia posteriormente. La URL se basa parcialmente en la clave principal de la entidad de la pantalla; por ello, si la clave principal contiene información confidencial (como un n.º de S. S.) que no quiere que vean los usuarios, deshabilite la característica de marcadores. El código siguiente deshabilita la característica de marcadores; para ello, elimina el identificador de entidad (la parte entre el nombre de pantalla y el identificador de sesión) de la URL.

Para deshabilitar marcadores

  1. En el Explorador de soluciones, en el nodo ClienteHTML, seleccione el archivo default.htm y ábralo.

  2. En el Editor de código, busque la línea $(document).ready(function () { y agregue la siguiente línea de código justo debajo de esta:

    msls.application.options.disableUrlScreenParameters = true;
    

    El identificador de entidad se eliminará de la URL y los usuarios ya no podrán agregar pantallas a marcadores.

Vea también

Conceptos

Referencia de la API de cliente HTML