I wrote this page in our intranetwiki to remind myself why I did the embedding of the wikiwizard applet in such a messy way. I whish I could have simply set the applet parameters width and height in percentage to get a dynamic resizing but as you will see it wasn't that easy. The descriptions below where written at a time when JSPWiki used a table layout, so some of the described problems may no longer be an Issue with the new div layout. But since we tried to do the Resizing in the new div templates easier and still had problems with resizing (because the behaviour of firing events differs from browser to browser, which in return crashed our applet due to the highlighting) it seems that it has not become easier.

Dear Folks at Sun Microsystems responsible for Java Applets, see why this is one reason why applets suck (sometimes). If you read this, please help us resolve this problem by making it easy for stupid folks like me to write applets in less time, because on the other hand applets are really cool stuff.

--ChristophSauer 22-Sep-06

Anyway, here we go

Introduction

There are some serious problems with applet resize i try to summarise in this text. Namely the Internet Explorer, and its probably most frequently used version 6.0 (as time of this writing) make it nearly impossible to use resizing with applets within tables. What i try to achive is to display an editor Applet in an cell of the table, which is used to edit the wiki-text.

Width and heigt by percentage

The simplest method to achive dynamic resizing of applets is to use percentage values for the width and height attributes for the table. Unfortunately the size of the table dictates the height of the table cell which in effect results in a small editor if not much text is in the right margin of the table. Thats for Firefox. In Firefox the width attribute works fine, while the hight is to small.
<APPLET                                
   code="net.opense.wikieditor.WikiWizardApplet"                 
   archive="wikiwizard-1.0.jar"           
   image="logo.gif"               
   width="100%"                     
   height="100%"                    
   MAYSCRIPT>                         
    <PARAM name="input" value="!Hello World" />
    <PARAM name="encoding" value="ISO-8859-1" />
    <PARAM name="page" value="LeftMenuFooter" />
    <PARAM name="action" value="Edit.jsp?page=LeftMenuFooter" />
    <PARAM name="edittime" value="1108017511155" />
applets are not supported
</APPLET>

The screenshot below demonstrates this behavior: the applet is as large as the navigation bar on the right side, althoug it could display much more and should't be dependent on the size of the navigation column.
resize1.png

At least Firefox displays it like it should. IE does not display anything at all, because the applet is embeddet within a table in an SD cell tag. When you use an applet within an SD tag that uses percentage in its width or height attributes, IE does not display the applet at all, while outside a table that works fine in contrast. Thats why you can't use applets embedded in tables with the percentage attributes.

Using javascript to determine the browser window size

This example shows how to use JavaScript to determine the window size by javascript and then dynamically generate the opening applet tag. This works fine in Firefox, but IE does not support JavaScipt within the SD tags. Heres the code:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">  
   <!-- hide from older browsers                              
   var height = window.innerHeight-130;   
   var width = window.innerWidth-200;      
   document.writeln('<APPLET\n'                           
       +'code="net.opense.wikieditor.WikiWizardApplet"\n'                           
       +'archive="wikiwizard-1.0.jar"\n'                     
       +'image="logo.gif"\n'                     
       +'width="' + width + '"\n'         
       +'height="' + height + '"\n'         
       + ' MAYSCRIPT>')                                    
   //-->                                                     
</SCRIPT>                                                 
    <PARAM name="input" value="!Hello World" />
    <PARAM name="encoding" value="ISO-8859-1" />
    <PARAM name="page" value="Main_blogentry_100205_1" />
    <PARAM name="action" value="Edit.jsp?page=Main_blogentry_100205_1" />
    <PARAM name="edittime" value="1108016336115" />

applets are not supported
</APPLET>

And heres why it's not working in IE within a table:

Why is my script not working inside a table? There is a long-standing bug with JavaScript and tables. Do not place <SCRIPT> tags inside <TD> tags. Instead, start the <SCRIPT> tag before the <TD> tag, and document.write() the <TD> tag through the </TD> tag. I go one step further, and document.write() the entire table, interlacing script statements where needed. Source

here are som useful links

Add new attachment

In order to upload a new attachment to this page, please use the following box to find the file, then click on “Upload”.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
png
resize1.png 46.1 kB 1 22-Sep-2006 15:21 ChristophSauer
« This page (revision-2) was last changed on 22-Sep-2006 15:22 by ChristophSauer [RSS]