Directory

FreemarkerLayout Add-on

An extension to CustomLayout that supports FreeMarker templates

FreemarkerLayout allows you to define templates using the FreeMarker Template Language to dynamically generate HTML layouts and add Vaadin components into it.

Components are located in the template by using the "location" attribute in the same way CustomLayout does.

Read the blog post: https://vaadin.com/blog/-/blogs/dynamic-html-templates-with-freemarker-and-vaadin

Sample code

<div class="product">
    <div class="left">
        <div class="price">$${price}</div>
        <div class="image"><span location="image"></span></div>
        <div class="name">${name?capitalize}</div>
    </div>
    <div class="right">
        <div class="description">${description?cap_first}</div>
    </div>
</div>

Product product = ...

FreemarkerLayout productLayout = new FreemarkerLayout();
productLayout.setTemplateFileName("templates/product-details.html");
productLayout.setDataModel(product);
productLayout.addComponent(new Image(null, new ClassResource(product.getImage())), "image");

// JavaScript and CSS files can be placed in the webapp/VAADIN/ directory.

@JavaScript({"vaadin://scripts/jquery-1.12.3.min.js", "vaadin://scripts/jquery-ui.js", "vaadin://scripts/paging.js"})
@StyleSheet({"vaadin://styles/products-table.css", "vaadin://styles/product-details.css"})
public class ProductsTable extends FreemarkerLayout {

    public ProductsTable() {
        super("templates/products-table.html");

        ...
    }

    ...

}

// You can get a reference to the FreeMarker configuration object used by FreemarkerLayout (note that this is a static instance):

Configuration config = FreemarkerLayout.getConfiguration();

config.setDirectoryForTemplateLoading(new File("/my-server/templates-directory"));
config.setSharedVariable("company", "Foo Inc.");
...

// For more information about configuring FreeMarker, see http://freemarker.org/docs/pgui_config.html

Links

• Issue Tracker
• Source Code
• Author Homepage

Compatibility