Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch
Você pode adicionar controles personalizados HTML a uma tela em um cliente para um aplicativo de LightSwitch .Usando controles personalizados, você pode exibir ou colete informações sobre as maneiras que vai além de recursos internos de controles HTML para LightSwitch.
Referenciando controles personalizados
Para usar um controle personalizado em uma tela, você deve primeiro adicionar uma referência de arquivo para o projeto, e em seguida você adiciona uma tag de script para o arquivo de default.htm.
Para fazer referência a um controle personalizado
Em Gerenciador de Soluções, escolha O modo de Arquivo da lista na barra de ferramentas.
Abra o menu de atalho para a pasta de ScriptsAdicionar, escolha, e escolha Item Existente.
Escolha o arquivo Javascript (.js) para o controle personalizado, e então escolha o botão de Adicionar .
.gif "Observação")
ObservaçãoAlguns controles personalizados exigem que você também referencia os arquivos de suporte adicional.Consulte a documentação para o controle personalizado para os requisitos.
<script> Na seção do arquivo de default.htm para seu projeto, adicione uma marca de script que se assemelha ao seguinte exemplo MyControl , onde é o nome do seu controle personalizado:
<script type=”text/javascript” src=”Scripts/MyControl.js” charset=”utf-8”></script>
Adicionando Novos Controles e Substituindo Controles Existentes
Você pode adicionar um novo controle personalizado à tela ou substituir um controle existente HTML em LightSwitch.
Para adicionar um controle personalizado a uma tela
Em Árvore de Conteúdo da Tela, escolha qualquer grupo.
Na barra de ferramentas Designer de Tela, na lista Adicionar o item de layout, escolha Controle Personalizado.
A caixa de diálogo de Adicionar Controle Personalizado abre.
Na caixa de texto de Especifique os dados do novo controle personalizado , insira o item ou a coleção para ser associados ao controle.
Por exemplo, entre em Customers.selectedItem.PostalCode para associar o código postal de um cliente, ou entre em Customers.selectedItem para associar ao registro inteiro de cliente.
Adicione código que associa os dados a uma propriedade específica do controle.
Para obter mais informações, consulte Associando dados a uma propriedade de controle personalizado posteriormente neste tópico.
Para substituir um controle existente com um controle personalizado
Em Árvore de Conteúdo da Tela, escolha o controle que você deseja substituir.
Na janela de Propriedades , abra a lista de Tipo de controle , e então escolha Controle Personalizado.
Adicione código que associa os dados a uma propriedade específica do controle.
Para obter mais informações, consulte Associando dados a uma propriedade de controle personalizado posteriormente neste tópico.
Associando Dados a uma Propriedade do Controle Personalizado
Você deve associar os dados que você especificou na caixa de diálogo Adicionar Controle Personalizado a uma propriedade específica do controle personalizado.
Para associar dados a uma propriedade do controle personalizado
Em Árvore de Conteúdo da Tela, escolha o controle personalizado.
Na janela de Propriedades , escolha o hiperlink da A edição processa o código .
No editor de códigos, adicione o código que lembra o exemplo a seguir ao processar método:
createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);Esse código processa o controle em tempo de execução.Substitua MyControl com o nome do seu controle, e modificar os parâmetros de max-height e de max-width conforme necessário.
Adicione código para quaisquer funcionalidades adicionais que o controle exija.Consulte a documentação para o controle personalizado para os requisitos.