Web container background cant set: xojo scrolling example

Michael_Batakis · March 21, 2018, 1:01pm

Hello,
I have made a webcontainer which have a weblistbox and another S container taken from xojo scrolling example (it does add controls in a scrollable area, actually it consists of one webcontainer inside another which i s the S container). When i try to instantiate a New one on my webpage through code, i got a javascript error when try to calli the addcontrol method.
If i create an instance in design-time by copy an instance to my webpage, the background color is lost and it is unable to set it up. I am doing someting wrong, i know, could you please give a help?

I could live without backcolors but this limits the UI aesthetic.

Tim_Parnell · March 21, 2018, 1:30pm

We’ll need to see your code and the javascript error to help.

Michael_Batakis · March 21, 2018, 2:03pm

Thanks for wanting to help Tim. How can we do that? Using Teamviewer? Is dufficult to isolate only that part of the code… or you want to capture the javascriot error text and the lines related to instatiating the WebContainer?

Tim_Parnell · March 21, 2018, 2:27pm

Well, let’s start with the Javascript error.

When it pops up, just copy the text and paste it here within [code] blocks. If we can discern enough from the error to ask for a specific chunk then that might help narrow it down.

Michael_Batakis · March 21, 2018, 3:12pm


Could not execute returned javascript: Cannot set property 'checked' of null
Source: Xojo.get('CNdy6L2U_switch-input').checked=false;
Xojo.get('wI4pACr9_switch-input').checked=false;
/* Loading gwsDemo which is a graffitisuite */var theElement = document.getElementById('TJqjYaiW');if (typeof(theElement) !== 'undefined' && theElement !== null) {theElement.style.width='300px';theElement.style.maxWidth='300px';theElement.style.minWidth='300px';}
/* Loading gwsDemo which is a graffitisuite */var theElement = document.getElementById('TJqjYaiW');if (typeof(theElement) !== 'undefined' && theElement !== null) {theElement.style.height='400px';theElement.style.maxHeight='400px';theElement.style.minHeight='400px';}
/* Loading gwsDemo which is a graffitisuite */var theElement = document.getElementById('TJqjYaiW');if (typeof(theElement) !== 'undefined' && theElement !== null) {theElement.style.left='519px';}
/* Loading gwsDemo which is a graffitisuite */var theElement = document.getElementById('TJqjYaiW');if (typeof(theElement) !== 'undefined' && theElement !== null) {theElement.style.top='20px';}
/* Loading gwsDemo which is a graffitisuite */var theElement = document.getElementById('TJqjYaiW');if (typeof(theElement) !== 'undefined' && theElement !== null) {theElement.style.visibility = 'visible';}
/* Loading gwsDemo which is a graffitisuite */var theElement = document.getElementById('TJqjYaiW');if (typeof(theElement) !== 'undefined' && theElement !== null) {theElement.style.cursor = 'auto';}
Xojo.createNamespace("jly.WebSwitch");
Xojo.createNamespace("jly.WebSwitch");
Xojo.createNamespace("graffitisuite.webspeech");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('GHvz40er',[]);
Xojo.controls['GHvz40er'].setEnabled(true);
new textcontrol('VCYoi8ct',[]);
Xojo.controls['VCYoi8ct'].setEnabled(true);
new textlabel('JSPRMBs8',['TextChanged']);
Xojo.controls['JSPRMBs8'].setEnabled(true);
Xojo.controls['JSPRMBs8'].setMultiline(true);
new popupmenu('T4plP9Eo',[]);
Xojo.controls['T4plP9Eo'].setEnabled(true);
Xojo.controls['T4plP9Eo'].shouldBecomeVisible = false;
Xojo.controls['T4plP9Eo'].setValue(-1);
new textcontrol('TQaHaPQ8',['DoubleClick']);
Xojo.controls['TQaHaPQ8'].setEnabled(true);
new textlabel('UwkyGEH0',['TextChanged']);
Xojo.controls['UwkyGEH0'].setEnabled(true);
new container('UkEo4mwq',['Close','Open','Shown']);
Xojo.controls['UkEo4mwq'].setEnabled(true);
Xojo.comm.triggerEvent('UkEo4mwq','shown');
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('SU9l00uJ',[]);
Xojo.controls['SU9l00uJ'].setEnabled(true);
new textcontrol('rffqg7r0',[]);
Xojo.controls['rffqg7r0'].setEnabled(true);
new textlabel('qCLsaxAD',['TextChanged']);
Xojo.controls['qCLsaxAD'].setEnabled(true);
Xojo.controls['qCLsaxAD'].setMultiline(true);
new popupmenu('vSkbypO4',[]);
Xojo.controls['vSkbypO4'].setEnabled(true);
Xojo.controls['vSkbypO4'].shouldBecomeVisible = false;
Xojo.controls['vSkbypO4'].setValue(-1);
new textcontrol('KTQpeKfJ',['DoubleClick']);
Xojo.controls['KTQpeKfJ'].setEnabled(true);
new textlabel('U9euByPG',['TextChanged']);
Xojo.controls['U9euByPG'].setEnabled(true);
new container('Bp4MpQ98',['Close','Open','Shown']);
Xojo.controls['Bp4MpQ98'].setEnabled(true);
Xojo.comm.triggerEvent('Bp4MpQ98','shown');
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('ULWXlBga',[]);
Xojo.controls['ULWXlBga'].setEnabled(true);
new textcontrol('vbXKWouu',[]);
Xojo.controls['vbXKWouu'].setEnabled(true);
new textlabel('bCI5wyFl',['TextChanged']);
Xojo.controls['bCI5wyFl'].setEnabled(true);
Xojo.controls['bCI5wyFl'].setMultiline(true);
new popupmenu('Nv87wkNO',[]);
Xojo.controls['Nv87wkNO'].setEnabled(true);
Xojo.controls['Nv87wkNO'].shouldBecomeVisible = false;
Xojo.controls['Nv87wkNO'].setValue(-1);
new textcontrol('zMO2uvx3',['DoubleClick']);
Xojo.controls['zMO2uvx3'].setEnabled(true);
new textlabel('quhSFTdx',['TextChanged']);
Xojo.controls['quhSFTdx'].setEnabled(true);
new container('Rs3mmJaD',['Close','Open','Shown']);
Xojo.controls['Rs3mmJaD'].setEnabled(true);
Xojo.comm.triggerEvent('Rs3mmJaD','shown');
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('D430nxbP',[]);
Xojo.controls['D430nxbP'].setEnabled(true);
new textcontrol('pmg6jHIn',[]);
Xojo.controls['pmg6jHIn'].setEnabled(true);
new textlabel('tiI1FD0g',['TextChanged']);
Xojo.controls['tiI1FD0g'].setEnabled(true);
Xojo.controls['tiI1FD0g'].setMultiline(true);
new popupmenu('IJKuJIKa',[]);
Xojo.controls['IJKuJIKa'].setEnabled(true);
Xojo.controls['IJKuJIKa'].shouldBecomeVisible = false;
Xojo.controls['IJKuJIKa'].setValue(-1);
new textcontrol('QFLepIDm',['DoubleClick']);
Xojo.controls['QFLepIDm'].setEnabled(true);
new textlabel('zRXT3A9m',['TextChanged']);
Xojo.controls['zRXT3A9m'].setEnabled(true);
new container('v1AvShMX',['Close','Open','Shown']);
Xojo.controls['v1AvShMX'].setEnabled(true);
Xojo.comm.triggerEvent('v1AvShMX','shown');
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('Ms3oYw77',[]);
Xojo.controls['Ms3oYw77'].setEnabled(true);
new textcontrol('WoiwkHEB',[]);
Xojo.controls['WoiwkHEB'].setEnabled(true);
new textlabel('lExvIuKc',['TextChanged']);
Xojo.controls['lExvIuKc'].setEnabled(true);
Xojo.controls['lExvIuKc'].setMultiline(true);
new popupmenu('ZMdosYta',[]);
Xojo.controls['ZMdosYta'].setEnabled(true);
Xojo.controls['ZMdosYta'].shouldBecomeVisible = false;
Xojo.controls['ZMdosYta'].setValue(-1);
new textcontrol('orH68iqC',['DoubleClick']);
Xojo.controls['orH68iqC'].setEnabled(true);
new textlabel('uMUhrZtU',['TextChanged']);
Xojo.controls['uMUhrZtU'].setEnabled(true);
new container('DSqiNh7e',['Close','Open','Shown']);
Xojo.controls['DSqiNh7e'].setEnabled(true);
Xojo.comm.triggerEvent('DSqiNh7e','shown');
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('KuxL4Tcc',[]);
Xojo.controls['KuxL4Tcc'].setEnabled(true);
new textcontrol('yXlXSBDF',[]);
Xojo.controls['yXlXSBDF'].setEnabled(true);
new textlabel('RBKOS3vp',['TextChanged']);
Xojo.controls['RBKOS3vp'].setEnabled(true);
Xojo.controls['RBKOS3vp'].setMultiline(true);
new popupmenu('CCh493ge',[]);
Xojo.controls['CCh493ge'].setEnabled(true);
Xojo.controls['CCh493ge'].shouldBecomeVisible = false;
Xojo.controls['CCh493ge'].setValue(-1);
new textcontrol('aAQjxSUF',['DoubleClick']);
Xojo.controls['aAQjxSUF'].setEnabled(true);
new textlabel('YW7UC4x3',['TextChanged']);
Xojo.controls['YW7UC4x3'].setEnabled(true);
new container('YD1mVgQT',['Close','Open','Shown']);
Xojo.controls['YD1mVgQT'].setEnabled(true);
Xojo.comm.triggerEvent('YD1mVgQT','shown');
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
Xojo.createNamespace("graffitisuite.webbutton");
new frameworkObject('iMUOOHOS',[]);
Xojo.controls['iMUOOHOS'].setEnabled(true);
new textcontrol('TEo3HfTC',[]);
Xojo.controls['TEo3HfTC'].setEnabled(true);
new textlabel('kwnnLRI5',['TextChanged']);
Xojo.controls['kwnnLRI5'].setEnabled(true);
Xojo.controls['kwnnLRI5'].setMultiline(true);
new popupmenu('nxCrJVvX',[]);
Xojo.controls['nxCrJVvX'].setEnabled(true);
Xojo.controls['nxCrJVvX'].shouldBecomeVisible = false;
Xojo.controls['nxCrJVvX'].setValue(-1);
new textcontrol('ZwEcRzEm',['DoubleClick']);
Xojo.controls['ZwEcRzEm'].setEnabled(true);
new textlabel('dJYRpveH',['TextChanged']);
Xojo.controls['dJYRpveH'].setEnabled(true);
new container('MkVzibxM',['Close','Open','Shown']);
Xojo.controls['MkVzibxM'].setEnabled(true);
didFinishLoading();
Xojo.comm.triggerEvent('MkVzibxM','shown');

Tim_Parnell · March 21, 2018, 3:22pm

So from this error text it looks like the issue is with a WebSwitch not being created in the browser, and at some point you’re telling it to be unchecked when it doesn’t exist.

If you take the WebSwitch out of the container does the error stop appearing?

Can you reproduce the issue on a simple project that you’d be able to share?
Edit: Actually, no you can’t. WebSwitch is a control from Jeremie Leroy, so you can’t share that code.

Louis_D · March 21, 2018, 3:30pm

What happens if you remove both Jeremy Leroy controls and GraffittiSuite controls ?

When troubleshooting an issue it is good to start simple and add items gradually in order to facilitate pinpointing of the issue.

Michael_Batakis · March 21, 2018, 3:34pm

No this web-switch is from a free MaterializeWeb.xojo found on github… i will try your suggestion,and let you know Tim,thanks again. Meanwhile could you tell me with sub-webcontainers backround not shown/set (it is it possible to upload a captured screen here just to have a look?)

Tim_Parnell · March 21, 2018, 3:41pm

The forum itself does not accept files. You can upload images to imgur.com if you plan to embed within the post, or place images/files in a cloud drive like Dropbox and share the link here.

I’m not certain I recall hearing anything about issues with webcontainers and background colors. However, if you’re building something complex, you should probably look into the WebSDK and creating your own control with HTML / Javascript / Xojo code.

The WebSDK documentation is found in the Extras folder next to your Xojo install.

Michael_Batakis · March 21, 2018, 5:11pm

Yes j will try to experiment and hope to solve thd problem even i have already tackle it satisfactory. Thank you all for the suggestions

Michael_Batakis · March 21, 2018, 10:43pm

I confirm that the WebSwitch is Leroy’s one.

Regarding the webcontainer i found this strange thing: when i define a doubleclick event on the webpage and double click on the listbox of the container, it fires the doubleclick of the webpage (it is like container’s backgroud is transparent thus the ‘lost color effect’)!
I don’t know if this happens because of the Jeremies Leroy addon or I make a bad use of it as the current documentation of it, is obsolate… i like drawer class and in general the ‘feeling’ of the design of his add on and this is the reason i use it… but if it is buggy and with poor support then this make their use unfortunate

If somebody has confront such a strange behaviour without using addon,please let me know.

Web container background cant set: xojo scrolling example

Web container background cant set: xojo scrolling example