Índice
Índice |
---|
maxLevel | 4 |
---|
outline | true |
---|
exclude | .*ndice |
---|
style | none |
---|
|
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 um widget (ou seja, as telas), existe a concepção inicial de que ela é formada por dois arquivos FreeMarker (.ftl): um para visualização e outro para edição. Geralmente esta estrutura é composta por um único arquivo JavaScript (.js). A seguir, veremos cada um dos componentes.
Modo de Visualização
Por padrão, o renderizador de páginas da plataforma Fluig seleciona o arquivo "view.ftl" dentro do widget para a renderização do modo de visualização. Caso o desenvolvedor deseje especificar um outro arquivo .ftl como padrão para o modo de visualização, é necessário informá-lo na propriedade view.file no arquivo application.info. Por exemplo:
Bloco de código |
---|
|
view.file=visualizacao.ftl |
Modo de Edição
Por padrão, o renderizador de páginas da plataforma Fluig seleciona o arquivo "edit.ftl" dentro do widget para a renderização do modo de edição. Caso o desenvolvedor deseje especificar um outro arquivo .ftl como padrão para o modo de edição, é necessário informá-lo na propriedade edit.file no arquivo application.info. Por exemplo:
Bloco de código |
---|
|
edit.file=edicao.ftl |
Nota |
---|
|
Caso não exista uma propriedade edit.file no application.info e nem um arquivo "edit.ftl" na estrutura do widget, o renderizador entenderá que esse widget não possui modo de edição. |
Variáveis de ambiente FTL & JS
Quando é utilizada a extensão de Super Widget em um 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
}); |
Já 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> |