Índice

Índice

...

Índice
maxLevel 4 outline true style none exclude .*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
language text
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
language text
edit.file=edicao.ftl

Informaçõesnote
title Importante
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:

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:

<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>