System and method for facilitating a windows based content manifestation environment within a WWW browser6272493Abstract System and method for facilitating a windowed content manifestation environment within a world wide web (WWW) browser client. The system and method include and involve a server system that is configured to serve a software system and associated content via an electronic data network such as the Internet and WWW. Also included and involved is a web browser client (web browser software application) operating within a data processing system that is coupled to said server system via the electronic data network and which instantiates a content manifestation environment (e.g., a dynamic screen display environment within the data processing system). The web browser client is operative to receive the software system and the associated content via the server system, to process the software system and the associated content to produce at least one window object within the content manifestation environment. The generated window object(s) are each associated with a set of controllable attributes and are configured to manifest at least a portion of the associated content. The controllable attributes are configured to affect manifestation of the window object(s) by the web browser client within the content manifestation environment. The window object(s) generated within the content manifestation environment may be updated and loaded with content received via the electronic data network without requiring the content manifestation environment to be refreshed (e.g., without requiring screen refresh operations), and in real-time without requiring user intervention such as via hyper-link traversal. Claims What is claimed is: Description BACKGROUND OF THE INVENTION
# MySQL dump 4.0
#
# Host: localhost Database: ENVIRONMENT
#---------------------------------------------------
#
# Table structure for table 'MODULES'
#
CREATE TABLE MODULES (
Priority tinyint(2),
Name varchar(20) DEFAULT " NOT NULL,
Open tinyint(1) DEFAULT '0',
Maximized tinyint(1) DEFAULT '0',
Xposition tinyint(1) DEFAULT '0',
Yposition tinyint(1) DEFAULT '0',
Height smallint(4),
Width smallint(4),
PRIMARY KEY (Name)
);
# Dumping data for table 'MODULES'
INSERT INTO MODULES VALUES (2,'MODchat',1,1,0,0,0,0);
INSERT INTO MODULES VALUES (1,'MODnews',1,1,0,0,0,0);
INSERT INTO MODULES VALUES (3,'MODhomepage',1,1,0,0,0,0);
INSERT INTO MODULES VALUES (0,'MODtravel',1,1,0,0,0,0);
INSERT INTO MODULES VALUES (4,'MODstocks',1,1,0,0,0,0);
INSERT INTO MODULES VALUES (5,'MODemail',1,1,0,0,0,0);
INSERT INTO MODULES VALUES (6,'MODsearch',1,1,0,0,0,0);
The above-listed "INSERT" statements are used to fill the generated database with window module names, etc. to form the basis of an initial set of windows that are ultimately displayed in a windowed CME in accordance with the present invention. Next, processing proceeds to step S4-3. At step S4-3, HTML files and related files (e.g., included and referenced javascript files, etc.) are generated and stored within server side data storage facility (e.g., data store 104 - FIG. 1). Exemplary programs to carry such operations are provided immediately below: For example, the following script may be generated within a software development environment known as PHP3 (Personal Home Page V.3.0) which is a freeware software package under constant development which may be used to create an HTML-based graphical user interface (GUI) database administration utility which may be used within a server-side WWW browser client to facilitate window module attribute setting and adjustment and corresponding database operations. Such attributes correspond to column values stored within the database table illustrated and described above. Accordingly, after using PHP3, the following HTML script language may be loaded into a WWW browser client to permit user adjustment of window module attributes (e.g., vertical and horizontal CME positions, priority, position, etc.). Those familiar with HTML will immediately understand the following markup instructions.
<html><head><title></title>
<script language="Javascript">
var MO = new Array();
var STORED = new Array();
var thisKey = ' ';
// handles form submission
function submitForm(thisName)
{
var PRIORITYSTRING = ' ';
var modName = ' ';
// go through all modules and grab the priority value; build it
// into a string and send it to that form's PRIORITYSTRING hidden
field.
for(x=0; x <= highPriority; x++)
{
modName = MO[x];
PRIORITYSTRING += (modName + '=' +
document.forms[modName].priority.value.toString ());
if(x != highPriority) { PRIORITYSTRING += '.about..about.'; }
}
// update the hidden PRIORITYSTRING value
document.forms[thisName].PRIORITYSTRING.value = PRIORITYSTRING;
// submit the form
document.forms [thisName].submit ();
}
function storeValue (thisValue,thisForm,thisItem)
{
// store the value in any window that gets focus;
// used to replace bad entries or switch priorities
thisKey = (thisForm + thisItem);
STORED[thisKey]= thisValue;
return;
}
function checkInput (thisValue,thisForm,thisItem)
{
// check that object flags are either '1'or '0'
// if an error, inform and replace with old value and return
if(((thisValue != '0') && (thisValue != '1')) .vertline..vertline.
(thisValue.length > 1))
{
// alert the error and replace original value
alert('The only acceptable values are "1"or "0" ');
thisKey = (thisForm + thisItem);
document[thisForm][thisItem].value = STORED[thisKey];
return;
}
}
function checkPriority(thisValue,thisPosition)
{
/*
* this will first check if the number is in range (0 - highPriority)
* or if it is an invalid string -- if either, inform of error and
reset old
value;
*
* if value is ok, search through all the priority fields and find
the field
* that contains the value current field is being set to, and set
THAT field
* to the stored value for the current field (ie. switch the values)
*/
thisValue -= 0; // turn it into a number
thisKey = (MO[thisPosition] + 'priority');
// check value and alert if error
if((thisValue < 0) .vertline..vertline. (thisValue > highPriority)
.vertline..vertline. (parseInt(thisValue) !=
thisValue))
{
alert('That value is out of range, or contains illegal
characters..backslash.nPlease enter a
numeric value between 0 and ' + highPriority + '.');
document[MO[thisPosition]].priority.value = STORED[thisKey];
}
else // go through and find value matching current, and switch them
{
for(x=0; x <= highPriority; x++)
{
if(x == thisPosition) { continue; } // skip current value
if(document[MO[x]].priority.value == thisValue)
{
// if a match is found, switch the values and exit
document[MO[x]].priority.value = STORED[thisKey];
break;
}
}
// lose any whitespace, prepended zeros
thisValue = parseInt(thisValue);
// realize the corrected value
document[MO[thisPosition]].priority.value = thisValue;
}
return;
}
</script>
</head>
<body>
<center>
<table cellpadding=4 cellspacing=0 border=1 width=700>
<tr><td>
<font face="verdana,arial,helvetica" size=2><b>
The following is all information relating to module objects. Change the
order they appear
in simply by changing the priority number. A change in one number will
automatically
switch the rest of the list to accomodate -- Ie. if I switch '1' to '2',
the item with
priority '2' will now be switched to '1'.
<p>Use only ones(1) or zeros(0) in the property values.<p>
CHANGING THESE VALUES WILL CHANGE THE DATABASE IMMEDIATELY, BUT THE NEW
VALUES WILL ONLY
SHOW UP IN THE ACTUAL SITE LAYOUT AFTER THE NEW
**generated_files/module_setup.js** FILE
IS GENERATED. <font color=#ff0000>IT WILL NOT IMMEDIATELY CHANGE THE
LAYOUT</font>.
</b></font>
</td></tr></table>
<br>
<?php
include("/usr/www/htdocs/shared/shared.php3");
$FONT_SET = "<font face=.backslash."verdana,arial,helvetica.backslash."
size=2>.backslash.n";
$JSCRIPT = "<script language=.backslash."Javascript.backslash.">";
// get all module data and order it by priority
$MOD_QUERY = dbase_long("ENVIRONMENT","select * from MODULES order by
'Priority' ASC");
$FIELD_NAMES = mysql_list_fields("ENVIRONMENT","MODULES"); // the field
names result index
$NUMBER_FIELDS = mysql_num_fields($FIELD_NAMES); // how many
fields(PROPERTIES)
$MODULE_COUNT = 0; // counter to keep track of form position
while($currentModule = mysql_fetch_array($MOD_QUERY)) // go through the
current module
data
{
// get current module name
$thisName = $currentModule["Name"];
$thisPriority = $currentModule["Priority"];
echo"<form name=.backslash." ".$thisName.".backslash."
action=.backslash."write_module_changes.php3.backslash."
method=.backslash."post.backslash.">";
// stores priority string on submit
echo"<input type=.backslash."hidden.backslash."
name=.backslash."PRIORITYSTRING.backslash."
value=.backslash.".backslash.">";
// stores the module name that data should be attributed to
echo"<input type=.backslash."hidden.backslash."
name=.backslash."sentModule.backslash." value=.backslash."
".$thisName.".backslash.">.backslash.n";
echo"<table cellpadding=6 cellspacing=0 border=1><tr><td valign=top
bgcolor=#f0f0f0>.backslash.n";
echo $FONT_SET;
echo "<font color=#0000ff>.backslash.n";
echo strToUpper($thisName)."</font><p>";
echo "Priority: <input type=text size=2
name=.backslash."priority.backslash."
value=.backslash." ".$thispriority.".backslash."
onFocus=.backslash."storeValue(this.value, ' ".$thisName." ',
'priority').backslash."
onChange=.backslash."checkPriority(this.value, ' ".$MODULE_COUNT."
').backslash."><br>";
echo "</font></td><td valign=top bgcolor=#d0d0d0>";
echo $FONT_SET;
// now go through all fields displaying property names and values;
// skipping first 4 fields: Priority,Name,Open,Maximized since
// Priority is already displayed, Name can't be changed, and Open &&
Maximized
// are set by environment
for($thisField = 4; $thisField < $NUMBER_FIELDS; $thisField++)
{
$fieldName = mysql_field_name($FIELD_NAMES,$thisField);
$fieldValue = $currentModule[$thisField];
// write the properties by name(field) and value (row value for
field)
echo $fieldName.": <input type=text size=5 name=.backslash."
".$fieldName.".backslash."
value=.backslash." ".$fieldValue.".backslash."><br>";
}
$MODULE_COUNT++;
echo"</td></tr><tr><td colspan=2 bgcolor=#f0f0f0 valign=top
align=center>.backslash.n";
echo"<input type=.backslash."button.backslash." onClick =
.backslash."submitForm(' ".$thisName." ').backslash."
value=.backslash."UPDATE MODULE.backslash."<br>";
echo"</td></tr></form></table>.backslash.n.backslash.n";
echo $JSCRIPT."MO[".($MODULE_COUNT -1)."] = ' ".$thisName."
';</script>";
}
echo $JSCRIPT."var highPriority = ".($MODULE_COUNT -
1).";</script>";
?>
</center>
</body>
</html>
Once a database table is generated to store window module properties and the like, and after the above-listed script is generated and run to allow GUI manipulation of window module attributes stored within the generated database table which is stored at a server side system such as within SVR system 102 (FIG. 1), for example, PHP3 may again be used to automatically generate an output javascript file which forms the basis of a software package that subsequently may be downloaded to network users for processing within their WWW browser clients to facilitate a windows based CIME therein in accordance with the present invention. A sample PHP3 script to automate javascript file generation is listed below. Those skilled in the art of web type programming will immediately recognize the nature of the PHP3 script language listed below.
/* *************************************************************** *
* generated_files/module_setup.php3 *
* *
* This script is used to create all of the window modules which *
* will be used by the interface. It is working on the ENVIRONMENT *
* database, within the table MODULES. It will output all of the *
* necessary javascript to store all the module names in MODULE_NAMES, *
* all module objects in MODULES[mod_0 . . . mod_n], and set all *
* the necessary properties in each object. In short, this *
* generates the .js file (generated_files/module_setup.js) which *
* provides layout and content information for all of the modules. *
* *************************************************************** */
include("/usr/www/htdocs/shared/shared.php3");
// set the file pointer
$thisFile = fopen("/usr/www/htdocs/generated_files/module setup.js", "w");
// write the initial setup jscript
$outFile .= "var MODULE_NAMES = new Array();.backslash.n";
$outFile .= "var MODULES = new Array();.backslash.n.backslash.n";
// this is the constructor
$outFile .= "function layerObject(name).backslash.n";
$outFile .= " {.backslash.n";
$outFile .= " this.Name = name;.backslash.n";
$outFile .= " }.backslash.n.backslash.n";
$MODULE_COUNT = 0; // will increment and use as key for MODULE_NAMES
// get all module data and order it by priority
$MOD_QUERY = dbase long("ENVIRONMENT","select * from MODULES order by
'Priority' ASC");
$FIELD_NAMES = mysql_list_fields("ENVIRONMENT","MODULES"); // the field
names result index
$NUMBER_FIELDS = mysql_num_fields($FIELD_NAMES); // how many
fields(PROPERTIES)
// go through the current module data
// write the properties, and fill the Text value
while($currentModule = mysql_fetch_array($MOD_QUERY))
{
// get the current module name
$thisName = $currentModule["Name"];
// write to MODULE_NAMES
$outFile .= ("MODULE_NAMES[".$MODULE_COUNT."] = ' ".$thisName."
';.backslash.n");
// write code to create module object
$outFile .= ("MODULES[' ".$thisName." '] = new layerObject('
".$thisName." ');.backslash.n");
// now go through all fields and, using those as property names, set
// object properties for MODULES[n].currentField =
currentFieldSetting
for($thisField = 2; $thisField < $NUMBER_FIELDS; $thisField++)
{
// write the properties by name(field) and value (row value for
field)
$outFile .=
("MODULES[' ".$thisName." '].".mysql_field_name($FIELD_NAMES,$thisField)."
=
".$currentModule[$thisField].";.backslash.n");
}
/*
* am now going to fill the text field;
* to do this, we first read in the html file as a
* string; then we simply attribute that string to
* the Text property of the current object;
* the html files are named the same as the module + .txt
* and are in the /HTML directory
*/
$HTML = " ";
$HTMLpath = "/usr/www/htdocs/HTML/";
$HTML .= $HTMLpath.$thisName.".txt";
$tt = fopen($HTML, "r");
$filecontents = fread($tt, filesize($HTML));
$filecontents = ereg_replace(".backslash.n"," ",$filecontents);
$filecontents = ereg_replace(" ' ",".backslash.'
",$filecontents);
$outFile .= "MODULES[' ".$thisName." '].Text = '
".$filecontents." ';";
fclose($tt);
$MODULE_COUNT++;
}
// write the total module count (1 higher on base 0)
$outFile .= (".backslash.nvar TOTAL_MODULE_COUNT = ' ".$MODULE_COUNT."
';.backslash.n.backslash.n");
// now establish any prototype values
$outFile .= "layerObject.prototype.Column = 0;.backslash.n";
$outFile .= "layerObject.prototype.Row =0;.backslash.n";
// the file (module_setup.js);
fputs($thisFile,$outFile);
$outFile = ' ';
FCLOSE($THISFILE);
The emphasized "include" statement found in the listing/file presented above refers to another script listing/file named "shared.php3." Such a file includes standard library functions used by PHP to generate output files in accordance with the present invention. Shared.php3 is listed below. Those familiar with PHP will immediately understand the functions presented in shared.php3 after carefully reviewing the same.
<?php
/*
------------------------------------------------------------
A SHARED FUNCTION LIBRARY FOR PHP3
------------------------------------------------------------
-----------------------
erroneous( errormsg );
-----------------------
requires: - errormsg -> a string containing an error message, to be
attached to the string "An error has occurred: "
and sent to an alert dialog box. Be sure to
call this function from inside the <head> or
<body> of the document.
returns: echoes the javascript to alert the user of the error, and
then resets the browser history to the previous page.
-------------------------------------
mail_it( [address] , [subject] , message );
-------------------------------------
requires: - address -> a valid email address; if no email address
is specified, mail will be sent to the
administrator, set in $address;
subject -> an optional subject line. Default = "[none]"
message -> the body of the message. All messages will
have date and time information attached to
the bottom of the message.
returns: Nothing.
--------------------------------
dbase_long( dbase , sqlquery );
- return the result index of a dbase request
--------------------------------
requires: - dbase -> string containing a valid mysql database;
sqlquery -> string containing a valid sql request;
returns: integer -> the result index of the query, which
can then be "fetched" from as you please.
-----------------------------
dbase( dbase , sqlquery , [read/write] );
- read or write to a single field in a specified dbase.
-----------------------------
requires: - dbase -> string containing a valid mysql database;
- sqlquery -> string containing a valid
sql request (ie. select name from testtable where
id='1');
- read/write -> one of "read" or "write"; if set to "read"
(ie. if your request is a SELECT which returns
some value) the function will return a string
containing that value. If set to "write",
function
returns a boolean success/failure flag. If not
set, defaults to "read".
returns: string -> either the result on a read, or the success flag
on write. Note that this function returns a single
field value on read. If you are seeking multiple
results, use dbase_long(). If the request fails,
the function will return "error".
-----------------------------
get_file( path , [html_flag] );
- Reads the specified file and returns all
contents as a string.
-----------------------------
requires: - path -> the full path to the file, including
the file name, ie. "/files/new/my_file.txt";
- [html_flag] -> optional flag: if included (ie. set to
"html"), all
newlines are replaced with "<br>" html tags.
returns: string -> each line (concatenated) of indicated file is returned
as a string.
*/
///////////////////////
// erroneous() //
///////////////////////
function erroneous($errormsg)
{
$errorString = "An error has occurred: ";
echo "<script
language=.backslash."Javascript.backslash.">.backslash.n";
echo "alert(' ".$errorString.$erromsg." ');.backslash.n";
echo "self.history.go(-1);.backslash.n";
echo "</script>.backslash.n";
exit;
}
////////////////////
// mail_it() //
////////////////////
function mail_it($address,$subject = "[none]",$message)
{
$address = ($address) ? $address : "hhhubris@hotmail.com";
$message .=
".backslash.n-------------------------------------------------------------
---.backslash.n".date("M d Y,
h:i:s");
mail($address,$subject,$message);
}
//////////////////////////
// dbase_long() //
//////////////////////////
function dbase_long($dbase,$sql_query)
{
mysql_connect();
$this_result = mysql_db_query($dbase,$sql_query);
return ( $this_result );
mysql_close();
}
/////////////////
// dbase() //
/////////////////
function dbase($dbase,$sql_query,$read_write="read")
{
mysql_connect();
$this_result = mysql_db_query($dbase,$sql_query);
$return_value = ($read_write == "read") ?
@mysql_result($this_result,0,0) :
$this_result ;
return ( ($return_value) ? $return_value : "error" );
mysql_close();
}
/////////////////////
// get_file() //
/////////////////////
function get_file($this_path,$htmled = " ")
{
if(file_exists($this_path))
{
$this_file = fopen($this_path, "r");
$this_stuff = ltrim(fread($this_file,filesize($this_path)));
fclose($this_file);
return (($htmled) ? ereg_replace(".backslash.n","<br>",$this_stuff) :
$this_stuff);
}
}
?>
As noted above, the output javascript file that forms the basis of a software package and a corresponding windows based CME in accordance with the present invention is generated after executing the instructions listed in the scripts shown immediately above. Such output javasc:ript file (referred to herein as a "javascript file containing window module setup routines") may be downloaded along with other web site source files to client systems and, in particular, to WWW browser clients via an electronic data network such as the Internet and WWW. Alternatively, the other web site source files may be maintained locally within client systems which, at appropriate times, access an electronic data network (e.g., the Internet and WWW, an intranet, or other networking environment, etc.) or local storage devices to receive the javascript file containing window module setup routines. Accordingly, the present invention contemplates the provisioning of a generalized windows based interface within a WWW browser client which may be particularlized based on a single file (e.g., the javascript file containing window module setup routines, etc.) for given computing and data processing environments. That is, the present invention now allows web site developers and operators, for example, to create dynamic content manifestation environments easily and without having to endlessly generate new content delivery interfaces to appear dynamic. In any case, the output javascript file along with such other web site source files will instruct such a WWW browser client to produce a windowed CME in accordance with the present invention. A sample output javascript file that may be generated and stored on a server (e.g., on SVR system 102--FIG. 1) and downloaded to a WWW browser client is listed below. Those skilled in the art of web programming and, in particular, javascript coding will immediately understand the same.
/* WINDOW MODULE SETUP ROUTINES (ESTABLISHES PARAMETERS FOR NEW WINDOWS
WITHIN A CME) . . . */
var MODULE_NAMES = new Array();
var MODULES = new Array();
function layerObject(name)
{
this.Name = name;
}
MODULE_NAMES[0] = 'MODtravel';
MODULES['MODtravel'] = new layerObject('MODtravel');
MODULES['MODtravel'].Open = 0;
MODULES['MODtravel'].Maximized = 1;
MODULES['MODtravel'].Xposition = 0;
MODULES['MODtravel'].Yposition = 0;
MODULES['MODtravel'].Height = 200;
MODULES['MODtravel'].Width = 400;
MODULES['MODtravel'].Text = '<img src="images/erase1.gif"><img
src="images/erase2.gif"><br><img src="images/erase3.gif" align=left><font
color=#ff0000>SPECIAL!</font><br>Click <a href="#">here</a> to find out
more!';
MODULE_NAMES[1] = 'MODnews';
MODULES['MODnews'] = new layerObject('MODnews');
MODULES['MODnews'].Open = 1;
MODULES['MODnews'].Maximized = 1;
MODULES['MODnews'].Xposition = 282;
MODULES['MODnews'].Yposition = 106;
MODULES['MODnews'].Height = 400;
MODULES['MODnews'].Width = 200;
MODULES['MODnews'].Text = '<table cellpadding=0 cellspacing=0
border=0><tr><td
bgcolor=#000000> <object
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height="200" id="RealFlash" width="250"> <param name="SRC"
value="rtsp://sound.todayscommunications.com/realtext/news.rt"> <param
name="CONTROLS" value="ImageWindow"> <param name="AUTOSTART" value="-1">
<param
name="NOLABELS" value="0"> </object></td></tr></table>';
MODULE_NAMES[2] = 'MODchat';
MODULES['MODchat'] = new layerObject('MODchat');
MODULES['MODchat'].Open = 1;
MODULES['MODchat'].Maximized = 1;
MODULES['MODchat'].Xposition = 404;
MODULES['MODchat'].Yposition = 377;
MODULES['MODchat'].Height = 200;
MODULES['MODchat'].Width = 200;
MODULES['MODchat'].Text = '<center><form><table cellpadding=6 cellspacing=0
border=1
width=100%><tr><td bgcolor=#d0d0d0 align=right><font size=2
face="verdana,arial,helvetica"><img
src="images/username.gif"><br></font></td><td
bgcolor=#d0d0d0><input type="text" size=10
name="uname"><br></td></tr><tr><td
bgcolor=#d0d0d0 align=right><font size=2
face="verdana,arial,helvetica"><img
src="images/password.gif"><br></font></td><td bgcolor=#d0d0d0><input
type="text" size=10
name="pword"><br></td></tr><tr><td bgcolor=#333366 colspan=2
align=right><input
type="image"
src="images/login.gif"></td></tr></td></tr></table></form></center>';
MODULE_NAMES[3] = 'MODhomepage';
MODULES['MODhomepage'] = new layerObject('MODhomepage');
MODULES['MODhomepage'].Open = 1;
MODULES['MODhomepage'].Maximized = 1;
MODULES['MODhomepage'].Xposition = 10;
MODULES['MODhomepage'].Yposition = 158;
MODULES['MODhomepage'].Height = 200;
MODULES['MODhomepage'].Width = 300;
MODULES['MODhomepage'].Text = 'You.backslash.'ve had <font
color=#ff0000>237</font> hits on your
page since your last visit!<p>There have <font color=#ff0000>4</font>
feedback forms
submitted.<br><img src="ads/sample.gif"><br></center>';
MODULE_NAMES[4] = 'MODstocks';
MODULES['MODstocks'] = new layerObject('MODstocks');
MODULES['MODstocks'].Open = 0;
MODULES['MODstocks'].Maximized = 1;
MODULES['MODstocks'].Xposition = 175;
MODULES['MODstocks'].Yposition = 175;
MODULES['MODstocks'].Height = 200;
MODULES['MODstocks'].Width = 350;
MODULES['MODstocks'].Text = 'Here is the stock information<p> . . . and
some more<p> . . . and
some more . . . ';
MODULE_NAMES[5] = 'MODemail';
MODULES['MODemail'] = new layerObject('MODemail');
MODULES['MODemail'].Open = 0;
MODULES['MODemail'].Maximized = 1;
MODULES['MODemall'].Xposition = 127;
MODULES['MODemail'].Yposition = 127;
MODULES['MODemail'].Height = 300;
MODULES['MODemail'].Width = 200;
MODULES['MODemail'].Text = 'this is the email';
MODULE_NAMES[6] = 'MODsearch';
MODULES['MODsearch'] = new layerObject('MODsearch');
MODULES['MODsearch'].Open = 0;
MODULES['MODsearch'].Maximized = 1;
MODULES['MODsearch'].Xposition = 7;
MODULES['MODsearch'].Yposition = 127;
MODULES['MODsearch'].Height = 200;
MODULES['MODsearch'].Width = 150;
MODULES['MODsearch'].Text = '<form method=POST><center><font
size=4>WWW.WINDOWS-
WEBSITE.COM SEARCH ENGINE</font></center><p><input type=hidden
name=altavista value=y>
Altavista, <input type=hidden name=infoseek value=y> InfoSeek, <input
type=hidden
name=webcrawler value=y> Webcrawler, <input type=hidden name=thunder
value=y>
ThunderStone, <input type=hidden name=excite value=y> Excite, <input
type=hidden
name=lycos value=y> Lycos, <input type=hidden name=yahoo value=y> Yahoo,
<input
type=hidden name=look value=y> LookSmart, <input type=hidden name=mining
value=y> The
Mining Co., <p><font color=ff0000>Search For</font>:<input type=text
width=40
name=text><input type=button name=search value=Search
onClick="top.fetchFile(.backslash.'http://pavlov.apollo-ent.com/cgi-bin/
nph-
search?search=Search&altavista=y@infoseek=y.backslash.');"></form>';
var TOTAL_MODULE_COUNT = '7';
layerObject.prototype.Column = 0;
LAYEROBJECT.PROTOTYPE.ROW = 0;
As noted above, the generated javascript file containing window module setup routines may be processed by a WWW browser client along with other related web site source files to produce a windowed web site environment within a CME of the WWW browser client and one into which other content feeds (news feeds, stock fees, etc.) may be manifested. The above-referenced other related web site source files that are generated and stored within server side data storage facilities are to be configured in accordance with the present invention to reference the window module definitions maintained within the above-described generated javascript file. Exemplary files to facilitate such a windows based content manifestation environment are next described to illustrate their interaction with the above-described javascript file that contains window module setup routines. Those skilled in the art and, in particular, those skilled in web site design and implementation and object oriented programming techniques will readily understand the constructs and functions defined in the following code listings/scripts/files after careful review of the same. In particular, the following listings relate to files which are described in detail below and which are named: index.html interface_main.html mainnew.html var_declarmtions.js gen functions.js preloader.js nav_buttoris.js moduledraw.js resize.js popfunctions.js pops.js positioning_functions.js index.html The following index.html listing/file initially loads a set of referenced objects including other HTML and javascript routines. One such javascript file that is loaded is referred to as "module setup.js." That file is the generated javascript file that contains window module setup routines.
<html><head><title>welcome to WINDOW-WEBSITE.com</title>
<script language="javascript"></script>
<script language="Javascript" src="var_declarations.js"></script>
<script language="Javascript"
src="generated_files/module_setup.js"></script>
<script language="Javascript" src="gen_functions.js"></script>
<script language="Javascript" src="preloader.js"></script>
<script language="Javascript" src="nav_buttons.js"></script>
<script language="Javascript" src="pops.js"></script>
<script language="Javascript" src="module_draw.js"></script>
</head>
<frameset rows="*,0" framespacing=0 frameborder=0 frameborder="no"
border=0>
<frame src="interface_main.html" name="MAIN" marginheight=0
marginwidth=0 noresize border=0>
<frame src="dummy.html" name="DUMMY" marginheight=
marginwidth=0 border=0 noresize scrolling=no>
</frameset>
</html>
interface_main.html The following interface_main.html listing/file may be included to check WWW browser versions. That is, the following HTML file may be used to check browser compliance with HTML standards associated with version 4 type browsers (e.g., NETSCAPE COMMUNICATOR 4.x, MICROSOFT INTERNET EXPLORER 4.x, etc.).
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="Javascript">
self.location.href = (top.IS4) ? 'mainNew.html' : 'mainOld.html';
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
mainNew.html The following mainNew.html listing/file causes WWW browser client layout of an initial set of window modules (as defined within module_setup.js--discussed above) within the WWW browser client's CME (i.e., causes display of windows within a browser's screen window, etc.).
<HTML>
<HEAD>
<TITLE>welcome to www.windows-website.com</TITLE>
<script>
language-"Javascript">if(document.layers){origWidth=innerWidth;
origHeight=innerHeight;onre
size=function(){if(innerWidth!=origWidth.vertline..vertline.innerHeight!=or
igHeight)location.reload()}}</scr
ipt>
<script language="Javascript" src="positioning_functions.js"></script>
<script language="Javascript" src="pop_functions.js"></script>
<script language="Javascript" src="resize.js"></script>
<script language="Javascript" src="d&d.js"></script>
<STYLE TYPE="text/css">
</STYLE>
<STYLE TYPE="text/css">
#output {position:absolute; top:100; width:760; height:1000;
visibility:hidden;}
#Eoutput {position:absolute; top:100; width:760; height:500;
visibility:hidden;}
#popper {position:absolute; width:96; z-index:101; visibility:hidden;}
</STYLE>
</HEAD>
<BODY bgcolor=#d0d0d0 background="images/simple_back.gif" onLoad="init()">
<script language="Javascript">
var loaderImage = ('<img src="images/loading.gif"><br>');
with (document)
{
if(top.IE4)
{
writeln('<div ID="loader" STYLE="position:absolute;
visibility:hidden; z-
index:100">');
writeln(loaderImage);
writeln('</div>');
}
write('<table cellpadding=2 cellspacing=0 border=0
align=right><tr><td align=right
valign=top height=30>');
writeln(top.navButtons());
top.finalNavs = ' ';
writeln(top.TABLE_CLOSE_TABLE);
writeln(top.makeSpacer(2,100));
}
top.drawModulesInTables();
if(top.IS_DRAGGABLE) { top.setVisibility(); }
document.writeln(top.doPop());
top.pops = ' ';
</script>
<span id="output">
<table cellpadding=0 cellspacing=0 border=0 width=760 height=1000><tr><td>
</td></tr></table>
</span>
<iframe id="Eoutput" border=0>
<table cellpadding=0 cellspacing=0 border=0 width=760 height=500><tr><td>
</td></tr></table>
</iframe>
<div align=right>
<a href="#" onClick="top.test('new stuff','MODnews');">here</a><br>
<a href="#"
onClick="top.test(top.MODULES['MODnews'].Text,'MODnews');">there</a><br>
</div>
</BODY>
</HTML>
var_declarations.js The following var_delclarations.js listing/file includes general and specific variable and array declarations which when processed by a WWW browser client will establish and initialize variables used throughout the routines, processes, and functions defined in this section of the instant patent document.
// set path info here
var DEFAULT_IMAGE_PATH = 'images/'; // path to general image directory
var NAV_BUTTONS_PATH = 'nav_buttons/'; // path to nav button images
var MODULE_IMAGE_PATH_= 'module_images/'; // path to ALL module graphics
var POPPER_PATH = 'popper/'; // path to pop-up item graphics
/*
* general environment variable setup
*
*/
var NS = (navigator.appName == "Netscape") ? 1 : 0; // netscape?
var IE = (navigator.appName == "Microsoft Internet Explorer") ? 1 : 0; //
explorer?
var N4 = (document.layers); // netscape 4+ ?
var IE4 = (document.all); // explorer 4+ ?
var IS4 = (N4 .vertline..vertline. IE4); // 4th gen browser?
var FILEOPEN = 0; // whether file open
var ZINDEX = 0; // set variously throught operations on layers
var SIZEABLE_CLASS = 'SIZEABLE'; // the CLASS name of sizeable images
var MODULE_MIN_X = 200; // the minimum width of a scalable layer
var MODULE_MIN_Y = 36; // the maximum width of a scalable layer
// the following are visiblity settings for netscape and explorer, where
// NV[0] element = netscape hide, NV[1] element = net;
// EV[0] element = netscape show, EV[1] element = explorer show;
// used by showHide() in positioning_functions.js;
var NV = new Array('hide','show');
var EV = new Array('hidden','visible');
//linkSet = " "; // this is for navigator to cheat the link 'disappearance'
in an object
var SCREEN_VERTICAL_OFFSET = 40; // allowances for vert borders && browser
buttons
var SCREEN_HORIZONTAL_OFFSET = 20; // allowances for scroll
var SCREEN_TOP_OFFSET = 100; // pixels taken up by the simple logo,
buttons, etc.
var DEFAULT_SCREEN_WIDTH = 800 - SCREEN_HORIZONTAL_OFFSET; // if old
browser, this is
default
var SCREEN_X = (IS4) ? screen.availWidth - SCREEN_HORIZONTAL_OFFSET :
DEFAULT_SCREEN_WIDTH;
var SCREEN_Y = (IS4) ? screen.availHeight - SCREEN_VERTICAL_OFFSET : ' ';
var SPACER = 'dummy.gif'; // a transparent 2x2 gif that resides in
DEFAULT_IMAGE_PATH
// html tags
var LINEBREAK = '<br>';
var PARAGRAPH = '<p>';
var NEWLINE = '.backslash.n';
var TABLE_STANDARD = '<table cellpadding=2 cellspacing=0 border=0
width=100%>';
var TABLE_TR = '<tr>';
var TABLE_TD = '<td valign=top>';
var TABLE_TD_BLACK = '<td bgcolor=#000000 valign=top>';
var TABLE_CLOSE_TR = '</tr>';
var TABLE_CLOSE_TD = '</td>';
var TABLE_CLOSE = '</table>';
var TABLE_CLOSE_TABLE = '</td></tr></table>';
var OPEN_MOD = ' '; // set to module wrapper start tag; set when drawing
modules
var CLOSE_MOD = '</SPAN>';
var CLEAR_STATUS = ' status=.backslash.'.backslash.'; return true;'; //
clears status line
var CLEAR_STATUS_FULL = (' onMouseOver="status=.backslash.'.backslash.';
return true;"
onMouseOut="status=.backslash.'.backslash.'; return true;" '); // complete
commands for status clearing
/* ****************************** *
* standard module layout information *
* stuff like info on module buttons, *
* cellpadding, how many modules per *
* row, etc. *
* ****************************** */
var IS_DRAGGABLE = 0; // boolean on environment; 0=not draggable
// the number of modules per row;
// note how a width of less than DEFAULT_SCREEN_WIDTH will only get 2 rows
var MODULES_PER_ROW = (SCREEN_X < DEFAULT_SCREEN_WIDTH) ? 2 : 3;
var DEFAULT_MODULE_WIDTH = 25;
var DEFAULT_MODULE_BGCOLOR = '#f0f0f0'; // default bgcolor for all layers
var DEFAULT_MODULE_BACKGROUND = (MODULE_IMAGE_PATH +
'default_background.gif');
var MODULE_FONT = ('<font size=2 face="verdana,arial,helvetica"
color=#000000>');
var MODULE_CLOSE_FONT = ('</font>');
var MODULE_CELL_SPACING = 4; // the value of cellspacing in layout table
var MODULE_CELL_PADDING = 0; // the value of cellpadding in layout table
/** ****************************************************************** **
** ****************************************************************** **
** ENTER THE IMAGES TO BE LOADED HERE. MAKE SURE YOU **
** INCREMENT LOAD_STRING PROPERLY, AND BE CAREFUL WITH THE **
** SPECIAL CHARACTERS AND COMMAS **
** **
** all preloaded images are stored in PRELOADED_IMAGES[] **
** ****************************************************************** **
** ******************************************************************
**/
var LOAD_STRING = new Array(); // init
// !SAMPLE! // LOAD_STRINGE[n] = '.about.theseimages/, *.tif,
firstimagename, secondimagename
';
LOAD_STRING[0] = 'MOD_news,MOD_email,MOD_chat,MOD_homepage,MOD_travel';
/*
* There are some simple rules to follow when adding LOAD_STRING(s) :
*
* 1. Try and keep distinct bunches of images on one line.
* 2. Good to establish path && extension at start of string that
* will persist through whole string.
* 3. Use names that make sense.
*
* Path is persistent, so once it is set that is the path that will be
* assumed until the path is changed. Signify a path command with a tilde
(.about.).
* NOTE: DEFAULT IS 'images/', so you don't have to set this if 'images/'
is the path;
*
* Image type works in the same way. Signify current image type with an
ampersand (*).
* NOTE: DEFAULT IS '.gif', so you don't have to specify if '.gif' is
proper extension;
* ALSO: if you do change the extension, don't forget the period -- ie.
'*.jpg';
*
* Simply list the images according to the format laid out. Remember that
the filename
* is determined by the name in the list in this way:
*
* If my string is "IMAGE_BLUE,IMAGE_RED" the images that must exist (ie.
will be
* requested by the function) will be
'IMAGE_BLUE_0,IMAGE_BLUE_1,IMAGE_RED_0,IMAGE_RED_1';
* '_0' will be the default(not on) image; '_1' will be the active(on)
image on
rollover.
*
*/
// these are the items within the popup (4th gen only)
var POP_ITEMS = new Array('personalize', 'contact', 'help', 'info');
var POP_WIDTH = 96; // width of pop-up graphics
var POP_HEIGHT = 18; // height of pop-up graphics
gen_functions.js The following gen_functions.js listing/file contains general functions that are referenced and used by the other functions defined in the listings contained within this section of the instant patent document. For example, the function getName( . . . ) is used to obtain a window module's name from system variables.
var fullFile = ' ';
var thisMOD = ' ';
var objREF = ' ';
var M = ' ';
var OBJ = ' ';
/*
* flipImage()
* does image flipping based on PRELOADED array set in preloader.js
*/
function flipImage(thisImage, thisState)
{
status = thisImage + ' - ' + thisState;
}
/*
* setVisibility()
* goes through all objects and sets their visibility
*/
function setVisibility()
{
for(x=0; x < MODULE_NAMES.length; x++)
{
if(!getModuleInfo('open',MODULE_NAMES[x]))
{
top.frames[0].showHide(MODULE_NAMES[x],0);
}
}
return;
}
/*
* getName(module name)
* returns the 'real' name of the module in CAPS
*
*/
function getName(name)
{
var nn = name.substring(3,name.length);
return(nn.toUpperCase());
}
/*
* popAlert(string)
* simply pops an alert containing string
*
*/
function popAlert(sendThis)
{
alert(sendThis);
}
/*
* makeSpacer(width,height)
* call this to place a spacer graphic (ie. a transparent image that
* is set by the width && height vaiues specified.
*
*/
function makeSpacer(thisWidth,thisHeight)
{
var thisSpacer = ' ';
thisSpacer = ('<img src=" ' + DEFAULT_IMAGE_PATH + SPACER + ' "
width = ' +
thisWidth + ' height = ' + thisHeight + '>');
return(thisSpacer);
}
/*
* getModuleInfo(propertyName,MODname)
* returns boolean reflecting the truth of 'propertyName' in MODname
*
*/
function getModuleInfo(propertyName,MODname)
{
if(propertyName == 'open') { return(MODULES[MODname].Open == 1); }
if)propertyName == 'maximized') {
return(MODULES[MODname].Maximized == 1);
}
}
/*
* fetchFile(thisFilename,module name)
* loads an external file;
* if a 4th gen browser, switches layer without
* page refreshing.
*/
function fetchFile(thisFilename,md)
{
fullFile = ('fetchFile.php3?fileName=' + thisFilename);
if(!IS4) // if not 4th gen, nothing for now
{
top.frames[0].location.href = fullFile;
return;
}
if(!IS_DRAGGABLE) // if we aren't loading into module window
{
top.frames[0].scroll(0,0); // reset to top
if(!thisFilename) // if no thisFilename, then hiding
{
(N4) ? top.frames[0].document.output.visibility = 'hide' :
top.frames[0].document.all.Eoutput.style.visibility = 'hidden';
top.FILEOPEN = 0; // flag no file
return;
}
if(N4)
{
top.frames[0].document.output.visibility = 'show';
top.frames[0].document.output.src = fullFile;
}
else
{
top.frames[0].document.all.loader.style.visibility =
'visible';
top.frames[0].document.all.Eoutput.style.visibility =
'visible';
top.frames[0].document.all.Eoutput.src = fullFile;
}
top.FILEOPEN = 1; // flag open file
}
else // if a draggable interface, load into sent module window.
{
// wrap output in a holding table -- formatting reasons only
thisFilename = ('<table cellpadding=2 cellspacing=0
border=0><tr><td valign=top>' + thisFilename + TABLE_CLOSE_TABLE);
frames[0].document.all[md].innerHTML = (doControlBar(md,1) +
thisFilename);
}
}
preloader.js The following preloader.js listing/file is a general purpose image pre-loader routine that stores `rollover` image information for various buttons, etc. within a windows based CME provided in accordance with the present invention.
/*
* preloader
*
* loads all rollover images. Will load based on a [filename] [boolean]
idea, ie.
* image_0,image_1 is base image (no rollover), and rollover image (image
on).
*
* reads the array LOAD_STRING in var_delarations.js and preloads all the
indicated
* images as per above.
*/
/*
**************************************************************************
****** *
* <<<<<<<<<<<<<<<<<<<< ! !IMPORTANT! ! >>>>>>>>>>>>>>>>>>>>
*
*
*
* ALL OF THE INFORMATION RELATING TO WHICH IMAGES WILL BE LOADED,
*
* ALONG WITH INSTRUCTIONS ON HOW TO DO FILL LOAD_STRING[], ARE FOUND IN
*
* THE INCLUDED FILE var_declarations.js;
*
*
*
* DO NOT MODIFY THIS FILE! ! ! !
*
*
**************************************************************************
****** */
if(document.images) // only runs on browsers that support image object
{
var currentPosition = 0; // pointer to current position in current
LOAD_STRING;
var currentCharacter = ' '; // keeps current character (char at
currentPosition);
var currentLoadString = 0; // which string we are on;
var preloadTrack = 0; // keep track of how many elements are to be
preloaded;
var currentExtension = '.gif'; // default; can be altered in strings;
var currentPath = DEFAULT_IMAGE_PATH; // default; can be altered in
strings;
var firstCharacter = ' '; // will be the first character in string when
preloading
var currentElement = ' '; // will be used to store the active element in
PRELOAD;
var currentImageLocation = ' '; // the src for PRELOADED_IMAGES array;
var PRELOADED_IMAGES = new Array(); // will be what image calls will
reference;
// will be multidimensional
(PRELOADED_IMAGES[name] [on/off]);
var onoffTrack = 0; // used to flip between on/off image values when
preloading;
var PRELOADED = new Array();
// store the length of total LOAD_STRING(s)
var numberOfLoadStrings = LOAD_STRING.length;
/*
* the following construct will go through all LOAD_STRING(s) and split out
on
* commas. What we will end up with is PRELOADED filled with all distinct
* elements contained in the various LOAD_STRING(s). These are either path
sets,
* or image extensions sets, or image names to preload (most often image
names).
*
* These will then be sorted through, targeted, and sourced.
*
*/
for(currentLoadString=0; currentLoadString < numberofLoadStrings;
currentLoadString++)
{
PRELOADED[preloadTrack] = ' '; // initialize so we can build the string
// determine the length of the current string
var currentStringLength = LOAD_STRING[currentLoadString].length;
for(currentPosition=0; currentPosition < currentStringLength;
currentPosition++)
{
// start splitting up the strings by conmas;
// (would use split(), but that is not backwards-compatible)
// get the current character
currentCharacter =
LOAD_STRING[currentLoadString].charAt(currentPosition);
// check if this is a comma;
// if it is, increment the key index for PRELOADED to store new
element.
if(currentCharacter == ',')
{
preloadTrack++;
PRELOADED[preloadTrack] = ' ';
}
else // if it isn't a comma, continue to build the element
string.
{
PRELOADED[preloadTrack] += currentCharacter;
}
}
// since the last key in PRELOADED does not end with a comma, if
we don't
// increment the key the next image name will be appended to last
key
value
preloadTrack++;
}
/*
* now go through all elements and preload.
* will store in PRELOADED_IMAGES[name] [on/off]
*
*/
for(xx=0; xx < PRELOADED.length; xx++)
{
// get the current element
currentElement = PRELOADED[xx];
// get the first character of the element;
// essentially checking for (*) .vertline..vertline. (.about.)
firstCharacter = currentElement.charAt(0);
if(firstCharacter == '.about.') // path switch?
{
// if path, then get the full path minus first character
currentPath = currentElement.substring(1,currentElement.length);
}
else if(firstCharacter == '*') // extension switch?
{
currentExtension =
currentElement.substring(1,currentElement.length);
}
else
{
/*
* now build the preloaded array;
* get currentPath + currentElement + on/off setting +
currentExtension
* and attribute that image to
PRELOADED_IMAGES[currentElement] ([0] .vertline..vertline. [1]).src
*/
PRELOADED_IMAGES[currentElement] = new Array();
for(onoffTrack = 0; onoffTrack <= 1; onoffTrack++)
{
currentImageLocation = (currentPath + currentElement
+ '_' + onoffTrack + currentExtension);
PRELOADED_IMAGES[currentElement] [onoffTrack] = new
Image();
PRELOADED_IMAGES[currentElement] [onoffTrack].src =
currentImageLocation;
// turn this on to watch preloading
information as it is being stored;
// alert(currentElement + onoffTrack + '--
' + currentImageLocation);
}
}
}
} // end document.images check
nav_buttons.js The following nav_buttons.js listing/file creates navigation buttons which may be used to control general aspects of a web site that is windows based in accordance with the present invention and which may be take the form of the set of environment controls 210 shown in FIG. 2A.
/*
* header section info
* defines the default help/change/info buttons used in navButtons()
*/
var NAV_HELP = ('<a
href="javascript:top.navFunctions(.backslash.'help.backslash.')"><img
src=" ' +
NAV_BUTTONS_PATH + 'help.gif" hspace=1 border=0></a>');
var NAV_CHANGE = ('<a
href="javascript:top.navFunctions(.backslash.'change.backslash.')"><img
src=" ' +
NAV_BUTTONS_PATH + 'change.gif" hspace=1 border=0></a>');
var NAV_INFO = ('<a
href="javascript:top.navFunctions(.backslash.'info.backslash.')"><img
src=" ' +
NAV_BUTTONS_PATH + 'info.gif" hspace=1 border=0></a>');
function navButtons ()
{
var tempName = ' ';
var finalNavs = ' ';
var maxNavButtons = 12; // max buttons per row (including
numGenButtons)
finalNavs += (NAV_CHANGE + NAV_HELP + NAV_INFO); // add in general nav
functions
// go through all modules and set their buttons
for(x=0; x < MODULE_NAMES.length; x++)
{
if(((x % maxNavButtons) == 0) && (x != 0)) // break row if more than
12
{
finalNavs += '</td></tr><tr><td align=right valign=top>';
}
tempName = MODULE_NAMES[x];
// establish mouseOut and mouseOver strings;
// sends top.flipImage(imagename,state,frame);
// (image name, on or off, which frame it is located in)
var mOVER = ('top.flipImage(.backslash.' ' + tempName +
'.backslash.',1,0); return true;');
var mOUT = ('top.flipImage(.backslash.' ' + tempName +
'.backslash.',1,0); return true;');
var realName = getName(tempName); // used for ALT
// write the image and href info
finalNavs += ('<a
href="javascript:handleModule(.backslash.'show.backslash.',.backslash.' '
+ tempName +
'.backslash.')" onMouseOver=" ' + mOVER + ' " onMouseOut=" ' + mOUT + '
"><img src=" ' + NAV_BUTTONS_PATH
+ tempName + '_0.gif" border=0 name=" ' + tempName + 'Nav" hspace=1
alt="OPEN ' + realName
+ ' "></a>');
}
finalNavs += '<br>';
// write output
finalNavs += '<img src="images/blackbit.gif" width=100 height=20
name="navText"><br>';
return(finalNavs);
}
function navFunctions(thisFunc)
{
alert(thisFunc);
return;
}
module_draw.js The following module_draw.js listing/file is used to cause rendering and layout of window modules (windows) within a WWW browser client CME by content rendering and layout modules of the same.
/*
**************************************************************************
** *
* VARIOUS ROUTINES AND FUNCTIONS TO HANDLE THE DRAWING OF MODULES
*
* AND STORING MODULE OBJECT INFORMATION
*
*
**************************************************************************
** */
var currentName = ' '; // used when initializing table contents
var currentContent = ' '; // string that is built to output to modules
var numberOfModulesInColumn = 0; // set when writing column data
var styleSet = ' '; // set when using draggable interface; empty if not
var containerSize = ' '; // set when setting containing table
var controlbarOut = ' '; // set by doControlBar() to contain control bar
info 4 modules
var IS_DRAGGABLE = (IE4) ? 1 : 0;
/*
* simply get the number of modules per row, and
* initialize columnTrack[] first dim;
* 2nd dimension incremented and filled later.
*
*/
var columnTrack = new Array(); // array to hold column contents
for(x=0; x < MODULES_PER_ROW; x++) // < since numMod's starts counting at 1
{
columnTrack[x] = new Array();
}
var currentColumn = 0; // initialize column we are writing to
/* ********************************************************** *
* The following goes through all the object names and sorts them *
* into columns based on TOTAL_MODULE_COUNT; *
* We end up with columnTrack[column] [numberOfModulesInColumn] *
* ********************************************************** */
for(var currentObject=0; currentObject < TOTAL_MODULE_COUNT;
currentObject++)
{
currentName = MODULE_NAMES[currentObject]; // get latest module name
if(currentObject && ((currentObject % MODULES_PER_ROW) == 0) )
{
// this runs whenever max column is reached;
// if at end (%MODULES_PER_ROW), reset to 0
currentColumn = 0;
}
/* The following handles the array indexing when adding a new
* module to a column. First it checks to see if any modules
* have been added to the column ('undefined' if not); if there
* are existing modules, simply set numberOfModulesInColumn to
* the length of the array (which is 1 higher than last index),
* and that becomes the array index for the new entry;
* if not, then set the index to zero(0))
*/
numberOfModulesInColumn = (columnTrack[currentColumn] [0]) ?
columnTrack[currentColumn].length : 0;
// store the module name
columnTrack[currentColumn] [numberofModulesInColumn] = currentName;
// set the module's Column property
MODULES[currentName].Column = currentColumn;
// set the module's Row property
MODULES[currentName].Row = numberOfModulesInColumn;
currentColumn++; // keeping track of which column we are in
}
/*
* this loop will tell you final layout information;
* enable it to receive (in alerts) a column-by-column list of
* the object names that have been sorted into those columns
* on initialization (into columnTrack):
* ie. 0:0 MOD_news; 0:1 MOD_news; . . . 3:2 MOD_whatever;
*
* Good point to check what's going on in case of bugs.
*
* for(y=0; y < MODULES_PER_ROW; y++)
* {
* for(z=0; z < columnTrack[y].length; z++)
* {
* alert(y + ':' + z + ' = ' + columnTrack[y] [z]);
* }
* }
*
*/
function drawModulesInTables()
{
// NOTE THAT THESE TABLE SETUP DEFINITIONS ONLY APPLY TO
// TILED VERSION; DRAGGABLE VERSION SETS ITS OMN CONTAINER LATER VIA
var styleSet
var tableSetup = ('<table cellpadding=' + MODULE_CELL_PADDING + '
cellspacing=' +
MODULE_CELL_SPACING + ' width=100% border=0>');
// initial(the left and right tables) TD setup
var initTD = ('<td valign=top width=' + DEFAULT_MODULE_WIDTH + '%>');
// fat(center) TD setup
var fatTD = ('<td valign=top>');
var moduleString = ' '; // clear it
with(top.frames[0].document) // set ref to main window for output
{
// set the holding table;
// draggable interface sets size to about 90%;
// regular goes 100%
moduleString = (IS_DRAGGABLE) ? ' ' : (tableSetup + TABLE_TR);
writeln(moduleString); moduleString = ' ';
// go column by column and list all items in that column
for(var thisColumn= 0; thisColumn < MODULES_PER_ROW; thisColumn++)
{
// following does the <td></td> functions based on which
// column we're on . . . if draggable interface, this is
// ignored just as above
if(!IS_DRAGGABLE)
{
// if one of the columns on the ends
if((thisColumn == 0) .vertline..vertline. (thisColumn ==
(MODULES_PER_ROW -1)))
{
writeln(initTD);
}
else // if one of the central columns
{
writeln(fatTD);
}
}
// now go down the current column and write all the modules
// in order for that column
for(var thisKey=0; thisKey < columnTrack[thisColumn].length;
thisKey++)
{
// NOTE: currentName is being reused here
currentName = columnTrack[thisColumn] [thisKey];
// gets the objects Text value (a string containing all
content)
// and builds it into the string. then writes to screen.
writeln(getModuleContents(currentName) + NEWLINE + NEWLINE);
// clear them up so we don't have it sitting around in
memory
currentContent = ' ';
controlbarOut = ' ';
}
// close the current column if not draggable
if(!IS_DRAGGABLE) { writeln(TABLE_CLOSE_TD) };
}
// close the holding table if this is not a draggable interface
moduleString += (IS_DRAGGABLE) ? ' ' : (TABLE_CLOSE_TR +
TABLE_CLOSE +
NEWLINE);
writeln(moduleString);
moduleString = ' ';
}
return;
}
/* ******************************************** *
* end drawModulesInTables() standard layout function *
* ******************************************** */
/* ****************************** *
* end module container setup functions *
* ****************************** */
/* ****************************************** *
* getModuleContents(module_name) *
* Constructs the entire contents for a module; *
* when called, it constructs a string (currentContent) *
* and returns it; *
* the same for floating or fixed modules, since *
* it is only the positioning of the holding *
* table that changes, not the layout *
* ****************************************** */
function getModuleContents(thisName)
{
// this turns off further ouput in tiled version
if(!IS_DRAGGABLE)
{
if(!getModuleInfo('open',thisName)) { return(' '); }
}
// set the proper container for draggable items
if(IS_DRAGGABLE && top.IE4)
{
styleSet = 'STYLE=.backslash."position:absolute; top:' +
MODULES[thisName].Yposition + ';
left:' + MODULES[thisName].Xposition + '; overflow:auto; border: 3 solid
black;
background: #f0f0f0;.backslash." ';
}
OPEN_MOD = ('<SPAN ID=" ' + thisName + ' " ' + styleSet + '>') ;
currentContent += (NEWLINE + OPEN_MOD); // set the div ID
// start the 'border' table for non-draggable interface;
// essentially a relative table with cellpadding of 2 to create
// a 2 pixel black border around the content of the module
if(!IS_DRAGGABLE)
{
currentContent += (TABLE_STANDARD + TABLE_TR + TABLE_TD_BLACK);
}
// run the function to create the control bar for modules
currentContent += (doControlBar(thisName));
/*
* now checking if module is minimized or maximized;
* if window isn't maximized, just return the header-bar table;
* only for non-draggable, tiled version
*/
if(!IS_DRAGGABLE)
{
if(!getModuleInfo('maximized',thisName)) // end if not maximized
{
// add a spacer to separate this module from any below it;
// close holding table first!
currentContent += (TABLE_CLOSE_TABLE +
makespacer(100,MODULE_CELL_SPACING) + LINEBREAK + CLOSE_MOD);
return (currentContent);
}
}
// now set the nested table that will output the content
currentContent += (TABLE_STANDARD + TABLE_TR + '<td bgcolor=' +
DEFAULT_MODULE_BGCOLOR + '>' + NEWLINE);
/*******************************************************
* BEGIN THE MODULE CONTENTS HTML OUTPUT HERE *
* **************************************************** *
*/
currentContent += MODULE_FONT; // standard font set
/* ************************************************ *
* inserting the contents of this objects .Text string, which is *
* the entire html code for that module, is an object variable *
* ************************************************ */
currentContent += (MODULES[thisName].Text);
// close the nested content table
currentContent += (MODULE_CLOSE_FONT + TABLE_CLOSE_TABLE + NEWLINE);
if(!IS_DRAGGABLE) // close the 'border' table for tiled version
{
currentContent += TABLE_CLOSE_TABLE;
}
// close the MODULE
currentContent += (CLOSE_MOD + NEWLINE);
// add a spacer to separate this module from any below it
currentContent += (makeSpacer(100,MODULE_CELL_SPACING) + LINEBREAK);
// return the whole module contents
return (currentContent);
}
/* ****************************************************** *
* the function that appends to currentContent all information for the *
* control bar on top of modules (ie. the black bar with the title *
* and navigation buttons on top of the modules); if called on its *
* own, you can output currentContent and get its results *
* ****************************************************** *
*/
function doControlBar(barName)
{
controlbarOut = ' '; // make sure it's clear
controlbarOut += ('<table cellpadding=0 cellspacing=0 border=0
width=100%>' +
TABLE_TR);
controlbarOut += ('<td valign=top width=100 height=30
bgcolor=#000000>' +
NEWLINE);
// write the modules graphical title -- 30 pixels high, arbitrary
width
controlbarOut += ('<img src=" ' + MODULE_IMAGE_PATH + barName +
'.gif" id=" ' +
barName + 'pic">' + LINEBREAK + NEWLINE);
controlbarOut += TABLE_CLOSE_TD;
controlbarOut += ('<td valign=top align=right height=30
bgcolor=#000000>' +
NEWLINE);
/******************************************************
* write the window buttons (help, reduce, expand, close) *
*******************************************************/
var realName = getName(barName); // used for ALT
var MODULE_CLOSE = ('<a
href="javascript:top.frames[0].
handleModule(.backslash.'close.backslash.',.backslash.' ' + barName +
'.backslash.')"><img src=" ' +
MODULE_IMAGE_PATH + 'close.gif" border=0 hspace=0 vspace=0 alt="CLOSE ' +
barName +
' "></a>');
// no reduce on draggable
var MODULE_REDUCE = (!IS_DRAGGABLE &&
getModuleInfo('maximized',barName)) ? ('<a
href="javascript:top.frames[0].
handleModule(.backslash.'reduce.backslash.',.backslash.' ' + barName +
'.backslash.')"><img src=" ' +
MODULE_IMAGE_PATH + 'reduce.gif" border=0 hspace=1 vspace=0 alt="MINIMIZE '
+ realName +
' "></a>') : ' ';
// no expand on draggable
var MODULE_EXPAND = (!IS_DRAGGABLE &&
!getModuleInfo('maximized',barName)) ? ('<a
href="javascript:top.frames[0].
handleModule(.backslash.'expand.backslash.',.backslash.' ' + barName +
resize.js The following resize.js listing/file is used to allow window module resizing within a windows based CME. A user may adjust window sizes to suit particular content display attributes, to make a particular window module smaller, etc.
var theobject = null; //This gets a value as soon as a resize start
var thisLayer = null;
var elementID = ' ';
var thisID = ' ';
var lastModule = ' '; // stores the last active window
var elementID, xPos, yPos, cursorType, xMin, yMin;
function getDirection(elementID) {
var xPos, yPos, offset, dir;
dir = " ";
xPos = window.event.offsetX;
yPos = window.event.offsetY;
offset = 8; //The distance from the edge in pixels
if (yPos<offset) dir += "n";
else if (yPos > elementID.offsetHeight-offset) dir += "s";
if (xPos<offset) dir += "w";
else if (xPos > elementID.offsetWidth-offset) dir += "e";
return dir;
}
function doDown() {
elementID = event.srcElement;
if (elementID == null)
{
theobject = null;
return;
}
// exit if isn't a proper MODULE layer .vertline..vertline. a
sizeable image
if((elementID.tagName != 'SPAN') && (elementID.className !=
top.SIZEABLE_CLASS))
{
return;
}
dir = getDirection(elementID);
if (dir == " ") return;
theobject = new Object(); // setup up a namespace
theobject.elementID = elementID;
theobject.dir = dir;
theobject.grabx = window.event.clientX;
theobject.graby = window.event.clientY;
theobject.width = elementID.offsetWidth;
theobject.height = elementID.offsetHeight;
theobject.left = elementID.offsetLeft;
theobject.top = elementID.offsetTop;
window.event.returnValue = false;
window.event.cancelBubble = true;
}
function doUp()
{
if (theobject != null) // clear any existing object
{
theobject = null;
}
}
function doMove()
{
xMin = top.MODULE_MIN_X;
yMin = top.MODULE_MIN_Y;
elementID = event.srcElement;
cursorType = " "; // set default
if(elementID.tagName == 'SPAN')
{
cursorType = getDirection(elementID); // get direction info
// set cursor
if(cursorType == " ") { cursorType = "default"; }
else { cursorType += "-resize"; } // the resize direction
}
elementID.style.cursor = cursorType; // set the cursor
//Dragging starts here
if(theobject != null) // if there is still an active object
{
// check if we're mousing over the currently open module (ie.
lastModule);
// also check if this is a valid module;
// if so, don't change z-index; if new module, then update z-index
if(((theobject.elementID.id != lastModule) .vertline..vertline.
(!lastModule)) &&
(theobject.elementID.id != ' '))
{
setZIndex(theobject.elementID.id);
lastModule = theobject.elementID.id; // store current
}
if (dir.indexOf("s") != -1)
{
theobject.elementID.style.width = Math.max(xMin,
theobject.width +
window.event.clientX - theobject.grabx);
}
if (dir.indexOf("e") != -1)
{
theobject.elementID.style.height = Math.max(yMin,
theobject.height
+ window.event.clientY - theobject.graby);
}
if (dir.indexOf("w") != -1)
{
theobject.elementID.style.left = Math.min(theobject.left +
window.event.clientX - theobject.grabx, theobject.left + theobject.width -
xMin);
theobject.elementID.style.width = Math.max(xMin,
theobject.width -
window.event.clientX + theobject.grabx);
}
// checking for n resize && cutting off sizing past top header
if((dir.indexOf("n") != -1) && (window.event.clientY >
top.SCREEN_TOP_OFFSET))
{
theobject.elementID.style.top = Math.min(theobject.top +
window.event.clientY - theobject.graby, theobject.top + theobject.height -
yMin);
theobject.elementID.style.height = Math.max(yMin,
theobject.height
- window.event.clientY + theobject.graby);
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
The listings/files discussed above include various files which are used to create and allow manipulation of pop-up window modules and layers. Two main listings/files (javascript files) that are used to deliver such functionality: pops.js and pop_functions.js. Such javascript files are included in mainNew.html which was discussed above. Additionally, a function contained in the d&d.js javascript file (discussed above) handles an initial doubleclick operation that initiates a pop-up window module, layer, etc. ("pop-ups"). That additional function is referred to as "popMenu()." In creating a pop-up, ai content layer is first created to contain buttons which link to various functions/options/services (e.g., MCs) within a windows based web site which is manifested within a CME. The content of the first pop-up layer, are labels like `INFO`, `CONTACT`, `PERSONALIZE`. The pop-up layer is actually created by calling a function contained in the pop.js file. In particular, the doPop() function is executed. The doPop() function is called from mainNew.html in the following manner: document.writeln(top.doPop()). Once dopop() executes, all the necessary HTML to draw the aforementioned buttons and handle mouse type clicks associated with the buttons within the pop-up window is created. The CSS properties of the created pop-up are set in the following way: #popper {position:absolute; width:96; z-index:101; visibility:hidden;}. Such an instruction initializes the pop-up layer and sets its visibility to `hidden`--e.g., the layer is invisible initially. The second step is the handling of the layer. This entails dealing with users clicking on the generated control buttons (e.g., MCs). Button clicks are handled by the functions outlined in pop_functions.js. In particular, a function "checkPopper()" is called by another function "popMenu()" to retrieve all information concerning where the user has clicked on a web page within the active CME and where to display the pop-up. Once checkPopper() has run, popMenu then makes the pop-up visible and positions it in the proper place based on the variables set by checkPopper(). The second function in the javascript file pop_functions.js is "checkHide()". Function checl(Hide() is called by the engage() function in the d&d.js javascript file. Function engage() is activated whenever a user performs a single-click on a windows based web site presented within an active CME. The first thing done by engage() is to execute function checkHide(). Function checkHide() checks the position of the click--if the click is outside the box bounded by the pop-up layer, the pop-up is hidden and vice-versa. Based on the foregoing comments, the following paragraphs discuss the listings/files for pop_functions.js, pops.js, and positioning_functions.js.
pop_functions.js
var eButt = ' '; // set to mousebutton value (left,right)
var eName = ' '; // set to name of element(image) clicked on
var eX = ' '; // the mouse X
var eY = ' '; // the mouse Y
var eScrollTop = 0; // vertical scroll offset
popRef = ' '; // set to popper's document reference
var hasAppeared = 0; // flagged when popper open/closed
var edgeFactor = 40; // pop-up offset from bottom/right edge
var popWidth = top.POP_WIDTH; // width of pop-up buttons
// determine pop-up height (== element height * number of elements)
var popHeight = top.POP_HEIGHT * top.POP_ITEMS.length;
/*
* These functions handle the pop-up;
* are called on window events - specifically
* doubleclick (
*/
function checkHide(e)
{
if(top.IE4) { e = window.event; }
checkPopper(e);
if(top.N4 && (hasAppeared == 1)) // check position for netcape
{
if ((eX < popRef.left) .vertline..vertline.
(eX > popRef.left + popWidth) .vertline..vertline.
(eY < popRef.top) .vertline..vertline.
(eY > popRef.top + popHeight))
{
popRef.visibility = (top.IE4) ? 'hidden' : 'hide'; // hide
layer
hasAppeared = 0;
}
}
else if(top.IE4 && (hasAppeared == 1)) // check for ie4
{
.if(eName.indexOf("POP") == -1)
{
popRef.visibility = (top.IE4) ? 'hidden' : 'hide'; // hide
layer
hasAppeared = 0;
}
}
return true;
}
function checkPopper(e)
{
// get obj ref
popRef = (top.IE4) ? document.all['popper'].style :
document.layers['popper'];
eButt = (top.IE4) ? e.button : e.which; // the value of the button
click
eName = (top.IE4) ? e.srcElement.name + ' ' : e.target.name + ' '; //
the name of any
name element click hits
eX = (top.IE4) ? e.clientX : e.pageX; // the X coord of the click
eY = (top.IE4) ? e.clientY : e.pageY; // the Y coord of the click
// now accomodate any scrolling that has occurred
eY += eScrollTop = (top.IE4) ? document.body.scrollTop : 0; // needed
for ie4 only
if((top.SCREEN_X - popwidth - edgeFactor) < eX) // check for right edge
{
eX -= popWidth; // shift left
}
if((top.SCREEN_Y + eScrollTop - popHeight - edgeFactor) < eY) // check
bottom edge
{
eY -= popHeight; // shift up
}
return true;
}
pops.js
var pops = ' ';
currPopItem = ' ';
function doPop()
{
pops += '<span id="popper">.backslash.n';
pops += ('<table cellpadding=1 cellspacing=0 border=0><tr><td
valign=top bgcolor=#000000>');
for(x=0; x < POP_ITEMS.length; x++)
{
currPopItem = POP_ITEMS[x]; // set in var_declarations.js
pops += ('<a href="javascript:top.navFunctions(.backslash.' ' +
currPopItem + '.backslash.')">');
pops += ('<img src=" ' + POPPER_PATH + currPopItem + '.gif"
name="POP' + currPopItem + ' " width=' + POP_WIDTH + ' height=' +
POP_HEIGHT + ' border=0></a><br>.backslash.n');
}
pops += (TABLE_CLOSE_TABLE + '</span>');
return(pops);
}
positioning_functions.js
var MODcolumn = 0;
var currRow = 0;
var MODcolumnMAX = 0;
var currRowTemp = 0;
var eee = ' ';
// getRef(rname)
// returns a browser specific module reference
function getRef(rname)
{
return((top.IE4) ? document.all[rname].style : document.layers[rname]);
}
// simply reloads the interface;
// used for non-draggable interface changes
function pageRefresh()
{
self.location.href = 'mainNew.html';
return;
}
// function that handles hide/show of modules in draggable environment.
// usese top.EV array to give browser specific settings
function showHide(mname,type,procedure)
{
eee = getRef(mname); // get obj ref
eee.visibility = (top.IE4) ? top.EV[type] : top.NV[type]; // set it
based on type(0/1)
if(procedure != 'sizing')
{
eee.pixelTop = 110;
eee.pixelLeft = 10;
}
}
// function to reposition modules in column (tiled) format;
// only runs on tiled environment;
// sends a module to either the top or | ||||||