puzzling over dhtmlEmbed

Hey Max,

I'm trying to embed a dhtml app inside a div nested several
levels  
down from the html body, and running into some issues.

I'm generating something like the following Firebug output:

<div class="embedded-canvas">
<script type="text/javascript"
language="JavaScript">
   Lz.dhtmlEmbed({url:
'programs/LFC-$8.lzx?lzt=html&lzr=dhtml', id:  
'd0e34734', width: toString(500), height: toString(400)});
</script>
<div id="d0e34734Container"/>
</div>

And yet, at run time I'm seeing that dhtmlEmbed has created
another  
div with the same id at the top level:

<div id="d0e34734Container"
style="overflow: hidden;">
<div class="lzcanvasdiv" style="display:
block;">
[...]
</div>
</div>
<div class="lzcanvasclickdiv"
style="display: block;">
</div>
</div>

Walking down into embednew.js, dhtmlEmbed stashes the id in 

Lz.__propcache, and LzSprite retrieves them. Here's the
relevant  
portion of LzSprite's constructor.

         var p = Lz.__propcache;
         var divid = lzOptions.appendDivID ?
lzOptions.appendDivID :  
p.id + 'Container';
         var root = document.getElementById(divid);
         if (! root) {
             root = document.createElement('div');
             root.setAttribute('id', divid);
             document.body.appendChild(root);
         }

Looking at this code, it appears as though
lzOptions.appendDivID must  
be non-null, or else we'd pick up the div with the right id
before  
deciding to create a new one with a duplicate id. But
appendDivID !=  
__propcache.id, so what is appendDivID set to? Where do I
change its  
value? I searched in the lfc and compiler sources and didn't
find  
anything.

I'm also curious why, in the case where you create a new
root, you  
append it to the document body rather than using the 'owner'
 
parameter, presumably the parent div?

Another question: in the course of searching around on this,
I found  
the following code in html.lzx:

             <method name="init">
                 super.init();
                 if (! canvas.runttime == 'dhtml')
Debug.warn 
('Warning, the html tag is only supported in DHTML.');
                 this._i =
document.createElement('iframe');
                 var root = document.body;
                 var el = document.getElementById 
(lzOptions.appendDivID);
                 if (el) root = el;
                 this.position();
                 root.appendChild(this._i);
             </method>

Again, why default to document.body? Why not default to the
parent  
view's sprite's div?

What you'll want to do is set the lzOptions.appendDivID
global to the 
DIV id you want the embed inside of _before_ calling
embedSWF().  You 
can look at the dev console source for an example - where we
place the 
console in a div called 'console'.

Jim Grandy wrote:
> Hey Max,
> 
> I'm trying to embed a dhtml app inside a div nested
several levels down 
> from the html body, and running into some issues.
> 
> I'm generating something like the following Firebug
output:
> 
> <div class="embedded-canvas">
> <script type="text/javascript"
language="JavaScript">
>   Lz.dhtmlEmbed({url:
'programs/LFC-$8.lzx?lzt=html&lzr=dhtml', id: 
> 'd0e34734', width: toString(500), height:
toString(400)});
> </script>
> <div id="d0e34734Container"/>
> </div>
> 
> And yet, at run time I'm seeing that dhtmlEmbed has
created another div 
> with the same id at the top level:
> 
> <div id="d0e34734Container"
style="overflow: hidden;">
> <div class="lzcanvasdiv"
style="display: block;">
> [...]
> </div>
> </div>
> <div class="lzcanvasclickdiv"
style="display: block;">
> </div>
> </div>
> 
> Walking down into embednew.js, dhtmlEmbed stashes the
id in 
> Lz.__propcache, and LzSprite retrieves them. Here's the
relevant portion 
> of LzSprite's constructor.
> 
>         var p = Lz.__propcache;
>         var divid = lzOptions.appendDivID ?
lzOptions.appendDivID : p.id 
> + 'Container';
>         var root = document.getElementById(divid);
>         if (! root) {
>             root = document.createElement('div');
>             root.setAttribute('id', divid);
>             document.body.appendChild(root);
>         }
> 
> Looking at this code, it appears as though
lzOptions.appendDivID must be 
> non-null, or else we'd pick up the div with the right
id before deciding 
> to create a new one with a duplicate id. But
appendDivID != 
> __propcache.id, so what is appendDivID set to? Where do
I change its 
> value? I searched in the lfc and compiler sources and
didn't find anything.
> 
> I'm also curious why, in the case where you create a
new root, you 
> append it to the document body rather than using the
'owner' parameter, 
> presumably the parent div?
> 
> Another question: in the course of searching around on
this, I found the 
> following code in html.lzx:
> 
>             <method name="init">
>                 super.init();
>                 if (! canvas.runttime == 'dhtml')
Debug.warn('Warning, 
> the html tag is only supported in DHTML.');
>                 this._i =
document.createElement('iframe');
>                 var root = document.body;
>                 var el =
document.getElementById(lzOptions.appendDivID);
>                 if (el) root = el;
>                 this.position();
>                 root.appendChild(this._i);
>             </method>
> 
> Again, why default to document.body? Why not default to
the parent 
> view's sprite's div?

-- 
Regards,
Max Carlson
OpenLaszlo.org

is lzOptions.appendDivID a public interface?

Thanks

jrs

On Mar 7, 2007, at 1:41 PM, Max Carlson wrote:

> What you'll want to do is set the lzOptions.appendDivID
global to  
> the DIV id you want the embed inside of _before_
calling embedSWF 
> ().  You can look at the dev console source for an
example - where  
> we place the console in a div called 'console'.

And: didn't you recommend using the id: option? Why should I
have to  
do both? And why isn't appendDivID null if I didn't set it?

jim

On Mar 7, 2007, at 10:52 AM, John Sundman wrote:

> is lzOptions.appendDivID a public interface?
>
> Thanks
>
> jrs
>
> On Mar 7, 2007, at 1:41 PM, Max Carlson wrote:
>
>> What you'll want to do is set the
lzOptions.appendDivID global to  
>> the DIV id you want the embed inside of _before_
calling embedSWF 
>> ().  You can look at the dev console source for an
example - where  
>> we place the console in a div called 'console'.
>

More specific replies below:

Jim Grandy wrote:
> Hey Max,
> 
> I'm trying to embed a dhtml app inside a div nested
several levels down 
> from the html body, and running into some issues.
> 
> I'm generating something like the following Firebug
output:
> 
> <div class="embedded-canvas">
> <script type="text/javascript"
language="JavaScript">
>   Lz.dhtmlEmbed({url:
'programs/LFC-$8.lzx?lzt=html&lzr=dhtml', id: 
> 'd0e34734', width: toString(500), height:
toString(400)});
> </script>
> <div id="d0e34734Container"/>
> </div>

It's a drag that height and width must be strings - I'll fix
that.

> And yet, at run time I'm seeing that dhtmlEmbed has
created another div 
> with the same id at the top level:
> 
> <div id="d0e34734Container"
style="overflow: hidden;">
> <div class="lzcanvasdiv"
style="display: block;">
> [...]
> </div>
> </div>
> <div class="lzcanvasclickdiv"
style="display: block;">
> </div>
> </div>
> 
> Walking down into embednew.js, dhtmlEmbed stashes the
id in 
> Lz.__propcache, and LzSprite retrieves them. Here's the
relevant portion 
> of LzSprite's constructor.
> 
>         var p = Lz.__propcache;
>         var divid = lzOptions.appendDivID ?
lzOptions.appendDivID : p.id 
> + 'Container';
>         var root = document.getElementById(divid);
>         if (! root) {
>             root = document.createElement('div');
>             root.setAttribute('id', divid);
>             document.body.appendChild(root);
>         }
> 
> Looking at this code, it appears as though
lzOptions.appendDivID must be 
> non-null, or else we'd pick up the div with the right
id before deciding 
> to create a new one with a duplicate id. But
appendDivID != 
> __propcache.id, so what is appendDivID set to? Where do
I change its 
> value? I searched in the lfc and compiler sources and
didn't find anything.

lzOptions.appendDivID is a global, set in browser
javascript.  You can 
see an example in the developer's console, where the app
must end up in 
a specific div.

I use p.id + 'Container' here for consistency across
swfEmbed() and 
dhtmlEmbed(), mostly because that's what swfEmbed() does.

I think the right thing here is to allow appendDivID to be
passed in as 
an  argument to each embed call - globals suck!

> I'm also curious why, in the case where you create a
new root, you 
> append it to the document body rather than using the
'owner' parameter, 
> presumably the parent div?

This is only done for the root sprite - in which case the
'owner' is the 
canvas sprite.  Since there's usually nothing else in the
document at 
canvas init time, the sprite binds into the document.body
unless told 
otherwise.

> Another question: in the course of searching around on
this, I found the 
> following code in html.lzx:
> 
>             <method name="init">
>                 super.init();
>                 if (! canvas.runttime == 'dhtml')
Debug.warn('Warning, 
> the html tag is only supported in DHTML.');
>                 this._i =
document.createElement('iframe');
>                 var root = document.body;
>                 var el =
document.getElementById(lzOptions.appendDivID);
>                 if (el) root = el;
>                 this.position();
>                 root.appendChild(this._i);
>             </method>
> 
> Again, why default to document.body? Why not default to
the parent 
> view's sprite's div?

This is so the iframe reliably floats on top of any other
lzx and 
remains clickable.  It'll have to be smarter for layering,
etc.

-- 
Regards,
Max Carlson
OpenLaszlo.org

Comments inline.

On Mar 7, 2007, at 11:16 AM, Max Carlson wrote:

>
> It's a drag that height and width must be strings -
I'll fix that.
>
Thanks, good idea. But that part works, so I don't care so
much right  
now 

>> And yet, at run time I'm seeing that dhtmlEmbed has
created  
>> another div with the same id at the top level:
>> <div id="d0e34734Container"
style="overflow: hidden;">
>> <div class="lzcanvasdiv"
style="display: block;">
>> [...]
>> </div>
>> </div>
>> <div class="lzcanvasclickdiv"
style="display: block;">
>> </div>
>> </div>
>> Walking down into embednew.js, dhtmlEmbed stashes
the id in  
>> Lz.__propcache, and LzSprite retrieves them. Here's
the relevant  
>> portion of LzSprite's constructor.
>>         var p = Lz.__propcache;
>>         var divid = lzOptions.appendDivID ?  
>> lzOptions.appendDivID : p.id + 'Container';
>>         var root = document.getElementById(divid);
>>         if (! root) {
>>             root = document.createElement('div');
>>             root.setAttribute('id', divid);
>>             document.body.appendChild(root);
>>         }
>> Looking at this code, it appears as though
lzOptions.appendDivID  
>> must be non-null, or else we'd pick up the div with
the right id  
>> before deciding to create a new one with a
duplicate id. But  
>> appendDivID != __propcache.id, so what is
appendDivID set to?  
>> Where do I change its value? I searched in the lfc
and compiler  
>> sources and didn't find anything.
>
> lzOptions.appendDivID is a global, set in browser
javascript.  You  
> can see an example in the developer's console, where
the app must  
> end up in a specific div.
>
So it is set by convention, but should be null unless I set
it,  
right? Then we're back to my earlier question: if I don't
set  
lzOptions.appendDivID, but I *do* set Lz.__propcache.id, why
is  
appendDivID still apparently non-null?

(I should say I haven't gone in and instrumented embednew.js
to  
confirm this, but it seems likely to be the case because I
*do*  
create a div with the right ID, but this code above still
creates a  
new div with the same ID underneath the document body.
> I use p.id + 'Container' here for consistency across
swfEmbed() and  
> dhtmlEmbed(), mostly because that's what swfEmbed()
does.
>
A bit obscure, and not ideal, but workable.
> I think the right thing here is to allow appendDivID to
be passed  
> in as an  argument to each embed call - globals suck!
>
Isn't that what Lz.__propcache.id is for?
>> I'm also curious why, in the case where you create
a new root, you  
>> append it to the document body rather than using
the 'owner'  
>> parameter, presumably the parent div?
>
> This is only done for the root sprite - in which case
the 'owner'  
> is the canvas sprite.  Since there's usually nothing
else in the  
> document at canvas init time, the sprite binds into the
 
> document.body unless told otherwise.
>
Well, that may be the common case, but you should still make
the less  
common case possible. Here, I want to be able to embed a
live   
example within a documentation page, and I want to be able
to toggle  
hidden/shown and to show in any of the supported runtimes
(currently  
swf or dhtml). This needs to be done in place, so it seems
like using  
the 'owner' parameter would make the most sense. If the code
did  
that, I wouldn't have to go to the trouble of creating a div
with the  
right id+'Container' at all -- the right thing would just
happen.
>> Another question: in the course of searching around
on this, I  
>> found the following code in html.lzx:
>>             <method name="init">
>>                 super.init();
>>                 if (! canvas.runttime == 'dhtml')
Debug.warn 
>> ('Warning, the html tag is only supported in
DHTML.');
>>                 this._i =
document.createElement('iframe');
>>                 var root = document.body;
>>                 var el = document.getElementById 
>> (lzOptions.appendDivID);
>>                 if (el) root = el;
>>                 this.position();
>>                 root.appendChild(this._i);
>>             </method>
>> Again, why default to document.body? Why not
default to the parent  
>> view's sprite's div?
>
> This is so the iframe reliably floats on top of any
other lzx and  
> remains clickable.  It'll have to be smarter for
layering, etc.
>
Gotcha, that makes sense.
> -- 
> Regards,
> Max Carlson
> OpenLaszlo.org

I have fixes for all of this.  I'm about to send out for
review...

Jim Grandy wrote:
> Comments inline.
> 
> On Mar 7, 2007, at 11:16 AM, Max Carlson wrote:
> 
>>
>> It's a drag that height and width must be strings -
I'll fix that.
>>
> Thanks, good idea. But that part works, so I don't care
so much right 
> now 
> 
>>> And yet, at run time I'm seeing that dhtmlEmbed
has created another 
>>> div with the same id at the top level:
>>> <div id="d0e34734Container"
style="overflow: hidden;">
>>> <div class="lzcanvasdiv"
style="display: block;">
>>> [...]
>>> </div>
>>> </div>
>>> <div class="lzcanvasclickdiv"
style="display: block;">
>>> </div>
>>> </div>
>>> Walking down into embednew.js, dhtmlEmbed
stashes the id in 
>>> Lz.__propcache, and LzSprite retrieves them.
Here's the relevant 
>>> portion of LzSprite's constructor.
>>>         var p = Lz.__propcache;
>>>         var divid = lzOptions.appendDivID ?
lzOptions.appendDivID : 
>>> p.id + 'Container';
>>>         var root =
document.getElementById(divid);
>>>         if (! root) {
>>>             root =
document.createElement('div');
>>>             root.setAttribute('id', divid);
>>>             document.body.appendChild(root);
>>>         }
>>> Looking at this code, it appears as though
lzOptions.appendDivID must 
>>> be non-null, or else we'd pick up the div with
the right id before 
>>> deciding to create a new one with a duplicate
id. But appendDivID != 
>>> __propcache.id, so what is appendDivID set to?
Where do I change its 
>>> value? I searched in the lfc and compiler
sources and didn't find 
>>> anything.
>>
>> lzOptions.appendDivID is a global, set in browser
javascript.  You can 
>> see an example in the developer's console, where
the app must end up 
>> in a specific div.
>>
> So it is set by convention, but should be null unless I
set it, right? 
> Then we're back to my earlier question: if I don't set

> lzOptions.appendDivID, but I *do* set
Lz.__propcache.id, why is 
> appendDivID still apparently non-null?
> 
> (I should say I haven't gone in and instrumented
embednew.js to confirm 
> this, but it seems likely to be the case because I *do*
create a div 
> with the right ID, but this code above still creates a
new div with the 
> same ID underneath the document body.
>> I use p.id + 'Container' here for consistency
across swfEmbed() and 
>> dhtmlEmbed(), mostly because that's what swfEmbed()
does.
>>
> A bit obscure, and not ideal, but workable.
>> I think the right thing here is to allow
appendDivID to be passed in 
>> as an  argument to each embed call - globals suck!
>>
> Isn't that what Lz.__propcache.id is for?
>>> I'm also curious why, in the case where you
create a new root, you 
>>> append it to the document body rather than
using the 'owner' 
>>> parameter, presumably the parent div?
>>
>> This is only done for the root sprite - in which
case the 'owner' is 
>> the canvas sprite.  Since there's usually nothing
else in the document 
>> at canvas init time, the sprite binds into the
document.body unless 
>> told otherwise.
>>
> Well, that may be the common case, but you should still
make the less 
> common case possible. Here, I want to be able to embed
a live  example 
> within a documentation page, and I want to be able to
toggle 
> hidden/shown and to show in any of the supported
runtimes (currently swf 
> or dhtml). This needs to be done in place, so it seems
like using the 
> 'owner' parameter would make the most sense. If the
code did that, I 
> wouldn't have to go to the trouble of creating a div
with the right 
> id+'Container' at all -- the right thing would just
happen.
>>> Another question: in the course of searching
around on this, I found 
>>> the following code in html.lzx:
>>>             <method
name="init">
>>>                 super.init();
>>>                 if (! canvas.runttime ==
'dhtml') 
>>> Debug.warn('Warning, the html tag is only
supported in DHTML.');
>>>                 this._i =
document.createElement('iframe');
>>>                 var root = document.body;
>>>                 var el =
document.getElementById(lzOptions.appendDivID);
>>>                 if (el) root = el;
>>>                 this.position();
>>>                 root.appendChild(this._i);
>>>             </method>
>>> Again, why default to document.body? Why not
default to the parent 
>>> view's sprite's div?
>>
>> This is so the iframe reliably floats on top of any
other lzx and 
>> remains clickable.  It'll have to be smarter for
layering, etc.
>>
> Gotcha, that makes sense.
>> --Regards,
>> Max Carlson
>> OpenLaszlo.org
> 

-- 
Regards,
Max Carlson
OpenLaszlo.org