Introduction
As we already know ZK used to generate all html content within 'redraw' function of a ZK Widget, this is a little bit (?) hard to maintain and customize dom structure and style of component.
This article describe how to create ZK Component with AngularJS Directive so you can use a pure HTML template to generate dom elements of ZK Component and has some advantages:
1. Easier to maintain.
2. Easier to customize.
And also some drawbacks (part of them has workaround):
1. Need to load html template via several ajax call.
Workaround: You can load all templates at once,
for more information please refer to
AngularJS: load all templates in one file or AngularJS Merge Template
2. Will blink while rerender, you can use a fake dom to avoid blinking but this may affect the client side performance.
3. Has issue of dynamically insert and compile complex dom elements so need to rerender if dynamically add children.
Note:
1. This is just a POC done in a short time, probably not well organized and has some unknown issues.
2. I am not familiar with AngularJS so this POC may contains bad practice.
Pre-request
AngularJS Create Components
ZK Component Development Tutorial: Getting Started
ZK CDT: Fire Event to Server to Create a SelectableTextNote
Result
Online demo
http://screencast.com/t/nlLsNdbV8A
Description:
The concept is simple.
In AngularJS, a directive which support pure html template is a function that returns an Object Literal, and registered with a specific name (see Creating Custom Directives).
Both of them -- the name and the function -- can be declared at any places.
e.g. inside the Javascript of ZK Widget.
So we can specify Angular Tag (ngTag) and Angular Template Url (ngTemplateUrl) to each ZK Component and do below:
In ZK Component:
* Server Side:
** Make sure that each templateUrl maps to different tag.
* Client Side:
** Output ngTag in redraw function.
** Store component to zk.ngcomponents in redraw function.
** Register Angular Directive with ngTag.
In Angular Directive
* Use ngTemplateUrl as templateUrl in directive.
* Store $scope, $compile and controller to $element in controller function of directive.
* Bind ZK Widget with Angular Objects above in link function of directive.
Then we can use AngularJS Directive with pure HTML Template then control ZK Widget from AngularJS Directive and vice versa.
See
NgComp.java#fixTemplateMapping
NgComp.js#redraw
tabs.js#registerTemplate
zacomponents.js#addComponent
zacomponents.js#storeNgObjects
zacomponents.js#directive
zacomponents.js#bindng_
for more information.
Program Introduction
Testing zul page
index.zul
Testing Composer
TestComposer.java
AngularJS Library
angular.min.js
Bootstrap3 CSS Library
bootstrap.min.css
Utils for AngularJS ZK Widget
zacomponents.js
Basic APIs of AngularJS ZK Widget
NgComp.js
The Folder Contains All Default Templates
templates
Basic Java Class for AngularJS ZK Component
NgComp.java
Others:
Please refer to the full project below
Download
Full project at github
Demo Flash (click View Raw to download)
