Histórico da Página
Aviso |
---|
Liberar na 1.5. Revisão Ok. Falta incluir as imagens. |
Índice
Índice
...
Índice | ||||||||
---|---|---|---|---|---|---|---|---|
|
Objetivo
O objetivo deste guia é apresentar as características dos modos de visualização e edição de widgets.
Modo de visualização vs. modo de edição
No que poderíamos chamar de "camada de apresentação" de uma um widget (ou seja, as telas), existe a concepção inicial de que ela é formada por dois arquivos freemarker (.ftl): Um um para visualização e outro para edição. Geralmente faz parte dessa estrutura um único aquivo arquivo javascript (.js). A seguir, veremos cada um dos componentes.
Modo de Visualização
...
...
TODO: Image de uma das widgets criadas no kit em modo de exibição
...
Por padrão, o renderizador de páginas da plataforma Fluig fluig procura dentro da widget por um arquivo chamado "view.ftl" dentro do widget. Caso exista a propriedade view.file no arquivo application.info, então o arquivo informado como valor é o que será considerado pelo renderizador. Por exemplo:
Bloco de código | ||
---|---|---|
| ||
view.file=visualizacao.ftl |
Modo de Edição
...
...
TODO: Image de uma das widgets criadas no kit em modo de edição
...
Por padrão, o renderizador de páginas da plataforma Fluig fluig procura dentro da widget por um arquivo chamado "edit.ftl" dentro do widget. Caso exista a propriedade edit.file no arquivo application.info, então o arquivo informado como valor é o que será considerado pelo renderizador. Por exemplo:
Bloco de código | ||
---|---|---|
| ||
edit.file=edicao.ftl |
Informaçõesnote | ||
---|---|---|
| ||
Caso não exista a propriedade edit.file e nem um arquivo "edit.ftl", o renderizador entenderá que essa esse widget não possui modo de edição. |
Variáveis de
...
ambiente FTL & JS
Quando utilizando é utilizada a extensão de Super Widget em seu arquivo *.js (javascript), existe uma função herdada chamada "isEditMode". Veja o exemplo abaixo:
Bloco de código | ||
---|---|---|
| ||
var MinhaWidget = SuperWidget.extend({ init: function() { if (this.isEditMode) { // código para ser executado quando estiver em modo de edição } else { // código para ser executado quando estiver em modo de exibição } }, // restante do código omitido }); |
Ou, no arquivo *.ftl (freemarker) pode-se usar o seguinte código:
Bloco de código | ||
---|---|---|
| ||
<div class="fluig-style-guide"> <#if pageRender.isEditMode()=true> <!-- Execute uma ação quando estiver em modo de edição --> <#else> <!-- Execute outra quando estiver em modo de exibição --> </#if> </div> |