| TechTip: Frame Crossing, Part I |
|
|
|
| Tips & Techniques - Programming | ||||||||||||||||||||||||||||||||
| Written by Jan Jorgensen | ||||||||||||||||||||||||||||||||
| Thursday, 10 January 2008 | ||||||||||||||||||||||||||||||||
|
Support MC Press - Visit Our Sponsors
Search Sponsor
Reveal frame secrets to make your Web applications act cooler.
I like frames. I know a lot of Web developers will dislike that I say that, and if you don't believe me, go to Google and search for "I hate frames." But I don't care, and I'll tell you why I like them.
When I develop Web applications, I do it in-house. This means that I'm most interested in providing functionality. Normally, I don't use a lot of images, and I don't use Flash-not because I don't like them but because I consider myself a Web programmer, not a Web designer. What's the difference? Well, to me a Web designer is trying to present something on the Web, so he or she must know a lot about colors and images and ways to make things look cool, not too much text and so forth. A Web programmer is someone who tries to build Web applications with great functionality, who knows how to pull out information from databases like MS SQL, MySQL, or the i5 database. It is someone who knows how to "tame" large amounts of data and how to present data to the user so the user thinks the data interface looks easy to use and gives a good overview.
This is where frames do a great job. You can build menus and headers very easily with frames, and you can reuse these over and over again. And if you change a menu, you only have to do it once. Of course, the same thing can be accomplished if you write everything in PHP or ASP, but that is not always my world. Very often, I have to write something in HTML and, for example, RPG. And this is where frames come in handy.
In this TechTip, I'll show you one of the great things about frames: frame crossing.
I suppose that you know how to write a Web page that contains frames, so I won't go into that. But there is one rule that applies to frame crossing, just one more very important thing to keep in mind when doing cross framing: You cannot cross-frame between different servers. If you try, you'll get an "access denied" error message. In future TechTips, I'll show you how to overcome this problem in a pretty simple way, but first let me show you some cross-framing tricks.
To refer to something in another frame, I use the parent.frame option combined with the name of the frame. For example, parent.frames["bottomframe"]. is used to refer to the bottom frame and so forth, but let's get this TechTip rolling.
If you look at the code below, you'll see definitions for three frames: top, main, and bottom.
<html> <head> <title>Passing data across frames part 1</title>
<frameset frameborder="1" framespacing="1" border="1" rows="50,*,50" cols="100%"> <frame src="top.htm" name="topframe" scrolling="no"> <frame src="main.htm" name="main" scrolling="auto"> <frame src="bottom.htm" name="bottomframe" scrolling="auto"> </frameset>
</html>
The page looks like Figure 1:
Figure 1: The code is displayed in a browser. (Click image to enlarge.)
I have created a few HTML controls that I use in this example. Cross Framing Example 1: Changing TextIf you look at the top frame, you'll see the text "Header" in bold. Then, look at the main frame and notice the "Enter a header text" field. Try typing something in the field and see what happens: The header text is replaced with what you type.
The code that defines the input field is shown below. Notice the onkeyUp event, which calls the JavaScript function called SetData().
<input type="text" size="80" name="inputtext" id="inputtext" onkeyup="SetData()">
The JavaScript code looks like this:
//----------------------------------------------------------------------------- // Set Data in top frame //----------------------------------------------------------------------------- function SetData() {
var headertext = document.getElementById("inputtext").value ; parent.frames["topframe"].document.getElementById("header").innerHTML='<h2>'+headertext+'</h2>'; parent.frames["topframe"].document.getElementById("header").style.color='red'; } What Happens
1. Every time you let go of a key press, SetData is called with no parameters. 2. I define a variable called headertext, and by using DOM syntax, I read the input (value) of the input field and place it in the variable. 3. Then I use the innerHTML property combined with the DOM syntax to change the text in the top frame. And finally, I also change the color to red.
The <div> tag is used in the top frame to make a kind of pointer to where the text should be written out. It looks like this:
<div id="header"><h2>Header</h2></div><p>
Not very useful, you might think. Well, it's a good example of what you can do. In my next tip, I'll show you how to use this in a real application. Cross-Framing Example 2: Enabling ButtonsThe next example shows you how to set buttons on and off, depending on a selection in a radio button.
In the main frame, I have three radio buttons called Items, Customers, and Purchase. In the bottom frame, I have four buttons, which are all disabled for input. The code looks like this for the Item button:
<input type="button" value="Items" disabled="disabled" name="items_button" id="items_button" onclick="GetData('Items key pressed')">
If you select a radio button, the buttons will open for input.
The code for the radio button looks like this:
<!-- Items --> <tr> <td valign="top"> Items </td> <td valign="top"> <input type="radio" value="I" name="radio_luxemburg" onclick="javascript:enableKey('I');"> </td> </tr>
As you can see, I used the onclick event to call JavaScript function enableKey. And for each radio button, I pass a value of I,C, or P. This is used in the function to control which keys are to be opened for input. The function looks like this:
//----------------------------------------------------------------------------- // Make buttons active //----------------------------------------------------------------------------- function enableKey( radioValue ) {
if ( radioValue == 'I' ) { parent.frames["bottomframe"].document.getElementById("items_button").disabled=false; parent.frames["bottomframe"].document.getElementById("customer_button").disabled=true; parent.frames["bottomframe"].document.getElementById("purchase_button").disabled=true; parent.frames["bottomframe"].document.getElementById("employee_button").disabled=true; } else if ( radioValue == 'C' ) { parent.frames["bottomframe"].document.getElementById("items_button").disabled=true; parent.frames["bottomframe"].document.getElementById("customer_button").disabled=false; parent.frames["bottomframe"].document.getElementById("purchase_button").disabled=true; parent.frames["bottomframe"].document.getElementById("employee_button").disabled=true; } else if ( radioValue == 'P' ) { parent.frames["bottomframe"].document.getElementById("items_button").disabled=true; parent.frames["bottomframe"].document.getElementById("customer_button").disabled=true; parent.frames["bottomframe"].document.getElementById("purchase_button").disabled=false; parent.frames["bottomframe"].document.getElementById("employee_button").disabled=false; }
}
At first glance, the function looks complicated, but take a second look; it's really pretty straightforward. Depending on the value passed to the function, I use the disabled property to control which buttons in the bottom frame are to be opened or closed for input. No rocket science here! Cross-Framing Example 3: Getting Hidden Data from a FrameIn the last example, I'll show you how to retrieve some hidden data from the top frame by pressing a button in the bottom frame and writing the data into the "Some output text" field in the main frame.
If you select a radio button in the main frame, a button is open for input in the bottom frame. When you press a button, the JavaScript function called GetData is called with some text passed as a parameter. The GetData function looks like this:
//----------------------------------------------------------------------------- // Get Data from top frame and write it to main //----------------------------------------------------------------------------- function GetData( keyData ) { parent.frames["main"].document.getElementById("outputtext").value = parent.frames["topframe"].document.getElementById("secret_text").value + ' (' + keyData + ')' ; }
It reads the data from the top frame in a hidden field called secret_text and then concatenates it with the data passed to the function when you click the button and write the data to the outputtext field in the main frame. Look at the code; by now, you should have a pretty good idea of what happens. Try changing some of the code and see what happens. Start by changing the secret_text in the top.htm document. Look for code that looks like this:
<input type="hidden" value="This is data from a hidden field, saved in the topframe" name="secret_text">
Save it and reload the page. See what happens. Done for NowThis ends this tip. Although you may think that what I have shown you today seems a bit useless, stay tuned for the next tip, where I'll add some RPG CGI programs to show you what can be done with cross-framing and a little JavaScript and HTML.
Until next time, as I've said before, learn JavaScript, CSS, and HTML. These will make your life a lot more interesting. And you might even impress your kids!
To download the example used in this tip, click here. You can also see how it works by clicking here. |
||||||||||||||||||||||||||||||||
|
Last Updated ( Thursday, 10 January 2008 ) |
||||||||||||||||||||||||||||||||
| J.Jorgensen |
Re:TechTip: Frame Crossing, Part I
Jan 21 2008 05:47:56 Hans,
Please do not get me wrong, I think it is great that you bring server based controls into the discussion. Maybe I am old fashioned about the use of frames and maybe I will change my point of view, but despite of that I still think they are a good way to get started with, specially if you are new to creating web programs - but please stay tuned to next part, which I am working on at the moment - and yes everything I am planning to do can of course be done with SSI and likewise... - Jan ps: I know we all can read Apache documentation, but I still think people like examples and how to combine it with for example RPG.... |
#121660 |
| Scawa |
Re:TechTip: Frame Crossing, Part I
Jan 15 2008 06:17:54 Actually, I was looking forward to the article on Frames. The first one was very good and thought it would be good to see how others used them, too
|
#121648 |
 |
Re:TechTip: Frame Crossing, Part I
Jan 15 2008 05:28:57 Jan: I too was thinking of writing to Victoria to see if she'd like an article on SSI. But hey, we all know how to read the Apache documentation, eh? B)
Deity knows I'm guilty of straying from the subject of discussion threads. But when I first read your article, I was rather surprised that someone in 2008 would actually advocate the use of frames! Suggesting server-based alternatives is, I believe, fair game when discussing frames. Cheers! Hans |
#121647 |
| J.Jorgensen |
Re:TechTip: Frame Crossing, Part I
Jan 14 2008 06:02:40 I can only agree with all your point of views - but is it just me or am I missing the point? The tip was about using frames and how one could exchange data between frames. But suddenly we are down to praise webserver features.
Sure the Apcahe server works very very well on the i5/Linux and even on Windows? So if no one else will then in the near future I'll write a tip about getting started with Server Side Includes (SSI) and then we'll have two different tools either to combine or compare.... Best regards - Jan |
#121645 |
| Scawa |
Re:TechTip: Frame Crossing, Part I
Jan 13 2008 22:58:41 And since this is an AS/400 forum, Apache comes on the AS/400! It works GREAT on the AS/400. I'm working for a client that is developing an corporate level web application and Apache works great!
Apache is also an integral part of the Mac OS X operating system, easy to install on Windoz, and is easy to install and configure on Linux and is the core of many webservers including Websphere... |
#121644 |
|
Re:TechTip: Frame Crossing, Part I
Jan 13 2008 06:05:48 Jan wrote: "Sure SSI and PHP can eliminate the use of _frame_s, but that means you have to use a webhotel or set it up yourself on your own server/pc - and that will drive a lot of people away even before they get startet."
I have Apache running on my workstation. Doesn't everyone? B) Seriously, though, it's incredibly useful if you manage a web site to be able to test on your home LAN before uploading your pages to the server. Apache is included in many Linux distro's, including openSUSE 10.3 which I run. For those who haven't tried Linux lately, openSUSE 10.3 is an amazing collection of wonderful software, almost filling a whole DVD. No one can say anymore that Linux is not ready for the desktop. Cheers! Hans |
#121643 |
| J.Jorgensen |
Re:TechTip: Frame Crossing, Part I
Jan 12 2008 20:47:56 Hi,
Thanks for sharing your views about the frame tip. The reason why I worte about frames was because it is something everybody can get their hands on. Sure SSI and PHP can eliminate the use of frames, but that means you have to use a webhotel or set it up yourself on your own server/pc - and that will drive a lot of people away even before they get startet. I hope that my little tip will work as an appetizer which will make the reader of the tip "want more" so say. Hans - sure the code should of course work in FireFox, but I made som embarrassing errors in the code and for some reason I did not test it in FF before I published it. But I am so lucky that the code is loacated on my own server, and I have now corrected it and also uploaded a new zip file for download, which (hopefully) have no errors. Best regards and have a nice weekend - Jan |
#121642 |
| Scawa |
Re:TechTip: Frame Crossing, Part I
Jan 12 2008 03:36:44 There are pros and cons to using frames in an app and you will probably discuss some of them in your next article.
I like frames for the purpose you mention... creating a nice tree structure menu system with Dynamic HTML (and a little AJAX now for lazy loading). It does great in isolating page refresh when you have multiple sections to refresh since you can target only a frame for refresh rather than the whole page. I also like frames when I may have a large table that I want to display with a scroll bar ( works just as well). The con for using frames is communication between frames. It can be more complex than having everything in a single frame and in the Javascript, one may get lost if you don't have consistent coding conventions. However, I agree H.Bolt. Having a consistent set of Headers/Footers and sidebars is not a good reason for using Frames. Most web servers (Apache, Tomcat, JBoss etc etc) support SSI. If your header/footer/sidebars have dynamic information then Java and PHP (the two languages I'm really familiar with) support includes of other dynamic web pages and Page Scope of request variables to support those dynamic features. And H.Bolt, now days, one needs to check the web-app out in IE (6 and 7 since they support Javascript differently), Firefox and (because I'm becoming a Mac Fiend) Safari. They all have little quirks on handling CSS and Javascript that have left me beating my head against a wall more than once. |
#121640 |
|
TechTip: Frame Crossing, Part I
Jan 12 2008 02:07:29 This thread discusses the Content article: TechTip: Frame Crossing, Part I
Jan wrote: "This is where frames do a great job. You can build menus and headers very easily with frames, and you can reuse these over and over again. And if you change a menu, you only have to do it once." I faced the same problem with my own web site www.boldts.net. To maintain a common look and feel, you want to have common headers, footers, and menus amongst the pages of a web site. I considered frames, but a web search will of course give you plenty of reasons to stay away from them. (But hey, if your clients are happy, who am I to argue, right?) Many of us are lucky enough to be using Apache. Instead of frames, I take advantage of the SSI capabilities of Apache. On my site, the header and footer are generated from separate include files. For menus, my site uses about a dozen different menu includes to handle the different categories of content. Pages that fit in two categories include two menus. One design feature I wanted on my site was to have the anchor link for the current page to be disabled when the page is viewed. Otherwise, I found that visitors will often click on the link again. That functionality is also achieved using SSI. BTW, Jan, have you tried out your test page using Firefox? (But hey, if your clients are happy using IE, who am I to argue, right?) Cheers! Hans PS, why is the BB software putting underscores around the words frame and link? |
#121638 |
