Getting code from Visual Designer to work

Spreadsheet
#1

I’m playing with the Visual Designer, and I believe that I have followed the instructions to get the code to work, but nothing is appearing on the screen. Here’s the code:

<!DOCTYPE html>
 <head>
    <script src="../codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
 
    <script type="text/javascript">
        //Here you'll put code of your application
    	dhtmlx.image_path='./codebase/imgs/';

	var main_layout = new dhtmlXLayoutObject(document.body, '3E');

	var a = main_layout.cells('a');
	var toolbar_1 = a.attachToolbar();
	toolbar_1.setIconsPath('./codebase/imgs/');
	
	toolbar_1.loadXML('./data/toolbar.xml', function(){});
	var form_1 = a.attachForm();
	form_1.loadStruct('./data/form.xml');
    </script>
 
 </head>
 <body>
 </body>
</html>

Firebug is reporting “document.body is null” and referring to line 1179 of dhtmlx.js

I’ve tried moving the code to the body. That still just shows a blank screen (after I put up the dummy form.xml and toolbar.xml files).

Am I missing something :question:

Thank you,
Rob

#2

I don’t think it is my setup (codebase et al). For starters, Firebug isn’t reporting any errors that it can’t find files. Also, I loaded the contact tutorial, and it works.

But I’m open to anything :confused:

Thank you,
Rob

#3

When I look at the calculated HTML code in Firebug, this line stands out,

<div class="dhxcont_global_layout_area" style="left: 2px; top: 2px; width: 1451px; height: 0px;">

It is the last non-hidden div. The problem, as I see it, is that the height is 0px. Is that the problem? If so, why is it 0 and how do I fix it? It isn’t a property of anything I can edit in the Visual Designer. It is interesting, though, that the Contact tutorial isn’t exhibiting this behavior. Here’s the same line from that [code]

[/code]

Again, both of these are operating out of the same directory with the same codebase.

Thank you,
Rob

#4

I’ve tried moving the code to the body. That still just shows a blank screen (after I put up the dummy form.xml and toolbar.xml files).

Yep, this is the correct move.
One more thing - try to add the next line on the page

html, body{ height:100%; }
#5

OK, I got it to work. A couple of things I had to do which are not mentioned in the documentation,

First, I had to insert into the 

dhtmlxEvent(window,"load",function(){

and }); . The first snippet right after the dhtmlx.image_path declaration and the second right before the final

I also had to include the style from the tutorial,

<style> /*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/ html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color:white; } </style> in the header. That allowed it to calculate the height properly.

Again, these aren’t mentioned in the documentation for the Visual Designer section on “From the design to a real app”. Hopefully this will help someone else along the way.

Best regards,
Rob

#6

I am having the same issue. I didn’t have the dhtmlxevent to load the javascript function defined in head. With this, I can see the function being executed. But, after a certain point, it doesn’t execute. I am still getting a blank page.

Sample POC /*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/ html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color:white; } &lt
#7

Heyyyyy it worked. I included the dhtmlxEvent to load the window just after the image path declaration and closed it befoe the and it worked. My working code is pasted for anybody to refer back facing a similar issue.

Sample POC /*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/ html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color:white; } &lt
#8

dolby,

I could be wrong, but I don’t think you need the ‘stored_data’. That is a json version of your application that the Pro Version of Visual Designer uses. But it isn’t part of the application itself - the browser running the code doesn’t need it. So you can remove it from your final application to save on size (and prevent anyone from being able to copy your app from your starting point using the Visual Designer).

Best of luck,
Rob

#9

Rob,

Just saw your post now. I have already removed the stored data from my page. Thanks. :slight_smile:

Regards,
Devi