Demo Documentation

SuiteTools Page

The SuiteTools area of this demo is designed to give users basic information about some of the SuiteTools products. In this page, we will slide in buttons and title graphics on a layer, as well as allow layers containing descriptive text to slide in from below. When a user exits this page, we will slide the elements out of the viewing area.

Let's take a look at the source code. . . .

Below, we setup the style sheet for this document. Dynamic Style Sheets are an important part of Dynamic HTML, which is supported in Netscape Communicator. In this style sheet, we setup margins for paragraph and H3 tags, which will be seen by the user in our descriptive text sections. We also set the font size for all <P> tags to be 12 point.

<STYLE TYPE="text/javascript"> tags.P.marginLeft=10; tags.H3.marginLeft=10; tags.P.marginRight=10; tags.P.fontSize="12pt"; </STYLE>

Next, we setup two important properties. First, we want to set the document's background color as soon as we can, to minimize the "white flash" which appears as Navigator uses the default background color before parsing the <BODY> statement. The buffering property setting will reduce flickering which sometimes occurs when manipulating layers:

<SCRIPT LANGUAGE="JavaScript"> document.bgcolor="#000033" window.offscreenBuffering = true;

Next, we'll define a global variable to keep track of the current descriptive text layer being displayed:

var blasted;

To optimize the button illumination effects, we will pre-load the button images into Navigator's cache through a JavaScript array:

dimImages = new Array(4); hotImages = new Array(4); for (i=0; i<4; i++) { dimImages[i]=new Image(); hotImages[i]=new Image(); dimImages[i].src='images/st_reg'+i+'.gif'; hotImages[i].src='images/st_glow'+i+'.gif'; }

The vs() function is used to display the current document's source code when the user clicks a "View Source" button in the demo, making use of the view-source: URL type:

function vs() { window.location="view-source:"+window.location; }

The slam(lname) function makes a descriptive text layer referenced by lname slide out of view, and is called when either a timer expires or the user selects a different set of descriptive text, or when the demo page is closing out:

function slam(lname) { me = document.layers[lname]; while(me.top<480) { me.top+=15; } me.clip.top=0 if (blasted == me) {blasted = null} }

The maxGroove() function is designed to scroll a descriptive text layer upwards when a user clicks the "More" button to display additional descriptive text. It will automatically call the slam(lname) function after displaying the additional text for 4.5 seconds:

function maxGroove() { document.layers['morebut'].visibility="HIDE"; if (blasted) {var tall = blasted.clip.bottom;} var realtop=153-(tall-330); while (blasted.top > realtop) { blasted.clip.top+=5; blasted.top-=5; } setTimeout('slam("'+blasted.name+'")',4500); }

Below, we see the groove(lname) function, which scrolls a descriptive text layer (referenced by lname ) into view:

function groove(lname) { if (blasted) { document.layers['morebut'].visibility="HIDE"; blasted.moveTo(130,480); blasted.clip.top=0; } var me = document.layers[lname] me.visibility="SHOW"; while (me.top>150) { me.top -=8; } document.layers['morebut'].visibility="SHOW"; blasted=me; }

The function below, cuLater() , is called when a user chooses to proceed into the next step in the demo. It rids the page of almost all graphic elements by sliding them out of view:

function cuLater() { if (blasted) { document.layers['morebut'].visibility="HIDE"; slam(blasted.name); } var x = 425 document.layers['nexter'].visibility="HIDE"; document.layers['closer'].visibility="HIDE"; while (x<660) { document.layers['sttitle'].left=x; document.layers['overview'].left=x; document.layers['symantec'].left=x; document.layers['fusion'].left=x; document.layers['netdynamics'].left=x; document.layers['yelline'].left=(0-(2*(x-425))); x+=15; } setTimeout('window.location="communicator.html"',500); }

The fallIn() function is responsible for setting up the page when we first see it, by sliding in the appropriate graphical elements and positioning them properly:

function fallIn() { while (document.layers['overview'].left > 430) { document.layers['overview'].moveTo(document.layers['overview'].left-10,110); document.layers['yelline'].moveTo(document.layers['yelline'].left+19,126); document.layers['logo'].moveTo(104,document.layers['logo'].top+4); } while (document.layers['symantec'].left > 430) { document.layers['symantec'].moveTo(document.layers['symantec'].left-10,153); } while (document.layers['fusion'].left > 430) { document.layers['fusion'].moveTo(document.layers['fusion'].left-10,195); } while (document.layers['netdynamics'].left > 430) { document.layers['netdynamics'].moveTo(document.layers['netdynamics'].left-10,237); } while (document.layers['sttitle'].top < 55) { document.layers['sttitle'].moveTo(document.layers['sttitle'].left,document.layers['sttitle'].top+3); } document.layers['ovrinfo'].clip.width=250; document.layers['syminfo'].clip.width=250; document.layers['fusinfo'].clip.width=250; document.layers['dyninfo'].clip.width=250; } </SCRIPT>

