Revision history [back]

Hello,

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 {
    super.renderProperties(renderer);
    render(renderer, "name", name);
    render(renderer, "aid", aid);
    render(renderer, "job", job);
}

}

The JavaScript class:

zk.$package('example.model');

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

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

});

The mold:

function(out){ out.push('<\div',this.domAttrs_(),' width="300px" height="100px"', '<\borderlayout width="100%" height="100%">', '<\north height="50%">', this.getName(), '<\/north>', '<\east width="50%">', this.getAid(), '<\/east>', '<\center>', '<\west width="50%">', this.getJob(), '<\/west>', '<\south></south>', '<\/borderlayout>', '<\/div>' ); }

The zul page:

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

Hello,

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 {
     super.renderProperties(renderer);
     render(renderer, "name", name);
     render(renderer, "aid", aid);
     render(renderer, "job", job);
    }

}
 
} 
The JavaScript class:
 
zk.$package('example.model');
 
example.model.Model = zk.$extends(zk.Widget, {
    name: '',
    aid: '',
    job: '',
 
'',

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

});
 
});
 
The mold: 
 
function(out){
    out.push('<\div',this.domAttrs_(),' width="300px" height="100px"',
                    '<\borderlayout  width="100%" height="100%">',
                        '<\north height="50%">',
                            this.getName(),
                        '<\/north>',
                        '<\east width="50%">',
                            this.getAid(),
                        '<\/east>',
                        '<\center>',
'<\center></center>',
                        '<\west width="50%">',
                            this.getJob(),
                        '<\/west>',
                        '<\south></south>',
                    '<\/borderlayout>',
                    '<\/div>'
        );
}
}
 
The zul page: 
 
<\window title="Hello World!!" border="normal" width="200px">
  <\modelexample name="Stan" aid="Tae-kwon-do" job="Dancer"><\/modelexample >
 <\/window>