Compartir a través de

Tutorial: Crear un cliente LightSwitch para usuarios móviles

  • Artículo

Mediante LightSwitch, puede crear un cliente HTML en el que los usuarios móviles puedan ver, agregar y actualizar datos de ubicaciones remotas mediante dispositivos modernos con pantalla táctil, como teléfonos y tabletas. En este tutorial, creará un cliente de una compañía de mudanzas ficticia, Contoso Moving, de modo que el personal de servicio al cliente pueda calcular más fácilmente cuántas personas, camiones y cajas requerirá cada trabajo.

En Contoso, los programadores pasan la mayor parte del tiempo en la oficina, hablando con clientes potenciales en persona o por teléfono y concertando visitas de seguimiento. Estos trabajadores utilizan un cliente de escritorio enriquecido basado en Silverlight, que admite mejor la entrada de datos intensiva con el teclado y el mouse. En cambio, los especialistas en planificación viajan todo el día, hacen visitas de seguimiento en diferentes ubicaciones y registran información como el tamaño, el contenido y los requisitos de entrada de cada habitación. Estos usuarios móviles necesitan un cliente que no solo muestre información sobre cada visita de seguimiento de los programadores, sino que también permita escribir tipos específicos de datos, tomar fotografías y avisar al equipo de mudanzas sobre las restricciones de estacionamiento u otros detalles.

Ya se ha compilado al cliente de escritorio para los programadores. En este tutorial vamos a compilar el cliente móvil que los especialistas de planeación utilizan para el seguimiento de citas que los programadores organizan y para especificar los detalles sobre cada mudanza.

Requisitos previos

Introducción

Antes de compilar el cliente móvil, creará algunos datos de ejemplo para el cliente de escritorio que descargó.

Para crear datos de ejemplo

  1. En la barra de menús, elija Archivo, Abrir, Proyecto o solución.

  2. Busque el archivo ContosoMoving.sln que ha descargado y ábralo.

  3. En la barra de menús, elija Depurar, Iniciar depuración.

  4. En el cliente en ejecución, en la barra de menús, elija Datos de ejemplo, Crear datos de ejemplo.

  5. En la barra de herramientas en la pantalla Crear datos de ejemplo, elija el botón Agregar todos los datos de ejemplo.

    Los datos de ejemplo se crean para las entidades Estado, Empleado, Cliente y Cita.

  6. En la barra de herramientas, elija el botón Guardar.

  7. En la barra de menús, elija Inicio.

  8. En la barra de herramientas, elija el botón Actualizar.

    Aparece una lista de las próximas citas de todos los empleados y puede explorar las otras pantallas en el cliente de escritorio.

Agregar un cliente móvil

A continuación, agregará un proyecto de cliente HTML a la solución existente.

Para agregar un proyecto de cliente HTML

  1. En el Explorador de soluciones, elija el nodo ContosoMoving.

  2. En la barra de menús, elija Proyecto, Agregar cliente.

  3. En el cuadro de diálogo Agregar cliente, elija Cliente HTML, denomínelo MobileClient y elija el botón Aceptar.

    Se agrega un nodo de proyecto MobileClient al Explorador de soluciones.

Crear pantallas y definir la navegación

A continuación creará una pantalla principal y una pantalla de detalles, definirá la navegación entre las pantallas y creará un cuadro de diálogo modal. Los clientes móviles utilizan un modelo de navegación diferente al de los clientes de escritorio. Normalmente, solo hay una pantalla visible al mismo tiempo en un cliente móvil y los cambios se confirman cuando se mueve de una pantalla a otra.

Para crear una pantalla principal

  1. En el Explorador de soluciones, elija el nodo MobileClient.

  2. En la barra de menús, elija Proyecto, Agregar pantalla.

  3. En el cuadro de diálogo Agregar nueva pantalla, elija la plantilla Pantalla Examinar datos.

  4. En el cuadro de texto Nombre de pantalla, escriba Home.

  5. En la lista Datos de pantalla, elija PróximasCitas y elija el botón Aceptar.

Para personalizar la pantalla principal

  1. En el Diseñador de pantallas, elija el nodo Appointment y elija Diseño de filas en la lista desplegable.

  2. Bajo el nodo Diseño de filas | Appointment, elimine todos los nodos a excepción de Start Date y Customer.

  3. En la barra de menús, elija Iniciar depuración.

    El cliente móvil aparece en el explorador.

    En este punto, la pantalla solo muestra las citas. Después agregará una pantalla de detalles para que los detalles de cita aparezcan cuando un usuario puntee una cita.

Para crear una pantalla de detalles

  1. En el Diseñador de pantallas, elija el nodo Upcoming Appointments.

  2. En la ventana Propiedades, elija el hipervínculo Puntear elemento: Ninguno.

  3. En el cuadro de diálogo Editar la acción ItemTap, elija el botón de opción Elegir un método existente y elija UpcomingAppointments.ViewSelected en la lista.

  4. En la lista Navegar a, elija (Nueva pantalla) y, después, elija el botón Aceptar.

    Aparecerá el cuadro de diálogo Agregar nueva pantalla.

  5. En el cuadro de diálogo Agregar nueva pantalla, elija la plantilla Pantalla Ver detalles.

  6. En el cuadro de texto Nombre de pantalla, escriba ViewAppointment.

  7. En la lista Datos de pantalla, elija Appointment.

  8. Active las casillas Detalles de Appointment, Appointment Photos y Appointment Rooms y, después, elija el botón Aceptar.

    En el Diseñador de pantallas, se crea un diseño de Pestañas y los diferentes tipos de datos se organizan en pestañas.

  9. En la barra de menús, elija Iniciar depuración para ejecutar el cliente móvil.

  10. Puntee una cita para mostrar la pantalla View Appointment.

  11. Cambie el tamaño de la ventana del explorador y observe cómo cambia de diseño entre dos columnas y una sola columna.

Para personalizar la pantalla de detalles

  1. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  2. En el Diseñador de pantallas, elija el nodo Diseño de filas | Details.

  3. Elimine los nodos Start Date, End Date, Notes, Move Type, Employee y Customer.

  4. Mueva el nodo State para que aparezca bajo el nodo City.

  5. Elija el nodo Diseño de filas | right, expanda el nodo Agregar y elija Otros datos de pantalla.

    Aparecerá el cuadro de diálogo Agregar datos de pantalla.

  6. En el cuadro de texto Especificar los datos de pantalla que se agregarán, escriba Customer.Phone y elija el botón Aceptar.

  7. Expanda el nodo Agregar y, a continuación, elija Otros datos de pantalla.

    Aparecerá el cuadro de diálogo Agregar datos de pantalla.

  8. En el cuadro de texto Especificar los datos de pantalla que se agregarán, escriba Customer.Email y elija el botón Aceptar.

Para crear un cuadro de diálogo modal

  1. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  2. En el Diseñador de pantallas, abra el menú contextual del nodo Barra de comandos de la pestaña Details y, a continuación, elija Botón Agregar.

  3. En el cuadro de diálogo Botón Agregar, elija el botón de opción Elegir un método existente y elija Appointment.edit en la lista.

  4. En la lista Navegar a, elija (Nueva pantalla) y, después, elija el botón Aceptar.

    Aparecerá el cuadro de diálogo Agregar nueva pantalla.

  5. En el cuadro de texto Nombre de pantalla, escriba EditAppointment y elija el botón Aceptar.

    En la ventana Propiedades, está activada la casilla Mostrar como cuadro de diálogo, lo que significa que aparecerá como cuadro de diálogo modal.

  6. En el diseñador de pantallas, elimine el nodo Diseño de columnas | columns.

  7. Expanda el nodo Agregar y, a continuación, elija Otros datos de pantalla.

    Aparecerá el cuadro de diálogo Agregar datos de pantalla.

  8. En el cuadro de texto Especificar los datos de pantalla que se agregarán, escriba Appointment.Customer.FirstName y elija el botón Aceptar.

  9. Expanda el nodo Agregar y, a continuación, elija Otros datos de pantalla.

    Aparecerá el cuadro de diálogo Agregar datos de pantalla.

  10. En el cuadro de texto Especificar los datos de pantalla que se agregarán, escriba Appointment.Customer.LastName y elija el botón Aceptar.

  11. Expanda el nodo Agregar y, a continuación, elija Otros datos de pantalla.

    Aparecerá el cuadro de diálogo Agregar datos de pantalla.

  12. En el cuadro de texto Especificar los datos de pantalla que se agregarán, escriba Appointment.Customer.Phone y elija el botón Aceptar.

  13. Expanda el nodo Agregar y, a continuación, elija Otros datos de pantalla.

    Aparecerá el cuadro de diálogo Agregar datos de pantalla.

  14. En el cuadro de texto Especificar los datos de pantalla que se agregarán, escriba Appointment.Customer.Email y elija el botón Aceptar.

  15. En el panel de la izquierda, arrastre Street, City, State y PostalCode bajo el nodo Email.

    Nota

    En lugar de arrastrar, podría agregar los campos Street, StreetLine2, City, State y PostalCode siguiendo los mismos pasos que realizó para los campos FirstName y LastName.

  1. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  2. En el Diseñador de pantallas, elija el nodo Edit Appointment.

  3. En la ventana Propiedades, expanda la lista Icono y, después, elija Editar.

  4. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente móvil.

  5. En el cliente en ejecución, puntee una cita para abrir una pantalla View Appointment.

  6. Puntee el botón Edit Appointment para mostrar el cuadro de diálogo.

    Los botones Aceptar y Cancelar se incluyen automáticamente.

