如何为动态布局构建FTL模板



我正在构建一个freemarker模板来生成一个jsp视图。在两列中使用布局,其中表单中的每个字段都是浮动的,并占据列的整个宽度。

每个字段类型都在一个独立的FTL中,可以轻松添加和删除字段。

FTL模板有以下代码:

<#if (data)?has_content>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<#include "estructura/Cabecera.ftl">
<s:include value="${tipoFormulario}_${data.Artefacto.nombreSubModulo?lower_case}_scripts.jsp"></s:include>
</head>
<body>
<div class="" id="dim-listas">
<s:fielderror />
</div>
<s:form theme="simple" action="Mostrar${data.Artefacto.nombreSubModulo?cap_first}.action">
<#-- Estructura en columnas, parseo usando CSS -->
<#list data.Artefacto.formulario.grupoCampos as grupoCampos>
<div class="grupoCampos" <#if grupoCampos[0].@id[0]?has_content >id="${grupoCampos[0].@id[0]!}"</#if> <#if grupoCampos[0].@estilo[0]?has_content >style="${grupoCampos[0].@estilo[0]!}"</#if>>
<#list grupoCampos?children as nodos>
<#if nodos?node_type = 'element' && chequearPermisos(nodos[0].@permiso[0]!"all")>
<#if ((nodos[0].@mostrar[0]!"todos") == 'todos' || (nodos[0].@mostrar[0]!"todos") == tipoFormulario)> 
<div style="${nodos[0].@estilo[0]!}" <#if nodos[0].@id[0]?has_content>id="${nodos[0].@id[0]!}"</#if> class="${nodos?node_name} ${nodos[0].@tipo[0]!}">
<#list nodos?children as campo>
<#if campo?node_type = 'element' && chequearPermisos(campo[0].@permiso[0]!"all")>
<#if ((campo[0].@mostrar[0]!"todos") == 'todos' || (campo[0].@mostrar[0]!"todos") == tipoFormulario)>
<#switch campo?node_name>
<#case "subtitulo">
<div class="subtitulo " style="${campo[0].@estilo[0]!}">${campo[0]}</div>
<#break>
<#case "texto">
<#-- campo de texto -->
<#include "campos/Campos Texto.ftl">
</#switch>
</#if>
</#if>
</#list>
</div>  
</#if>                  
</#if>          
</#list>
</div>
</#list>
</s:form>
<#include "estructura/Pie.ftl">    
</body>
</html> 
<#else>
<@pp.dropOutputFile />
</#if>

这个FTL与FMPP一起运行,使用XML填充数据。

我遇到的问题是,当我必须调整视图的布局时,这个布局是为表单2列设计的,我需要:

  • 在布局中添加一个或多个标题列
  • 更改背景颜色或图像、字体大小和颜色
  • 将图像添加到页眉

我不知道如何在不使用#IF使FTL复杂化的情况下做到这一点,标记CSS的每个部分,然后使用一个大xml。

自由市场上有什么布局,比如我能看到或使用吗?

这个想法是保持使用单一的FTL集,一个网络系统和一个简单的网页,在java中。

您可以创建一个freemarker模板用作布局。在模板中,您将希望嵌入复杂的逻辑以及样式。

以下是我在当前项目中使用的布局模板的示例。

<#include "../common/commonStyles.ftl">
<#if document.visuallyImpaired>
<link rel="stylesheet" type="text/css" href="css/visuallyImpaired/devLetterLayout.css" media="all" />
<#else>
<link rel="stylesheet" type="text/css" href="css/devLetterLayout.css" media="all" />
</#if>
<table class="headerTable">
<tbody>
<#if document.visuallyImpaired>
<tr>
<td class="visImpairedTitle">
<#include "title.ftl">
</td>
</tr>
</#if>
<tr>
<td class="headerSideColumn">
<#include "bannerImage.ftl">
</td>
<td class="headerCenterColumn">
<#if !document.visuallyImpaired>
<#include "title.ftl">
</#if>
</td>
<td class="headerSideColumn">
</td>
</tr>
<tr>
<td class="letterDate">
<#include "letterDate.ftl">
</td>
</tr>
</tbody>
</table>

在主模板中,您将使用<#assign>标记作为变量,使用<#include>标记拉入您创建的.ftl模板。

您还可以将一些逻辑分解为单独的模板,以保持源页面的整洁。只需在<#list>中放入一个<#assign><#include>即可。

对于列的数量,我还没有发现任何优雅的东西,但您可以先做<#assign columnCount=x>,然后再做<#include "tableColumn" + columnCount + ".css">,以限制需要添加的更改数量。

如果表每次都是动态创建的,您甚至可以使用<#local>分配一个局部变量,并实现一个计数器来确定您拥有的列数。

相关内容

  • 没有找到相关文章

最新更新