Using Frames with ION Script

Frames are a useful tool for simplifying the navigation of a Web site, and offering different ways to present your information. It is often desirable to simultaneously display information from different sources in the same browser window, rather than force the user to navigate back and forth between pages. Creating framed ION Script pages is no different than creating framed HTML pages: you just need to know how to specify the frame source files, and how to target different frames. This section will show you how to create ION Script applications that use fixed framesets and floating frames.

Overview of Fixed Framesets

When you load a Web page that is divided into frames, you are loading an HTML frameset, defined with the <FRAMESET> tag. The <FRAMESET> tag divides the Web page either horizontally or vertically into multiple frames, each defined with its own <FRAME> tag. Each <FRAME> tag points to a Web page with the SRC attribute. For example, to create a page divided horizontally into two frames, we would create three HTML files similar to the following:

<HTML>  
<FRAMESET ROWS="25%, *">  
   <FRAME NAME="Frame1" SRC="http://myserver/frame1.html">  
   <FRAME NAME="Frame2" SRC="http://myserver/frame2.html">  
</FRAMESET>  
</HTML>

<HTML>  
This is Frame1  
</HTML>

<HTML>  
This is Frame2  
</HTML>

If you load main.html in your browser, you get the Web page shown in the following figure:

Note that main.html does not use the <BODY> tag; the <FRAMESET> tag is used instead.

We can further divide one of the frames in the previous example vertically into two frames by nesting a <FRAMESET> within the main <FRAMESET> as follows:

<HTML>  
<FRAMESET ROWS="25%, *">  
   <FRAME NAME="Frame1" SRC="http://myserver/frame1.html">  
   <FRAMESET COLS="50%,*">  
      <FRAME NAME="Frame2" SRC="http://myserver/frame2.html">  
      <FRAME NAME="Frame3" SRC="http://myserver/frame3.html">  
   </FRAMESET>  
</FRAMESET>  
</HTML>

Tip
Note the way that we referred to the HTML files in the SRC attribute of the <FRAME> tag. For example, consider the following HTML:

   <FRAME NAME="Frame1" SRC="http://myserver/frame1.html">

In this case, the file frame1.html must be located in your Web server's default document directory, such as htdocs. To allow us to keep the HTML files in the same location as the ION Script files, we can change the SRC attributes of our <FRAME> tags to load the HTML page using ion-p instead:

   <FRAME NAME="Frame1" SRC="ion-p?page=frame1.html">

We can also keep the page main.html in the same directory as the .ion files, and load the page using the following URL format:

http://servername/cgi-bin/ion-p?page=main.html

Loading ION Script Pages in Frames

In the above examples, the source of all our frames were HTML files. Frames can also contain ION Script pages. For example, we'll create a frameset with two frames, where the upper frame contains an ION Script page, and the lower frame initially contains a blank HTML page. When the user clicks the button in the upper frame, the ION Script form is submitted, and the target of that form is the lower frame. The ION_FORM tag uses the TARGET attribute to define the window in which the EVENT page is loaded upon form submission.

<HTML>  
<FRAMESET ROWS="20%,*">  
   <FRAME NAME="upper" SRC="ion-p?page=frame1.ion">  
   <FRAME NAME="lower" SRC="ion-p?page=blank.html">  
</FRAMESET>  
</HTML>

<ION_SCRIPT>  
<ION_HEADER>  
  <EVENTS>  
    <EVENT_DECL NAME="PLOT" ACTION="ion://frame2.ion"/>  
  </EVENTS>  
</ION_HEADER>  
<ION_BODY BGCOLOR="#ADD8E6">  
   <ION_FORM TARGET="lower">  
    <B>Display Value</B> <INPUT NAME="DISP_VALUE" TYPE="TEXT"  
         VALUE="30" SIZE="3"/>  
    <ION_BUTTON TYPE="BUTTON" LABEL="Show Plot" EVENT="PLOT" />  
   </ION_FORM>  
</ION_BODY>  
</ION_SCRIPT>

<ION_SCRIPT>  
<ION_HEADER>  
  <VARIABLES>  
    <VARIABLE_DECL NAME="DISP_VALUE" VALUE="$Form.DISP_VALUE" 
     TYPE="INT" />  
  </VARIABLES>  
</ION_HEADER>  
<ION_BODY>  
   <ION_IF EXPR="$DISP_VALUE LE 0">  
      <tt> <ION_VARIABLE NAME="$DISP_VALUE" /> </tt> is too small!  
   <ION_ELSE/>  
      <ION_IMAGE TYPE="DIRECT">  
         <IDL>  
            loadct, 5  
            show3, dist($DISP_VALUE)  
         </IDL>  
      </ION_IMAGE>  
   </ION_IF>  
</ION_BODY>  
</ION_SCRIPT>

http://myserver/cgi-bin/ion-p?page=main.html

When you click the "Show Plot" button, you'll see the page shown in the following figure:

