0

我正在构建一个 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 系统和一个简单的网页。

4

1 回答 1

1

您可以创建一个 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-03T16:00:02.693 回答