Partilhar via


Instruções passo a passo: criando um cliente do LightSwitch para usuários móveis

Usando Atualização 2 do Microsoft LightSwitch para Visual Studio, você pode criar um cliente HTML em que os usuários móveis podem exibir, adicionar, atualizar dados locais e remotos usando modernos, dispositivos toque- orientados como telefones e tabuletas.Nessa explicação passo a passo, você criará um cliente para uma empresa fictícia de mudanças, Contoso movendo, de modo que o pessoal de serviço para o cliente possa mais facilmente estimar quantos pessoas, caminhões, e caixas cada trabalho exigirão.

Em Contoso, os agendadores passam a maior parte do seu tempo em escritório, falando para clientes em potencial pessoalmente ou em telefone e organizando visitas de continuação de linha.Esses trabalhadores usam um cliente rico da área de trabalho que são baseados em Silverlight que e entrada de dados pesada os melhores suporta com o teclado e mouse.Ao contrário, os especialistas de planejamento viajam o dia inteiro, fazendo visitas de continuação de linha em vários locais e gravando informações como o tamanho, o conteúdo, e os requisitos de entrada de cada espaço.Esses usuários precisam para um cliente que eles não apenas mostra informações sobre cada visita de continuação de agendadores mas também suportam inserir tipos específicos de dados, a tomada de imagens, e a alerta de equipe de movimentação sobre limitações de estacionamento ou outros detalhes.

O cliente da área de trabalho para os agendadores já foi criado.Você irá compilar o cliente móvel que os especialistas de planejamento usam para controlar as nomeações que os agendadores e organizam para inserir detalhes sobre cada animação.

Pré-requisitos

  • Download e instalar Atualização 2 do Microsoft LightSwitch para Visual Studio.

  • Baixar o aplicativo de exemplo ContosoMoving.

  • Instalar a extensão do gerenciador de pacote de NuGet, como o procedimento a seguir descreve.

Para instalar a extensão de NuGet

  1. Na barra de menu, escolha Ferramentas, Extensões e Atualizações.

  2. Na caixa de diálogo de Extensões e Atualizações , escolha o nó de Online .

  3. Na caixa de texto de Procure a galeria do Visual Studio , entre em NuGet.

  4. Na lista de resultado, escolha Gerenciador de pacote de NuGet, e então escolha o botão de Baixar .

    ObservaçãoObservação

    Você deve reiniciar o Visual Studio para fazer a extensão disponível.

Guia de Introdução

Antes de criar o cliente móvel, você criará alguns dados de exemplo para o cliente da área de trabalho, que você baixou.

Para criar dados de exemplo

  1. Na barra de menu, escolha Arquivo, Abrir, Projeto/solução.

  2. Localize o arquivo de ContosoMoving.sln que você baixou, e abrí-lo em.

  3. Na barra de menu, escolha Depurar, Iniciar Depuração.

  4. No cliente de execução, na barra de menu, escolha Dados de Exemplo, Criar dados de exemplo.

  5. Na barra de ferramentas para a tela de Criar dados de exemplo , escolha o botão de Adicione todos os dados de exemplo .

    Os dados de exemplo são criados para Estado, Funcionário, Cliente, e entidades de Compromisso .

  6. Na barra de ferramentas, escolha o botão de Salvar .

  7. Na barra de menu, escolha Início.

  8. Na barra de ferramentas, escolha o botão de Atualizar .

    Uma lista de próximos nomeações para todos os empregados aparece, e você pode explorar outras telas no cliente da área de trabalho.

Adicione um cliente móvel

Em seguida você adicionará um projeto do cliente HTML à solução existente.

