Como modificar uma tela HTML usando código

Ao projetar telas HTML para um aplicativo LightSwitch, você usa principalmente designers e janelas de ferramenta, mas também é possível usar código para modificar essas telas de maneiras específicas. Usando APIs JavaScript do LightSwitch, é possível realizar as seguintes tarefas relacionadas aos dados.

• Set a default value on a data entry screen

• Format a number

• Format a Date

• Change the background color and font color for list items

• Mark fields as required

• Validate data on a screen

• Delete an item from a screen or a popup

• Create a custom modal picker by using a popup

• Center a popup on a screen

• Show a message box, and respond to a user selection

• Set the screen title dynamically

• Change the title of an application

• Enable or disable a button

• Customize the Save command to save to multiple data sources

• Return focus to a selected item in a list

• Use a JQuery Mobile control

• Customize a FlipSwitch control

• Implement a CheckBox control

• Override the appearance of a custom control

• Get the location of a device

• Display a location on a map

• Show a numeric keyboard on a device

• Adjust the UI for different form factors

• Render HTML data directly on a screen

• Display a title on a popup

• Copy information to a new screen

• Change screen navigation when saving

• Disable bookmarking

Definir um valor padrão em uma tela de entrada dos dados

Ao criar uma tela de entrada de dados, você talvez queira popular alguns campos com valores padrão. Por exemplo, você talvez queira definir o valor padrão de um campo de data como a data atual. Para definir valores padrão em qualquer tela Adicionar/Editar Detalhes que tenha uma entidade como alvo, você grava código no método created dessa entidade.

Para definir valores padrão

1. No Entity Designer, na barra Perspectiva, escolha a guia HTMLClient.

2. Na lista Gravar Código, escolha criado.

3. No Editor de Códigos, defina os valores iniciais adicionando código ao método created:

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

   Qualquer tela Adicionar/Editar Detalhes criada para a entidade exibirá automaticamente esses valores padrão.

Formatar um número

Como alguns dispositivos móveis possuem espaço de tela limitado, você talvez queira formatar números para mostrar menos precisão. O exemplo a seguir mostra como formatar um número armazenado como um Double para mostrar apenas duas casas decimais.

Para formatar um número

1. No Designer de Tela, escolha o nó para do número que você deseja formatar.

2. Na barra de ferramentas, abra a lista Gravar Código e, em seguida, escolha o método postRender.

3. No Editor de Códigos, adicione o seguinte código ao método postRender:

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

Formatar uma Data

Para alterar o formato de exibição de uma data, você deve usar uma biblioteca JavaScript como, por exemplo, Moment.js. Depois de adicionar a biblioteca ao projeto, você adicionará uma referência no arquivo default.htm e, em seguida, gravará o código no método Render ou postRender.

Para adicionar a biblioteca

1. No Gerenciador de Soluções, abra o menu de atalho do nó HTMLClient e, em seguida, escolha Gerenciar Pacotes NuGet.

2. Na caixa de diálogo Gerenciar Pacotes NuGet, escolha o nó Online.

3. Na caixa de texto Pesquisar Online, digite moment.js.

4. Escolha o botão Instalar para instalar a biblioteca Moment.js e, em seguida, escolha o botão Fechar.

Para adicionar uma referência

1. Em Gerenciador de Soluções, expanda o nó HTMLClient e, em seguida, abra o arquivo default.htm.

2. No editor de códigos, adicione a seguinte marca de script após a última marca </script>:

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

Para formatar datas

1. No Gerenciador de Soluções, abra a tela onde você talvez queira formatar uma data.

2. No Designer de Tela, escolha o nó onde você deseja aplicar o formato de data.

3. Na barra de ferramentas, abra a lista Gravar Código e, em seguida, escolha o método postRender.

4. No Editor de Códigos, adicione o seguinte código ao método postRender:

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

Alterar a cor do plano de fundo e a cor da fonte dos itens de lista

A aparência de um controle ListView é determinada por uma folha de estilos em cascata (CSS), e o estilo é bem complexo. Em vez de tentar editar o CSS, é possível usar o método postRender para alterar as cores no código. Não é possível alterar o estilo do ListView, mas é possível alterar o estilo de cada Item de Lista por meio do pai, RowTemplate. Como cada Item de Lista tem background-image definido, você precisará especificar um background-image antes de aplicar uma nova cor do plano de fundo.

