Giter Club home page Giter Club logo

thymeleaf-bean's Introduction

thymeleaf-bean

Thymeleaf dialect which converts object properties to tag attributes.

Maven

Include the latest release from Maven,

	<dependency>
		<groupId>com.connect-group</groupId>
		<artifactId>thymeleaf-bean</artifactId>
		<version>2.1.0</version>
	</dependency>

Getting Started

<a bean:use="${linkBean}">Hello!</a>

Attributes such as href, title, class etc will be set according to the properties of the object, "linkBean".

The bean attribute also supports a Map<String,String> e.g.

<a bean:use="${linkMap}">Hello!</a>

A Bean example

class LinkBean {
    String getAlt();
    String getHref();
    boolean getDisabled();
    List<String> getCssClass();
}

The above bean would generate an 'alt' and a 'href' tag respectively.

If a 'getter' returns a Boolean, then the attribute value will be set to equal the attribute name; e.g.

disabled="disabled"

Special Case: Class and CssClass

Because the method 'getClass' is part of the Java Object, we can't use that to specify class.
Instead a method named getCssClass() is required to set the Class.

Collection return types

The return value of each getter will be converted to a string. Collections will be converted to a single string with each value separated by a single space.

So a List which contains ["abc","def"] would become "abc def".

class="abc def"

Text and Unescaped Text

If the map has a text or utext key; or a bean has a getText or getUtext() method, these will be treated as th:text and th:utext respectively.

Data Attributes

For maps, simply map data-attr-name to a value and these will become data attributes. E.g.

map.put("href", "http://www.example.com");
map.put("text", "link to example");
map.put("data-some-stuff", "a data attribute");

For beans there are two ways to populate data attributes;

Map<String,?> getData()

If a method named getData() is found on the bean, and it returns a map, then the properties of the map are treated as data attributs.

For example,

class Bean {
    Map<String,String> getData() {
        HashMap<String,String> map = new HashMap<String,String>();
        map.put("x","y");
        return map;
    }
}

... will generate something like,

<div data-x="y">...</div>

String getDataMyCustomAttribute()

Any property whose name starts with "data" is treated as a data- attribute. The "camel-case" of the property name is converted into hyphens.
So for example, getDataMyCustomAttribute() will generate data-my-custom-attribute.

thymeleaf-bean's People

Contributors

4dz avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.