Hi Stevo,
Stevo said:
You'll probably have to give (the experts here) more info on what stuf is.
Personally, the only time I'm ever using myFunc.apply, I'm passing in
(this,arguments) to relay all of my received arguments onto another
function.
Fair enough, but as they say in the movies "it's complicated"! Please see
below for randomator.html (<500 lines). This is a next to useless random
employee picker that is designed just to work my Applet's socket while a
more useful employee lookup page/tab is handling user requests.
Please stay with me as it's definitely worthwhile in the end: -
Randomator uses an Applet to connect back to the codebase via a TCP/IP
socket.
This Socket, along with much other stuff, is held in static variable that is
common among all like-minded applets accross any number of tabs in a browser
instance.
To further complicate things, all applet instances write to the socket when
instructed by Javascript. but there is a single common "reader" thread that
does the multiplexing of responses to the correct tab and invokes the
appropriate JSObject.call() callback. (Tier3Client is the gateway to the
applet functionality and will be included under separate post)
Still with me? Good. . .
The onload event creates the default of 1 EmpPicker()
From here on in the user can increase/decrease the number of EmpPickers from
0 to 5 and vary the DIV-fade interval from 1 to 5 secs. (IE8 with 2 emps,
1sec fade, and one tab fails at mem usage 64MB when not the above error.
Firefox handles 5 Emps at one sec but *eventually* fails with multiple tabs
doing the same thing)
When not dying each EmpPicker's work schedule involves: -
1) Asking the server for a random employee (eventsMgr.setAST(carousel,0))
2) The "carousel" function SENDs a request to the server and specifies
"positionDiv" as the callback function
3) Because the Async flag on the SEND was set to false the Applet instance
will now wait in JAVA for the reader thread (well, actually, the Javascript
this.rendezvous() function) to tell it to proceed.
*4) Upon receiving the server response the Reader thread calls
myJSObject.call("dispatcher", args)
5) The "dispatcher" tries to call your callback "positionDiv" which works
many times before failing
6) after the coloured DIV has been populated with the employee details the
DIV begins fading (eventsMGR.setAST(fadeIt, FADEINTERVAL)
7) "fadeIt" keeps scheduling itself until the fade is/should-be complete and
then asks for another employee
* Delaying the server response by a 1 sec wait during testing certainly
threw up some odd behaviour :-(
If I've introduced some memory-leak/circular-reference or other basic
Javascript variable scoping error and am stomping on EmpPicker()
instances/memory then please let me know.
Should I make positionDiv() static and pass it the EmpPicker instance or
Index as an argument? (Is "this" causing problems?)
Threading or timer issue?
All relevant advice welcome.
Cheers Richard Maher
PS. I'm really not in the mood for the regular self-appointed newsgroup
sheriffs or incurable wankers discussing the relevance of the post,
spelling, cross-posting, overall strategy or design philosophy. Please find
someone else to annoy for today!
PPS. For the curiously sceptical please see: -
http://java.sun.com/javase/6/webnotes/6u10/plugin2/liveconnect/index.html
*Now in ORACLE livery!*
Randomator.html: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name = "author"
content = "Richard Maher"/>
<meta name = "description"
content = "Tier3Client random Employee picker"/>
<style>
html
{
height: 100%
}
body
{
background-color: Gray;
margin: 0px;
padding: 0px;
}
input.knob
{
font-family: arial;
font-weight: bold;
background-color: DarkGray;
color: black;
font-size: 18px;
height: 26px;
width: 20px;
padding: 0px;
margin: 1px;
}
.cntr
{
font-family: georgia;
font-weight: bold;
font-size: 18px;
background-color: white;
color: black;
height: 20px;
width: 20px;
text-align: center;
}
table#empDetails caption
{
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: gray;
}
table#empDetails
{
width: 100%;
}
.promptItem
{
text-align: right;
}
.dataItem
{
font-weight: bold;
}
div#ctrlPanel
{
background-color: Turquoise;
color: black;
font-family: Georgia;
font-size: 12px;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
height: 30px;
}
.screenHdr
{
text-align: center;
font-size: 22px;
font-weight: bold;
color: Black;
}
</style>
<script type="text/javascript" src="Tier3Client.js" ></script>
<script type="text/javascript">
var t3Client;
var fadeSecs;
var empsCnt;
EmpPicker.FADEMIN = 1000;
EmpPicker.FADEMAX = 5000;
EmpPicker.MAXEMPS = 5;
EmpPicker.fadeDuration = 3000;
EmpPicker.activeDivs = [];
function EmpPicker()
{
var DIVCOLORS = new Array("lightgrey",
"yellow",
"magenta",
"lawngreen",
"cyan");
var FADEINTERVAL = 50;
var HDRHEIGHT = 30;
var DIVWIDTH = 300;
var DIVHEIGHT = 150;
var BORDERWIDTH = 4;
var targetDiv = document.createElement("div");
var startTime;
var endTime;
var fadeDuration;
var shuttingDown = false;
targetDiv.style.visibility = "hidden";
targetDiv.style.position = "absolute";
targetDiv.style.width = DIVWIDTH+"px";
targetDiv.style.height = DIVHEIGHT+"px";
var colorIndex = EmpPicker.activeDivs.length %
DIVCOLORS.length;
targetDiv.style.backgroundColor
= DIVCOLORS[colorIndex];
targetDiv.style.color = "black";
targetDiv.style.fontSize = "12px";
targetDiv.style.borderTop = "1px solid black";
targetDiv.style.borderRight= "3px solid black";
targetDiv.style.borderBottom
= "3px solid black";
targetDiv.style.borderLeft = "1px solid black";
targetDiv.style.padding = "0px";
targetDiv.style.margin = "0px";
document.body.appendChild(targetDiv);
var eventsMgr = function()
{
var AST = 0;
var setAST =
function(entryPoint,timer){
AST = setTimeout(entryPoint,timer);
empsCnt.value = AST;
};
var cancelAST =
function(){
fadeSecs.value = AST;
clearTimeout(AST);
};
return {
setAST : setAST,
cancelAST : cancelAST
};
}();
var positionDiv =
function positionDiv(respMsg)
{
this.rendezvous();
if (shuttingDown){
// this.rendezvous();
// alert("PD exit");
return;
}
targetDiv.style.visibility = "hidden";
targetDiv.style.opacity = "";
targetDiv.style.filter = "";
targetDiv.style.zIndex = "1000";
var recType = respMsg.substr(0,2);
switch (recType)
{
case "00" :
// alert(respMsg.substr(2));
break;
case "31" :
targetDiv.innerHTML =
'<table border="0" cellpadding="1px" '
+
' align="center" id="empDetails"> '
+
' <caption>Totally Random Employee</caption>'
+
' <tr><td class="promptItem">Employee Id: </td>'
+
' <td class="dataItem">'+ respMsg.substr(2,5)
+'</td></tr>' +
' <tr><td class="promptItem"> Name:</td>'
+
' <td class="dataItem">'+ respMsg.substr(7,28)
+'</td></tr>' +
' <tr><td class="promptItem">Sex: </td>'
+
' <td class="dataItem">'+ respMsg.substr(35,1)
+'</td></tr>' +
' <tr><td span class="promptItem">Department: </td>'
+
' <td class="dataItem">'+ respMsg.substr(36,30)
+'</td></tr>' +
' <tr><td class="promptItem">Current Salary: </td>'
+
' <td class="dataItem">'+ respMsg.substr(66,12)
+'</td></tr>' +
' <tr><td class="promptItem">Dept Average: </td>'
+
' <td class="dataItem">'+ respMsg.substr(78,12)
+'</td></tr>' +
'</table><br>';
break;
default :
throw new Error("Received Invalid Record Type [" + recType +
"]");
}
var canvas = function(){
var height = 0;
var width = 0;
var scrollTop = 0;
var scrollLeft = 0;
if (window.innerHeight){
width = window.innerWidth;
height = window.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight){
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if (document.body){
width = document.body.clientWidth;
height = document.body.clientHeight;
}
if (typeof( window.pageYOffset ) == 'number'){
scrollTop = window.pageYOffset;
scrollLeft = window.pageXOffset;
}
else if (document.documentElement &&
document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
scrollLeft = document.documentElement.scrollLeft;
}
else if (document.body){
scrollTop = document.body.scrollTop;
scrollLeft = document.body.scrollLeft;
}
return {height : height, width : width, scrollTop : scrollTop,
scrollLeft : scrollLeft};
}();
var divTop = Math.floor(Math.random()*(canvas.height -
(DIVHEIGHT + BORDERWIDTH + HDRHEIGHT)));
divTop = divTop < 0 ? 0 : divTop;
var divLeft = Math.floor(Math.random()*(canvas.width -
(DIVWIDTH + BORDERWIDTH)));
divLeft = divLeft < 0 ? 0 : divLeft;
targetDiv.style.left = divLeft + "px";
targetDiv.style.top = (divTop + HDRHEIGHT) + "px";
targetDiv.style.visibility = "visible";
startTime = new Date().getTime();
endTime = startTime + EmpPicker.fadeDuration;
fadeDuration = EmpPicker.fadeDuration
eventsMgr.setAST(fadeIt,FADEINTERVAL);
}
var fadeIt =
function(){
var now = new Date().getTime();
if (now >= endTime) {
targetDiv.style.visibility = "hidden";
eventsMgr.setAST(carousel,300);
}else{
var fadeFactor = 1 - (now - startTime) / fadeDuration;
targetDiv.style.opacity = fadeFactor;
targetDiv.style.filter = "alpha(opacity="+(fadeFactor*100)+")";
targetDiv.style.zIndex--;
eventsMgr.setAST(fadeIt,FADEINTERVAL);
}
}
var carousel =
function(){
if (shuttingDown){
// alert("no go");
return;
}
t3Client.send("30",positionDiv,false);
}
this.shutdown =
function(){
shuttingDown = true;
eventsMgr.cancelAST();
targetDiv.style.visibility = "hidden";
document.body.removeChild(targetDiv);
targetDiv = null;
}
EmpPicker.activeDivs.push(this);
eventsMgr.setAST(carousel,0);
return this;
}
function load()
{
fadeSecs = document.getElementById("fadeSecs");
empsCnt = document.getElementById("empsCnt");
try {
t3Client = new Tier3Client(
"Demo", "
http://192.168.1.159/Applets/",
2048, 1022, "ISO-8859-1", "N", Tier3Client.GUIAWT,
null,Tier3Client.WARNING);
} catch (err){
alert((err.description||err.message));
throw err;
}
if (t3Client == null || t3Client == undefined) {
alert("Error connecting to Tier3 Client")
throw new Error("Could not activate Tier3 Client");
}
fadeSecs.value = EmpPicker.fadeDuration / 1000;
t3Client.appendConsoleMsg("Employee Randomator successfully loaded");
addEmp();
return;
}
function setDuration(stepValue)
{
var newDuration = EmpPicker.fadeDuration + stepValue;
if (newDuration < EmpPicker.FADEMIN || newDuration >
EmpPicker.FADEMAX)
return;
EmpPicker.fadeDuration = newDuration;
fadeSecs.value = EmpPicker.fadeDuration / 1000;
}
function addEmp()
{
if (EmpPicker.activeDivs.length == EmpPicker.MAXEMPS)
return;
var newEmp = new EmpPicker();
empsCnt.value = EmpPicker.activeDivs.length;
}
function delEmp()
{
if (EmpPicker.activeDivs.length == 0)
return;
var victim = EmpPicker.activeDivs.pop();
victim.shutdown();
empsCnt.value = EmpPicker.activeDivs.length;
}
</script>
</head>
<body onload="load();" onunload="(function(){});">
<div id="ctrlPanel">
<table
style="table-layout: fixed;"
width="100%"
border="0"
frame="void"
cellpadding="0"
cellspacing="0"
rules="none"
<td
width="40%"
style="text-align: right;"
valign="middle"Fade Duration :
<input
type="button"
class="knob"
onclick="setDuration(1000)"
name="fadeUp"
value="^"
title="Increase Fade Time"
/>
<input
type="text"
class="cntr"
id="fadeSecs"
readonly="readonly"
value="0"
size=1
title="Duration of fade in seconds"
/>
<input
type="button"
class="knob"
style="font-size: 14px;"
onclick="setDuration(-1000)"
name="fadeDown"
value="v"
title="Decrease Fade Time"
/>
</td>
<td
width="20%"
class="screenHdr"
valign="middle"
<td
width="40%"
style="text-align: left;"
valign="middle"<input
type="button"
class="knob"
onclick="addEmp()"
name="empsUp"
value="^"
title="Pick more employees"
/>
<input
type="text"
class="cntr"
id="empsCnt"
readonly="readonly"
value="0"
size=1
title="Number of employees to pick"
/>
<input
type="button"
class="knob"
style="font-size: 14px;"
onclick="delEmp()"
name="empsDown"
value="v"
title="Pick fewer employees"
/>
: Concurrent Selections
</td>
</tr>
</table>
</div>
</body>
</html>