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)

54 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. Nice post . Thanks for the shearing valuable information. I really fiend this type blog. Special thanks to writer.
    Hire Angularjs Developer
    AngularJS Development Company

    ReplyDelete
  5. Thanks for providing good information,Thanks for your sharing.Angularjs Online Training

    ReplyDelete

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

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

    ReplyDelete
  8. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..Website Design Company in Bangalore | Web Design Companies in Bangalore | Website Design Companies in Bangalore

    ReplyDelete
  9. This is an best post. It is Really very informative concept.I like it and help me to development very well.Thanks alot for this brief explanation and very nice information.Angular Js Course HYDERABAD

    ReplyDelete
  10. 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
  11. 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

  12. 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
  13. 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
  14. 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
  15. I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up

    Devops Training in USA

    Hadoop Training in Hyderabad

    Python Training in Hyderabad

    ReplyDelete
  16. 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.ahmedabadcomputereducation.com/course/php-training-course/

    ReplyDelete
  17. 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
  18. 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
  19. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing informative articles with us.

    https://www.france-collectivites.fr/

    ReplyDelete
  20. 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
  21. Awesome blog for knowledge. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing this type informative articles with us.

    https://www.france-collectivites.fr/

    ReplyDelete
  22. 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
  23. 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
  24. Seo company in Varanasi, India : Best SEO Companies in Varanasi, India: Hire Kashi Digital Agency, best SEO Agency in varanasi, india, who Can Boost Your SEO Ranking, guaranteed SEO Services; Free SEO Analysis.

    Best Website Designing company in Varanasi, India : Web Design Companies in varanasi We design amazing website designing, development and maintenance services running from start-ups to the huge players


    Wordpress Development Company Varanasi, India : Wordpress development Company In varanasi, india: Kashi Digital Agency is one of the Best wordpress developer companies in varanasi, india. Ranked among the Top website designing agencies in varanasi, india. wordpress website designing Company.

    E-commerce Website designing company varanasi, India : Ecommerce website designing company in Varanasi, India: Kashi Digital Agency is one of the Best Shopping Ecommerce website designing agency in Varanasi, India, which provides you the right services.

    ReplyDelete
  25. It's a very informative blog and I am exactly looking for this type of blog. Thank you for sharing this beautiful blog.

    https://superurecoat.com/titanium-iso-propoxide/

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

    https://saroitapes.com/

    ReplyDelete
  27. Thanks for sharing informative article.

    https://web30india.com/

    ReplyDelete
  28. 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
  29. 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

  30. I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up

    Devops Training in Hyderabad

    Hadoop Training in Hyderabad

    Python Training in Hyderabad

    Tableau Training in Hyderabad

    Selenium Training in Hyderabad

    ReplyDelete
  31. I am impressed by the information that you have on this blog. It shows how well you understand this subject.
    data scientist training in malaysia

    ReplyDelete
  32. 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
  33. 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
  34. Very Nice Blog…Thanks for sharing this information with us. Here am sharing some information about training institute.
    digital transformation services by NGS

    ReplyDelete