ZK Framework and HTML Escape

Many time we have saved HTML code in database but when we are going to display that saved value in zk page it show HTML code as well with data .


To resolve this issue we have to use HTML escape there are plenty of way to fix this




You can do it on Java side as well zul page and here is simple way how you can achieve in the zul page

How to get value of Comboxbox and Textbox In JavaScript/Jquery code

Here is the sample example

How to show Customize message with ZK Constraint?

Here is the code you can follow

Here two condition added

Textbox should not be empty .

Textbox not allow any space trailing and leading spaces.

How to use regular expression in ZK textbox Which not allowed spaces ?

I have a requirement for ZK TextBox


1- Not Allow any space when nothing entered in textbox
2- Not allow space before and after the string.
3- Allow Space in between two keyword like Ram Singh should be valid
4- Only Ram Should be also valid

for above these requirements which not allow trailing/white spaces you can below textbox with regular expression

ZK Include : How to pass and get parameter with zk include

Index.zul

In above code you can check it pass argument with URL here test is argument name and value=5


In this page we used ${param.test} to get the parameter passed in index.zul HeaderComposer.java
ANOTHER WAY TO PASS THE ARGUMENT WITH INCLUDE

Another way to pass Argument and And get it back
Let Us suppose you included menu_component.zul in parent.zul file

Now in menu_component.zul you can get parameter like this

Now use data anywhere in zul and pass value to View Model

How to Notify Single Item or Record or Single Column from ZK ListBox Not Whole ListBox?

Here is Demo code for this


ZUL file
Please share if you found any better solution

ZK SelectorComposer and GenericForwardComposer

First we can check the ZK documentation what all written in ZK? See below

SelectorComposer
It supports the autowiring based on Java annotation and a CSS3-based selector. If you don't know which one to use, use SelectorComposer.
GenericForwardComposer
It supports the autowiring based on naming convention. You don't need to specify annotations explicitly, but it is error-prone if it is used improperly.

As they clearly mentioned If you don't know which one to use, use SelectorComposer. I will also suggest same if you are using MVC framework

ZK Modal Window prevent to close when used closable=true attribute.

Lets talk about some scenario or you can say business requirements.
Let us suppose a scenario I am opening a modal window to show employee information and user can edit few columns now after editing anything if user going to close the modal window i have to show a Zk MessageBox that something changed to you want to continue If user will press ok button then modal Window will close other wise user click on Cancel button modal Window should not be close.How to achieve this ? Any idea? May be lots of people can do it lots of way.
Here i got one issue thats why its encourage me to write this blog
I am using below code when someone click on Cross Mark of Modal Window


Now if you will check the above code it have a big drawback how i got that drawback read this official post about zk
By setting the closable property (Window.setClosable(boolean)) to true, a close button is shown for the window, which enables a to close the window by clicking the button. Once the user clicks on the close button, an onClose event is sent to the window which is processed by the onClose method of the Window component. Then, onClose, by default, detaches the window itself.
So here i in above code i got same issue as i am using closable="true" it automatically detach the window and when user press OK button of MessageBox i got Null Pointer exception because my Window is already detach or destroyed. To prevent this zk itself give a solution read this
Notice that event.stopPropagation() (Event.stopPropagation()) must be called to prevent the default onClose handler (Window.onClose()) being called.
So i used Zk this tip and used below code.


Now this line of code

Help me to prevent to close the modal Window..

ZK MVVM Get Which Event fired in ZUL

Most of time in ZK MVVM framework we used @Command to capture the event. But sometime we need to capture which event is fired by user so on that case we can use below code

How to enable bilingual support in Zk Framework?

Here is the demo code how you can change the language in zk project in one shot. Zk Supports lots of language like Hindi,English,French etc. More information you can check ZK framework official website

How to call Simple javascript function in ZK ?

Lots of time developer have a issue how we can call a simple Java Script function in ZK framework .Let Us suppose we have a JavaScript function doSomething() now we have to call this function on some event ,let us suppose below code.

1-Declare below line in your ZUL(Top of the page)
2-Here i called a JavaScript function on Window onClose event

3-Write below JavaScript

ZK How to hide Calendar box from Calendar Component?

Here issue is that i want to show date like DD/MM/YYYY order in zk textbox but here i do not want to show the calendar or we can say i do not want to give freedom to choose date from From zk Calendar how we can resolve this issue ?
Here we can say we have two option
1-We can write a Type Converter class and use in label you can see example here Databinding-with-TypeConverter-sample
2-There is another option, use datebox with buttonVisible="false" attribute.

ZK:- Get Instance of any ZUL component in ViewModel

I am using ZK MVVM Architecture . Today i got problem on Button click i want Listbox instance in ViewModel or my Java class so i found a solution which is provided by ZK itself.
Let us suppose you called below method on button click


If you will get here i used query("Pass Component Name ") method and it will return the object of that component. But here can be problem if more than one type of compoennt defined in page will see how to resolve that also.

How to concat two variable in ZUL?

One of my friend come to me and told i will want to concatenation two variable in ZUL and show it user and asked is this possible i am also not totally 100% confident about it but when i browsed ZK Official Documentation i found some helpful information in this and when i tried this i got the solution for example please check below code

ZUL Code for this

br/> And View have the concatenation method and two variable which defined in zul file

ZK MVC Upload Example

The ZUL file code for this will be


And the Java Code

ZK Listbox MouseOver CSS Overriding or Remove Hover

See the below code for this.

ZK Application Performance Boosting Tips

1-Handling Huge data:-Use Model and Paging
2-Turn on ROD(Rendered on Demand feature) loads only the necessary chunk from associaed ListModel,item are olny created and sent to client when visible,Boost performance client side as well as server side,Less memory usage on Client side and server side

3-Implement OWN ListModel,TreeModel
Extends from AbstractListModel,AbstractTreeModel
ListModel ,DefaultTreeModel assumes all data is available in memory,however it is not pragmatic to load data at once
By implemeting custom model you can load only segment of data required and progressively allocate/de-allocate data
This furthers server side optimization of handling huge data in addition to ROD
Defer Creation of Child Components
Do not create Components unless you need them

Defer the rendering of child widgets
do not create delay creating rendering components in case you still need them
unlike fulfill components are created immediately only the rendering is delayed
Just a UX trick but is effective

Minimize # of JS files to load
Why?
More # of JS files means more # of Get Request
Why ZK doesnt budle all in one by default?
Not all required
Make payload that much bigger even of Simple pages
User server side include for all and only load single load this single page like this
Load JS And CSS resources from server nearby
Why?
Close so loads faster
Main Server load can be reduced
How?
HOST ZK static resource Server
Implement a Encodes.URLEncoder to serve the static resources JS & CSS from nearby Server
Use Stub only components to reduce the server memory footprint Why?
Each ZK Components has 2 Counterparts A widget, that represents it on browser side A Components , normally a Java Object instance, that holds component state Howe ever if you only need for layout of render particular info/data then you may not need it's Java object instance on server side
What about really truly huge data requirement?
Why?
Sometimes you just have to show hundreds of thousands of row/column data
and not use paging
ROD is not enough
For that Use BigListbox
How?
Just Like any other data Component
Use compiled Java Code,No Zscript
Reuse Desktop
Use only for pages that takes longer to generate
You could also employ time based strategy
Use button mold "os"
Use lighter components where possible eb Hlayout/vlayout instead of hbox/vbox
Detach and reattach instead of visible="false"
Note:- This all data from ZK Training session from Zk Team

How to replace to ZScript code from Production Ready code from JavaScript :ZK

Today i am going to discuss about a very good think how we can replace Zscript use from production server , as it is my personal experience when i have any issue in zk and i asked something in ZK forum or Stackoverflow i found many times people answer with Zscript may be because its easy to write and run very easily .
But what will happen when we have Zscript disable in our Zk project something like this in zk.xml file
Also in somewhere in Zk Document, i already read that Zscript not for production server its only for testing purpose so never use ZScript in production code.
Let me explain the issue and solution in briefly few week back i have wrote about ZK+RapidSpell Checker integration but that example not working when zul have parent-child relationship like if zul is part of tabs and tabs are part of index.zul so index.zul is parent of all the zul
So i have to ask this question in Stackoverflow and as expected i got the help from two guys @benbai and @Jim but i saw solution was on Zscript again its a problem for me because as i already mentioned above i can not use Zscript so what the solution how to ignore Zscript code ?
Here is the Zscript code with solution

And i have to use this code and it replaces Zscript code with JavaScript

So this is one way to do this and ignore using Zscript.

How to call JavaScript Function from ViewModel(Java Class) in ZK

Today i will tell you how we can call Java Script function from view model of that particular zul , Let us suppose you have A.zul file something like this ...


Now you will want to call closeBrowser() method from your ViewModel I mean from MyViewModel.java class, So you have to write below code in your viewModel or Java class inside any method



Note:- I did not test the code but some of my team member already done this thing show i took help from them to write this blog entry and it will work because it is working in our application.

How to avoid to load ZK Powered Logo?

As we know when any page load zk powered logo shown and if i am making any website or product for any individual client its not look good to me as well as client.

Now everyone know these design,look and feel and images are manage by CSS classes ,but sometime its hard to know which CSS used by ZK,for this above issue you can override some css class and css class which you have to override .
This Css used by ZK



Now you can change image or no any image

background-image:none

For more information you can check this question , i am using ZK EE may be because in my case above thing working .