Compartir a través de

Tutorial: Uso de datos de LightSwitch en una aplicación de la Tienda Windows

  • Artículo

Siguiendo este tutorial, puede obtener información sobre cómo crear o configurar la aplicación de Tienda Windows u otra aplicación que admite el protocolo open data protocol (OData) que utiliza datos de cualquier aplicación de Visual Studio LightSwitch .

Requisitos previos

Para completar este tutorial, debe ejecutar Visual Studio 2012 en Windows 8.También necesitará descargar la aplicación Galería de ejemplos de MSDN de Contoso Construction en el sitio Web de Microsoft y seguir las instrucciones de instalación en el archivo readme.txt.Si nunca ha creado una aplicación de Tienda Windows antes, se le pedirá que adquirir una licencia de desarrollador al crear el proyecto para la aplicación de Tienda Windows .

Para exponer un origen de datos de OData

  1. En la barra de menú, elija Archivo, Abrir, proyecto/ubicación.

  2. En el cuadro de diálogo Abrir proyecto , vaya al archivo de ContosoConstruction.sln, y ábralo.

  3. En Explorador de soluciones, abra el menú contextual para Propiedadesy, a continuación Abrir.

  4. En Diseñador de aplicaciones, elija la pestaña Tipo de aplicación .

  5. En la sección Cliente , elija el botón de opción Web .

    Este procedimiento expone ambos orígenes de datos para la aplicación de Contoso Construction como fuentes de OData.

Para crear la aplicación del almacén de Windows

  1. En la barra de menús, elija Archivo, Agregar y Nuevo proyecto.

  2. En la lista de tipos de proyecto para JavaScript, elija Aplicación dividida.

  3. En el cuadro de texto Nombre , especifique ContosoProjects, y elija el botón Aceptar .

    El proyecto ContosoConstruction se agrega a la solución.

Para agregar las bibliotecas de scripts

  1. En la barra de menú, elija Herramientas, Administrador de paquetes de biblioteca, Administrador de paquetes Console.

    La ventana Administrador de paquetes Console abra.

  2. En el símbolo del sistema Administrador de paquetes Console , entre en jquery de instalación- paquete, y elija la tecla ENTRAR.

  3. Después de que el comando se complete, entre en datajs de instalación- paquete, y elija la tecla ENTRAR.

    Después de que el comando se complete, los siguientes archivos de JavaScript aparecen en la carpeta Scripts en Explorador de soluciones:

    • datajs-1.0.2.js

    • datajs-1.0.2.min.js

    • jquery-1.7.1.js

    • jquery-1.7.1.min.js

    • jquery-1.7.1. - vsdoc.js

Para modificar la implementación del almacén de Windows

  1. En Explorador de soluciones, abra el archivo default.html.

  2. Bajo la sección de WinJS references , agregue las referencias siguientes:

    <!-- jQuery references --> 
  <script src="/Scripts/jquery-1.7.1.js"></script> 
  <!-- datajs references --> 
  <script src="/Scripts/datajs-1.0.2.js"></script>

  3. En Explorador de soluciones, expanda el nodo JS , y abra el archivo default.js.

  4. La línea de var app = WinJS.Application; , agregue la variable siguiente:

    var OData = window.OData;

  5. En Explorador de soluciones, abra el archivo de data.js.

  6. Reemplace el código de la sección de sampleGroups con el código siguiente:

    var sampleGroups = [ 
        {
            key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.",
            backgroundImage: darkGray
        },
    ];

  7. Busque la función después de que el comentario // TODO: Replace the data with your real data., y reemplace la existencia codificada con el código siguiente:

    //Generic function for loading data via a odata url
    function loadData(data, odataUrl, dataLoaded) {
        if (data) {
            return WinJS.Promise.as(data);
        }
        else {
            return new WinJS.Promise(function (complete, error, progress) {
                OData.read(odataUrl,
                function (data) {
                    complete(dataLoaded(data.results));
                },
                function (dataerror) {
                    error(dataerror);
                });
            });
        }
    }


    var projectsODataUrl = "https://localhost:#####/ApplicationData.svc/Projects";
    //TODO: Replace projectsODataUrl with url for deployed OData service
    //  before publishing this application.
    var _projects;
    //Loads projects
    function loadProjects() {
        loadData(_projects, projectsODataUrl, function (results) {
            _projects = results;
            return _projects;
        }).then(function (projects) {
            var items = [];

            $.each(projects, function (l, e) {
                var notes;
                if (e.Notes === null) {
                    notes = "";
                }
                else {
                    notes = e.Notes;
                }
                items.push({
                    displayName: e.ProjectName, subtitle: "Estimate: $" +
                        e.OriginalEstimate, description: "", content: notes
                });
            });
            showProjects(items.sort(), sampleGroups[0]);
        });
    }

    //Adds projects to binding list.
    function showProjects(items, itemGroup) {
        items.forEach(function (item) {
            list.push(
                {
                    group: itemGroup, title: item.displayName,
                    subtitle: item.subtitle, description: item.description,
                    content: item.content, backgroundImage: lightGray
                }
              )
        });
    }

    loadProjects();

Para especificar las funciones para la implementación del almacén de Windows

  1. En Explorador de soluciones, abra el archivo de package.appxmanifest.

  2. En la pestaña Capacidades , active la casilla redes privadas (cliente y Servidor) .

    Este procedimiento permite a una aplicación empresarial para tener acceso a los recursos de la intranet.Este valor no es necesario para las aplicaciones típicas de Tienda Windows de Tienda Windows.

Para depurar y probar la aplicación

  1. En Explorador de soluciones, abra el menú contextual para el nodo Solución y, a continuación Propiedades.

  2. Elija el botón de opción Proyectos de inicio múltiples .

  3. En la columna Acción , elija Iniciar para los proyectos ContosoConstruction y ContosoProjects .

    Nota importanteImportante

    Asegúrese de que ContosoContruction aparece antes de que ContosoProjects en el registro.

  4. En Explorador de soluciones, abra el archivo de data.js.

  5. En la línea que empieza return new WinJS.Promise, establezca un punto de interrupción.

  6. Elija la tecla F5 para iniciar la depuración.

    La aplicación se iniciará para cargar y después para detener la ejecución cuando se alcanza el punto de interrupción.

  7. En la ventana del explorador donde la aplicación de Contoso Construction ejecuta, copie el número de puerto de la barra de direcciones.

    El número de puerto es el valor numérico que sigue https://localhost: en la dirección URL.

  8. En la ventana Inmediato , entre en odataUrl = https://localhost:#####/ApplicationData.svc/Projects, sustituyendo el número de puerto para #####, y elija la tecla ENTRAR.

  9. Elija la tecla F5 para reanudar la carga de la aplicación de los proyectos de Contoso.

    La aplicación de los proyectos de Contoso aparece.

  10. Elija el botón Todos los proyectos para mostrar una lista de los proyectos de aplicación de Contoso Construction.

Pasos siguientes

Cuando esté listo para implementar la aplicación, debe publicar cada proyecto independientemente.Primero, se publica la aplicación de LightSwitch en el servidor de producción.Después de implementar la aplicación de LightSwitch y conoce la dirección url del servicio de OData para el servidor de producción, se actualiza el número de puerto en el archivo de data.js para la aplicación de Tienda Windows antes de que va a la implementación.

Vea también

Otros recursos

LightSwitch como origen de datos

Cómo: Implementar una aplicación de 3 niveles

Cómo: Implementar una aplicación de almacén de Windows