Personalizar la interfaz de usuario

Para personalizar la interfaz de usuario del cliente, puede cambiar la configuración en el Diseñador de pantallas y también puede agregar controles personalizados y escribir código JavaScript.

Para aplicar formato personalizado mediante bibliotecas de JavaScript

  1. En el Explorador de soluciones, abra la pantalla Home.

  2. En el Diseñador de pantallas, elija el nodo Diseño de filas | Appointment y elija Control personalizado en la lista.

  3. En la lista Escribir código, elija el método RowTemplate_render.

  4. En el editor de código, agregue el siguiente código para la función RowTemplate_render:

    myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

    Este código JavaScript usa la variable miembro contentItem.value para determinar qué se debe mostrar y el método format para definir el formato.

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

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

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

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

  9. En el Explorador de soluciones, expanda el nodo MobileClient y abra el archivo default.htm.

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

    Esta etiqueta agrega una referencia a la biblioteca moment.js.

  11. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

    Se da formato a la cita y se agregan la hora y el número de teléfono.

Para cambiar el diseño en una lista en mosaico

  1. En el Explorador de soluciones, abra la pantalla Home.

  2. En el Diseñador de pantallas, elija el nodo Lista | Upcoming Appointments y elija Lista de mosaicos en la lista.

  3. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

    La pantalla principal muestra las próximas citas en un diseño de mosaico. Cambie el ancho de la ventana del explorador para demostrar cómo el diseño de los mosaicos se ajusta dinámicamente para hacer un buen uso del espacio horizontal disponible. En esta demostración se muestra cómo el diseño de la lista podría cambiar en función de la orientación y el tamaño de pantalla de un dispositivo móvil.

Para agregar un título de pantalla dinámico

  1. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  2. En el Diseñador de pantallas, elija el nodo Diseño de filas | Details.

  3. En la lista Escribir código, elija Details_postRender.

  4. En el editor de código, agregue el siguiente código JavaScript:

    myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Appointment.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Appointment.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Appointment.Customer.FirstName + " " +
        contentItem.value.Appointment.Customer.LastName + " " +
        moment(contentItem.value.Appointment.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.Appointment.EndDate).format("h:mma");
    };
};

  5. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

    Las pantallas de detalles de cita muestran el nombre del cliente y las horas de inicio y finalización de la cita.

Agregar un control personalizado para cargar fotografías

La pantalla de detalles de cita tiene una pestaña Appointment Photos para que un especialista de planeación de Contoso Moving pueda tomar imágenes del sitio de un cliente para estimar el trabajo con más precisión. Para habilitar esta tarea, agregará un control personalizado al cliente.

