Data-Attribute Handler is one of ZK 8’s key features. By simply using Data-handler API, any ZK Components integrated with third-party JavaScript libraries can be modularized and reusable. Developers no longer have to wait for new releases, as by combining our Data-handler with Client-binding, they will be able to incorporate any 3rd party JavaScript library efficiently themselves. This ultimate flexibility makes it extremely easy to leverage the evolving front-end technology.

We invite you to visit the Github page of each project and see the entire process yourself. In order to get the complete information and idea of the features involved, please also feel free to download and run the project.

Thank you contestants for making the time and effort to participate in this special event! The results are as follows:

Technical Achievement Award

Congratulations to…

1. QR Code by cossaer.f [also Community Favorite Third Place Winner]

chillworld_awardBanner

This handler converts a ZK component(ex div, a, label) to a QR Code. QrCode is normally a single jar file so you can install it easily. Everything is configured there, so adding the dependency will be enough to activate the qrcode and qrcodelabel tag.

Feedback from ZK Team: Simple to use, well isolated and useful!

2. Zangular by odaper [also Community Favorite Second Place Winner]

zangular_awardBanner

This is a short demo of a sample application “Events management” using front-end technologies “AngularJs” and “Bootstrap” with ZK8 framework. Home: this is the main page with a sample responsive bootstrap template. It contains three regions:

  • Header: displays the main menu
  • Footer: displays the author’s name
  • Body: displays the content of the selected menu
    entry using bootstrap tabs component

Feedback from ZK Team: Beautiful UI, functionally complete

3. Jimp (JavaScript Image Manipulation) by MathieuPiette

jimp_awardBanner

This handler can modify the contrast and the brightness of an image, as well as color it. In data-jimp.js, the processed data is set as the source of an img element, so everything stays on the client side. The opacity preview uses the value from the ViewModel while the side-by-side preview uses client-side-only data. The sendToServer switch of the ViewModel can be used to disable this data posting completely.

Received the top score for creativity from ZK Team

Community Favorite Award

First Place Winner: C Tracker by etedesco

cTracker_awardBanner

The purpose of this demo is to display messages as a flow chart where you can add new messages, remove messages, rearrange messages and load chat example. To achieve this, two extra components were required: a drop down with images and a graphics chat. Therefore, the first component is a custom drop down with image and description based on ddSlick 3rd Party Library. The second component is a custom SVG chat based on a svg.js 3rd Party Library, a lightweight library for manipulating and animating SVG.
Following the Data-Handler ZK API, these two JQuery UI Widgets were integrated to create their relative Data-Handlers (“zkddslick” and “zkctracker”). Finally, by using this ZK-Bootstrap reference, a layout that works well on all devices (desktop, tablet and mobile) was built.

More Top Selections

PDF Generator by derekyang59

pdfGenerator_banner

The plugin is a PDF generator on pure client side. It can export a target of ZK element into a PDF within A4 format.

Gauge by windeyu

gauge_banner

This Gauge UI displays a value between the min and max values. The value can be set from the server or from the client user. A base gauge view model can be subclassed to show specific-purpose measurement. Three sub-classes are created to show the CPU, memory, and weather.

A Frame by mangosgoo

aFrame_banner

This data handler uses A-Frame which is a framework for creating virtual reality web experiences that work across desktop, mobile, and the Oculus Rift.

Arbor JS Tree by MasaMaso

arborJs_banner

ArborJS integration to ZK Tree

The goal of this data-handler is to integrate a ZK tree structure (TreeModel) with an external visualisation library (ArborJS). It uses data-handlers to communicate between the TreeModel and the ArborJS visualisation.



If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply