Quando você está criando seus aplicativos de negócios e visualizações, o designer de baixo código oferece opções mais avançadas para configurar a aparência de tempo de design de suas visualizações. Usando o código HTML e JavaScript , suas visualizações podem ter uma aparência de tempo de design que mais se assemelha à aparência de tempo de execução da visualização, dando aos desenvolvedores de interface uma ideia mais precisa de como suas visualizações serão para os usuários do aplicativo. Em alguns casos, o mesmo código que é usado para a visualização do tempo de execução pode ser aproveito na tela da página.
Procedimento
- A maneira mais simples de fornecer uma aparência de tempo de design para visualizações que refletem precisamente a
aparência do tempo de execução é por meio de um fragmento de HTML. O snippet HTML é carregado como um arquivo web, então selecionado na seção de visualização avançada no editor de visualização. Esse arquivo deve ser um arquivo HTML com um snippet que representa a visualização.
- Criar um snippet HTML.
Esse arquivo deve ser um arquivo HTML com um snippet que representa a visualização. Por exemplo:
<div>
<button class="DesignLabel"></button>
</div>
O fragmento de HTML
tem alguns recursos que permitem que caixas de conteúdo e rótulos sejam colocados apropriadamente.
Class: DesignLabel- Essa classe é colocada no elemento HTML que representa o rótulo, se a visualização suportar um
rótulo. O editor coloca a cadeia de etiqueta como o conteúdo HTML interno deste elemento. Um fragmento pode ter várias etiquetas, e a etiqueta é aplicada e atualizados para todos os elementos.
Class: DesignContentBox- Essa classe é utilizada para indicar onde uma caixa de conteúdo declarado devem estar localizados na visualização. Se esta classe for usada, então o elemento também deve ter o atributo
data-designContentBoxID definido. Este atributo deverá ser definido como o ID de controle da caixa de conteúdo declarado. Se várias caixas de conteúdo são declaradas, cada uma pode ser exclusivamente posicionado na visualização HTML. Se uma caixa
de conteúdo for declarada no layout da visualização, mas não houver uma div no modelo HTML com a
classe DesignContentBox e o data-designContentBoxID correspondente, o
editor colocará a instância de caixa de conteúdo no término da renderização da visualização.
Nota: Os nomes da classe Design* são reservados pelo editor. Fragmentos não deve utilizar as classes correspondentes a este padrão. Da mesma forma, os nomes de atributos data-design* devem ser evitados.
A seguir está um snippet HTML exemplo :
<div>
<h2 class="DesignLabel"></h2>
<div class="DesignContentBox" data-designContentBoxID="ContentBox1">
</div>
- Adicionar arquivos externos ao seu projeto de aplicação ou kit de ferramentas.
- Alternar para Overview e, sob visualização Avançada, selecione o arquivo que contém o trecho HTML.
- Se um fragmento HTML sozinho não puder fornecer a experiência de visualização de tempo de design desejada, também será possível especificar um arquivo da web contendo um manipulador JavaScript .
Um manipulador JavaScript permite a manipulação do DOM de tempo de design em reação a mudanças de modelo O manipulador JavaScript pode trabalhar em conjunto com um fragmento HTML ou pode manipular a própria visualização inteira.
O manipulador JavaScript consiste em um arquivo JavaScript com mixObject definido. O mixObject pode implementar uma ou mais funções que o editor de chamadas durante o ciclo do editor. Você também pode definir funções adicionais, mas os nomes deverão ser prefixados com o coachViewImpl, por exemplo, coachViewImpl_calcValue(). Se você deseja armazenar informações adicionais em this, então ele deverá ser colocado no objeto this.context.coachViewData . Tanto a função convenção de nomenclatura e local de armazenamento variável da instância são utilizados para evitar conflitos em versões futuras do produto.
A seguir há um exemplo de um manipulador JavaScript simples que fornece um rótulo de visualização e uma imagem para uma visualização de botão
var mixObject = {
createPreview:function(containingDiv, labelText, callback){
require([ "dojo/dom-construct"], this.lang.hitch(this, function(domConstruct){
var buttonDiv = domConstruct.create("div");
domConstruct.place(buttonDiv, containingDiv);
var button = domConstruct.create("button");
domConstruct.place(button, buttonDiv);
this.context.coachViewData.labelTextDom = document.createTextNode(labelText);
button.appendChild(this.labelTextDom);
callback();
}));
},
propertyChanged:function(propertyName, propertyValue){
if(propertyName=="@label" && this.context.coachViewData.labelTextDom){
this.context.coachViewData.labelTextDom.data = propertyValue;
}
},
};