Para adicionar um projeto do cliente HTML

  1. Em Gerenciador de Soluções, escolha o nó de ContosoMoving .

  2. Na barra de menu, escolha Projeto, Adicionar Cliente.

  3. Na caixa de diálogo de Adicionar Cliente , escolha Cliente de HTMLHTML, nomeie-o MobileClient, e então escolha o botão de OK .

  4. Na caixa de diálogo de atualização de projeto que aparece, escolha o botão de OK .

    O projeto é atualizado a Atualização 2 do Microsoft LightSwitch para Visual Studio, e um relatório de migração aparece no navegador.A estrutura de arquivo de solução é alterada, e você não pode abrir a solução em um computador que não tenha que a versão de LightSwitch instalado.

    Em Gerenciador de Soluções, o nó de Fontes de Dados foi renomeado Servidor, o nó de Telas foi renomeado Cliente, e um nó foi adicionado e MobileClientchamado.O nó de MobileClient é marcado como o cliente de Inicialização , o que será exibida quando você depurar o aplicativo.Você pode alterar o cliente de Inicialização abrindo o menu de atalho para qualquer nó de cliente e escolhendo em Conjunto como o cliente de inicialização.

Crie telas e defina a navegação

Em seguida você criará uma tela de início e detalhes, selecione definem a navegação entre as telas, e cria uma caixa de diálogo modal.Os clientes móveis usam um modelo diferente de navegação de clientes da área de trabalho.Normalmente, somente uma tela é visível em uma hora em um cliente móvel, e as alterações são confirmadas quando você move uma tela da outra.

Para criar uma tela de início

  1. Em Gerenciador de Soluções, escolha o nó de MobileClient .

  2. Na barra de menu, escolha Projeto, Adicionar a tela.

  3. Na caixa de diálogo de Adicionar nova tela , escolha o modelo de Vá para a tela de dados .

  4. Na caixa de texto de Pseudónimo , entre em Início.

  5. Na lista de Dados da Tela , escolha, e escolha UpcomingAppointmentsno botão de OK .

Para personalizar a tela de início

  1. No designer da tela, escolha o nó de Compromisso , e então escolha Layout das Linhas na lista suspensa.

  2. Sob o nó de Layout das Linhas | Compromisso , excluir todos os nós exceto para Data de início e de Cliente.

  3. Na barra de menu, escolha Iniciar Depuração.

    O cliente móvel aparece no navegador.

    Neste ponto, as visualizações ópticas somente as nomeações.Em seguida você adicionará uma tela dos detalhes de modo que os detalhes de nomeação aparecem quando um usuário bate uma nomeação.

Para criar uma tela de detalhes

  1. Em Gerenciador de Soluções, escolha o nó de MobileClient .

  2. Na barra de menu, escolha Projeto, Adicionar a tela.

  3. Na caixa de diálogo de Adicionar nova tela , escolha o modelo de Tela dos detalhes de exibição .

  4. Na caixa de texto de Pseudónimo , entre em ViewAppointmentDetail.

  5. Na lista de Dados da Tela , escolha Compromisso.

  6. Marque as caixas de seleção de Detalhes de nomeação, Nomeação AppointmentPhotos, e de Salas de nomeação , e então escolha o botão de OK .

    No designer da tela, um layout de Guias é criado, e os diferentes tipos de dados são organizados por tabulações.

Para personalizar a tela de detalhes

  1. Em Gerenciador de Soluções, abra a tela de ViewAppointmentDetail .

  2. No designer da tela, escolha o nó de Layout das Linhas | Detalhes .

  3. Excluir Data de início, Data de término, Observações, Tipo de Movimentação, Funcionário, e nós de Cliente .

  4. Abra o menu de atalho para o nó de Guias , e então escolha Adicionar guia.

  5. Na janela de Propriedades , defina o valor da propriedade de Nome a Anotações.

  6. No designer da tela, escolha o nó de Layout das Linhas | Observações , expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  7. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Appointment.Notes, e então escolha o botão de OK .

  8. Escolha o nó de Observações , e então escolha o controle de Área de texto na lista suspensa.

  9. Na janela de Propriedades , defina o valor da propriedade da AlturaAlongam para o contêiner.

  10. Escolha o nó de Layout das Linhas | Detalhes , expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  11. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Customer.Phone, e então escolha o botão de OK .

  12. Escolha o nó de Telefone , e então escolha o controle de Editor de Número de Telefone na lista suspensa.

  13. Expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  14. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Customer.Email, e então escolha o botão de OK .

  15. Escolha o nó de Email , e então escolha o controle de Editor de Endereço de Email na lista suspensa.

