CODEWITHSUNDEEP
htmlcsscode-generationfreemarkerfmpp
Aegis
Aegis

Reputation: 131

How to build a FTL template for a dynamic layout?

I'm building a freemarker template to generate a jsp view. Using a layout in 2 columns where each field in a form is floating and occupies the entire width of the column.

Each field type is in a independent FTL to easily add and remove fields.

FTL template has the following code:

<#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>

this FTL run with FMPP, using a XML to fill the data.

The problem I am having is when I have to adjust the layout of the view, this layout is designed for a form 2 columns and I need to:

i don't know how to do it without complicating the FTL with #IF, marks each part of the CSS and then having a big xml.

there are any layouts in freemarket for example i can see or use?

The idea is to keep using single set of FTLs a web system and a simple web page, in java.

Upvotes: 0

Views: 5591

Answers (1)

Jeremy K. Jones
Jeremy K. Jones

Reputation: 26

You can create a freemarker template for use as your layout. In the template you will want to embed your complex logic as well as your styling.

Here is an example of a layout template that I have been using on a current project. 

<#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>

In your main template you will use the <#assign> tags for your variables and the <#include> tags to pull in the .ftl templates you created.

You can also break out some of your logic into separate templates to keep your source page clean. Just put an <#assign> and <#include> in your <#list>.

For the number of columns I haven't found anything elegant yet, but you can do something like <#assign columnCount=x> and then <#include "tableColumn" + columnCount + ".css"> to limit the amount of changes you need to add.

You could even assign a local variable using <#local> and implement a counter to determine the number of columns you have if the table is created dynamically each time.

Upvotes: 1

Related Questions