Home arrow HTML arrow Page 4 - ACP and Browsers: Setting up an Example
HTML

ACP and Browsers: Setting up an Example


In this and the next part of this five-part series, we look at the code for a simple example of Active Client Pages that uses Chrysís Approach. We shall use this example to demonstrate how browsers respond to ACP. This example was described in the previous part of the series. To save time and writing space, I will not repeat the description here.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
September 08, 2009
TABLE OF CONTENTS:
  1. · ACP and Browsers: Setting up an Example
  2. · The Master Page
  3. · The HEAD Element Content
  4. · The Second Page

print this article
SEARCH DEVARTICLES

ACP and Browsers: Setting up an Example - The Second Page
(Page 4 of 4 )

It is good to have the Tree in mind as you read this section. This is the tree:



The second page is a window (level 1). The constituents of this window are in the  sendPge1Str.pl file. This is the code:


$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 openWin2_1()

{

win2_1 = window.open("","page2_1","width=400,height=400");

win2_1.document.write(page2_1Win);

}


function openWin2_2()

{

win2_2 = window.open("","page2_2","width=400,height=400");

win2_2.document.write(page2_2Win);

}

</script>

</head>

<body>

This is page 1 <br />

<button type="button" onclick="openWin2_1()">Open Window 2_1</button>

<button type="button" onclick="openWin2_2()">Open Window 2_2</button>



<script type="text/javascript">


//content of page 2_1

var page2_1Win = "";

 

//Ajax code to download one of the next pages.



//content of page 2_2

var page2_2Win = "";

 

function get2_2Str()

{

//Ajax Code to download the other page.

}


setTimeout(get2_2Str(),20)


</script>

</body>

</html>

};


print $returnStr;



This is a Perl file. There are actually only two Perl statements:


$returnStr = qq{};

and

print $returnStr;


The first Perl statement has all the HTML statements for the second page in the curly {} brackets. The second statement returns the string of the quote operator, qq{}. Note that the quote operator allows you to write code in the {} brackets without escaping the entities in the code.

Let us now look at the HTML content. You have the <html></html> tags that embodies the rest of the HTML elements. You have a HEAD element. This element has a JavaScript. The JavaScript has three functions, which are precedeOrReturn(name), openWin2_1() and openWin2_2(). The precedeOrReturn(name) function is the Backward Propagation Code. In theory this function (code) should be in every window. I explain the function above. The other two functions are to open the alternate windows. There are two corresponding buttons in the BODY element for these functions.

Let us look at what is in the BODY element. You have text, a line break element and two buttons. Each of these two buttons has a particular window that it will open when clicked.

Next you have another JavaScript. The first statement in this JavaScript is the declaration of the page2_1Win variable that will hold the content of one of the windows that can be opened, by clicking one of the buttons mentioned above.

After this you have the Ajax code to download the window (page) content string for this variable. After that you have the declaration for the page2_1Win variable that will hold the content of one of the windows that can be opened, by clicking the other button mentioned above.

After this a function is defined called get2_2Str(). The content of this function is the Ajax code to download the other window content string. After this function, you have the DOMís window setTimeout() function which calls the get2_2Str() function after a delay. The get2_2Str() function has the Ajax code, which downloads the other window.

As this page is loaded the two Ajax code segments are executed, with the second one after a time delay. If neither of the Ajax code segments is delayed, there might be conflict between the two Ajax code segments.

That is it for this part of the series. In the next part we look at the other files.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials