How to properly implement custom widgets: onRender vs constructor?
How to properly implement custom widgets: onRender vs constructor?
Hello everyone,
I'm currently evaluating gxt and for that purpose I want to create some new widgets. These widgets are just composed of existing widgets. E.g. I subclass a layout container and add some content panels and into them some other widgets.
What I am currently confused is whether I should populate these widgets in the constructor (gwt style) or in the onRender() method. I browsed through the examples and read in the help center, but I could not get a concise answer (sometimes it's done in the constructor, sometimes in onRender()). So what's the proper way to do this?
I'm currently evaluating gxt and for that purpose I want to create some new widgets. These widgets are just composed of existing widgets. E.g. I subclass a layout container and add some content panels and into them some other widgets.
What I am currently confused is whether I should populate these widgets in the constructor (gwt style) or in the onRender() method. I browsed through the examples and read in the help center, but I could not get a concise answer (sometimes it's done in the constructor, sometimes in onRender()). So what's the proper way to do this?
good and interesting question, I am using the constructor. I didn't think about it a lot neither dig around. Iam looking forward to more qualified answers hehe
Apparently it's just the two of us wondering how this is done properly ;-(
Did you already find a solution?
I'm currently creating the static structure inside the constructor and add the actual data displayed in the widget later on in a custom method, followed by a layout() call to ensure it's updated correctly.
I sometimes using the Constructor when i don't need to get the elements from the DOM, when i need to get the DOM i build inside onRender. The layout() doesn't workout very well for me inside the constructor, don't know why.
It all depends on what you are trying to do... If you are trying to use some sort of external library that relies on accessing the DOM in order to render something (i.e. swfobject.js) you will need to use the onLoad() method. I have found that if this is not the case, it tends to work best if you stick with the constructor method(less memory leaks). When you are using the onRender method, remember you will have to make sure you have error checking to see if the object has been drawn before calling any functions on it. If the object has not been rendered, you can simply change the parameters that the object will be rendered to. However, if the object has been rendered, you will need to perform changes to the object in the DOM, or change the perameters and redraw. When using the onLoad method, don't forget to also override the onUnload method to destroy your object and eliminate memory leaks.
This is risky if you do not know what you are doing and if this is not necessary you will end up making your entire app run on onRender calls, which will eliminate all pre-loading and be fairly cpu intensive because the object will either not be implemented correctly and you will get memory leaks, or it will re-create the objects instead of re-rendering them, which can cause more http requests or just more load time following user action. Also, if one object uses onRender unnecesarily any class that does any initialization to that object will have to wait for it to load, which will in turn have a cascading effect causing your whole app to run onLoad.