Introduction
Tooling
Standard components - html package
This package includes following components:
text
Evaluates expression and inserts as text.
Syntax:
<html:text value="expression"/>
Where:
value="expression"
is an expression which will be evaluted.
Example:
<h1>Employee #<html:text value="employee.id"/></h1>
<ul>
<li><strong>First name</strong>: <html:text value="employee.firstName"/></li>
<li><strong>Last name</strong>: <html:text value="employee.lastName"/></li>
<li><strong>Salary</strong>: $<html:text value="employee.salary"/></li>
</ul>
value
Binds value of input element to expression.
Syntax:
html:value="expression"
Where:
expression
is an expression that’s been evaluated.
Example:
<form>
<div class="form-label"><label for="employee-first-name">First name</label></div>
<div class="form-input"><input id="employee-first-name" html:value="employee.firstName"/></div>
<div class="form-label"><label for="employee-first-name">Last name</label></div>
<div class="form-input"><input id="employee-first-name" html:value="employee.lastName"/></div>
</form>
checked
Binds checked attribute of input element (with type="checkbox"
) to expression.
Syntax:
html:checked="expression"
Where:
expression
is an expression that’s been evaluated.
Example:
<form>
<div class="form-label"><label for="employee-coffee">Free coffee</label></div>
<div class="form-input"><input type="checkbox" id="employee-coffee" html:checked="employee.receivingFreeCooffee"/></div>
</form>
enabled
Binds enabled state of input element to boolean expression.
Syntax:
html:enabled="expression"
Where:
expression
is a boolean expression which specifies whether element must be enabled.
Example:
<div>
Search: <input html:value="searchString"/> <button html:enabled="not searchString.empty">Go!</button>
</div>
change
Sets change event handler.
This is more flexible than event:change, since, unlike event:change
,
html:change
uses Flavour change tracking mechanism, not native DOM.
Syntax:
html:change="expression"
Where:
expression
is a lambda expression which runs as change event is triggered.
Example:
<div class="form-label"><label for="employee-first-name">First name</label></div>
<div class="form-input">
<input id="employee-first-name" html:value="employee.firstName" html:change="employee.firstName = it"/>
</div>
checked-change
Sets event handler for changing checked
attribute.
Syntax:
html:checked-change="expression"
Where:
expression
is a lambda expression which runs as change event is triggered.
Example:
<div class="form-label"><label for="employee-free-coffee">First name</label></div>
<div class="form-input">
<input type="checkbox" id="employee-free-coffee" html:checked="employee.receivingFreeCoffee"
html:checked-change="employee.receivingFreeCoffee"/>
</div>
bidir-value
Acts as both value and and change.
Used to establish bidirectional binding between property and input
element.
Syntax:
html:bidir-value="expression.propertyName"
Where:
expression
is a property owner.property
is a property name.
Example:
<div class="form-label"><label for="employee-first-name">First name</label></div>
<div class="form-input">
<input id="employee-first-name" html:bidir-value="employee.firstName"/>
</div>
bidir-checked
Acts as both checked and and checked-change.
Used to establish bidirectional binding between boolean property and input type="checkbox""
element.
Syntax:
html:bidir-checked="expression.propertyName"
Where:
expression
is a property owner.property
is a property name.
Example:
<div class="form-label"><label for="employee-free-coffee">Free coffee</label></div>
<div class="form-input">
<input type="checkbox" id="employee-free-coffee" html:bidir-checked="employee.receivingFreeCoffee"/>
</div>
link
Sets link target.
Syntax:
<a html:link="expression">...</a>
Where:
expression
is a lambda expression that is run to compute hyperlink target. This lambda takesComsumer<String>
as a single parameter and must callaccept()
method. Such strange API is required for integration with routing library. If you want to generate target manually, you better use attr:href.
Example:
<a html:link="it.accept('/employees/' + employee.id)">
<html:text value="employee.firstName"/> <html:text value="employee.lastName"/>
</a>