New component not rendering properly

asked 2015-09-03 08:27:28 +0800

bogdanradu gravatar image bogdanradu

updated 2015-09-04 00:54:54 +0800

cor3000 gravatar image cor3000
5868 2 7
ZK Team


I am new to ZK Framework and I am trying to create my own Component/Widget. I have followed ZKComponentDevelopment_Essentials documentation and have created a component and have been unable to answer the following questions:

1) Is the mold output simple html or zul components?

Considering the output, I say that it's pure html.

2) Why does the server render an older version of the component, even though I changed the mold completely? (Note: it doesn't always happen)

As an example: I was rendering a piece of text followed by a red div of 50px by 50px, then changed to borderlayout and it was rendering the old version.

3) Why doesn't it render my component properly?

Instead of a borderlayout with the name on top and the other 2 attributes in the east and west corner, i get the first two attributes on the first line, with no spacing between them and the last one on the second one.

Note: As this is my first post ever, I do not know and could not find a way to post the mold and zul as they are (that's why i added the \ - they were not visible ). If anyone knows how, please do share how.

Here is the code:

Java class:

public class Model extends XulElement {

    private static final long serialVersionUID = 1L;
    private String name;
    private String aid;
    private String job;

    public String getName() {
        return name;

    public void setName(String name) {
        this.name = name;

    public String getAid() {
        return aid;

    public void setAid(String aid) {
        this.aid = aid;

    public String getJob() {
        return job;

    public void setJob(String job) {
        this.job = job;

    public static long getSerialversionuid() {
        return serialVersionUID;

    protected void renderProperties(ContentRenderer renderer) throws java.io.IOException {
        render(renderer, "name", name);
        render(renderer, "aid", aid);
        render(renderer, "job", job);


The JavaScript class:


example.model.Model = zk.$extends(zk.Widget, {
    name: '',
    aid: '',
    job: '',

    getName: function(){
        return this.name;
    setName: function(newName){
                this.$n().innerHTML = zUtl.encodeXML(name);
    getAid: function(){
        return this.aid;
    setAid: function(newAid){
                this.$n().innerHTML = zUtl.encodeXML(aid);
    getJob: function(){
        return this.job;
    setJob: function(newJob){
                this.$n().innerHTML = zUtl.encodeXML(job);


The mold:

    out.push('<\div',this.domAttrs_(),' width="300px" height="100px"',
                    '<\borderlayout  width="100%" height="100%">',
                        '<\north height="50%">',
                        '<\east width="50%">',
                        '<\west width="50%">',

The zul page:

 <\window title="Hello World!!" border="normal" width="200px">
  <\modelexample name="Stan" aid="Tae-kwon-do" job="Dancer"><\/modelexample >
delete flag offensive retag edit

1 Answer

Sort by ┬╗ oldest newest most voted

answered 2015-09-04 01:03:09 +0800

cor3000 gravatar image cor3000
5868 2 7
ZK Team

1) a mold is executed on the client side and should render HTML not ZUL, so your example trying to render a borderlayout cannot work (it looks like you might be better off with a macro component, or an include if you are trying to reuse the same zul fragment)

2) did you try to enable JS debugging and disable the caching? this could be a reason. see: http://books.zkoss.org/wiki/ZKClient-sideReference/Introduction/Debugging

3) see answer 1 the purpose of the mold is to create an HTML representation of your client side widget

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2015-09-03 08:27:28 +0800

Seen: 43 times

Last updated: Sep 04 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More