Compartilhar via

Explicação passo a passo: Como usar dados do LightSwitch em um aplicativo da Windows Store

  • Artigo

Seguindo esta explicação passo a passo, você pode aprender a criar ou configurar um aplicativo Windows Store ou outro aplicativo que dê suporte ao protocolo OData (Open Data Protocol) para consumir dados de qualquer aplicativo LightSwitch.

Pré-requisitos

Para concluir esta explicação passo a passo, você deve executar Visual Studio 2012 em Windows 8. Você também precisará baixar o aplicativo Contoso Construction na Galeria de Exemplos do MSDN no site da Microsoft e seguir as instruções de configuração no arquivo readme.txt. Se jamais tiver criado um aplicativo Windows Store antes, você deverá adquirir uma licença de desenvolvedor ao criar o projeto para o aplicativo Windows Store.

Para expor uma fonte de dados OData

  1. Na barra de menus, escolha Arquivo, Abrir, Projeto/Localização.

  2. Na caixa de diálogo Abrir Projeto, navegue até o arquivo ContosoConstruction.sln e abra-o.

  3. No Gerenciador de Soluções, abra o menu de atalho de Propriedades e escolha Abrir.

  4. No Designer de Aplicativos, escolha o link Editar propriedades de DesktopClient.

  5. No designer Cliente de Área de Trabalho, escolha a guia Tipo de Cliente.

  6. Na seção Cliente, escolha o botão de opção Web.

    Esse procedimento expõe ambas as fontes de dados do aplicativo Contoso Construction como feeds OData.

Para criar o aplicativo da Windows Store

  1. Na barra de menus, escolha Arquivo, Adicionar, Novo Projeto.

  2. Na lista de tipos de projeto de JavaScript, escolha Aplicativo de Separação.

  3. Na caixa de texto Nome, especifique ContosoProjects e escolha o botão OK.

    O projeto ContosoConstruction é adicionado à solução.

Para adicionar bibliotecas de script

  1. Na barra de menus, escolha Ferramentas, Gerenciador de Pacotes de Biblioteca, Console do Gerenciador de Pacotes.

    A janela Console do Gerenciador de Pacotes se abre.

  2. No prompt de comando do Console do Gerenciador de Pacotes, insira install-package jquery e escolha a tecla Enter.

  3. Depois que o comando for concluído, insira install-package datajs e escolha a tecla Enter.

    Depois que o comando for concluído, os seguintes arquivos JavaScript aparecem na pasta Scripts do Gerenciador de Soluções:

    • 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 o aplicativo da Windows Store

  1. No Gerenciador de Soluções, abra o arquivo default.html.

  2. Na seção WinJS references, adicione as seguintes referências:

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

  3. No Gerenciador de Soluções, expanda o nó js e abra o arquivo default.js.

  4. Na linha var app = WinJS.Application;, adicione a seguinte variável:

    var OData = window.OData;

  5. No Gerenciador de Soluções, abra o arquivo data.js.

  6. Substitua o código na seção sampleGroups pelo seguinte código:

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

  7. Localize a função após o comentário // TODO: Replace the data with your real data. e substitua o código existente pelo seguinte código:

    //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 recursos do aplicativo da Windows Store

  1. No Gerenciador de Soluções, abra o arquivo package.appxmanifest.

  2. Na guia Recursos, marque a caixa de seleção Redes Privadas (Cliente e Servidor).

    Esse procedimento permite que um aplicativo corporativo acesse recursos da Intranet. Essa configuração não é necessária para aplicativos Windows Store típicos da Windows Store.

Para depurar e testar o aplicativo

  1. No Gerenciador de Soluções, abra o menu de atalho do nó Solução e escolha Propriedades.

  2. Escolha o botão de opção Vários projetos de inicialização.

  3. Na coluna Ação, escolha Iniciar para os projetos ContosoConstruction e ContosoProjects.

    Importante

    Certifique-se de que ContosoContruction esteja listado antes de ContosoProjects na ordem de inicialização.

  4. No Gerenciador de Soluções, abra o arquivo data.js.

  5. Na linha que inicia return new WinJS.Promise, defina um ponto de interrupção.

  6. Escolha a tecla F5 para iniciar a depuração.

    O aplicativo começará a ser carregado e deixará de ser executado quando o ponto de interrupção for alcançado.

  7. Na janela do navegador onde o aplicativo Contoso Construction está sendo executado, copie o número da porta da barra de endereços.

    O número da porta é o valor numérico depois de https://localhost: na URL.

  8. Na janela Imediato, insira odataUrl = https://localhost:#####/ApplicationData.svc/Projects, substituindo o número da porta por ##### e escolha a tecla Enter.

  9. Escolha a tecla F5 para retomar o carregamento do aplicativo Contoso Projects.

    O aplicativo Contoso Projects aparece.

  10. Escolha o botão Todos os Projetos para exibir uma lista de projetos do aplicativo Contoso Construction.

Próximas etapas

Quando estiver pronto para implantar o aplicativo, você deverá publicar cada projeto independentemente. Primeiro, você publica o aplicativo LightSwitch no servidor de produção. Depois que o aplicativo LightSwitch for implantado e souber a URL do serviço OData para o servidor de produção, você atualizará o número da porta no arquivo data.js para o aplicativo Windows Store antes de implantá-lo.

Consulte também

Outros recursos

LightSwitch como uma fonte de dados

Como implantar um aplicativo LightSwitch de três camadas

Como implantar um aplicativo da Windows Store