Layout File

O Layout File é um arquivo HTML que define a apresentação de uma página. Ao adicionar ou editar as propriedades de uma página é possível configurar como seu conteúdo final será montado conforme os tópicos "Administração de Páginas" e "Administração de Canais". Se a opção escolhida for " Arquivo de Layout " a página irá utilizar o HTML informado transformando seu conteúdo estático em conteúdo dinâmico, conforme as configurações da página. O arquivo HTML deve ser colocado no classpath (pode ser na aplicação web do portal ou em um módulo instalado no portal), em lumisdata/shared/def ou no diretório def de um tema.

Qualquer arquivo HTML pode ser um Layout File, sem a necessidade de ser um XHTML, mas é preciso que seu conteúdo seja válido. Por exemplo, a tag <table> precisa ser fechada mas a tag <br> não precisa.

Para realizar a transformação das informações estáticas em informações dinâmicas é necessário adicionar marcadores no HTML. Os marcadores definem quais informações estáticas devem ser transformadas em informações dinâmicas e como a transformação deve ocorrer. A informação estática original é considerada um HTML de exemplo, e deve ser mantida no Layout File com objetivo de facilitar a prototipação das páginas.

Os marcadores do Layout File se distinguem das tags e atributos do HTML através de namespaces . Existem dois namespaces possíveis:

http://www.lumis.com.br/lumisportal/xsd/layoutfile/page: Define tags e atributos relacionados à página;
http://www.lumis.com.br/lumisportal/xsd/layoutfile/el: Define tags e atributos permitindo inclusão de Expression Language na página.

O principal marcador do Layout File é a tag page:holder. Esta tag é utilizada para definir qual elemento do HTML será utilizado para definir uma área onde se pode arrastar as instâncias de interface na página.

Exemplo

AخA
 
<html> 
<head> 
  <title>Página de Exemplo</title> 
  <style type="text/css"> 
         .box { margin:20px; width: 450px; height: 200px; border: 1px dotted black; } 
  </style> 
</head> 
<body> 
  <h1>Página de Exemplo</h1> 
  <div page:holder="area_1" class="box">Área 1</div> 
  <div page:holder="area_2" class="box">Área 2</div> 
</body> 
</html>