Directory

← Back

FreemarkerLayout Add-on

An extension to CustomLayout that supports FreeMarker templates

Author

Contributors

Rating

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Support for Vaadin 8

Released
2017-02-08
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 8.0+
Browser
N/A

FreemarkerLayout Add-on - Vaadin Add-on Directory

An extension to CustomLayout that supports FreeMarker templates FreemarkerLayout Add-on - Vaadin Add-on Directory
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:
Online