Announcing the new <html/> tag for DHTML
I'm pleased to announce the introduction of the snappy new <html/> tag for DHTML. Essentially, it allows an HTML page to be embedded inside any OpenLaszlo component. Here's a simple demo browser:
http://labs.openlaszlo.org/legals-nightly/lps/components/extensions/test/html.lzx?lzr=dhtml&lzt=html
Here's the source for the app:
<canvas width="100%" height="100%">
<include href="extensions/html.lzx"/>
<class name="browser" extends="window" resizable="true" bgcolor="silver">
<edittext name="txt" text="http://openlaszlo.org/" width="300"/>
<button x="310" onclick="parent.htmlview.setSrc(parent.txt.getText()); parent.htmlview.setAttribute('visible', true)">Load</button>
<html name="htmlview" width="${parent.width - 19}" height="${parent.height - 74}" x="${parent.x + 7}" y="${parent.y + 53}"/>
</class>
<browser width="100%" height="100%" x="10" y="10"/>
</canvas>
As you can see, the HTML tag can be constrained to automatically resize to any view, in this case a window. The html tag's src attribute can also be set, or the setSrc() method can be called from LZX to reload the contents of the tag. It's a powerful feature, and we're looking forward to seeing all the exciting things you make with it!
January 31st, 2007 at 5:12 pm
Great! I’ve done something similar (like many other folks I guess) with layering DHTML divs.
Will this widget behave like any other view? Will it be possible, for example, to layout other views on top of it?
January 31st, 2007 at 5:15 pm
[...] Voir l’article [...]
January 31st, 2007 at 5:50 pm
Hi Candide,
The html tag uses an iframe to keep pages’ contents sandboxed, which makes externally loaded pages work better. It behaves like any view, except it floats on top of any lzx content to make sure clickable LZX objects don’t interfere with its contents.
If you only want to show a chunk of html in your application, you can use setText(’html content here’). In DHTML, setText() assigns the contents of the underlying div’s innerHTML property. Flash textfields support a much more limited set of HTML tags.
I encourage you to download a nightly build and try it for yourself. Let us know how it goes!
February 1st, 2007 at 7:46 am
That’s just whacky cool Max! Hey, I can almost make a ‘Hall of Mirrors’. I tried loading the demo into itself… On Safari it nests one deep, but I get an error on Firefox. Looks like the html wrapper is too clever for its own good.
February 2nd, 2007 at 7:10 am
Nice component for dhtml ..
On first reading I hoped that this might work in both swf and dhtml deployment modes .. but on quick test it seems not so .. ??
http://labs.openlaszlo.org/legals-nightly/lps/components/extensions/test/html.lzx?debug=false&lzr=swf8
So I guess, for now, it is back to using html div overlay over flash, for integrated dhtml + flash deployment? Or can you clarify if this tag will work in swf8 compile mode?
February 2nd, 2007 at 4:36 pm
Yes, I’d like to see it working with flash too, if at all possible.
February 2nd, 2007 at 4:46 pm
This only works in dhtml mode so far. We’d love the community’s help getting swf working as well!
February 6th, 2007 at 4:00 pm
You can even load a web page that displays a PDF file!!!
February 7th, 2007 at 3:40 pm
Worked OK for me in FF2, not in IE7…
February 18th, 2007 at 6:14 pm
lol
February 20th, 2007 at 1:38 pm
IE support isn’t finalized yet. I’ll let you know when it’s fixed!
March 8th, 2007 at 3:35 am
I can imagine all kinds of interesting uses for this. Very cool!
March 16th, 2007 at 1:52 am
Max
This is very exciting - great job!
Some questions please:
- Is there any way to detect when the user clicks on a hyperlink and to update the URL at the top (e.g. maybe the code can listen for onload and actually update some src attribute of the html component?!)
- Is there any way to prevent hyperlinks within the frame from targeting the whole browser e.g. if you open http://www.yahoo.com most of the hyperlinks target the whole browser and replace the Laszlo application.
Thanks
Zvi
March 16th, 2007 at 2:49 pm
So first I wanted to let folks know IE is working in recent builds.
Zvi,
Since the content is coming from a remote domain, the browser restricts any access to the page for security reasons. To get around this, you could use a proxy that modified the content or only load content you control.
March 17th, 2007 at 8:22 am
Hi Max
Great news on IE. Yes we are working on proxying - was wondering if you had any other ideas - oh well.
On another matter it seems that will only track the movement of a component which is directly under the canvas? I tried wrapping the html in another view within the window and it did not move with that view - is that right?
Ideally I suggest should track the immediateparent (in this case the window.content). Maybe it pays to have extend (with visible=”false”) instead of node and then have the iframe track that invisible view - that way would inherit some of the attributes and behaviors of a normal view…
Thx
Zvi
March 17th, 2007 at 11:02 am
Me again - in the case that the isrc is the same domain as the Laszlo app (e.g. a proxy server) can keep track of the changing URL when a user clicks a hyperlink?
Also can html have an attribute indicating the unique DHTML name of the iframe (so that the proxy server can replace any hyperlinks targeting _top with hyperlinks targeting the iframe’s unique name).
Cheers
Zvi
March 21st, 2007 at 10:06 pm
Yes, you should be able to track the changing URL - if your proxy server rewrites links to do so. You could have links make an explicit call to the ‘browser’ component and load the content into the html frame via that. This way, your LZX app will have a complete history of links clicked.
I really like your idea of making the iframe target explicit, so content can be loaded with a frame target. I’ll incorporate this into a future release. As it stands, each iframe gets a unique id in the form ”__lz0″ where 0 increments for each new html tag. You could hack lps/components/extensions/html.lzx directly, adding an optional ‘framename’ attribute. If you do this, send me your changes and we’ll inforporate them. Thanks!
Regards,
Max Carlson
OpenLaszlo.org
March 23rd, 2007 at 12:37 am
Hey Max - one more comment - if you have an html component targeting a third-party web site and you try to deploy solo it gets stuck and Firebug shows uncaught exception: Permission denied to call method XMLHttpRequest.open
I haven’t studied your code deeply but I think there is no security reason why an iFrame cannot directly connect to a third party web site - any ideas?
Cheers
Zvi
March 28th, 2007 at 10:58 pm
i am exited to see how it works
can any one of u send me the code of the html.lzx file
i am in a need to include html contents that r dynamically generated and that r to b placed in a view.
so this might be the perfect solution for me
Plz Plz any one of u send me the code
March 29th, 2007 at 10:02 am
Zvi, try the latest nightly build of 4.0 - there was an issue with embedding DHTML apps. Let me know if this helps!
kishore, the html tag ships with 4.0. You can use it out of the box! Also, note that you can call setText with HTML content - this might be a better way to go for you…
Regards,
Max Carlson
OpenLaszlo.org
April 2nd, 2007 at 9:12 am
Its very nice.
And i would like to set a font through the HTML tags.
Is it possible to do like this?
April 25th, 2007 at 3:32 am
Hello
I’m trying to embed a page with javascript code inside the tag. I was wondering if it is possible to access ‘div’ elements inside the html or run the javascript code when the user interacts with components (such as ol buttons) outside the embedded html.
Thanks in advance
Dario
May 10th, 2007 at 12:11 pm
Max
Am I having hallucinations or does work on Flash Laszlo now?? If so that’s amazing - how? It doesn’t even seem to require wmode=transparent which we used to need to use to get iframes over Flash?!
Zvi
May 10th, 2007 at 2:03 pm
Hi Zvi,
I wanted to get swf support in for 4.0.1 which should be out soon. I’m glad it’s working for you!
Regards,
Max Carlson
OpenLaszlo.org
May 11th, 2007 at 2:48 am
iframes embedded seamlessly in the Flash is a huge breakthrough. Tell us the secret - how do you do it?!
Unfortunately we do have some other problems with 4.0 Flash like stretches not working and non-English fonts are messed up - hopefully we will find workarounds.
Keep up the great work
Zvi
May 18th, 2007 at 7:32 pm
[...] Nach dem offiziellen Release der 4.0.2 Version von OpenLaszlo steht der erste Minor Release der neuen OpenLaszlo Version. Eine Vielzahl an Bugs wurde behoben und einige neue Features implementiert (z.B. der HTML Tag innerhalb von LZX). Auch wenn die 4.0.2er Version schon erhebliche Verbesserungen enthält, ist sie noch nicht für den Produktionsbetrieb freigegeben (hier mehr zu den Gründen). [...]
July 6th, 2007 at 3:54 pm
Hi,
I’m trying to take advantage of this new tag, but I’ running into a problem. Whenever I load an html source embedded in a view, it isn’t visible until I call the bringToFront() method. Unfortunately, this call makes the html component the topmost element on the page. Is there any way around this problem?
If I can get past this problem, the integration between html and laszlo would be awesome.
Thanks,
Ali
November 20th, 2007 at 3:47 pm
[...] OpenLaszlo Project Blog » Announcing the new <html/> tag for DHTML [...]