Para alterar as cores

1. No designer de tela, escolha o nó Layout das Linhas (ou Layout das Colunas) para obter uma lista.

2. Na janela Propriedades, escolha o link Editar Código PostRender.

3. No Editor de Códigos, adicione o seguinte código ao método postRender:

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

Marcar campos conforme necessário

Uma convenção comum para mostrar campos obrigatórios em uma tela é dar uma dica visual como, por exemplo, usar uma cor de fonte diferente e exibir um asterisco próximo do nome do campo.

Para realçar um campo obrigatório

1. No designer de tela, escolha o campo a ser marcado como obrigatório.

2. Na janela Propriedades, escolha o link Editar Código PostRender.

3. No Editor de Códigos, adicione o seguinte código ao método postRender:

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

Validar dados em uma tela

Fornecendo-se uma lógica de validação personalizada, é possível garantir que apenas dados válidos sejam salvos em uma fonte de dados. É possível adicionar um código de validação no método beforeApplyChanges, chamado quando o usuário toca o botão Salvar em uma tela Adicionar/Editar. No exemplo a seguir, uma mensagem notificará um usuário que digita um ponto de exclamação no campo ContactName que o caractere não é permitido nesse campo.

Para validar dados

1. No Designer de Tela, na lista Gravar Código, selecione beforeApplyChanges.

2. No Editor de Códigos, adicione o seguinte código, substituindo Contact pelo nome da entidade e ContactName pelo nome do campo de cadeia de caracteres que você deseja 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;
   
       }
   

Excluir um item de uma tela ou um pop-up

O LightSwitch oferece métodos internos para adição e edição de itens em uma tela HTML, mas não para excluí-los. É possível criar o próprio método para excluir itens de uma tela ou de um pop-up.

Para excluir um item

1. No Designer de Tela, na barra de ferramentas, escolha o botão Adicionar Item de Dados.

2. Na caixa de diálogo Adicionar Item de Dados, escolha o botão de opção Método e, em seguida, insira um nome para o método.

3. Abra o menu de atalho do método e, em seguida, escolha Editar Código de Execução.

4. No Editor de Códigos, adicione o código a seguir, substituindo myScreen pelo nome da tela e ambas as instâncias de customers pelo nome da entidade:

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

   O método estará disponível na caixa de diálogo Adicionar Botão de qualquer tela ou pop-up que exiba a entidade.

Criar um selecionador modal personalizado usando-se um pop-up

Você poderá permitir que usuários escolham um item de uma lista se exibir uma caixa de diálogo modal, que é possível conseguir facilmente adicionando uma consulta de tela e um pop-up. Neste exemplo, você tem uma tela Adicionar/Editar Detalhes chamada AddOrders, que se baseia em uma entidade OrderDetails e em uma segunda entidade relacionada chamada Produtos.

Para criar um seletor modal

1. No Designer de Tela, na barra de ferramentas, escolha o botão Adicionar Item de Dados.

2. Na caixa de diálogo Adicionar Item de Dados, escolha o botão de opção Consulta e Produtos na lista.

   A consulta Produtos é exibida no painel esquerdo do Designer de Tela.

3. Na árvore de conteúdo, abra o menu de atalho do nó Popup e, em seguida, escolha Adicionar Pop-up.

4. Na lista Adicionar, escolha Produtos.

5. Na barra de ferramentas, na lista Gravar Código, escolha criado.

6. No Editor de Códigos, adicione o seguinte código ao método criado:

   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. No Designer de Tela, abra o menu de atalho do nó Barra de Comandos e, em seguida, escolha Adicionar Botão.

8. Na caixa de diálogo Adicionar Botão, escolha o botão OK.

9. (Opcional) Para limpar o campo, adicione um método de tela com o seguinte código:

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

Centralizar um pop-up em uma tela

O local padrão de um pop-up é na parte inferior de uma tela; canto inferior direito para telas mais largas. Em telas grandes, o local pode dificultar a observação do pop-up. O exemplo a seguir posiciona o pop-up no centro da tela, tornando-o mais visível.

Para centralizar um pop-up

1. No designer de tela, escolha o nó do botão que inicia o pop-up.

2. Na janela Propriedades, em Ações clique no link Tocar.

3. Na caixa de diálogo Editar Ação de Toque, escolha o botão de opção Gravar meu próprio método, nomeie-o e, em seguida, clique no botão OK.

4. Na janela Propriedades, escolha o link Editar Código de Execução.

5. No Editor de Códigos, adicione o seguinte código ao 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");
   

Exibir uma caixa de mensagem e responder a uma seleção do usuário

Mostrando uma caixa de mensagem, você pode oferecer aos usuários uma opção e, em seguida, realizar uma ação com base nas seleções. O exemplo a seguir exibe uma mensagem diferente em resposta a cada opção em uma caixa de mensagem Sim/Não/Cancelar. Em seu próprio código, você pode substituir o código de alerta pelo código para realizar sua própria ação, por exemplo, exibir telas diferentes com base na escolha do usuário.

Para mostrar uma caixa de mensagem

1. No Designer de Tela, abra o menu de atalho do nó Barra de Comandos e, em seguida, escolha Adicionar Botão.

2. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Gravar meu próprio método e, em seguida, nomeie o método ShowMessageBox.

3. No Editor de Códigos, adicione o seguinte código ao 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");
   
           }
   
       });
   

Definir o título da tela dinamicamente

Você talvez queira alterar o título da tela com base nas informações que não estão disponíveis no tempo de design como, por exemplo, o nome do cliente selecionado no momento. O exemplo de código a seguir exibe dinamicamente o título da tela chamada ViewCustomer, que se baseia em uma entidade chamada Cliente.

Para definir o título da tela

1. No Designer de Tela, na lista Gravar Código, selecione criado.

2. No Editor de Códigos, adicione o seguinte código ao método criado:

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

Alterar o título de um aplicativo

Por padrão, o nome do projeto é exibido como o título do aplicativo na tela inicial e na guia da barra de título ou do navegador. É possível especificar um título diferente modificando-se o arquivo default.htm para o projeto.

Para alterar o título

1. No Gerenciador de Soluções, no nó HTMLClient, abra o menu de atalho do arquivo default.htm e, em seguida, escolha Abrir.

2. No Editor de Códigos, localize o elemento <title> e substitua o valor existente pelo título.

   Essa cadeia de caracteres será exibida na barra de título ou na guia do navegador.

3. Localize o elemento <div> e substitua o valor existente pelo título.

   Essa cadeia de caracteres será exibida na tela inicial.

Habilitar ou desabilitar um botão

Você normalmente precisará habilitar ou desabilitar um botão com base em determinados critérios. Por exemplo, você talvez queira desabilitar um botão de inicialização da tela para determinados usuários ou habilitar um botão adicionar somente se um valor for necessário. O primeiro exemplo mostra como desabilitar um botão definindo-se a propriedade IsEnabled no código.

O segundo exemplo mostra uma abordagem de dois passos que se baseia no método CanExecute. Os dados são carregados de forma assíncrona no LightSwitch, mas os métodos CanExecute para os botões são síncronos. Portanto, não é possível habilitar um botão com base em dados carregados em um único passo, mas você pode implementar um método de dois passos usando a propriedade IsLoaded.

Para desabilitar um botão usando a propriedade IsEnabled

1. No Designer de Tela, na barra de ferramentas, escolha o botão Adicionar Item de Dados.

2. Na caixa de diálogo Adicionar Item de Dados, escolha o botão de opção Método e, em seguida, insira um nome para o método.

3. Abra o menu de atalho do método e, em seguida, escolha Editar Código de Execução.

4. No Editor de Códigos, adicione o seguinte código, substituindo MyButton pelo nome do botão:

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

   O método poderá ser chamado no código sempre que você precisar desabilitar ou habilitar o botão.

   Dica

   Para ocultar ou mostrar um botão, use a propriedade IsVisible.

Para habilitar um botão usando a propriedade IsLoaded

1. No Designer de Tela, na barra de ferramentas, escolha o botão Adicionar Item de Dados.

2. Na caixa de diálogo Adicionar Item de Dados, escolha o botão de opção Método e, em seguida, insira um nome para o método.

3. Abra o menu de atalho do método e, em seguida, escolha Editar Código CanExecute.

4. No Editor de Códigos, adicione o código a seguir, substituindo Orders pelo nome da entidade, Photo pelo nome da propriedade de entidade e GetPhoto pelo nome da função que você deseja executar:

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

   O método CanExecute é chamado quando a tela é criada. No primeiro passo, o código verifica se a propriedade Photo já foi carregada. Se não tiver sido, o código carregará os dados e a função será encerrada. Após os dados serem carregados, o método CanExecute será chamado novamente, e a ramificação else será executada. Desta vez, a função GetPhoto é executada sincronizadamente porque os dados já foram carregados, o que garante um resultado válido.

Personalizar o comando Salvar para salvar várias fontes de dados

É possível salvar atualizações em uma tela em várias fontes de dados usando-se o objeto WinJs Promise para personalizar o comando interno Salvar.

Para salvar em várias fontes de dados

1. No Designer de Tela, na barra de ferramentas, clique no botão Gravar Código.

2. No Editor de Códigos, adicione o seguinte código ao método onsavechanges, substituindo NorthwindData e ApplicationData pelos nomes das fontes de dados:

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

   Se precisar de mais fontes de dados, você poderá adicionar uma linha promises.push… a cada origem.

Retornar foco para um item selecionado em uma lista

Após a navegação de um item de lista para uma tela Exibir ou Editar, o comportamento padrão retornará o foco para o primeiro item na lista. Costuma ser desejável retornar o foco para o item de lista que iniciou a tela, especialmente em listas grandes que exigem rolagem. É possível modificar o comportamento para retornar ao item de lista selecionado anteriormente associando a um Custom Method e usando o método scrollTop JQuery.

Para definir o foco

1. No designer de tela, escolha o nó Lista onde você deseja implementar o comportamento.

2. Na janela Propriedades, em Ações clique no link Tocar.

3. Na caixa de diálogo Editar Ação de Toque, escolha o botão de opção Gravar meu próprio método e o botão OK.

4. Na janela Propriedades, escolha o link Editar Código de Execução.

5. No Editor de Códigos, adicione o seguinte código ao método Tap_execute:

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

Usar um controle Mobile JQuery

O Designer de Tela fornece um conjunto limitado de controles para exibir dados, mas é possível adicionar facilmente controles JQuery Mobile para conseguir uma experiência da interface do usuário de maior qualidade. A biblioteca JQuery Mobile Foundation contém uma grande variedade de controles que são otimizados para dispositivos móveis, inclusive controles deslizantes, botões de opção, caixas de seleção e muito mais. Consulte Estrutura JQuery Mobile.

O exemplo a seguir adiciona um controle deslizante para definir um valor numérico em um controle de caixa de texto.

Para adicionar um controle deslizante

1. No Designer de Tela, escolha o nó para um campo numérico.

2. Substitua o controle Caixa de Texto por um Controle Personalizado.

3. Na janela Propriedades, defina a propriedade Largura como Alongar para Contêiner.

4. Escolha o link Editar Código de Renderização e, no Editor de Códigos, adicione o seguinte código ao método render:

   createSlider(element, contentItem, 0, 100);
   

   Dica

   Os valores padrão para o controle deslizante variam de 0 a 100.Se necessário, substitua-os por valores que sejam apropriados ao aplicativo.

5. Adicione a seguinte função ao arquivo de código da tela:

   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 um controle FlipSwitch

O controle FlipSwitch que exibe valores Boolean fornece apenas duas opções para o texto de exibição: Sim/Não ou Ativado/Desativado. Se quiser exibir valores diferentes, será possível criar um controle personalizado com base no controle FlipSwitch. O exemplo a seguir cria um controle Verdadeiro/Falso.

Para personalizar o controle

1. No Designer de Tela, escolha o nó de um campo Boolean.

2. Altere o tipo de controle de FlipSwitch para Controle Personalizado.

