resizing applet in browser

With applets, sometimes the browser acts as the applet's frame. This prevents the user from mistaking the browser window for a separate application and closing it. With this approach, the applet does not resize itself as the user resizes the browser—but there are ways to do this.

The problem is because of the hard-coded applet dimensions the <APPLET> tags. Regardless of the fact that your applet may be using layout managers, it won't adjust its components accordingly. Enter JavaScript to solve this dilemma!

We'll use JavaScript to handle the browser's onResize and onLoad events and pass on new dimensions to the applet. The applet can then override the setSize() method to revalidate its component layout, and thus let its layout manager adjust itself to the new size. The HTML looks like this:

  

<HTML> 
<HEAD> 
<TITLE>Resizable Applet Demo</TITLE> 
</HEAD> 
<BODY bgcolor=#C6C3C6 onResize="resize()" onLoad="resize()" 
topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> 
<SCRIPT LANGUAGE="JavaScript"> 
function resize() 
{ 
var w_newWidth,w_newHeight; 
var w_maxWidth=1600, w_maxHeight=1200; 
if (navigator.appName.indexOf("Microsoft") != -1) 
{ 
w_newWidth=document.body.clientWidth; 
w_newHeight=document.body.clientHeight; 
} 
else 
{ 
var netscapeScrollWidth=15; 
w_newWidth=window.innerWidth-netscapeScrollWidth; 
w_newHeight=window.innerHeight-netscapeScrollWidth; 
} 
if (w_newWidth>w_maxWidth) 
w_newWidth=w_maxWidth; 
if (w_newHeight>w_maxHeight) 
w_newHeight=w_maxHeight; 
document.myApplet.setSize(w_newWidth,w_newHeight); 
window.scroll(0,0); 
} 
window.onResize = resize; 
window.onLoad = resize; 
</SCRIPT> 
<APPLET NAME="myApplet" CODE="MyApplet.class" WIDTH=1800 
HEIGHT=1100>/APPLET> 
</BODY> 
</HTML> 


 

Internet Explorer and Netscape Navigator have somewhat different implementations of JavaScript. The onResize and onLoad parameters in the <BODY> tag specify the resize event handlers for Internet Explorer, while window.onResize =resize; and window.onLoad = resize; do so for Netscape Navigator. Both methods must be included in order to support the two major browsers. Whenever the browser frame is loaded or resized, the applet's resize() method is invoked.

Navigator and IE also have different methods of accessing the browser window's dimensions. In Navigator, the window object is referenced; in IE, the document's body object is used. These objects also return slightly different values for the window dimensions. Thus, it is necessary to determine the browser in which the applet is running before sending the correct window dimensions (see "Which Browser is Running Me?" ). Netscape does not include the width of the scrollbars, and does not let you access this length, so 15 pixels are used as an offset in the netscapeScrollWidth variable.

The <APPLET> tag still specifies the applet's Width and Height parameters, but these dimensions now specify the applet's maximum bounds. The window's maximum width and height, w_maxWidth and w_maxHeight, are checked in the resize() method to ensure that the applet does not go beyond these bounds. The browser still takes up room for this dimension; thus, the scrollbars will not show all the information in the window. Signed JavaScript in Netscape has the ability to hide the scrollbars. The HTML page is also scrolled to the top left corner whenever it is resized to ensure that the applet is fully visible. The Java code to support the dynamic resizing is trivial. The applet's setSize() method must be overridden to call the validate() method.

 

public void setSize(int width, int height) 
{ 
super.setSize(width,height); 
validate(); 
} 


 

This approach has been tested on version 4.x of IE and Netscape for Microsoft Windows. Unix browsers are a little behind in their implementation of JavaScript.