Para agregar un control personalizado

  1. En el Explorador de soluciones, abra el menú contextual del nodo Scripts, elija Agregar y, después, Elemento existente.

  2. En el cuadro de diálogo Agregar elemento existente, navegue a la carpeta ContosoMoving y vuelva a abrir la carpeta Sample Resources.

  3. Elija los archivos image_uploader-base64-file-encoder e image-uploader, y después elija el botón Agregar.

  4. Abra el archivo default.htm y, a continuación, en el editor de código, agregue la siguiente referencia a image-uploader.js al final del bloque de referencias del script:

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

  5. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  6. En el Diseñador de pantallas, elija el nodo Lista | Photos y elija Lista de mosaicos en la lista.

  7. En la ventana Propiedades, abra la lista de propiedades Height y, a continuación, elija Ajustar a contenedor.

  8. En el cuadro de texto Mín., escriba 150.

  9. En el Diseñador de pantallas, abra el menú contextual de la pestaña Photos del nodo Barra de comandos y, a continuación, elija Botón Agregar.

  10. En el cuadro de diálogo Botón Agregar, elija el botón de opción Elegir un método existente, elija Photos.addEditNew en la lista y elija el botón Aceptar.

    Aparecerá el cuadro de diálogo Agregar nueva pantalla.

  11. En el cuadro de texto Nombre de pantalla, escriba UploadPhoto y elija el botón Aceptar.

  12. En el Diseñador de pantallas, elimine el nodo Diseño de filas | right.

  13. Elija el nodo Caption y después cambie el tipo de control a Área de texto.

  14. Elija el nodo Picture y después cambie el tipo de control a Control personalizado.

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

  16. En el editor de código, agregue el siguiente código a la función Picture1_render:

    createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");

    Este código inicializa el control personalizado ImageUploader si se presenta la pantalla.

  17. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  18. En el Diseñador de pantallas, elija el nodo del botón Add Photo y después cambie la propiedad Icon a Agregar imagen.

  19. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

  20. En el cliente en ejecución, puntee una cita.

  21. En la pantalla de detalles de la cita, puntee la pestaña Photos.

  22. Puntee el botón Add Photo para abrir el cuadro de diálogo Cargador de imágenes.

    El cuadro de diálogo Cargador de imágenes

Asignar la dirección del cliente

El especialista de planeación también debe ser capaz de encontrar el sitio del cliente. Por lo tanto, a continuación agregará funcionalidad de asignación mediante un control de mapa de Bing.

Para agregar un control de mapa

  1. En el Explorador de soluciones, abra el menú contextual del nodo Scripts, elija Agregar y, después, Elemento existente.

  2. En el cuadro de diálogo Agregar elemento existente, navegue a la carpeta ContosoMoving y vuelva a abrir la carpeta Sample Resources.

  3. Elija el archivo lightswitch.bing-maps.js y después elija el botón Agregar.

  4. Abra el archivo default.htm y, a continuación, en el editor de código, agregue una referencia al inicio del bloque de referencias del script:

    <script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

  5. Al final del bloque de referencias de script, agregue una referencia al archivo JavaScript:

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

  6. En el Explorador de soluciones, abra la pantalla ViewAppointment.

  7. En el Diseñador de pantallas, abra el menú contextual del nodo Pestañas y, a continuación, elija Agregar pestaña.

  8. En la ventana Propiedades, establezca el valor de la propiedad Name en Mapa.

  9. Abra el menú contextual del nodo Diseño de filas | Mapa y, a continuación, elija Agregar control personalizado.

    Aparece el cuadro de diálogo Agregar control personalizado.

  10. En el cuadro de texto Especificar los datos del nuevo control personalizado, escriba Appointment y elija el botón Aceptar.

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

  12. En el editor de código, agregue los métodos de utilidad siguientes antes de la función Appointment_render:

    function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,


        height: "400"
    });
};

  13. Agregue el código siguiente a la función Appointment_render:

    updateMap(element, contentItem);
mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

    Este código enlaza los campos de cita al control de mapa cuando se presenta la pantalla.

  14. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

  15. En el cliente en ejecución, puntee una cita.

  16. En la pantalla de detalles de la cita, puntee la pestaña Mapa para mostrar un mapa de la dirección del cliente.

Agregar personalización de marca

A continuación, cambiará el título del cliente por otro más descriptivo que MobileClient y agregará un logotipo corporativo de Contoso Moving para personalizar el cliente.

