Home arrow HTML arrow Active Client Pages: Completing the Code for a Browser Example
HTML

Active Client Pages: Completing the Code for a Browser Example


The aim of this five-part series is to show to what extent a major browser responds to ACP. ACP is a new technology. In order to understand how a browser responds, we need an example to use to test the browser. We need to understand the example first. In this third part of the series I complete the explanation of the example.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
September 15, 2009
TABLE OF CONTENTS:
  1. · Active Client Pages: Completing the Code for a Browser Example
  2. · The sendPge2_2Str.pl File
  3. · Level 3
  4. · The window on the right at Level 3

print this article
SEARCH DEVARTICLES

Active Client Pages: Completing the Code for a Browser Example
(Page 1 of 4 )

The Tree

It is good to have the tree in mind as you read this article. This is the tree.


Fig 3.1


Level 2 Windows

We have looked at the level 0 window, which is the master page. We have also looked at the second page, which is the window at level 1. There are two windows at level 2. Let us look at the window source and contents here.

There are two files in the server, each of which has the content of one of these windows. There are two buttons in the second page. When the second page is loaded, it downloads the contents of both of these windows and has them held by two JavaScript variables.

Remember in ACP I describe each window or document as a page. The two pages at level 2 are in the Perl files, called sendPge2_1Str.pl and sendPge2_2Str.pl at the server. We look at them in this section.

The sendPge2_1Str.pl File

This is the file:


$returnStr = qq{

<html>

<head>

<script type="text/javascript">

function precedeOrReturn(name)

{

if (window.name == name)

{

return window.self;

}

else

{

parentWin = window.opener;

return parentWin.precedeOrReturn(name);

}

}


function openWin3Win()

{

win3 = window.open("","page3Win","width=400,height=400");

win3.document.write(page3Win);

}

</script>

</head>

<body>

This is page 2_1<br />

<button type="button" onclick="openWin3Win()">Open Page 3 Win</button>


<script type="text/javascript">


//content of page 3

var page3Win = "";

 

//Ajax code to download the next page


</script>

</body>

</html>

};


print $returnStr;

There are two Perl statements in the file. The explanations of these statements are the same as for what we saw in the previous part of the series. The HEAD element has a JavaScript, which has two functions. The names of the functions are precedeOrReturn(name) and openWin3Win().

The precedeOrReturn(name) function is the Backward Propagation Code. Ideally this code should be in every ACP window. I explain the operation of this function in the previous part of the series. The other function is openWin3Win(). There are two statements in this function. The first one opens a new window and the second one writes content to the opened window. The content is held in the page3Win variable. The content was assigned by the Ajax code.

Let us look at what is inside the BODY element of the above code. You have some text, a line break element and a button. When the button is clicked, the Win3Win() function, which we have seen, is called.

Let us now look at what is in the JavaScript in the BODY element. First the variable to hold the content of the window to be opened is declared. Next you have the Ajax code, which downloads the content of the window to be opened in advance. That explanation of this script is similar to the one I gave in the previous part of the series. That is it for the sendPge2_1Str.pl file.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials