PDA

View Full Version : displaying HTML with <html> tag by delivering html-string


MBachstein
07-11-2008, 06:13 AM
Hello,

I have HTML-text in a single string which I want to display.

This HTML-text looks similar to this:


"<html><body>" +
"<p>hello world</p>" +
"<p class=default>"+
"<span style="color: #000000; font-size: 17pt; font-family: Verdana">" +
"hello world in special textfont" +
"</span>" +
"<span style="color: #000000; font-size: 17pt; font-family: Verdana">" +
"<i>once again</i>" +
"</span>" +
"</p>" +
"</body></html>";


I cannot use the <text> component to display this HTML-text as the string contains HTML tags which are not supported by the <text> component. (e.g. <span>, <p class=default>)

I actually want to do something similar to the example of chapter 9.4.2 of the OL Developer's guide. I just don't want to set the source of the <html> tag by an explicit HTML-file but by a string of HTML code, which I deliver to the <html> tag.

Is this possible? That would solve my problem.

By the way, I am using DHTML runtime.

Here is a code example of that what I want to do.


<canvas>
<include href="extensions/html.lzx"/>
<class name="browser" extends="window" resizable="true" bgcolor="silver">

<attribute name="htmlContent" type="string" value="" />

<edittext name="txt" text="http://openlaszlo.org/" width="300"/>

<attribute name="htmlText" value="" type="string" />

<button x="310">
Load
<method name="onclick"><![CDATA[
Debug.write("clicked!");


/* by a servlet the attribute 'htmlContent' gets e.g. following content:

this.htmlText = "<html><body>" +
"<p>hello world</p>" +
"<p class=default>"+
"<span style="color: #000000; font-size: 17pt; font-family: Verdana">" +
"hello world in special textfont" +
"</span>" +
"<span style="color: #000000; font-size: 17pt; font-family: Verdana">" +
"<i>once again</i>" +
"</span>" +
"</p>" +
"</body></html>";
*/

this.htmlText = "<html><body>" +
"<p class=default>hello world</p>" +
"</body></html>";

Debug.write("htmltext="+this.htmlText);
//parent.htmlview.setSrc(parent.txt.getText());
parent.htmlview.setSrc(this.htmlText);
parent.htmlview.setAttribute('visible', true);
parent.htmlview.bringToFront();
]]>
</method>
</button>

<html name="htmlview" x="$once{immediateparent.x}" y="$once{immediateparent.y + 25}" width="${immediateparent.width}" height="${immediateparent.height - 25}"/>
</class>

<browser width="500" height="500" x="10" y="10"/>
</canvas>


Kind Regards,
Marc

rcyeager
07-11-2008, 02:18 PM
The <html> tag is just a built-in way to create floating IFRAMEs on top of the Flash canvas in SWF mode, or integrated IFRAMEs in DHTML.

Look inside lps/components/extensions/html.lzx to see the lzx wrapper for the IFRAME.

Using Lz.iframemanager to get a reference to the IFRAME, you can then set the innerHTML to the HTML content that you have as a string.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

MBachstein
07-14-2008, 03:39 AM
Hi Robert,

thank you very much!

Now I've got this code, which displays the HTML-string in DHTML runtime properly:


<canvas height="550">
<view name="myView" bgcolor="0x111111">
<simplelayout axis="x" spacing="5" inset="5"/>
<html name="myHTML" height="500" width="500" bgcolor="0xDDDDDD"/>

<button text="Display HTML">
<handler name="onclick"><![CDATA[
var htmlContent = "<html><body>Hello World! <p class=default>HTML</p><p class=default><span style=\"color: #FF0000; font-size: 26pt; font-family: Verdana\"><u>big and red</u></span></p></body></html>";
Debug.write("display HTML="+htmlContent);

var theiframeID = this.parent.myHTML.iframeid;
Debug.write("theiframeID="+theiframeID);

LzBrowser.loadJS("document.getElementById('" + theiframeID + "').contentWindow.document.body.innerHTML = '" + htmlContent + "';");
]]>
</handler>
</button>
</view>
</canvas>


However, a compiler error occurs on start of the application:


ERROR @extensions/html.lzx#180: $5_el has no properties


The bug report of this error is:

---START OF BUG REPORT---

LPS VERSION INFORMATION:
URL: http://localhost:8080/jivexweb/jivexweb/testcases/HTML_Display_perfect.lzx?lzt=object&lzt=object&debug=true&lzr=dhtml&lzbacktrace=true
Version: 4.1.0.0
Release: Production
Build: 10138-openlaszlo-trunk
Date: 2008-06-30T09:16:23-0700
Target: dhtml
Runtime: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

ERROR MESSAGE: ERROR @extensions/html.lzx#180: $5_el has no properties

ERROR BACKTRACE:
kernel/dhtml/LzMouseKernel.js#177/26 @lfc/kernel/dhtml/LzMouseKernel.js#178
this: «Object#7| #LzMouseKernel»
arg 0: false
kernel/dhtml/LzMouseKernel.js#166/31 @lfc/kernel/dhtml/LzMouseKernel.js#167
this: «Object#7| #LzMouseKernel»
$lzc$handle_onmouseover$$extensions$2Fhtml$2Elzx_1 76_72_$m21 @extensions/html.lzx#180
this: «lz.HTML_View#12| .myHTML»
arg 0: «lz.HTML_View#12| .myHTML»
sendEvent @lfc/events/LaszloEvents.lzs#525
this: «LzEvent#15| #LzGlobalMouse.onmouseover»
arg 0: «lz.HTML_View#12| .myHTML»
__mouseEvent @lfc/services/LzGlobalMouse.lzs#163
this: «LzGlobalMouseService#16| #LzGlobalMouse»
arg 0: 'onmouseover'
arg 1: «lz.HTML_View#12| .myHTML»
handleMouseEvent @lfc/services/LzModeManager.lzs#130
this: «LzModeManagerService#21| #LzModeManager»
arg 0: «lz.HTML_View#12| .myHTML»
arg 1: 'onmouseover'
rawMouseEvent @lfc/services/LzModeManager.lzs#245
this: «LzModeManagerService#21| #LzModeManager»
arg 0: 'onmouseover'
arg 1: «lz.HTML_View#12| .myHTML»
kernel/dhtml/LzMouseKernel.js#63/19 @lfc/kernel/dhtml/LzMouseKernel.js#65
this: «Object#7| #LzMouseKernel»
arg 0: 'onmouseover'
arg 1: «lz.HTML_View#12| .myHTML»
LzSprite.prototype.__mouseEvent @lfc/kernel/dhtml/LzSprite.js#912
this: «kernel/dhtml/LzSprite.js#14/16#29#28| {owner: HTML_View name: myHTML , uid: 2, ..., width: 500, _w: 500px, height: 500, _h: 500px, bgcolor: 14540253, ..., visible: true, ..., clickable: true, ..., x: 5, _x: 5px}»
arg 0: «MouseEvent#30| [object MouseEvent]»
LzSprite.prototype.__clickDispatcher @lfc/kernel/dhtml/LzSprite.js#827
this: «HTMLDivElement#33| #document/html/body/div#lzappContainer[1]/div#click_sprite_0[2]/div#click_sprite_1[1]/div#click_sprite_2[1]/div.lzclickdiv»
arg 0: «MouseEvent#30| [object MouseEvent]»

OBJECT DETAILS:
...

---END OF BUG REPORT---


Also, in SWF-runtime the HTML is not displayed.

Kind Regards,
Marc

rcyeager
07-14-2008, 07:49 AM
This works for me in 4.0.12 IE7 SWF from the developer console:


<canvas height="550">
<include href="extensions/html.lzx"/>
<html name="myHTML" height="500" width="500"/>
<view name="myView" bgcolor="0x111111">
<button text="Display HTML">
<handler name="onclick"><![CDATA[
var htmlContent = "<html><body>Hello World! <p class=default>HTML</p><p class=default><span style=\"color: #FF0000; font-size: 26pt; font-family: Verdana\"><u>big and red</u></span></p></body></html>";
Debug.write("display HTML="+htmlContent);

var theiframeID = canvas.myHTML.iframeid;
Debug.write("theiframeID="+theiframeID);

LzBrowser.loadJS("document.getElementById('" + theiframeID + "').contentWindow.document.body.innerHTML = '" + htmlContent + "';");

canvas.myHTML.__updatepos();
]]>
</handler>
</button>
</view>
</canvas>


When working with SWF IFRAMEs, you have to be aware that the Flash "wmode" setting controls how the IFRAME is overlayed. This setting has different effects on different browsers. The developer console is creating a default HTML wrapper page that isn't compatible with all browsers. So for testing IFRAMEs with SWF, you need your own HTML wrapper page that controls the wmode setting, based on the detected browser. For IE, I use a value of "window", for all other browsers "opaque".

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

MBachstein
07-16-2008, 06:29 AM
Hi Robert,

thank you for your help!

I tried your code with OL release 4.1.1.

Unfortunately, this code does not display the HTML string here either.

So I still have the problem to display this string in SWF-runtime.

But more important for me (as I use most of the time DHTML runtime) there is still this compiler error in DHTML runtime. (see my post above)

Can anybody maybe explain me what this error ("$5_el has no properties") is about or where I can look up to find out myself?

For any help I'd be very grateful.

Kind regards,
Marc

spdzone78
09-16-2008, 03:43 PM
Robert,

I have been following your posts and have visted your website. Good Stuff...
I went to try your code in my own project and I get the following error...

theiframeID=undefined


Also when testing OL applications is it possible to specify my own HTML wrapper ?

rcyeager
09-16-2008, 05:56 PM
Thanks so much for taking time to visit Qrowd and for your kind feedback.

If you get the error from the code in this thread, I was using 4.0.12 SWF. What version did you try?

When using the developer console or w/ lzt=html as a query param, OpenLaszlo is providing a default HTML wrapper. In my experience, this default wrapper has flaws, in that it doesn't always work across all browsers due to the wmode setting. You can view the HTML source code in the browser for the Qrowd webtop (load the webtop in the browser, then "view source") to see how I embed my apps with my own HTML wrapper, where I detect the browser and set the wmode as needed to make iframes work across the major browsers.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

spdzone78
09-16-2008, 07:45 PM
Hi Robert,

I tested the code in 4.1.1 and 4.2 beta.

Thanks for your help.

rcyeager
09-16-2008, 07:53 PM
Perhaps something changed after 4.0.12 with the <html> implementation. Check html.lzx to see if the "iframeid" attribute still exists.

My apps can't be upgraded to 4.1.x until some serious Jira's are fixed, so I don't have 4.1.x installed on my system.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

spdzone78
09-16-2008, 09:16 PM
Robert,

I actually think I found a bug in both 4.1.1 and 4.2 beta... should there be a class called LzBrowser.lzx? That class is nowhere to be found....

rcyeager
09-16-2008, 09:38 PM
Not surprising. Perhaps you can take the sample code in this thread and file a Jira. Sometimes the developers will respond quickly with a workaround.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

spdzone78
09-17-2008, 06:16 AM
Hi Robert,

Found out sometihing interesting while I was looking through HTML.LZX...

LzBrowser in that class is referenced as lz.Browser... I changed my code to use lz.Browser instead of LzBrowser and all worked fine...

I think there is a gap in documentation or something ... but thanks for your help.

W

spdzone78
09-18-2008, 12:00 PM
Question: When displaying the HTML tag inside a window like you have done on your site the HTML does not close when I close the window. Any ideas?

rcyeager
09-18-2008, 12:14 PM
I filed a Jira a while back about the <html> tag not cleaning up the iframe resources when deleted.

You'll have to clean up the iframe yourself when windows are closed.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

spdzone78
11-12-2008, 08:36 AM
Hi Robert,

Thanks again for all your help with the Iframe issues. One more question if you don't mind... When displaying multiple windows with iframes the z-index of the iframe isn't contained within the window object. The windows overlap properly however the iframe super imposes itself over other objects on the screen. This suggests that the wmode is set properly to show iframe objects above flash objects however, as you have done in your webtop your windows can overlap each other with the proper behavior....can you provide some hints as to how you accomplished that?

Wiqar

rcyeager
11-12-2008, 10:24 AM
Qrowd contains a lot of custom logic to manage z-index layering of windows and iframes.

Iframes themselves are not layered on top of the webtop canvas in SWF mode. Note that Qrowd hides iframes in the background whenever a window with an iframe is on top. Can be hard to discern, because native Qrowd widgets don't use iframes at all.

Good luck,

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com