Para cambiar el título

  • En el Explorador de soluciones, abra el archivo default.htm y, a continuación, en el editor de código, reemplace el elemento <title>MobileClient</title> por el código siguiente:

    <title>Contoso Moving Mobile</title>

Para agregar un icono

  1. En el Explorador de soluciones, expanda los nodos Content e Images.

  2. Elimine el archivo user-logo.png.

  3. Abra el menú contextual del nodo Images, elija Agregar y, a continuación, elija Elemento existente.

  4. En el cuadro de diálogo Agregar elemento existente, navegue a la carpeta ContosoMoving y vuelva a abrir la carpeta Sample Resources.

  5. Elija el archivo user-logo.png y, a continuación, el botón Agregar.

    Nota

    También puede personalizar la imagen que aparece en la pantalla de presentación si reemplaza el archivo user-splash-screen.png.

  6. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

    Nota

    Es posible que deba borrar la memoria caché del explorador para que aparezcan los cambios.

Cambiar el tema

A continuación, se pueden crear hojas de estilos en cascada (CSS) para definir el tema de un cliente. Puede modificar el tema predeterminado para cambiar la apariencia del cliente o puede reemplazar ese tema si modifica el archivo .css. La herramienta web ThemeRoller se utilizará para crear un archivo .css con un tema personalizado.

Para cambiar entre los temas

  1. En el Explorador de soluciones, abra el archivo default.htm y, a continuación, en el editor de código, reemplace "light" en las dos líneas siguientes <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />, <link rel="stylesheet" type="text/css" href="Content/msls-light.css" />por dark.

  2. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

Para personalizar un tema existente

  1. En el explorador web, navegue al sitio web de ThemeRoller.

  2. En la barra de herramientas de ThemeRoller, elija el botón Import or upgrade.

    Aparece el cuadro de diálogo Import Theme.

  3. En Visual Studio, en el Explorador de soluciones, elija Vista de archivos en la lista de la barra de herramientas.

  4. Expanda el nodo Content y, a continuación, abra el archivo dark-theme.css.

  5. En el editor de código, copie el contenido completo del archivo.

  6. En ThemeRoller, pegue el contenido del archivo dark-theme.css en el cuadro de diálogo Import Theme y elija el botón Import.

  7. En el panel izquierdo, elija la ficha Global y expanda el nodo Corner Radii.

  8. En el cuadro de texto Group, escriba 0.8em.

  9. En el cuadro de texto Button, escriba 1.5em.

    Los elementos de la interfaz de usuario en el panel derecho tienen ahora esquinas redondeadas.

  10. En el panel derecho, arrastre un color de la paleta de colores al área de fondo del Muestrario A.

  11. Arrastre otro color al elemento Radio.

    Todos los elementos relacionados también cambian de color. Cuando se apunta a un elemento, cambia a un color complementario, que indica el color de selección.

  12. En la barra de herramientas de ThemeRoller, elija el botón Download.

  13. En el cuadro de diálogo Download Theme, asigne el nombre Mi-tema al tema y elija el botón Download Zip.

  14. Extraiga el contenido del archivo comprimido en una carpeta local.

  15. En el Explorador de soluciones, abra el menú contextual del nodo Content, elija Agregar y, a continuación, Elemento existente.

  16. En el cuadro de diálogo Agregar elemento existente, navegue a la carpeta donde extrajo los archivos, elija el archivo Mi-tema.css y después elija el botón Agregar.

  17. Abra el archivo default.htm, busque la línea <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> en el editor de código y, a continuación, reemplace “dark-theme” por mi-tema.

  18. En la barra de menús, elija Depurar, Iniciar depuración para ejecutar el cliente.

Pasos siguientes

Ahora tiene una aplicación cliente móvil que funciona. Para probarla en un dispositivo móvil, publique la aplicación en Internet Information Services (IIS) o en Microsoft Azure.

Vea también

Otros recursos

Pantallas de cliente HTML para aplicaciones LightSwitch

Cómo: Implementar una aplicación de LightSwitch de tres niveles

Cómo: Hospedar una aplicación de LightSwitch en Microsoft Azure