Para definir a navegação

  1. Em Gerenciador de Soluções, abra a tela de Início .

  2. No designer da tela, escolha o nó de Lista | Upcoming Appointments .

  3. Na janela de Propriedades , escolha a propriedade de Torneira de item , e então escolha o link de Nenhum .

  4. Na caixa de diálogo Edite Toque de Item, escolha o botão de opção Escolha um método existente, e então escolha showViewAppointmentDetail na lista suspensa.

  5. Na lista de Tarefa , escolha Salvar.

  6. Na caixa de texto de Compromisso , entre em UpcomingAppointments.selectedItem, e então escolha o botão de OK .

  7. Na barra de menu, escolha Iniciar Depuração para executar o cliente móvel.

    Em cada nomeação, uma seta indica que você pode navegar para outra tela.

  8. Faça uma nomeação para exibir a tela de ViewAppointmentDetail .

Para criar uma caixa de diálogo modal

  1. Em Gerenciador de Soluções, abra a tela de ViewAppointmentDetail .

  2. No designer da tela, escolha o nó Diálogos e então escolha o nó Adicionar caixa de diálogo.

  3. Na janela de Propriedades , defina o valor da propriedade de Nome a EditContactInformation.

  4. Expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  5. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Appointment.Customer.FirstName, e então escolha o botão de OK .

  6. Expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  7. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Appointment.Customer.LastName, e então escolha o botão de OK .

  8. Expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  9. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Appointment.Customer.Phone, e então escolha o botão de OK .

  10. Escolha o nó de Telefone , e então escolha o controle de Editor de Número de Telefone na lista suspensa.

  11. Expanda o nó de Adicionar , e então escolha Outros Dados da Tela.

    A caixa de diálogo de Adicionar Dados da Tela aparece.

  12. Na caixa de texto de Especifique os dados da tela a serem adicionados , entre em Appointment.Customer.Email, e então escolha o botão de OK .

  13. Escolha o nó de Email , e então escolha o controle de Editor de Endereço de Email na lista.

  14. No painel, na Rua, em Cidade, em Estado, e em CEP esquerda no nó de email.

    A seção de Diálogos resultante é semelhante à ilustração a seguir.

    Layout da caixa de diálogo

    ObservaçãoObservação

    Em vez disso, você pode também adicionar Rua, Cidade, Estado, e campos de CEP usando as mesmas etapas que os campos de Nome e de Sobrenome .

  1. Em Gerenciador de Soluções, abra a tela de ViewAppointmentDetail .

  2. No designer da tela, abra o menu de atalho para o nó de Layout das Linhas | Detalhes , e então escolha Adicionar Botão.

  3. Na caixa de diálogo de Adicionar Botão , escolha o botão de opção de Escolha um método existente , escolha ShowDialog na lista, e então escolha o botão de OK .

  4. Escolha o nó de Mostrar informações de contato de edição .

  5. Na janela de Propriedades , defina o valor da propriedade de Nome a Editar.

  6. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

  7. No cliente móvel em execução, faça uma nomeação para abrir uma tela do Exibir o detalhe de nomeação .

  8. Teste o botão de Editar para exibir a caixa de diálogo.

    OK e botões de Cancelar são incluídos automaticamente.

Personalizar a interface do usuário

Você pode personalizar a interface do usuário de seu cliente não apenas alterando configurações no designer de tela mas também adicionar controles personalizados e escrevendo código Javascript.

Para aplicar formatação personalizada usando bibliotecas Javascript

  1. Em Gerenciador de Soluções, abra a tela de Início .

  2. No designer da tela, escolha o nó de Layout das Linhas | Compromisso , e então escolha Controle Personalizado na lista.

  3. Na lista de Escreva o código , escolha o método de RowTemplate_render .

  4. No editor de códigos, adicione o seguinte código para a função de 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));
    };
    

    Esse código Javascript usa a variável de membro de contentItem.value para determinar o que exibir e o método de format para definir a formatação.

  5. Em Gerenciador de Soluções, escolha O modo de Arquivo da lista na barra de ferramentas.

  6. No menu de atalho para o nó de MobileClient , escolha Gerenciar pacotes de NuGet.

  7. Na caixa de diálogo de Gerenciar pacotes de NuGet , escolha o nó de Online .

  8. Na caixa de texto de Pesquisar online , entre em moment.js.

  9. Escolha o botão de Instalar para instalar a biblioteca de Moment.js, e então escolha o botão de Fechar .

  10. Em Gerenciador de Soluções, expanda o nó de MobileClient , e abra o arquivo de default.htm .

  11. No editor de códigos, adicione a seguinte marcação de script após a marca da última de </script> :

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

    Esta marcação adiciona uma referência à biblioteca de moment.js.

  12. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

    A nomeação é formatada, e o número de telefone são adicionados.

Para alterar o layout

  1. Em Gerenciador de Soluções, escolha Exibição lógica na lista na barra de ferramentas, e o aberto para a tela de Início .

  2. No designer da tela, escolha o nó de Lista | Upcoming Appointments , e então escolha Lista lado a lado na lista suspensa.

  3. Escolha o nó de Controle Personalizado | Compromisso .

  4. Na janela de Propriedades , defina o valor da propriedade de Largura a 280 pixels.

  5. Na janela de Propriedades , defina o valor da propriedade de Altura a 80 pixels.

  6. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

    Nomeações das visualizações ópticas de início as próximas em um layout com base quadro-.Altere a largura da janela do navegador para demonstrar como o layout dos quadros ajustar dinamicamente para fazer o uso de um horizontal espaço disponível.A demonstração mostra como o layout da lista pode mudar baseado na guia e no tamanho da tela de um dispositivo móvel.

Para adicionar um título dinâmica de tela

  1. Em Gerenciador de Soluções, abra a tela de ViewAppointmentDetail .

  2. No designer da tela, escolha o nó de Layout das Linhas | Detalhes .

  3. Na lista de Escreva código , escolha Details_postRender.

  4. No editor de códigos, adicione o seguinte código Javascript:

    myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
        contentItem.dataBind("value.Customer.FirstName", function () {
            formatAppointmentScreenTitle(contentItem);
        });
    
        contentItem.dataBind("value.Customer.LastName", function () {
            formatAppointmentScreenTitle(contentItem);
        });
    
        function formatAppointmentScreenTitle(contentItem) {
            contentItem.screen.details.displayName = contentItem.value.Customer.FirstName + " " +
            contentItem.value.Customer.LastName + " " +
            moment(contentItem.value.StartDate).format("h:mma") + " - " +
            moment(contentItem.value.EndDate).format("h:mma");
        };
    };
    
  5. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

    As telas de nomeação- detalhes mostram o nome do cliente e hora de início e final para a nomeação.

Publicar o cliente

Até este ponto, você testou exibindo o seu cliente no navegador.Para acessar o cliente de um dispositivo móvel, você deve publicá-lo a Serviços de Informações da Internet (IIS).

ObservaçãoObservação

Você também pode publicar um cliente móvel o Windows como você faria para qualquer aplicativo de LightSwitch .Para obter mais informações, consulte Como: hospedar um aplicativo em Windows Azure.

Para configurar o servidor

  1. No servidor onde você irá implantar o aplicativo, abra Gerenciador de Serviços de Informações da Internet (IIS).

  2. No painel de Conexões , expanda o nó do servidor, e então escolha o nó de Site Padrão .

  3. Abra o menu de atalho para o nó de Site Padrão , escolha e então Adicione o aplicativo.

    A caixa de diálogo de Adicione o aplicativo aparece.

  4. Na caixa de texto de Alias , entre em ContosoMoving.

  5. Na caixa de texto de Caminho Físico , digite um caminho para os arquivos do cliente (por exemplo, C:\inetpub\wwwroot\Contoso), e depois escolha o botão de OK .

  6. No painel central, abra o menu de atalho para o ícone de Autenticação , e então escolha Recurso aberto.

  7. No painel de Autenticação , defina os seguintes valores:

    Nome

    Status

    Autenticação anônima

    Enabled

    Representação ASP.NET

    Desabilitado

    Autenticação de formulários

    Enabled

    Autenticação do Windows

    Desabilitado

Para publicar o cliente

  1. Na lista de Depurar na barra de ferramentas, escolha Versão.

  2. Em Gerenciador de Soluções, escolha o nó de ContosoMoving .

  3. Na barra de menu, escolha Compilar, Publicar ContosoMoving.

    O Assistente de Publicação de Aplicativos LightSwitch aparece.

  4. Na página de Tipo de aplicativo , escolha o botão de opção de Aplicativo completo , e então escolha o botão de Avançar .

  5. Na página Configuração do Servidor de Aplicativos, escolha o botão de opção Servidor IIS.

  6. Na página Publicar Saída, escolha o botão de opção Publicar remotamente em um servidor agora.

  7. Na caixa de texto de URL de Serviço , digite o URL do servidor que está executando o IIS onde você deseja publicar o cliente.

  8. Na caixa de texto de Site/Aplicativo , entre em O site padrão/ContosoMoving.

  9. Na caixa de texto de Nome de Usuário , digite o nome de um usuário que tem permissões administrativas para o servidor que está executando o IIS.

  10. Na caixa de texto de Senha , digite a senha do usuário, e então escolha o botão de Avançar .

  11. Na página de Configurações de segurança , na guia do Administrador do aplicativo , entre em Nome de Usuário, em Nome Completo, e em Senha para o usuário que inicialmente terá acesso administrativo para o cliente.

    Observação importanteImportante

    Você precisará acessar essas credenciais do cliente depois que você publica o.

  12. Na guia de HTTPS , escolha o botão de opção de Não HTTPS, não é necessário , e então escolha o botão de Avançar .

    A página de Conexões de Dados aparece.

  13. Na caixa de texto para Especificar a conexão do usuário , digite a cadeia de conexão para o banco de dados SQL Server que hospedará os dados.

    Este banco de dados pode estar no mesmo servidor do IIS ou em um servidor diferente.

    DicaDica

    Você pode escolher o botão de reticências para abrir a caixa de diálogo de Propriedades da Conexão e para entrar em propriedades para construir a cadeia de conexão.

  14. Na caixa de texto de Publicar o esquema do banco de dados , digite a mesma cadeia de conexão.

  15. Escolha o botão Publicar para publicar o aplicativo.

Para testar o cliente

  1. Na barra de endereços do navegador da web, entre em http://IISServer/contosomoving/clientIISServer , onde é o nome do servidor onde você publicou o cliente.

  2. Nas caixas de texto de Nome de Usuário e de Senha , digite as credenciais que você especificou para o administrador do cliente, e então escolha o botão de Fazer Logon .

  3. Na barra de menu, escolha Dados de Exemplo, Criar dados de exemplo.

    ObservaçãoObservação

    Os dados que são inseridos em tempo de design não são publicados, assim você deve adicionar os dados de exemplo para o banco de dados de produção.

  4. Na tela Criar dados de exemplo , escolha o botão da barra de ferramentas de Adicione todos os dados de exemplo .

    Os dados de exemplo são criados para Estado, Funcionário, Cliente, e entidades de Compromisso .

  5. Na barra de ferramentas, escolha o botão de Salvar .

  6. Na barra de endereços do navegador, entre em http://IISServer/contosomoving/mobileclientIISServer , onde é o nome do servidor onde você publicou o cliente.

  7. Quando solicitado para um nome de usuário e uma senha, entre em ACarter como o usuário e a senha em pass@word1 como.

    As próximas nomeações para Adam Carter aparecem.

Adicionar um controle personalizado as fotos de carregamento

A tela dos detalhes de nomeação tem um guia de Fotos de nomeação para que um especialista de planejamento para mover de Contoso pode levar imagens de um site de cliente para estimar mais precisamente o trabalho.Para ativar esta tarefa, você adicionará um controle personalizado para o cliente.

Para adicionar um controle personalizado

  1. Em Gerenciador de Soluções, escolha O modo de Arquivo na lista na barra de ferramentas.

  2. Abra o menu de atalho para o nó de ScriptsAdicionar, escolha, e escolha Item Existente.

  3. Na caixa de diálogo de Adicionar item existente , navegue até a pasta de ContosoMoving , abra a pasta de Recursos , e abra as pastas de ImageUploader .

  4. Escolha os arquivos de base64-file-encoder e de - uploader imagem , e então escolha o botão de Adicionar .

  5. Abra o arquivo de default.htm e em seguida, no editor de códigos, adicione a seguinte referência a image-uploader.js no final do bloco de referências de script:

    <script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
    
  6. Em Gerenciador de Soluções, escolha Exibição lógica na lista na barra de ferramentas, e abra a tela de ViewAppointmentDetail .

  7. No designer da tela, escolha o nó Fotos de nomeação e escolha Layout das Colunas na lista.

  8. Abra o menu de atalho para o nó de Diálogos , e então escolha Adicionar caixa de diálogo.

  9. Na janela de Propriedades , defina o valor da propriedade de Nome a ImageUploader.

  10. Defina o valor das propriedades de Altura e da LarguraAlongam para o contêiner.

  11. No painel esquerdo do designer de tela, expanda o nó de AppointmentPhotos e em seguida, arraste o nó de Item Selecionado no painel do nó de Layout das Linhas | Carregador de Imagens no centro.

  12. Exclua o nó de Compromisso adicionado.

  13. Escolha o nó de Imagem , e então escolha Controle Personalizado na lista.

  14. Na janela de Propriedades , escolha o hiperlink da A edição processa o código .

  15. No editor de códigos, adicione o seguinte código à função de Picture1_render:

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

    Esse código inicializa o controle personalizado de ImageUploader quando a tela é processada.

  16. No designer da tela, abra o menu de atalho para o nó de Layout das Linhas | Appointment Photos , e então escolha Adicionar Botão.

  17. Na caixa de diálogo de Adicionar Botão , escolha o botão de opção de Escolha um método existente .

  18. Na lista, escolha AppointmentPhotos.AddAndEditNewshowDialog .

  19. Na lista de Navegar paraCarregador de Imagens, escolha, e escolha no botão de OK .

  20. Arraste o botão de Adicione a fotos de nomeação de modo que aparece sobre o nó de Lista | Appointment Photos .

  21. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

  22. No cliente de execução, faça uma nomeação.

  23. Na tela de detalhes de nomeação, fazer um guia de Fotos de nomeação .

  24. Teste o botão de Adicione a fotos de nomeação para abrir a caixa de diálogo de Carregador de Imagens .

    A caixa de diálogo do carregador de imagens

Mapear o endereço de cliente

O especialista de planejamento também deve ser capaz de localizar o site de cliente tão seguir, você irá adicionar funcionalidade de mapeamento usando um controle de mapa de Bing.

Para adicionar um controle de mapa

  1. Em Gerenciador de Soluções, escolha O modo de Arquivo na lista na barra de ferramentas.

  2. Abra o menu de atalho para o nó de ScriptsAdicionar, escolha, e escolha Item Existente.

  3. Na caixa de diálogo de Adicionar item existente , navegue até a pasta de ContosoMoving , e abra a pasta de Recursos .

  4. Escolha o arquivo de lightswitch.bing-maps.js , e então escolha o botão de Adicionar .

  5. Abra o arquivo de default.htm e em seguida, no editor de códigos, adicione uma referência no início do bloco de referências de script:

    <script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
  6. No final do bloco de referências a scripts, adicione uma referência ao arquivo Javascript:

    <script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>
    
  7. Em Gerenciador de Soluções, escolha Exibição lógica de lista na barra de ferramentas, e abra a tela de ViewAppointmentDetail .

  8. No designer da tela, abra o menu de atalho para o nó de Guias , e então escolha Adicionar guia.

  9. Na janela de Propriedades , defina o valor da propriedade de Nome a Mapa.

  10. Arraste o nó de Layout das Linhas | Mapa de modo que aparece sobre o nó de Layout das Linhas | Observações .

  11. Abra o menu de atalho para o nó de Layout das Linhas | Mapa , e então escolha Adicionar Controle Personalizado.

    A caixa de diálogo de Adicionar Controle Personalizado aparece.

  12. Na caixa de texto de Especifique os dados do novo controle personalizado , entre em Nomeação, e então escolha o botão de OK .

  13. Na janela de Propriedades , escolha o hiperlink da A edição processa o código .

  14. No editor de códigos, adicione os seguintes métodos utilitário antes que a função de 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,
            width: "600",
            height: "400"
        });
    };
    
  15. Adicione o seguinte código à função de Appointment_render :

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

    Esse código associa os campos de nomeação para o controle de mapa quando a tela é processada.

  16. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

  17. No cliente de execução, faça uma nomeação.

  18. Na tela de detalhes de nomeação, teste a guia de Mapa para exibir um mapa de endereço do cliente.

Adicione a marcas

Em seguida você irá alterar o título do cliente para algo mais significativo de MobileClient, e você adicionará um logotipo corporativo em movimento de Contoso para personalizar o cliente.

Para alterar o título

  1. Em Gerenciador de Soluções, escolha O modo de Arquivo da lista na barra de ferramentas.

  2. Abra o arquivo de default.htm e em seguida, no editor de códigos de, substitua o elemento de <title>MobileClient</title> com o seguinte código:

    <title>Contoso Moving Mobile</title>
    

Para adicionar um ícone

  1. Em Gerenciador de Soluções, expanda os nós de Conteúdo e de Imagens .

  2. Exclua os arquivos de user-logo.png e de user-splash-screen.png .

  3. Abra o menu de atalho para o nó de ImagensAdicionar, escolha, e escolha Item Existente.

  4. Na caixa de diálogo de Adicionar item existente , navegue até a pasta de ContosoMoving , e abra a pasta de Recursos .

  5. Escolha o arquivo de logo.png , e então escolha o botão de Adicionar .

  6. Em Gerenciador de Soluções, abra o menu de atalho para o nó de logo.png , escolha Renomear, e digite em user-logo.png.

  7. Abra o menu de atalho para o nó de ImagensAdicionar, escolha, e escolha Item Existente.

  8. Na caixa de diálogo de Adicionar item existente , escolha o arquivo de logo.png , e então escolha o botão de Adicionar .

  9. Em Gerenciador de Soluções, abra o menu de atalho para o nó de logo.png , escolha Renomear, e digite em user-splash-screen.png.

  10. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

    ObservaçãoObservação

    Você pode precisar limpar o cache do navegador antes que as alterações aparecem.

Altere o tema

Folhas de estilo em cascata (CSS) para definir o tema do cliente.Você pode alterar o tema padrão para alterar a aparência do cliente, ou você pode substituir esse tema modificando o arquivo .css.Você usará uma ferramenta da Web, ThemeRoller, para criar o arquivo da.css com um tema personalizado.

