Hi,
I understand that embedded js files are bundled with Wisej javascript file and can be seen in the Developer tool. How about codes in the Extender? Is there a way to debug that?
Though I can access controls using the App.<window/page>.<control name> notation as stated here, is there something like an Id for controls like textbox, label, etc. that I can use in getElementById function?
Maybe I am missing something.
Thanks
Yep, by extender I though the property extender providers. I see what you mean now. The code entered in the JavaScript or JavaScriptSource properties added by the JavaScript extender is not bundled in wisej.js since it’s not available at loading time.
That code is sent to the JavaScript extender as a parameter (a value). You can find it if you place a break in “wisej.web.extender.JavaScript._applyScripts”.
However, the easiest way to debug anonymous javascript code (eval code) is to add the “debugger;” line to the code. When F12 is open it will break there and you will be able to debug the code:
this.addListener("click", function(){ debugger; alert("Hello Wisej"); });
Best,
Luca
Hi Cris,
The extenders (tooltips, bubbles, errorprovider, etc.) javascript code is also bundled in wisej.js and minified when not in debug mode.
The control’s id cannot be used with getElementById() since the javascript object is not an html element. The wisej widget usually has a content element (this.getContentElement()) that wraps a “fastdom” set of classes that are in turn rendered into html elements: this.getContentElement().getDomElement() returns the actuall html element if it has been created.
Basically wisej widgets cache any change to their visual appearance and flush it at once. If the code changes the location or size or color of a widget 100 times, it is rendered only once when flushed to the dom. That’s the FastDom technique.
Here are some ways to retrieve a widget from the id and from the dom:
If you have an html element that belongs to a widget:
var widget = wisej.utils.Widget.findWisejComponent(element);
or
var widget = qx.ui.core.Widget.getWidgetByElement(element);
The difference between the two is that the first always returns the wisej widget while the second may return an inner child qooxdoo widget used in a more complex composite wisej widget.
If you have a control id:
var widget = Wisej.Core.getComponent(id);
You can get the id of a control like this:
string id = ((IWisejControl)this.textBox1).Id;
or
string id = "id_" + this.textBox1.Handle;
HTH
Best,
Luca
Hi Luca,
Yes! It works.
Just wondering how “blur” event should behave and I do not know if this is a Javascript, Wisej or my problem.
I have 2 textboxes in a form and in Javascript property, I put a code in the first textbox as:
this.addListener(“blur”, function(){
debugger;
alert(“Hello Wisej”);
});
Above event doesn’t fire when I it shifts focus to the second textbox using a tab key. Mouse click in second textbox doesn’t work either. But it works when I click in the form/window itself.
Thanks.
Hi Luca,
Hi Luca,
Maybe I got you confused.
Supposed I have a button in a form/window and drop a Javascript Extender on a form and in button’s Javascript property, I put a javascript code like:
this.addListener("click", function(){ alert("Hello Wisej"); }); Is this also bundled in wisej.js? While in Chrome Develepor tool, I can't find the above code. Can you give me the right the direction on how to find them? Thanks.