Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch
É possível adicionar controles HTML personalizados a uma tela em um cliente de aplicativo LightSwitch. Usando controles personalizados, é possível exibir ou coletar informações de maneira que excedam os recursos dos controles HTML internos do LightSwitch.
Referenciando controles personalizados
Para usar um controle personalizado em uma tela, você deve primeiro adicionar uma referência de arquivo ao projeto e adicionar uma marca de script ao arquivo default.htm.
Para referenciar um controle personalizado
No Gerenciador de Soluções, abra o menu de atalho da pasta Scripts, escolha Adicionar e Item Existente.
Escolha o arquivo JavaScript (.js) do controle personalizado e o botão Adicionar.
Dica
Alguns controles personalizados exigem que você também referencie arquivos de suporte adicionais.Consulte a documentação do controle personalizado para obter todos os requisitos.
Na seção <script> do arquivo default.htm de seu projeto, adicione uma marca de script que se assemelha ao exemplo a seguir, em que MyControl é 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
É possível adicionar um novo controle personalizado a uma tela ou substituir um controle HTML existente no LightSwitch.
Para adicionar um controle personalizado a uma tela
Na Árvore de Conteúdo da Tela, escolha qualquer grupo.
Na barra de ferramentas Designer de Tela, na lista Adicionar Item de Layout, escolha Controle Personalizado.
A caixa de diálogo Adicionar Controle Personalizado é aberta.
Na caixa de texto Especificar os dados para o novo controle personalizado, insira o item ou a coleção a serem associados ao controle.
Por exemplo, insira Customers.selectedItem.PostalCode para associar a um CEP de cliente ou Customers.selectedItem para associar ao registro inteiro do cliente.
Adicione o 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 por um controle personalizado
Na Árvore de Conteúdo da Tela, escolha o controle que você deseja substituir.
Na janela Propriedades, abra a lista Tipo de Controle e escolha Controle Personalizado.
Adicione o 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 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
Na Árvore de Conteúdo da Tela, escolha o controle personalizado.
Na janela Propriedades, escolha o hiperlink Editar Código de Renderização.
No editor de códigos, adicione o código semelhante ao seguinte exemplo ao método de renderização:
createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);Esse código renderiza o controle no tempo de execução. Substitua MyControl pelo nome do seu controle e altere os parâmetros max-height e max-width conforme necessário.
Adicione código para qualquer funcionalidade adicional que o controle exija. Consulte a documentação do controle personalizado para obter todos os requisitos.