Para alternar entre temas

  1. Em Gerenciador de Soluções, escolha O modo de Arquivo da lista na barra de ferramentas.

  2. Abra o arquivo de default.htm e em seguida, no editor de códigos, substituir a linha <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> com o seguinte código:

    <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" />
    
  3. Em Gerenciador de Soluções, expanda o nó de Conteúdo , e abra o arquivo de user-customization.css .

  4. Procure o arquivo pelo comentário /* if light theme change ‘white’ to ‘black */*/, e substitua em msls-white-icons com a seguinte cadeia de caracteres em cada uma das quatro ocorrências:

    msls-black-icons
    
  5. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

Para personalizar um tema existente

  1. No navegador da web, ThemeRoller navegue para o site.

  2. Na barra de ferramentas de ThemeRoller, escolha o botão de Importação ou atualização .

    A caixa de diálogo de Importar Tema aparece.

  3. No Visual Studio, em Gerenciador de Soluções, escolha O modo de Arquivo da lista na barra de ferramentas.

  4. Expanda o nó de Conteúdo , e abra o arquivo de light-theme.css .

  5. No editor de códigos, copie todo o conteúdo do arquivo.

  6. Em ThemeRoller, cole o conteúdo do arquivo de light-theme.css na caixa de diálogo de Importar Tema , e então escolha o botão de Importar .

  7. No painel esquerdo, escolha a guia de Global em seguida, expanda o nó de Raios do canto .

  8. Na caixa de texto de Grupo , entre em 0.8em.

  9. Na caixa de texto de Botão , entre em 1.5em.

    Os elementos de interface do usuário no painel à direita têm agora arredondado cantos.

  10. Na guia da, B escolha o link de Excluir .

    LightSwitch usa apenas Global e as configurações de Exemplo de A folha .Se você remover exemplos de folha adicionais, o tamanho do arquivo .css diminui.

  11. Repita o processo para remover exemplos de folha adicionais.

  12. No painel direito, arraste uma cor de paleta de cores da área de plano de fundo de Exemplo de A folha.

  13. Arraste outra cor no elemento de Opção 1 .

    Todos os elementos inter-relacionados também altera a cor.Quando você apontar para um elemento, alterações a uma cor complementar, indicando a cor de seleção.

  14. Na barra de ferramentas de ThemeRoller, escolha o botão de Baixar .

  15. Na caixa de diálogo de Baixar o tema , escolha o botão de Baixar o CEP .

  16. Extrair o conteúdo do arquivo compactado em uma pasta local.

  17. Em Gerenciador de Soluções, abra o menu de atalho para o nó de ConteúdoAdicionar, escolha, e escolha Item Existente.

  18. Na caixa de diálogo de Adicionar item existente , navegue até a pasta onde você extraiu os arquivos, escolha o arquivo de my-item.css , e escolha o botão de Adicionar .

  19. Abra o arquivo de default.htm, localize a linha <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> no editor de códigos, e substituir a linha com o seguinte código:

    <link rel="stylesheet" type="text/css" href="Content/my-theme.css" charset="utf-8" />
    
  20. Na barra de menu, escolha Depurar, Iniciar Depuração para executar o cliente.

Republish o cliente

Agora que o cliente estiver concluída, você republish ao IIS.

Para republish o cliente

  1. Em Gerenciador de Soluções, escolha o nó de ContosoMoving .

  2. Na barra de menu, escolha Compilar, Publicar ContosoMoving.

  3. Em LightSwitch publica o assistente de aplicativo, escolha o botão de Publicar para publicar o cliente.

  4. Na barra de endereços do navegador, entre em http://IISServer/contosomoving/mobileclientIISServer , onde é o nome do servidor onde você publicou o cliente.

  5. Quando solicitado para um nome de usuário e uma senha, entre em ACarter como o usuário e a senha em pass@word1 como.

    O cliente reflete as alterações mais recentes que você fez.

    ObservaçãoObservação

    Você pode precisar limpar o cache do navegador.

Consulte também

Outros recursos

Telas do cliente HTML para aplicativos do LightSwitch