Question

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

每个字段类型都在一个独立的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。

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

我们的想法是在java中继续使用单组FTL作为Web系统和简单的Web页面。

Answer 1

您可以创建自由标记模板以用作布局。在模板中，您需要嵌入复杂的逻辑以及样式。

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

<#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>分配一个局部变量，并实现一个计数器来确定每次动态创建表时的列数。

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

1 个答案: