Expressions

Value insertion - Content

HTML

<p>Counter: <m:text item="counter-value" /></p>

Java

//optional - initial value
@Override
public PageAttributes setupAttributes(ServerRequest request, SecurityContext securityContext) {
    return new PageAttributes().with("counter-value", 0);
}

//value can change upon any event
public DOMChanges anyEvent() {
    //...
    return DOMChanges.of("counter-value", 3);
}

Through the use of the <m:text> tag, values can be inserted anywhere. This includes the body, the title of the page or as a parameter of a tag. Initial value comes from the setupAttributes() per request and can also be changed in any event as a DOMChange.

Dynamic title

HTML

<title m:item="title"></title>

Java

//initial value
@Override
public PageAttributes setupAttributes(ServerRequest request, SecurityContext securityContext) {
    return new PageAttributes().with("title", "Hello world");
}

//title can change upon any event
public DOMChanges anyEvent() {
    return DOMChanges.of("title", "Hello new title");
}

Click event - m:click

HTML

<button m:click="increaseCounter(1, 'ABC')">Increase counter</button>

Java

public DOMChanges increaseCounter(int parameter, String otherParam) {
    //...
    return of("counter-value", counter);
}

or 

public void increaseCounter(int parameter) {
    //...
}

Executes an event function when clicking the element. Method on the Java side can return DOMChanges or be void.

Change event - m:change

HTML

<input m:change="search(this.value)"/>

Java

public DOMChanges search(String value) {
    //...
    return of("search-result", lookupResult);
}

or 

public void search(String value) {
    //...
}

Executes an event function when the value of an <input>, <select>, or<textarea> element has been changed. The event also applies to elements withcontenteditableenabled, and to any element whendesignModeis turned on.

On enter event - m-onenter

HTML

<input m:onenter="search(this.value)" type="text" />

Java

public DOMChanges search(String value) {
    //...
    return of("search-result", lookupResult);
}

or 

public void search(String value) {
    //...
}

Event that gets executed whenever the enterkey is pressed with this element in focus.

Iterations

HTML

<m:foreach collection="orders" eachName="order">
    <p>
        Product: <m:text item="order.productName"/> 
        <button m:click="cancelOrder(order.id)">Remove</button>
    </p>
</m:foreach>

Java

//optional - initial value
@Override
public PageAttributes setupAttributes(ServerRequest request, SecurityContext securityContext) {
    return new PageAttributes().with("orders", new ArrayList<Order>());
}

//value can change upon any event
public DOMChanges anyEvent() {
    //...
    return DOMChanges.of("orders", Arrays.asList(new Order(1)));
}

Can iterate with a foreach over a variable that is a collection of elements. Optionally, you can add an eachName, which gives you access to an additional variable within the iteration under that name, containing the current iteration value.

Conditionals

HTML

<m:if item="counter-value" gt="5">
    <p>Counter is above 5</p>

    <m:elseif item="counter-value" gt="2">
        <p>Counter is above 2</p>
    </m:elseif>

    <m:else>
        <p>Counter is below 2 and 5</p>
    </m:else>
</m:if>

You can use an if structure as a dynamic conditional through the use of the<m:if condition="x" ...]</m:if>tag. Also allows for m:elseif and m:else.

Possible conditions are:

• eq="5" - true if equals to the condition

• not="5"- true if not equals to the condition

• gt="5" - true if greater than but not equals to the condition

• lt="5" - true if less than but not equals to the condition

• gte="5" - true if greater than or equals to the condition

• lte="5" - true if less than or equals to the condition

Conditionally add class

HTML

<div class="red" m:class-append="dynamic-class"></div>

Conditionally add a class by using an inline if expression in m:class-append. In the above example, if dynamic-class is the value blue, the div will have class="red blue".

Conditionally hide an element

HTML

<button m:click='order()' type="button" m:hide="some-variable">Order</button>

You can show or hide an element based on a value or expression by using m:hide.

Conditionally disable an element

HTML

<button m:click="clear()" m:disabled="some-variable">Clear</button>

You can disable an element conditionally by using a value or expression in m:disabled.