3. Na janela Propriedades, escolha o link Editar Código de Renderização.

4. No editor de códigos, adicione o seguinte código ao método de renderização:

   createBooleanSwitch(element, contentItem);
   

5. Adicione a seguinte função ao arquivo de código da tela:

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

   Dica

   Talvez você precise definir a propriedade Largura para um valor de 150 ou maior a fim de fazer o controle ser exibido corretamente.

Implementar um controle CheckBox

O tipo de controle padrão de um tipo de dados Boolean é o controle FlipSwitch, mas é possível substituir facilmente CheckBox usando-se um controle personalizado.

Para exibir um CheckBox

1. No designer de tela, escolha o nó de um campo Boolean e altere o tipo de controle de FlipSwitch para Controle Personalizado.

2. Na janela Propriedades, na seção Altura, escolha Mín. e insira 100. Isso é necessário porque o controle CheckBox é maior do que um controle padrão Caixa de Texto. Se o formulário usar outros tipos de controle, você talvez precise ajustar esse valor.

3. Na seção Geral, escolha o link Editar Código de Renderização.

4. No Editor de Códigos, adicione o seguinte código ao 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;
           }
       });
   

Se estiver exibindo um CheckBox para um campo necessário em uma tela Adicionar/Editar, você também desejará definir um valor inicial para o controle; do contrário, o usuário pode obter um erro de validação.

Para definir um valor inicial

1. No Entity Designer, na barra Perspectiva, escolha a guia HTMLClient.

2. Na lista Gravar Código, escolha criado.

3. No Editor de Códigos, defina os valores iniciais adicionando código ao método created:

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

   Substitua FieldName pelo nome do campo Boolean. Para inicializar o controle em um estado desmarcado, substitua true por false.

Substituir a aparência de um controle personalizado

Os controles personalizados se baseiam na estrutura JQuery Mobile e a estrutura cria automaticamente estilos de determinados controles de forma que eles sejam otimizados para exibição em dispositivos móveis. Em alguns casos, você talvez queira substituir a aparência para fornecer um estilo mais tradicional. Por exemplo, os botões JQuery Mobile são maiores do que um controle de botão tradicional. É possível usar o atributo data-role="none" para substituir o estilo e exibir um botão normal.

Para aplicar o atributo

1. No designer de tela, escolha o nó de controle personalizado.

2. Na janela Propriedades, escolha o link Editar Código de Renderização.

3. Adicione o seguinte código ao método render:

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

   Dica

   Substitua textbox1 pelo nome do controle personalizado e “text” pelo tipo de controle.

Obter o local de um dispositivo

É possível habilitar cenários de mapeamento e com base na proximidade usando-se APIs de geolocalização para determinar o local atual de um determinado dispositivo. O exemplo a seguir determina as coordenadas para uma entidade chamada MyLocation com propriedades de tipo Double chamadas Latitude e Longitude.

Para obter o local

1. No Designer de Tela, na barra de ferramentas, clique no botão Gravar Código.

2. No Editor de Código, adicione o seguinte método:

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

Exibir um local em um mapa

Para adicionar facilmente a funcionalidade de mapeamento, você obtém uma chave de desenvolvedor gratuita no SDK do Bing Mapas e, em seguida, cria um controle personalizado que chama o serviço Web Bing Mapas.

O exemplo a seguir mostra os locais de cliente como pinos em um mapa, e é possível exibir detalhes sobre cada cliente tocando em um pino. Este exemplo exige que uma tela chamada BrowseCustomers seja anexada a uma entidade Clientes que tem os campos Endereço, Cidade e País e um pop-up chamado Detalhes deve estar na tela BrowseCustomers.

Para criar o controle personalizado

1. No Gerenciador de Soluções, escolha o nó Scripts e, em seguida, adicione um arquivo JavaScript chamado lightswitch.bing-maps.js.

2. No Editor de Código, adicione o seguinte código ao arquivo:

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

   Substitua o valor var _credentialsKey pela própria chave de desenvolvedor do Bing Mapas.

Para adicionar um mapa a uma tela

1. No Designer de Tela, escolha o nó onde você deseja adicionar um mapa e, em seguida, no menu de atalho, escolha Adicionar Controle Personalizado.

2. Na janela Propriedades, altere o Nome do controle para Mapa e, em seguida, escolha o link Editar Código de Renderização.

3. No Editor de Códigos, adicione o seguinte código ao 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. No Gerenciador de Soluções, alterne para Exibição de Arquivo.

5. No nó HTMLClient, abra o arquivo default.htm.

6. No Editor de Códigos, adicione a seguinte referência no início do bloco de referências do script:

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

7. Ao final do bloco de referências de script, adicione uma referência ao arquivo JavaScript:

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

Mostrar um Teclado Numérico em um Dispositivo

É possível permitir que os usuários digitem informações numéricas ou outros tipos informações usando-se um teclado na tela personalizado. O exemplo a seguir mostra como exibir um teclado numérico quando um usuário ativa um controle Caixa de Texto.

Para mostrar um teclado numérico

1. No Designer de Tela, escolha um nó Caixa de Texto para um campo que deve conter dados numéricos.

2. Na janela Propriedades, escolha o link Editar Código PostRender.

3. No Editor de Códigos, adicione o seguinte código ao método PostRender:

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

   Dica

   É possível usar a mesma técnica para mostrar um teclado para um tipo diferente de entrada, mas não mostrar um teclado para o tipo de entrada color em um cliente HTML de um aplicativo LightSwitch.

Ajustar a interface do usuário para fatores forma diferentes

É possível garantir que o aplicativo funciona bem em vários dispositivos móveis caso você personalize a interface com base no tamanho da tela. Por exemplo, você pode mostrar o endereço completo de um cliente em um tablet, mas ocultar as mesmas informações em um telefone para reduzir a rolagem.

Para ocultar um elemento de interface do usuário em alguns dispositivos

1. No Designer de Tela, escolha o nó que você deseja ocultar, expanda a lista Gravar Código e, em seguida, escolha o método postRender.

2. No Editor de Códigos, adicione o seguinte código:

   $(element).addClass("hidden-on-phone");
   

3. No Gerenciador de Soluções, alterne para Exibição de Arquivo e, em seguida, expanda o nó Conteúdo do projeto HTMLClient.

4. Abra o arquivo user-customizations.css.

5. No Editor de Códigos, adicione o seguinte código ao final da seção @media:

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

   Esse código é adicionado à consulta de mídia existente que determina a orientação da tela. Quando o aplicativo for exibido em um telefone, o campo não aparecerá.

Também é possível mostrar telas iniciais diferentes em telefones e tablets adicionando-se código JavaScript ao arquivo default.htm.

Para exibir telas iniciais diferentes em dispositivos diferentes

1. No Gerenciador de Soluções, escolha o nó HTMLClient e, em seguida, abra o arquivo default.htm.

2. No Editor de Códigos, substitua o elemento de script que contém a função msls.run() pelo seguinte código:

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

   Substitua BrowseCustomersSmall pelo nome da tela para telefones e substitua BrowseCustomers pelo nome da tela para tablets.

Renderizar dados HTML diretamente em uma tela

Alguns bancos de dados armazenam HTML em campos de dados String. O aplicativo LightSwitch interpretará essas informações como cadeias de caracteres regulares e exibirá o HTML bruto em um controle Texto em uma tela, marcas e em tudo. É possível renderizar o HTML real na tela usando-se um controle personalizado e o método render.

Aviso

Para evitar um risco à segurança, só siga essa abordagem se você tiver certeza de que o HTML vem de uma fonte confiável.

Para renderizar o HTML em uma tela

1. No Designer de Tela, escolha o nó que representa o campo HTML e, em seguida, altere o tipo de controle para Controle Personalizado.

2. Na janela Propriedades, escolha o link Editar Código de Renderização.

3. No Editor de Códigos, adicione o seguinte código ao método render:

   element.innerHTML = contentItem.stringValue;
   

Exibir um título em um pop-up

Os pop-ups fornecem uma maneira rápida e fácil de exibir ou inserir informações sem navegar para outra tela. Diferentemente das telas, eles não exibem um título, mas você talvez queira exibir um título ou outro texto estático em um pop-up. O exemplo a seguir mostra como exibir um título e personalizar sua fonte.

Para adicionar um título

1. No Designer de Tela, na barra de ferramentas, escolha o botão Adicionar Item de Dados.

2. Na caixa de diálogo Adicionar Item de Dados, adicione uma Propriedade Local do tipo String.

3. No Designer de Tela, adicione a propriedade local ao Popup e, em seguida, altere o tipo de controle para Texto.

4. Na janela Propriedades, defina a propriedade LabelPosition como Nenhum.

5. No Designer de Tela, abra a lista Gravar Código e, em seguida, escolha o método postRender.

6. No Editor de Códigos, adicione o seguinte código ao método postRender:

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

Copiar informações para uma nova tela

Em aplicativos de entrada de dados, normalmente há necessidade de duplicar algumas das informações de uma tela de entrada para a próxima. É possível implementar facilmente uma função de cópia usando-se o método beforeShown de um formulário. No exemplo a seguir, um botão Copiar é adicionado a uma tela AddEditCustomers, abrindo uma nova tela pré-populada com País e Região do cliente atual.

Para copiar informações

1. No Designer de Tela, escolha o nó Barra de Comandos da tela AddEdit onde você deseja adicionar um botão Copiar.

2. Na barra de ferramentas, escolha o botão Adicionar Item de Layout e Botão.

3. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Gravar meu próprio método, nomeie o método como Copiar e escolha o botão OK.

4. No painel esquerdo, escolha o nó Copiar e, na barra de ferramentas, abra a lista Gravar Código e escolha Copy_execute.

5. No Editor de Códigos, adicione o seguinte código ao 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;
           }
       })
   

Alterar navegação na tela durante a gravação

O comportamento padrão do botão Salvar em uma tela Adicionar/Editar é fechar a tela e retornar à tela que o iniciou. Em alguns casos, talvez você queira navegar até uma tela diferente, por exemplo, uma tela Exibir que exibe os dados recém-adicionados em um formato diferente. É possível fazer isso gravando o código no método afterClosed do botão que inicia a tela Adicionar/Editar. No exemplo a seguir, um botão Adicionar e Exibir Pedido é adicionado a uma tela, modificando o comportamento de forma que uma tela Exibir seja mostrada após a gravação.

Para navegar até uma nova tela

1. No Designer de Tela, escolha o nó Barra de Comandos da tela Procurar onde você deseja adicionar um botão.

2. Na barra de ferramentas, escolha o botão Adicionar Item de Layout e Botão.

3. Na caixa de diálogo Adicionar Botão, escolha o botão de opção Gravar meu próprio método, nomeie o método como AddAndViewOrder e escolha o botão OK.

4. No painel esquerdo, escolha o nó AddAndViewOrder e, na barra de ferramentas, abra a lista Gravar Código e escolha AddAndViewOrder _execute.

5. No Editor de Códigos, adicione o seguinte código ao 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);
               }
           }
       })
   

   Observe que o código também identifique a criação de um novo pedido na função beforeShown. Isso substitui o comportamento de formulário AddEdit padrão e identifica o caso em que um usuário descarta alterações.

Desabilitar indicador

O recurso indicador das telas do cliente HTML permite que um usuário copie a URL de uma instância de tela específica e retorne para aquela instância posteriormente. A URL tem base parcial na chave primária da entidade da tela, então se a chave primária tiver informações sigilosas como um SSN, pode ser que você queira impedir os usuários de vê-la desativando o recurso indicador. O código a seguir desabilita o indicador removendo o identificador da entidade (a parte entre o nome da tela e a ID da sessão) da URL.

Para desabilitar o indicador

1. Em Gerenciador de Soluções, expanda o nó HTMLClient e, em seguida, selecione default.htm e abra-o.

2. No Editor de Códigos, localize a linha $(document).ready(function () { e adicione a seguinte linha de código imediatamente abaixo:

   msls.application.options.disableUrlScreenParameters = true;
   

   O identificador da entidade será removido da URL e os usuários não poderão mais usá-los nas telas.

Consulte também

Conceitos

Cliente HTML com referência API