Note that when loading an ION Script page through an HTML tag such as <FRAME>, you must explicitly pass name/value pairs in the URL for any variables required by the ION Script page. For example, suppose in the previous example that you want to pass the initial value displayed in the text field to frame1.ion instead of hard-coding the value. The page frame1.ion will contain a reference to the variable $Form.INITIAL:

<ION_SCRIPT>  
<ION_HEADER>  
  <EVENTS>  
    <EVENT_DECL NAME="PLOT" ACTION="ion://frame2.ion"/>  
</EVENTS>  
</ION_HEADER>  
<ION_BODY BGCOLOR="#ADD8E6">  
   <ION_FORM TARGET="lower">  
    <B>Display Value</B> <INPUT NAME="DISP_VALUE" TYPE="TEXT"  
         VALUE="<ION_VARIABLE NAME="$Form.INITIAL"/>" SIZE="3"/>  
    <ION_BUTTON TYPE="BUTTON" LABEL="Show Plot" EVENT="PLOT" />  
   </ION_FORM>  
</ION_BODY>  
</ION_SCRIPT>

In order for $Form.INITIAL to be defined when frame1.ion is executed, we must pass the INITIAL parameter in the URL that loads frame1.ion. Therefore, main.html would need to be changed as follows:

<HTML>  
<FRAMESET ROWS="20%,*">  
   <FRAME NAME="upper" SRC="ion-p?page=frame1.ion&INITIAL=30">  
   <FRAME NAME="lower" SRC="ion-p?page=blank.html">  
</FRAMESET>  
</HTML>

Floating Frames

Floating frames are a feature introduced in Microsoft Internet Explorer 3.0. Unlike a fixed frameset, in which the frames are always anchored to the edge of the browser or to another frame, floating frames can exist as a separate island inside a Web page. Floating frames are created with the <IFRAME> tag, which exists inside the <BODY>. Therefore, floating frames can be inserted anywhere in the HTML stream, just like images, tables, and other HTML elements, and can scroll entirely out of the browser. This can be useful if you have information that applies to a specific section of your page, but you don't want that information to remain on screen at all times.

The following example creates a page with a floating frame, into which we load an ION Script page that displays an IDL-generated image.

msie.html:

<HTML>  
<HEAD>  
   <TITLE>Floating Frame Example</TITLE>  
</HEAD>  
<BODY>  
   Below is a floating frame:<BR><BR>  
   <IFRAME NAME="Float1" SRC="ion-p?page=floatSRC.ion"   
      WIDTH="350" HEIGHT="300">  
   </IFRAME>  
</BODY>  
</HTML>

floatSRC.ion:

<ION_SCRIPT>  
<ION_BODY>  
   <ION_IMAGE TYPE="DIRECT">  
      <IDL>  
         show3, dist(30)  
      </IDL>  
   </ION_IMAGE>  
</ION_BODY>  
</ION_SCRIPT>

When you load msie.htm in Internet Explorer, you'll see the following page:

Figure 4-4: Floating Frame Example Output

Figure 4-4: Floating Frame Example Output

Targeting Different Frames

Clicking a link, or a button or image with an associated event, causes another page to be loaded. By default, this new page replaces the current page in the full browser window. You may want the new page to be loaded in a different frame rather than in the full browser window. The frame or window in which the page is to be loaded is called the target. The ION_FORM, ION_IMAGE, and ION_LINK tags each have a TARGET attribute to specify the frame in which to load the URL specified by their corresponding EVENT attribute.

The TARGET attribute of ION_FORM, ION_IMAGE, and ION_LINK can be set to either the NAME attribute of an HTML <FRAME> or <IFRAME> tag, or to one of four predefined windows:

_blank: opens the page in a new instance of the browser.

_parent: opens the page in the next higher window in the window hierarchy (the immediate FRAMESET parent).

_self: opens the page in the same window in which the event occurred. This is the default target if the TARGET attribute is not specified. This is useful for overriding a TARGET specified by the <BASE> tag.

_top: opens the page in the main browser window.

Accommodating All Browsers

Keep in mind that different browsers have different capabilities with respect to frames. Floating frames, for example, are an Internet Explorer-specific feature. If you can't guarantee that users are viewing your page in Internet Explorer 3.0 or higher, it is best to either avoid floating frames, or to create a page that accommodates all browsers. The following page uses a floating frame for Internet Explorer, a <FRAMESET> for Netscape Navigator, and a <NOFRAMES> block for browsers that don't support frames:

<HTML>  
<NOFRAMES>  
   <FRAMESET COLS="50%,*">  
      <FRAME SRC="ion-p?page=netscape1.html">  
      <FRAME SRC="ion-p?page=netscape2.html">  
   </FRAMESET>  
   This content will not be visible to Internet Explorer <BR>  
   or Netscape. Only non-frame browsers will display this.  
</NOFRAMES>  
<BODY>  
   <IFRAME NAME="msie" SRC="ion-p?page=msie.html" WIDTH=150  
      HEIGHT=150>  
   </IFRAME>  
   This text is visible in the BODY of the page in Internet  
   Explorer.  
</BODY>  
</HTML>

IDL Online Help (March 06, 2007)