FAQ : Frequently Asked Questions
FAQ Table of contents
blue line
28. Q:  How to start with frames? Any examples? Any tips?

A:  The "frames" technique is a way to collect several windows on a single page. Each of the windows is called "frame". Each frame maybe static or "dynamic" (CGI or other programming). Dynamic frames may be designed to interact with each other.

1. Designing a "frame" page
2. Addressing a "frame" area
3. Communication between frames
4. Some tips - Sample application based on frames
5. Navigation, when using frames



 
1. Designing a "frame" page

The implementation of a "frame" page is based on one or more "frameset" pages. Each frameset page divides the screen in two or more rows or columns. Let us see how this works.

Step 1
Let us start with a frameset that implements the frames in Figure 1. Let us also assume that this page is "/mydir/frameset1.htm". This is how one may code this page (for more information about the HTML elements used, please see this page):

 
<html>
<frameset frameborder=yes border=1 framespacing=0 rows="55,*">
<frame src="/mydir/frameA.htm" name="frame_a"
marginwidth=0 marginheight=0
scrolling="NO" resize>
<frame src="/mydir/frameB.htm" name="frame_b"
marginwidth=0 marginheight=0
scrolling="auto" resize>
</frameset>
</html>
When you ask for page "mydir/frameset1.htm", as soon as the page is loaded, this is what the broswer does:
  1. it divides the screen in two horizontal parts
  2. the first part is a rectangle with a height of 55 pixels
  3. the second part is a rectangle that takes the rest (*) of the screen
  4. the browser would then ask the server to fetch page "/mydir/frameA.htm" and page "/mydir/frameB.htm"
  5. page "/mydir/frameA.htm" will be loaded in the first rectangle (named "frame_a")
  6. page "/mydir/frameB.htm" will be loaded in the second rectangle (named "frame_b")
Please note that the user entered just one transaction ("/mydir/frameset1.htm"). As a result, the broswer --after receiving the response-- generated two more transactions.

Step 2
Suppose now that page "/mydir/frameB.htm", instead of being a normal HTML page, is also a frameset:

 
<html>
<frameset frameborder=no border=0 framespacing=0 cols="150,470,*">
<frame src="/mydir/frameB1.htm" name="frame_b1" marginwidth=0 marginheight=0 scrolling="auto" resize>
<frame src="/mydir/frameB2.htm" name="frame_b2" marginwidth=0 marginheight=0 scrolling="auto" resize>
<frame src="/mydir/frameB3.htm" name="frame_b3" marginwidth=0 marginheight=0 scrolling="auto" resize>
</frameset>
frame A
frame B
Figure 1- Step1, "frameset1"

frame A
frame B1 frame B2 frame B3
Figure 2- Step 2, "frameset1" + "frameset2"

frame A
frame B1 frame B2
frame B3a
frame B3b
Figure 3- Step 3, "frameset1" + "frameset2" + "frameset3"

Well, in this case, rectangle "frame B" will be splitted into three vertical rectangles (columns), see Figure 2. Also note that from a single user transactions, two more transaction (Step 1) plus three more transactions (Step 2) are generated by the browser.

Step 3. Last, imagine that page "/mydir/frameB3" is also a frameset:

 
<html>
<frameset frameborder=no border=0 framespacing=0 rows="300,*">
<frame src="/mydir/frameB3A.htm" name="frame_b3a"
marginwidth=0 marginheight=0
scrolling="auto" resize>
<frame src="/mydir/frameB3B.htm" name="frame_b3b"
marginwidth=0 marginheight=0
scrolling="auto" resize>
</frameset>
</html>
The result is shown in Figure 3. In a case like this, a single user request to the server heads up with seven more requests generated by the browser. This explains why "frame" pages may take a while before showing complete.

Using CGI
In the example given, we are playing with eight pages:

  • three "frameset" pages (frameset1.htm, frameB.htm, frameB3.htm)
  • five regular pages, which make up the final result (frameA.htm, frameB1.htm, frameB2.htm, frameB3A.htm, frameB3B.htm)
It is important to realize that anyone of the above pages, including the "frameset" pages, may be issued from CGI.


 
2. Addressing a "frame" area

As we have seen, each frame has a name. Its name is defined in the <frame ... > tag. Frame names are the key for addressing frames areas and for establishing communication between frames. Let us begin with addressing a "frame area".

Please go back to Figure 3. Assume you have a menu in Frame B1, and that menu items, when clicked, should show-up the related page in Frame B2. How to implement this?

You must add the keyword "target" to the link. Examples:

  • <a href="/mydir/item23.htm" target="frame_b2">
  • <form name=... method=post action="/mypdir/pgm24.pgm" target="frame_b2">

Note 1. If you do not specify the target keyword, you let the browser take the default area address, which is the frame where the link was originated.
Note 2. In some cases you may want to specify <target="_top">. By doing this, the linked page will scratch the framework and replace it.
Note 3. In some other cases you may want to specify <target="_blank">. By doing this, you are telling the browser to open a new window for the linked page (though this is general and is not specifically related to frames).

 

3. Communication between frames

When working with frames, you may want synchronize events among frames. For instance, suppose that in Frame B2 you have an order entry page. Well, any time a new item is ordered, you want the full be displayed in Frame B3a, and you want the total amount and the total discount be displayed in Frame B3B.

This type of syncrhonization is performed through Javascript. With Javascript, for instance, you may submit forms defined in other frames. In the case mentioned, you would:

  • define -in the HTML page hosted in Frame B3a- a named form which re-displays the full order
  • define -in the HTML page hosted in Frame B3b- a named form which re-displays the total amount and the total discount
  • define -in the HTML page hosted in Frame B2- an "onload" Javascript function (a function mentioned in the onload keyword of the <body ... > tag) that would submit those two "re-display" forms, any time the page in Frame B2 is loaded as a response to a new line order been entered.
Of course, you may perform many more other sync functions, such as enabling/disabling buttons, assigning values to input fields, etc., across frames.

To start learning some initial Javascript through examples, you may want to download our small Javascript tutorial > (library JS2).

 

4. Some tips - Sample application based on frames

We recommend that you become quite familiar with HTML before starting developing applications based on frames. If you are going to use our CGIDEV2 CGI development tool, you should also be rather expert with it before practicing frames.
Some special warning should be given for debugging. As you have already understood, playing with frames is somehow similar to playing pools. You hit a ball, this ball hits two other balls, and so on, ... a cascade of events. There is no hope you can intercept one of these events (HTTP thread jobs) and debug (strsrvjob, strdbg, ...) the related program.
This is why each single CGI program should be thoroughly tested before being used in a frameset.

Should you care for a sample (not simple) application using CGI and frames, we suggest you visit our Centaur2 Demo. You can also download it and install it on your iSeries.

 

5. Navigation, when using frames

A few years ago frames became very unpopular. The reason behind it --I believe-- was that, when you work with a "frame" page, you cannot bookmark the single frame, as the browser URL location all the times refers to the initial frameset page. This is why --for instance-- IBM pages usually do not use frames (customers need to bookmark the single page): as a consequence IBM pages would all the times reload their navigation bars.
Abuse of using frames --I agreee-- should be discouraged.
However, there are many cases of commercial applications where only the frame technique provides cceptable solutions. In such cases, the point is not navigation, but the ability to get a complete picture through several pages on a single window: "frames" is the way.

blue line