New component not rendering properly

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

bogdanradu
1

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

cor3000
6280 ● 2 ● 7

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>',
                        '<\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>