Introduction

We are excited to let you know that we are working on the largest change for ZK MVVM data binding at client, led by its flagship component — Fragment.
As its name, this component can combine a pure HTML content with ZK Data Binding syntax to make the static page to be dynamic without too much developer efforts. The only thing they should do is to copy the content of modern HTML design pages from either Bootstrap or others third party frameworks to this component as its content. Another option is to specify it by a file URI and then mark any dynamic data with a few ZK annotations.
Furthermore, this component has only one instance at server to reduce the server side memory footprint, even though working with multiple HTML elements at client.
With Fragment, client binding has been simply fulfilled. This upcoming component will definitely pique your curiosity.
This short article will walk you through all the major benefits of this component.

ZK Client Binding with Fragment Demo

The following demonstrates how ZK Client Binding works.

Required Configuration

Versions:

• ZK CE: 7.0.0 or later
• ZK PE and EE: (Optional)

ZUL

<fragment exps="@bind(vm.expenses)" editExp="@bind(vm.editExpense)" 
	newExp="@bind(vm.newExpense)"><![CDATA[
	<div>
		<div>
			<forEach items="@load(exps)" varStatus="s">
				<if test="@load(s.first)">
					//omitted
				</if>
				<if test="@load(editExp.id != each.id)">
					<div onClick="@command('toggleEditMethod', id = each.id)">
						<div>
							<span textContent="@load(each.date)"></span>
						</div>
					</div>
				</if>
			</forEach>
			//omitted
		</div>
		<div>
			<span textContent="@load(newExp.date)"></span>
			//omitted
		</div>
		//omitted
	</div>
]]></fragment>

Line 1: We specify all viewModel datas that we need to use on the html elements inside <fragment> as properties of Fragment

Lind 2 to 23: Simply paste your html template and surround them with <![CDATA[ ]]>.

Line 4: Simply bind your data with @load, @bind or @save annotations same as ZK MVVM data binding, but with one specific difference, expression in annotations should be started with a Fragment property name. The reason for this is because the html elements can only see the Fragment scope, they can’t see the server side variables because they are handling only at client side. For Example, we use @load(vm.expenses) in ZK MVVM data binding. but here, we should use @load(exps) in ZK Client Binding, started with a property name of Fragment, which represents the object expenses at line 3 of the following ViewModel.

Line 5 and 6: We provide <forEach> and <if> shadow elements, for condition rendering and collection rendering.

Line 10: To bind command on events, we provide the same syntax as in ZK MVVM data binding. Where toggleEditMethod is the annotated method in ViewModel section line 15.

Line 20: Here we need to notice that all innerText should be set as textContent attribute of an element.

(All fields and Syntaxes will be described at the end of this article.)

ViewModel

public class FragmentDemoVM {

	private List expenses = new ArrayList<>(Arrays.asList(new Expense[]{
		//omitted
	}));

	private Expense newExpense = new Expense(date, "", 0);

	private Expense editExpense;

	//omitted

	@Command
	@NotifyChange("editExpense")
	public void toggleEditMethod(@BindingParam("id") Integer id, @BindingParam("evt") Event evt) {
		//omitted
	}

	class Expense {

		private Integer id;

		private String date;

		//ommited

	}

}

ZK Client Binding

Annotations

For client binding inside Fragment component, we provide these annotations to use for now.

• @save:
  syntax: @save([EL-expression])
• @load:
  syntax: @load([EL-expression])
• @bind:
  syntax: @bind([EL-expression])

For annotations above, the difference from ZK MVVM data binding is that [EL-expression] is not started with vm.
They should be started with the property name you specified on the Fragment component.

• @command:
  syntax: @command([EL-expression], [arbitraryKey]=[EL-expression])
• @global-command:
  syntax: @global-command([EL-expression], [arbitraryKey]=[EL-expression])

For these two annotations, they have the same syntax as ZK MVVM data binding.
We also provide implicit parameter event, for you to retrieve the corresponding event at the command method with @BindingParam annotation.

Shadow Elements

We also provide shadow elements for condition rendering and collection rendering in client binding.

• <forEach>:

supported attributes: items, var, begin, end, step, varStatus.
attribute definitions are almost the same as ZK Shadow Element <forEach>, but value of varStatus should also be surrounded by a data binding annotation. See sample code line 5 of ZUL.

• <if>:

supported attributes: test.
attribute definitions are the same as ZK Shadow Element <if>.

Fragment Component

The content html elements of Fragment is like a template. We also support dynamically changing the content of Fragment.
We provide Two APIs:

• setContent(String content)

sets the html string template.

• setSrc(String src)

sets the assigned src as template.
It’s also recommend to use with ZK 8 NODOM component to simplify your dom tree, and ZK 8 Shadow components to gain more flexibility. Notice that Fragment component is not allowed to have any child component, shadow components should be a parent of Fragment when we combine them together.

Downloads

The whole demo project can be found on Github project.