Many times in your view (zul) you need to to display the result of combining various view model or domain object properties. Take a simple User object:

public class User {
	private String firstName;
	private String lastName;
	private Company company;
	//accessors set/get
}

You made need to display a label or menuitem that looks like:

User: John Doe [Acme Company]

If we were sure the user name wasn’t going to change, we could do:

<label value="User: ${vm.user.firstName} ${vm.userLastName} [${vm.user.company.name}]"/>

The problem with the above is that often times we need the label to reflect a change in the User. There are several ways to create our label…

In order of my preference:

concat

I’m not sure where I found about this, since I’m not sure where it’s mentioned in the docs, but at some point (probably searching the forums) I found that this works great:

<label value="@load('User:'.concat(vm.user.firstName).concat(' ').concat(vm.userLastName).concat(' [').concat(vm.user.company.name).concat(']')"/>

cat

If you have less than 5 things to concatenate, this works as well. Note using core’s cat only goes up to 5 so it’s somewhat limiting for when building larger values…

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

    <label value="@load(c:cat4('User: ',vm.user.firstName,' ',vm.userLastName))" />

Create a ViewModel method

This is my last resort because now I’ve mixed display logic into my ViewModel is to create an accessor for your display name. The other drawback to this however is that you also have to remember to NotifyChange for this “displayUser” when ever the user changes in your view model so it’s annoying, so I stick to the first option using concat.

public String getDisplayUser() {
	return "User: "+user.getFirstName()+" "+user.getLastName()+" ["+user.getCompany.getName()+"]";
}

zul

<label value="@load(vm.displayUser)"/>