In our body statement, we tell the document to call the fallIn() function upon loading:

<BODY BGCOLOR="#000033" BACKGROUND="images/st_back1.gif" TEXT="#000000" LINK="#ffff00" VLINK="#ffff00" onLoad="fallIn();">

From here on in, it's just a matter of storing the content in layers which can easily be manipulated through JavaScript. Now that we've built all the functions, filling in the content is easy. The following code is annotated only by comments in the HTML for reference purposes:

<!-- Netscape Logo Image --> <LAYER NAME="logo" LEFT=104 TOP=-57> <IMG SRC="images/netscape.gif" WIDTH=72 HEIGHT=57></LAYER> <!-- Horizontal yellow line on top left --> <LAYER NAME="yelline" LEFT=-418 TOP=126> <IMG SRC="images/yelspot.gif" WIDTH=400 HEIGHT=1></LAYER> <!-- "Netscape Suite Tools" --> <LAYER NAME="sttitle" TOP=-39 LEFT=298> <IMG SRC="images/suitetools.gif" WIDTH=185 HEIGHT=39></LAYER> <!-- "SuiteTools Overview" button --> <LAYER NAME="overview" LEFT=640 TOP=110 WIDTH=215> <A HREF="#" SUPPRESS="TRUE" onClick="groove('ovrinfo');return(false)" onMouseOver="document.ovrim.SRC=hotImages[0].src" onMouseOut="document.ovrim.SRC=dimImages[0].src"> <IMG NAME=ovrim SRC="images/st_reg0.gif" WIDTH=214 HEIGHT=32 BORDER=0></A></LAYER> <!-- "Symantec Visual Café" button --> <LAYER NAME="symantec" LEFT=640 TOP=153 WIDTH=215> <A HREF="#" SUPPRESS="TRUE" onClick="groove('syminfo');return(false)" onMouseOver="document.symim.SRC=hotImages[1].src" onMouseOut="document.symim.SRC=dimImages[1].src"> <IMG SRC="images/st_reg1.gif" NAME=symim WIDTH=214 HEIGHT=32 BORDER=0></A></LAYER> <! -- "NetObjects Fusion" button --> <LAYER NAME="fusion" WIDTH=215 LEFT=640 TOP=195> <A HREF="#" SUPPRESS="TRUE" onClick="groove('fusinfo');return(false)" onMouseOver="document.objim.SRC=hotImages[2].src" onMouseOut="document.objim.SRC=dimImages[2].src"> <IMG NAME=objim SRC="images/st_reg2.gif" WIDTH=214 HEIGHT=33 BORDER=0></A></LAYER> <!-- "NetDynamics" button --> <LAYER NAME="netdynamics" LEFT=640 TOP=237 WIDTH=215> <A HREF="#" SUPPRESS="TRUE" onClick="groove('dyninfo');return(false)" onMouseOver="document.dynim.SRC=hotImages[3].src" onMouseOut="document.dynim.SRC=dimImages[3].src"> <IMG NAME=dynim SRC="images/st_reg3.gif" WIDTH=214 HEIGHT=32 BORDER=0></A></LAYER> <!-- SuiteTools Overview descriptive text --> <LAYER NAME="ovrinfo" LEFT=130 TOP=480 VISIBILITY=HIDE BGCOLOR="#ffffcc" WIDTH=245> <H3>SuiteTools Overview</H3> <P><I>Tools to develop, deploy and manage Web sites</I></P> <FONT SIZE=-1> <P><B>The need for powerful tools</B> - Intranets present new opportunities for organizations to streamline processes and increase efficiency. As corporate intranets grow and web sites become larger and more complex, enterprise developers need powerful tools to streamline development efforts. <P> <P><B>Tools for network-centric applications</B> - Netscape SuiteTools products comprise a set of best-of breed Web software tools that take advantage of the capabilities of Netscape ONE, a powerful platform for the deployment of network-centric applications. Netscape SuiteTools include products from Netscape, Symantec, NetObjects, and NetDynamics that meet a range of needs across the development spectrum. Products are sold separately under the Netscape SuiteTools brand. </P></FONT></LAYER> <!-- Symantec Visual Café descriptive text --> <LAYER NAME="syminfo" LEFT=130 TOP=480 VISIBILITY=HIDE BGCOLOR="#ffffcc" WIDTH=245><br> <H3>Symantec Visual Café</H3> <P><I>Powerful Java Development Made Simple</I></P> <FONT SIZE=-1> <P><B>A breakthrough in Java programming</B> - Revolutionizes Java development — whether you're adding animation or interactivityt oa Web site or creating sophisticated Internet applications.<P> <P><B>Component library</B> - Includes many application components like buttons, text blocks, dialog boxes, etc. — the building blocks of projects.</P> <P><B>Rapid Application Development environment</B> - Drag-and-drop visual programming for quick application development with minimal coding. An Interaction Wizard speeds development.</P> <P><B>Build applications the way you prefer</B> - Two-way programming lets you build components visually as Visual Café generates the corresponding code, or build applications by writing code.</P> <P><B>Easy to learn and use</B> - Visual Café's visual tools and drag-and-drop user interface make it easy to get started.</P> <P><B>Powerful tools for experienced developers</B> - Visual Café is a mature Java development environment with the fastest compilers capable of handling the most comprehensive applications.</P> </FONT> </LAYER> <!-- Netobjects Fusion descriptive text --> <LAYER NAME="fusinfo" LEFT=130 TOP=480 VISIBILITY=HIDE BGCOLOR="#ffffcc" WIDTH=245> <br> <H3>NetObjects Fusion</H3> <P><I>The Smart Way To Build Web Sites</I></P> <FONT SIZE=-1><P><B>SiteStructure Editor</B> - The first visual site structure editor that provides top-down, incremental site planning, plus drag-and-drop control over building your site structure.</P> <P><B>PageDraw Editor</B> - The first graphical page layout editor that gives you pixel-level control over page design and layout. No HTML coding is required.</P> <P><B>SiteStyles Manager</B> - Gives you global control over your site's look and feel.</P> <P><B>Automatic Navigation and Linking</B> - NetObjects Fusion 2.0 lets you create and reorganize your site in minutes while automatically updating end-user navigation.</P> <P><B>Data Publishing</B> - The unique built-in database capabilities of NetObjects Fusion 2.0 allow you to store text and images internally, or you can link to an external database and publish this information as standard HTML pages.</P> <P><B>One-Button Publishing and Staging</B> - You can preview, stage, and publish on the server of your choice instantly.</P> <P><B>Open Architecture and Standards</B> - NetObjects Fusion requires no special Web server or proprietary server extensions.</P> </FONT> </LAYER> <!-- NetDynamics descriptive text --> <LAYER NAME="dyninfo" LEFT=130 TOP=480 VISIBILITY=HIDE BGCOLOR="#ffffcc" WIDTH=245> <br> <H3>NetDynamics</H3> <P><I>The Next Step In Enterprise Web Applications</I></P> <P><FONT SIZE=-1><B>NetDynamics delivers</B> - the solution for developing Web-centric enterprise applications that serve broad-based strategic and enterprise-wide roles such as supply chain management, enterprise resources planning, and human resources. The easy-to-use, extensible and scalable solution is NetDynamics.</P> <P><B>Web/Data Development Made Easy</B> - Wizards make the addition of database-enabled buttons, HREFs, list boxes and other page objects a matter of pointing and clicking. Built-in validation and formatting features ensure that data is always entered and displayed correctly.</P> <P><B>Equipping the Web-centric Enterprise</B> - WebEXTEND allows NetDynamics developers to interact with existing business logic in core applications and integrate legacy data and enterprise services through transaction processing (TP) monitors and middleware.</P> <P><B>An Open Environment for the Web</B> - NetDynamics integrates with any Web server, Web browser, HTML editor, Java Virtual Machine or database system, providing developers with the best environment for building and deploying enterprise-wide Web database applications.</P> </FONT> </LAYER> <!-- "More" button, scrolls up descriptive text --> <LAYER NAME="morebut" LEFT=333 TOP=145 VISIBILITY=HIDE BGCOLOR="#ff0000"> <A HREF="#" SUPPRESS="TRUE" onClick="maxGroove();return(false)"> <IMG SRC="images/more.gif" WIDTH=46 HEIGHT=17 BORDER=0></A></LAYER> <!-- "Continue" button --> <LAYER NAME="nexter" LEFT=538 TOP=394 VISIBILITY=INHERIT> <A HREF="#" SUPPRESS="TRUE" onClick="cuLater();return(false)"> <IMG SRC="images/continue.gif" BORDER=0 WIDTH=78 HEIGHT=17></A></LAYER> <!-- "View Source" button --> <LAYER NAME="vser" LEFT=538 TOP=415 VISIBILITY=INHERIT> <A HREF="#" SUPPRESS="TRUE" onClick="vs();return(false)"> <IMG SRC="images/viewsrc.gif" BORDER=0 WIDTH=78 HEIGHT=17></A></LAYER> <!-- "Skip Demo" button --> <LAYER NAME="closer" LEFT=538 TOP=437 VISIBILITY=INHERIT> <A HREF="#" SUPPRESS="TRUE" onClick="window.close();return(false)"> <IMG SRC="images/skip.gif" BORDER=0 WIDTH=78 HEIGHT=17></A></LAYER> </body> </html>

Please continue on to our annotated code for the Communicator Preivew pages.