0

jsp ビューを生成するための freemarker テンプレートを作成しています。フォームの各フィールドがフローティングで、列の幅全体を占める 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 列用に設計されており、次のことを行う必要があります。

  • ヘッダーまたは複数の列をレイアウトに追加する
  • 背景色または画像、フォント サイズ、および色を変更する
  • ヘッダーに画像を追加する

FTL を #IF で複雑にせずにそれを行う方法がわかりません。CSS の各部分をマークしてから、大きな xml を作成します。

たとえば、フリーマーケットには、表示または使用できるレイアウトがありますか?

アイデアは、単一の FTL セット、Web システム、および単純な Web ページを Java で使用し続けることです。

4

1 に答える 1

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>にand<#include>を入れるだけ<#list>です。

列の数については、まだエレガントなものは見つかりませんでしたが、次のよう<#assign columnCount=x>に<#include "tableColumn" + columnCount + ".css">して、追加する必要がある変更の量を制限することができます。

<#local>テーブルが毎回動的に作成される場合は、カウンターを使用してローカル変数を割り当てて実装し、列の数を決定することもできます。

于 2016-10-03T16:00:02.693 に答える