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 Text
If 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 Buttons
The 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 Frame
In 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 Now
This 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.
More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.
TRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now! Request Now.
Forms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.
Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:
Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.
IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn:
LATEST COMMENTS
MC Press Online