2014-01-29 126 views
0

我正在構建一個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中。

+0

你認爲你應該更具體地描述實施這個問題的問題。你堅持什麼細節?就像,如果你可以通過手工編輯的JSP/CSS來實現你想要的功能,那你爲什麼不能用FMPP生成相同的輸出? – ddekany

+0

我可以用手工編輯的jsp/css做到這一點,但我不知道如何在freemarker中做到這一點,而不用過多的if和labels。我改進了我的問題 – Aegis

+0

[Freemarker:子變量的動態插值]的可能重複(http://stackoverflow.com/questions/12392822/freemarker-dynamic-interpolation-of-sub-variables) –

回答

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>來分配一個局部變量,並且實現一個計數器來確定如果每次動態創建表時都有的列數。