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

我正在构建一个freemarker模板来生成一个jsp视图。使用2列中的布局，其中表单中的每个字段都是浮动的，占用列的整个宽度。如何为动态布局构建FTL模板？

每个字段类型都在一个独立的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][email protected][0]?has_content >id="${grupoCampos[0][email protected][0]!}"</#if> <#if grupoCampos[0][email protected][0]?has_content >style="${grupoCampos[0][email protected][0]!}"</#if>> 
      <#list grupoCampos?children as nodos> 

       <#if nodos?node_type = 'element' && chequearPermisos(nodos[0][email protected][0]!"all")> 
        <#if ((nodos[0][email protected][0]!"todos") == 'todos' || (nodos[0][email protected][0]!"todos") == tipoFormulario)> 
         <div style="${nodos[0][email protected][0]!}" <#if nodos[0][email protected][0]?has_content>id="${nodos[0][email protected][0]!}"</#if> class="${nodos?node_name} ${nodos[0][email protected][0]!}"> 

          <#list nodos?children as campo> 
           <#if campo?node_type = 'element' && chequearPermisos(campo[0][email protected][0]!"all")> 
            <#if ((campo[0][email protected][0]!"todos") == 'todos' || (campo[0][email protected][0]!"todos") == tipoFormulario)> 
             <#switch campo?node_name> 
              <#case "subtitulo"> 
              <div class="subtitulo " style="${campo[0][email protected][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列和我需要：

添加报头或多个列的布局
改变背景颜色或图像，字体大小和颜色
图像添加到标题

我不知道该怎么做，而不FTL与#IF复杂，标志着CSS的各个部分一个然后有一个大的XML。

有自由市场中的任何布局，例如我可以看到或使用？

这个想法是继续使用一套FTLs一个网络系统和一个简单的网页，在Java中。

来源

2014-01-29 Aegis

你认为你应该更具体地描述实施这个问题的问题。你坚持什么细节？就像，如果你可以通过手工编辑的JSP/CSS来实现你想要的功能，那你为什么不能用FMPP生成相同的输出？ – ddekany

我可以用手工编辑的jsp/css做到这一点，但我不知道如何在freemarker中做到这一点，而不用过多的if和labels。我改进了我的问题 – Aegis

[Freemarker：子变量的动态插值]的可能重复（http://stackoverflow.com/questions/12392822/freemarker-dynamic-interpolation-of-sub-variables） –

您可以创建一个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拉。

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

对于列数，我还没有找到任何优雅的东西，但你可以做一些像<#assign columnCount=x>然后<#include "tableColumn" + columnCount + ".css">来限制你需要添加的变化量。

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

来源

2016-10-03 16:00:02

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

回答

相关问题