Thursday, April 3, 2014

ZK, AngularJS and Pure HTML Template


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)

42 comments:

  1. ZK has released the official support for AngularJS. http://www.zkoss.org/zk-angular-demo/

    ReplyDelete
  2. Very Nice Post really expalined good information and Please keep updating us..... Thanks

    ReplyDelete
  3. Just wish to say your article is as astounding. The clearness in your
    submit is just excellent and i can suppose you’re knowledgeable in this subject.

    ReplyDelete

  4. Thank you.Well it was nice post and very helpful information on AngularJS5 Online Training Hyderabad

    ReplyDelete
  5. Great post. I found very useful info from this post. Thank you very much.
    Angularjs Developer

    ReplyDelete
  6. Excellent ! I am truly impressed that there is so much about this subject that has been revealed and you did it so nicely
    Anika Digital Media
    seo services
    web design development
    graphic design
    Thanks

    ReplyDelete
  7. thank your valuable content.we are very thankful to you.one of the recommended blog.which is very useful to new learners and professionals.content is very useful for hadoop learners


    Best Spring Classroom Training Institute
    Best Devops Classroom Training Institute
    Best Corejava Classroom Training Institute
    Best Advanced Classroom Training Institute
    Best Hadoop Training Institute
    Best PHP Training Institute

    ReplyDelete

  8. Blog commenting : Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    devops online training
    best angularjs online training
    top angularjs online training

    ReplyDelete
  9. Amazing article. Your blog helped me to improve myself in many ways thanks for sharing this kind of wonderful informative blogs in live. I have bookmarked more article from this website. Such a nice blog you are providing
    Java Training in Chennai

    Java Training in Velachery

    Java Training in Tambaram

    Java Training in Porur

    Java Training in OMR

    Java Training in Annanagar



    ReplyDelete
  10. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    AngularJS online training
    best AngularJS online training
    top AngularJS online training

    ReplyDelete
  11. This is my first time visit to your blog and I am very interested in the articles that you serve. Provide enough knowledge for me. Thank you for sharing useful and don't forget, keep sharing useful info:

    Data Science Training in Gurgaon
    Bigdata Hadoop Training in Gurgaon
    Spark Training in Gurgaon
    Machine Learning Training in Gurgaon

    ReplyDelete
  12. Thank you for sharing this useful article with us. This blog is a very helpful to me in future. Keep sharing informative articles with us.

    https://www.paygonline.site/

    ReplyDelete
  13. Great sources for knowledge. Thank you for sharing this helpful article. It is very useful for me.

    https://www.ahmedabadcomputereducation.com/course/laravel-training-course/

    ReplyDelete
  14. Thank you for sharing this useful article with us. This blog is a very helpful to me. Keep sharing informative articles with us.

    https://www.sdsfin.in/services/project-finance-consultants-in-ahmedabad/

    ReplyDelete
  15. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    Banking and Finance App Development Company

    ReplyDelete
  16. Thank you for the great information. Keep Sharing it!

    https://saroitapes.com/

    ReplyDelete
  17. Thanks for sharing informative article.

    https://web30india.com/

    ReplyDelete
  18. Thank you so much for sharing all this wonderful information !!!! It is so appreciated!! You have good humor in your blogs. So much helpful and easy to read!






    ReplyDelete
  19. Excellent Article. Thank you for sharing!

    https://www.ahmedabadcomputereducation.com/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-asp-net/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-ios/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-java/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-android/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-php/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-python/

    ReplyDelete
  20. Great post.I'm glad to see people are still interested of Article.Thank you for an interesting read........
    Hire Remote Angular js Developer in India

    ReplyDelete
  21. virtual event platform A successful virtual networking event is one that is designed with the outcome in mind. Understanding your audience and their motivation for engaging provides a useful starting point for deciding how you will run your virtual networking event. website to sell concert tickets, zoom invitation email template and what do you need to become an event planner

    ReplyDelete
  22. Very Nice Blog…Thanks for sharing this information with us. Here am sharing some information about training institute.
    digital transformation services by NGS

    ReplyDelete
  23. Great tips and very easy to understand. This will definitely be very useful for me when I get a chance to start my blog.
    data science course in malaysia

    ReplyDelete
  24. Thanks for sharing...very informative.

    Are you interested in launching an On Demand Flower Delivery App? The App Ideas is leading web and Mobile App development. We provide the best IT Services at best rates. Contact us now!

    ReplyDelete
  25. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.

    How much does it cost to develop an On Demand Service App? The App Ideas is leading web and Mobile App development. We provide the best IT Services at best rates. Contact us now!

    ReplyDelete
  26. Bandicam Keygen isn't bundled, unlike other applications recording packs, by default, using the recorder, but is offered at a lower cost Bandicam Serial Key

    ReplyDelete
  27. Portraiture, free and safe download. Portraiture latest version: A portrait plugin for Photoshop. Portraiture is a photography program Portraiture Plugin For Photoshop CS6 Free Download Crack

    ReplyDelete
  28. We appreciate you sharing this informative post with us. Continue providing us with helpful content.

    https://www.ownuxglobal.com/

    ReplyDelete
  29. This is a nice informative and timely taken blog. Keep Posting and useful content. if you are looking for the best AngularJS training then, You can contact us.

    ReplyDelete
  30. Looking for innovative front-end developers that work remotely! Come work with us from wherever you are if you have UI/UX design experience, a firm grasp of responsive web development, and a drive for innovation.
    hire remote web developer

    ReplyDelete