Smalltalk-draft

Author
Leon Lee, Engineer, Potix Corporation

Date
January, 2020

Version
ZK 9.0.0

Overview

Angular is a front-end framework for building user interfaces. We can use Angular as a front-end UI and use ZK as a pure backend. In this small talk, I will show you how to integrate Angular with ZK using the client binding API.

For convenience, I use a MIT licensed Angular demo project [1] to demonstrate.

Render Angular in a Zul File

Use Angular Element

turn an angular application into a web element.......

Prepare a Zul File

We have created a hello.zul, an entry page for the whole application.

hello.zul

<zk xmlns:n="native">
	<style src="styles.css" />
	<script src="polyfills.js"/>
	<script src="runtime.js"/>
	<script src="scripts.js"/>
	<script src="main.js"/>
	<style src="https://fonts.googleapis.com/icon?family=Material+Icons" />
	<div id="heroes"
			 viewModel="@id('vm')@init('org.zkoss.zkangular8.hero.HeroVM')" vflex="1">
			<n:app-root></n:app-root>
	</div>
</zk>

• Line 2~6: Load the style & JS files which Angular element needed.
• Line 8: The id property is needed for client binding to get the correct VM.
• Line 10: Place the Angular element here.

Wait for ZK to Be Mounted

Since we want to use ZK client binding API, it's safe to wait for ZK to finish mounting in Angular. We need to modify main.browser.ts a bit.

frontend/src/main.browser.ts

import {enableProdMode, MissingTranslationStrategy} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppBrowserModule} from './app/app.browser.module';
import {environment} from './environments/environment';

if (environment.production) {
  enableProdMode();
}
// zk afterMount
window['zk'].afterMount( () => {
  platformBrowserDynamic().bootstrapModule(AppBrowserModule, {
    missingTranslation: MissingTranslationStrategy.Error,
  }).catch(err => console.log(err));
});

• Line 11: We use the zk.afterMount API to ensuring ZK is ready.
• Note: I removed the serviceWorker stuff since it is not able work with ZK.

Load Data from ZK

We need to create a View Model to use the client binding feature in React.

Create a ViewModel (VM) in ZK

We created an HeroVM.java and defined a property "heroes".

HeroVM.java

public class HeroVM {
	// omitted
	private List<Hero> heroes;

	// omitted

	public List<Hero> getHeroes() {
		return heroes;
	}

	public void setHeroes(ArrayList<Hero> heroes) {
		this.heroes = heroes;
	}
}

• Line 7: Declare getter only here so ZK knows heroes is a readonly property of a VM.

Add Client Binding Annotations

To get the vm.heroes from the client, we need to add some annotation to the HeroVM.

HeroVM.java

@NotifyCommand(value = "updateHero", onChange = "_vm_.heroes")
@ToClientCommand({"updateHero"})
@ToServerCommand({"reload", "delete", "add", "update"})
public class HeroVM {
	// omitted
	@Command
	@NotifyChange("heroes")
	public void reload(@BindingParam("id") String id){
		// do findById(id)
	}
	// omitted
}

• LIne 1: Add a @NotifyCommand and listen to _vm_.heroes changes (_vm_ means the VM object)
• Line 2: Register a client command so the client can call getHeroes. ZK client binding uses whitelist so you must declare it explicitly. To allow all, simply use an asterisk symbol "*".
• Line 3 and 8: We added a simple command to trigger heroes changes for later use. Since it's called from the client, we need to register it by @ToServerCommand.

Once we set, we can get the property from the client. Let's see how we get the heroes from ZK.

Use Client Binding API in Angular

We can use binder.after to get properties of ViewModel from ZK.

......

Send Data Back to ZK

We can use binder.command to send data to the ViewModel.

zkbind.$('$main').command('toServerCommand', {key1: value1, key2: value2});

......

Download the Source

You can access the complete source at GitHub. Follow the instructions to start a server and open it in a browser.

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.