Today you will use knowledge gained yesterday to construct an application using JavaScript and ActiveX controls. You will start with the requirements for the application, do some quick design work, then implement the design.
You've got a friend, let's call him JP, who runs a programming shop. He has a new project that requires daily interaction with the customer during development. The customer's headquarters is on the other coast. Both JP and the customer have an Internet
connection, and he wants to use it to facilitate the necessary technical exchange. Specifically, he wants to be able to present the current status of the project, give the user access to project documents and briefings, let the customer enter in a change
request, and finally, let the customer see the status of any change requests. Overall, he also doesn't what this to look like a normal, billboard-type Internet site. He wants it to look and act more like one of his company's programs. He asks, "Can
you do it?" You respond, "Is tomorrow too late?"
When you get back to your office, you kick yourself for your traditional, overly optimistic estimate. You start to take a look at what he wants and how you might do it.
You are lucky in that the customer knows what he wants. The worst times I have spent in the programming business revolve around situations in which the customer knew what he didn't want (normally after it was built), but couldn't quite articulate what
he wanted. Let's look at the basic requirements:
You write these down, call home, and tell them you will be a little late. "How late?" home asks. "Spring," you say. The first thing you want to do is create a rough layout of the Web site. On a napkin, you sketch something that
looks like Figure 9.1.
Figure 9.1. Layout of the Web site.
This shows a Welcome page linked to Project Status, Change Request, and Status pages. From here you will
After you have done all this, you will finish the project by
Open up Word; make sure you have Internet Assistant installed (see Day 4, "Tools of the Trade" for details). Select New from the File menu and select HTML.dot as your template. Add the logo (logo.bmp on the CD-ROM),
some general welcome remarks, and links to the Project Status (projstat.htm), Change Request (chngreq.htm), and Change Request Tracking (chngtrac.htm) pages. Your screen should look like Figure 9.2.
Figure 9.2. Welcome page for JP Programming .
Save your work as welcome.htm. Your HTML Code should look like Listing 9.1.
Listing 9.1. welcome.htm .
<HTML> <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <P> <CENTER><IMG SRC="biglogo.bmp"><BR> </CENTER> <P> <CENTER><FONT SIZE=5>Welcome to JP Programming! We have the finest </FONT></CENTER> <P> <CENTER><FONT SIZE=5>programmers Working on up to date solutions to your</FONT></CENTER> <P> <CENTER><FONT SIZE=5>programming problems. This is the Big-Expensive Project</FONT></CENTER> <P> <CENTER><FONT SIZE=5>Home Page. Use it to view the project status, enter Change</FONT></CENTER> <P> <CENTER><FONT SIZE=5>Requests, and Track the status of the Change Request.</FONT></CENTER> <P> <CENTER> </CENTER> <P> <CENTER><A HREF="projstat.htm" >Project Status</A></CENTER> <P> <CENTER><A HREF="chngreq" >Enter a Change Request</A></CENTER> <P> <CENTER><A HREF="chngtrac.htm" >Track a previous Change Request</A></CENTER> </BODY> </HTML>
Next, open a new HTML page in Word. This will be the Project Status page . You will be putting some ActiveX controls here later. For now, all you need is a logo, a return link to welcome.htm, and a link to a file called bigproj.doc Your page should
look like Figure 9.3.
Figure 9.3. Project Status page.
Save your work as projstat.htm. Your HTML code should look like Listing 9.2.
Listing 9.2. projstat.htm .
<HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> <TITLE>Untitled</TITLE> </HEAD> <BODY> <P> <CENTER><IMG SRC="biglogo.bmp"><BR> </CENTER> <P> <CENTER>This page will be merged with the Dynamic Data Page created by the IIS Add in<BR> </CENTER> <P> <CENTER><A HREF="welcome.htm" >Back to Home</A></CENTER> <P> <CENTER><A HREF="bigproj.doc" >Link to Big-Expensive Product Document</A> <BR> </CENTER> </BODY> </HTML>
Open a new HTML page in Word. This will be the Change Request page. You will be putting some ActiveX controls here to collect and send the Change Request. You will also add some of the code generated by Internet Information Server
Add-In and generate the order from this page. Place a logo and a return link to the Welcome page (welcome.htm) Your page should look like Figure 9.4.
Figure 9.4. Change Request page.
Save your work as chngreq.htm. Your HTML code should look like Listing 9.3.
Listing 9.3. chngreq.htm .
<HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> <TITLE>Untitled</TITLE> </HEAD> <BODY> <P> <CENTER><IMG SRC="biglogo.bmp"><BR> </CENTER> <P> <CENTER>This page will be merged with the Insert Data files generated by the IIS addin<BR> </CENTER> <P> <CENTER><A HREF="welcome.htm" >Back to Home</A><BR> <BR> </CENTER> </BODY> </HTML>
Open a new HTML page in Word. This will be the Change Request Tracking page. You will be modifying this page with frames and code generated by Internet Information Server Add-In. Again, all we need now is a logo and a return link to the Welcome page
(welcome.htm) Your page should look like Figure 9.5.
Figure 9.5. Change Request Tracking page .
Save your work as chngtrac.htm. Your HTML code should look like Listing 9.4.
Listing 9.4. chngtrac.htm .
<HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> <TITLE>Untitled</TITLE> </HEAD> <BODY> <P> <CENTER><IMG SRC="biglogo.bmp"><BR> </CENTER> <P> <CENTER>This page will be merged with the Search files generated by the IIS addin<BR> </CENTER> <P> <CENTER><A HREF="welcome.htm" >Back to Home</A><BR> <BR> </CENTER> </BODY> </HTML>
This is a good point to stop and check your work so far. You can look at these pages and test the links in Word or in the browser. I recommend using the browser because few of your friend's customers will be using Word to look at this site. Now, let's
design a database.
I won't go into any database theory or design philosophy here—it would be fun, but it is beyond the scope of this book. In this section, you will simply create the objects you need.
Open Access and create a new database called bigproj.mdb. Add two new tables, Project and Chngreq, as shown in Figure 9.6.
Switch to the Project table and create the fields shown in Figure 9.7.
Switch to the chngreq table and create the fields shown in Figure 9.8.
At this point you need to add a reference to the database to the ODBC Driver Manager . Open your ODBC Administrator, push the System DSN button, and add a new entry based on an Access driver. Fill the entry in as shown in Figure 9.9.
Figure 9.9. ODBC Administrator .
Now you are ready to use the Internet Information Server Add-In to add a dynamic data page to use with the Project Status page. This new page will return a current view of the data every time the page is called. Name this new page pjdynam.htm. You will
have to close Access and then open it again. Otherwise, the Internet Information Server Add-In will not see the new entry you just made in the ODBC Administrator. Open up the BigProj database and launch The Internet Information Server Add-In by choosing it
from the Tools menu under Add-ins. On the first page of the Internet Information Server Add-In Wizard, choose Dynamic Display Wizard. On the next screen choose the table project. Make sure your datasource is BigProj. Proceed to the field screen and add all
the fields.
Move on to the final input page. You are going to tinker with this screen so there is no need to add anything. Press Finish. Print out the instruction sheet generated if you can't remember what to do with the three files you just generated. (You will
have created two files like Listings 9.5 and 9.6.) pjdynam.htx is the template file that will show the data when requested. pjdynam.idc is the file you will call from the Web page to generate the up-to-date project report.
Listing 9.5. pjdynam.htx .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>HTML document for the World Wide Web</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <%begindetail%> <%if CurrentRecord EQ 0 %> <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TH><B>Task</B></TH> <TH><B>OPR</B></TH> <TH><B>StartDate</B></TH> <TH><B>ProjEnd</B></TH> <TH><B>Status</B></TH> <TH><B>Remarks</B></TH> </TR> <%endif%> <TR> <TD Align=Left><%Task%></TD> <TD Align=Left><%OPR%></TD> <TD Align=Right><%StartDate%></TD> <TD Align=Right><%ProjEnd%></TD> <TD Align=Left><%Status%></TD> <TD Align=Left><%Remarks%></TD> </TR> <%enddetail%> <%if CurrentRecord EQ 0 %> <HR=2><P> <CENTER><B>No records were selected!<B></CENTER><P> <%endif%> </TABLE> <HR=2> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B> .<BR><I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
This file will stand by itself. You will customize it later.
Listing 9.6. pjdynam.idc .
Datasource: BigProj Template: pjdynam.htx SQLStatement: +Select "Task", "OPR", "StartDate", "ProjEnd", "Status", "Remarks" +From "project"; #IDC-DynamicDisplay FrontHTM-None ReportHTM-pjdynam.htx
For those of you familiar with Structured Query Language, you can see that this IDC will execute a Select * from project. This statement gets all the columns and rows from the database.
Now, for the Change Request Page you will need to generate an HTM, an HTX, and an IDC file to do an insert into the database. Launch the Internet Information Server Add-In again. This time, on the first page, choose Insert Page Wizard. On the next
screen choose the Custreq table. Make sure your datasource is BigProj. On the next screen choose all the fields except reqnum. The easiest way do this is select all the fields and then remove reqnum. You are going to tinker with this page so nothing is
necessary on the final screen. Save your work as crinsrt.htm. (The Add-In will name the other two files automatically.) You will generate crinsrt.htm, crinsrt.htx, and crinsrt.idc as shown in Listings 9.7, 9.8, and 9.9. Print out the file summary report.
Listing 9.7. crinsrt.htm.
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>HTML document for the World Wide Web</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <FORM ACTION="/scripts/crinsrt.idc" METHOD = "POST" > <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TD>Requestor</TD> <TD><INPUT NAME="Requestor"</TD></TR><P> <TR> <TD>DateofRequest</TD> <TD><INPUT NAME="DateofRequest"</TD></TR><P> <TR> <TD>AffectedAreq</TD> <TD><INPUT NAME="AffectedAreq"</TD></TR><P> <TR> <TD>Requested Change</TD> <TD><INPUT NAME="Requested Change"</TD></TR><P> <TR> <TD>NeedByDate</TD> <TD><INPUT NAME="NeedByDate"</TD></TR><P> <TR> <TD>Status</TD> <TD><INPUT NAME="Status"</TD></TR><P> </TABLE> <P><INPUT TYPE="SUBMIT" VALUE="Submit" ALIGN="MIDDLE"> <INPUT TYPE="RESET" NAME="reset" VALUE="Clear all fields" ALIGN="MIDDLE"></P></FORM> <HR=2> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B>. <BR><I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
Listing 9.8. crinsrt.htx .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>HTML document for the World Wide Web</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <P><B>The following information was recieved.</B><BR> <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TD ALIGN="RIGHT"><B>Requestor</B></TD> <TD><%idc.Requestor%></TD></TR> <TR> <TD ALIGN="RIGHT"><B>DateofRequest</B></TD> <%IF idc.DateofRequest EQ "NULL" %> <%else%><%idc.DateofRequest%><%endif%></TD></TR> <TR> <TD ALIGN="RIGHT"><B>AffectedAreq</B></TD> <TD><%idc.AffectedAreq%></TD></TR> <TR> <TD ALIGN="RIGHT"><B>Requested Change</B></TD> <TD><%idc.Requested Change%></TD></TR> <TR> <TD ALIGN="RIGHT"><B>NeedByDate</B></TD> <%IF idc.NeedByDate EQ "NULL" %> <%else%><%idc.NeedByDate%><%endif%></TD></TR> <TR> <TD ALIGN="RIGHT"><B>Status</B></TD> <TD><%idc.Status%></TD></TR> </TABLE><P> <A HREF="/crinsrt.htm">Return To Data Entry Page</A> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B> .<BR><I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
Listing 9.9. crinsrt.idc .
Datasource: BigProj
Template: crinsrt.htx
DefaultParameters: DateofRequest=NULL, NeedByDate=NULL
SQLStatement:
+INSERT INTO "chngreq" ("Requestor", "DateofRequest", "AffectedAreq", "Requested Change", "NeedByDate", "Status")
+VALUES ('%Requestor%', %DateofRequest%, '%AffectedAreq%', '%Requested Change%', %NeedByDate%, '%Status%');
#IDC-Insert FrontHTM-crinsrt.htm ReportHTX-crinsrt.htx
You need to generate one more group of forms with the Internet Information Server Add-in Wizard—the query for the Track Status Change Order page. This time call up the wizard and choose the Query and Display option. Pick the Chrgreq table. Choose
the ReqNum field to search. Pick the Requestor, DateofRequest, and Status field for display. These will be the fields included in the return record. All this is shown in Figure 9.10.
Figure 9.10. Setting up the Search and Return page .
Save the file as crtrac.htm. This will also save crtrac.htm and crtrac.idc. Your files should look like Listings 9.10, 9.11, and 9.12.
Listing 9.10. crtrac.htm .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>HTML document for the World Wide Web</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <FORM ACTION="/scripts/crtrack.idc" METHOD = "POST" > <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TD ALIGN="RIGHT">ReqNum</TD> <TD><INPUT NAME="ReqNum"</TD></TR><P> </TABLE> <P><INPUT TYPE="SUBMIT" VALUE="Search" ALIGN="MIDDLE"> <INPUT TYPE="RESET" NAME="reset" VALUE="Clear all fields" ALIGN="MIDDLE"></P></FORM> <HR=2> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B>. <BR><I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
Listing 9.11. crtrac.htx .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>HTML document for the World Wide Web</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <%begindetail%> <%if CurrentRecord EQ 0 %> <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TH><B>Requestor</B></TH> <TH><B>DateofRequest</B></TH> <TH><B>Status</B></TH> </TR> <%endif%> <TR> <TD Align=Left><%Requestor%></TD> <TD Align=Right><%DateofRequest%></TD> <TD Align=Left><%Status%></TD> </TR> <%enddetail%> <%if CurrentRecord EQ 0 %> <HR=2><P> <CENTER><B>No records were selected!<B></CENTER><P> <%endif%> </TABLE> <HR=2> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B>. <BR><I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
Listing 9.12. crtrac.idc .
Datasource: BigProj Template: crtrack.htx DefaultParameters: ReqNum="ReqNum" SQLStatement: +Select "Requestor", "DateofRequest", "Status" +From "chngreq" +Where "ReqNum" = %ReqNum% #IDC-Search FrontHTM-crtrack.htm ReportHTX-crtrack.htx
You have what you need from the Internet Information Server Add-in Wizard. Let's move on.
All the files you have generated so far are in the rough subdirectory of this chapter's entry on the CD-ROM. Feel free to link them up and put them on your Web site. This is the end of the rough draft stage. From here you will complete each Web page
using JavaScript and ActiveX controls. From here you will
When you are done with these changes, you will have the Web site JP wanted.
One of the most interesting current developments in Web page technology is the frame. You have seen examples of frames throughout this book. From them you know that frames can make your Web site look and act more like a program. Instead of being
sequential, a site with a frame can have parts that stay put while others are dynamic. For this project, to satisfy the requirement for a program look and feel you will use a frame to divide the screen into four parts, as shown in Figure 9.11.
The source for this frame is pretty straightforward, as shown in Listing 9.13.
Listing 9.13. bigframe.htm .
<HTML> <HEAD> <TITLE>JP Programming! Project Site</TITLE> </HEAD> <FRAMESET FRAMEBORDER="3" FRAMESPACING="3" ROWS="49,*"> <FRAME MARGINWIDTH="0" MARGINHEIGHT="0" SRC="Basic.htm" NAME="Frame1" NORESIZE SCROLLING="no"> <FRAMESET FRAMEBORDER="3" FRAMESPACING="3" COLS="160,*"> <FRAMESET FRAMEBORDER="3" FRAMESPACING="3" ROWS="80,*"> <FRAME MARGINWIDTH="0" MARGINHEIGHT="2" SRC="Basic.htm" NAME="Frame2" SCROLLING="no"> <FRAME MARGINWIDTH="4" MARGINHEIGHT="0" SRC="Basic.htm" NAME= "Frame3" SCROLLING="yes"> </FRAMESET> <FRAME MARGINWIDTH="9" MARGINHEIGHT="0" SRC="Basic.htm" NAME="Frame4" SCROLLING="yes"> </FRAMESET> <NOFRAMES> </NOFRAMES> </FRAMESET> </BODY> </HTML>
The frames are named by the NAME attribute in the <FRAME> tag. It is not obvious from the code where the frames are located. To clarify which frame is where the page basic.htm, which is loaded into each frame, uses a JavaScript routine that runs
when the window loads to print out the window name. Listing 9.14 shows how this works.
Listing 9.14. basic.htm .
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onLoad()"> <!-- window.document.open() window.document.write(window.name) window.document.close() --> </SCRIPT> <TITLE>New Page</TITLE> </HEAD> <BODY> </BODY> </HTML>
Let's solve part of our puzzle by adding the link to the document , bigproj.doc, that you put in projstat.htm. Load projstat.htm into Word or edit it by hand. Remove the logo, left justify the links, and add new links to memo.doc (done with Memo
Wizard) and briefing.ppt (done with Briefing Wizard. Then target these links to Frame4. See Listing 9.15 for details.
Listing 9.15. Revised projstat.htm.
<HTML> <HEAD> <TITLE>Untitled</TITLE> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> </HEAD> <BODY> <P> <A HREF="memo.doc" TARGET = "Frame4">Memo</A> <P> <A HREF="bigproj.doc" TARGET = "Frame4" >Link to Big-Expensive Product Document</A> <P> <A HREF="briefing.ppt" TARGET = "Frame4">Briefings</A><BR> </BODY> </HTML>
Replace basic.htm with projstat.htm in bigframe.htm. While you are at it, put the small company logo in Frame2. To do that, modify the projstat in the rough directory to logo.htm, as shown in Listing 9.16.
Listing 9.16. logo.htm .
<HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word 2.0z"> <TITLE>Logo</TITLE> </HEAD> <BODY> <IMG SRC="lillogo.bmp"><BR> </BODY> </HTML>
Change bigframe.htm to load logo.htm. After changing bigframe.htm to load both logo.htm and projstat.htm, bigframe.htm should look like Listing 9.17.
Listing 9.17. bigframe.htm .
<HTML> <HEAD> <TITLE>JP Programming! Project Site</TITLE> </HEAD> <FRAMESET FRAMEBORDER="3" FRAMESPACING="3" ROWS="49,*"> <FRAME MARGINWIDTH="0" MARGINHEIGHT="0" SRC="Basic.htm" NAME="Frame1" NORESIZE SCROLLING="no"> <FRAMESET FRAMEBORDER="3" FRAMESPACING="3" COLS="160,*"> <FRAMESET FRAMEBORDER="3" FRAMESPACING="3" ROWS="80,*"> <FRAME MARGINWIDTH="0" MARGINHEIGHT="2" SRC="logo.htm" NAME="Frame2" SCROLLING="no"> <FRAME MARGINWIDTH="4" MARGINHEIGHT="0" SRC="projstat.htm" NAME= "Frame3" SCROLLING="yes"> </FRAMESET> <FRAME MARGINWIDTH="9" MARGINHEIGHT="0" SRC="Basic.htm" NAME="Frame4" SCROLLING="yes"> </FRAMESET> <NOFRAMES> </NOFRAMES> </FRAMESET> </BODY> </HTML>
Your project so far should look like Figure 9.12.
Figure 9.12. The project so far.
Note that when you select one of the links, Frame4 acts as an OLE container and brings in Word or PowerPoint, depending on the document you chose. Tell your customer you worked for weeks to get this. The customer doesn't have to know you haven't coded
a single line yet, only changed some HTML tags. Let's do some coding.
Open up the ActiveX Control Pad , make a new HTML layout, and place three buttons. Associate the pictures, home.gif, docs.gif, and cardfile.gif with btnHome, bntStatus, and btnChangeRequest. (You can use your own pictures if you want.)
Since this is a navigation bar, most users would expect some kind of text to come up when the mouse is over the buttons. Place code in the onMouseMove events of each button to put a message describing the button in the status bar. Then put code in the
btnHome click event to launch welcome.htm. Finally, put code in the btnStatus click event to launch the pydynam.idc file that generates the current status. Make both the welcome.htm and the pjdynam.idc results appear in Frame4. Your code should look like
Listing 9.18.
Listing 9.18. navigate.alx .
<SCRIPT LANGUAGE="JavaScript" FOR="btnChangeRequest" EVENT="MouseMove(Button, Shift, X, Y)"> <!-- self.status = "Change Request" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnStatus" EVENT="Click()"> <!-- window.parent.frames[3].location.href="/scripts/pjdynam.idc?" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnHome" EVENT="Click()"> <!-- window.parent.frames[3].location.href="/tax09/welcome.htm" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnStatus" EVENT="MouseMove(Button, Shift, X, Y)"> <!-- self.status = "Project Status" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnHome" EVENT="MouseMove(Button, Shift, X, Y)"> <!-- self.status = "Home" --> </SCRIPT> <DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:394pt;HEIGHT:31pt;"> <OBJECT ID="btnHome" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" DATA="DATA:application/x-oleobject;BASE64, " STYLE="TOP:0pt;LEFT:16pt;WIDTH:31pt;HEIGHT:31pt;TABINDEX:0;ZINDEX:0;"> </OBJECT> <OBJECT ID="btnChangeRequest" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" DATA="DATA:application/x-oleobject;BASE64, " STYLE="TOP:0pt;LEFT:55pt;WIDTH:31pt;HEIGHT:31pt;TABINDEX:1;ZINDEX:1;"> </OBJECT> <OBJECT ID="btnStatus" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" DATA="DATA:application/x-oleobject;BASE64, " STYLE="TOP:0pt;LEFT:94pt;WIDTH:31pt;HEIGHT:31pt;TABINDEX:2;ZINDEX:2;"> </OBJECT> </DIV>
Note
Data has been left out of the preceding listing. If you compare the navigate.alx that is on the disk with the listing, you will find that there are big blocks of encoded data that make up the pictures on the button. This data was omitted from the listing because it isn't something you can study and learn from, let alone something you would try to type in. Also, notice how much more data you have to send if you want graphics and not text on your buttons. Something to consider.
Put navigate.alx into navigate.htm.
Listing 9.19. navigate.htm .
<HTML> <HEAD> <TITLE>New Page</TITLE> </HEAD> <BODY> <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="navigate_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="navigate.alx"> </OBJECT> </BODY> </HTML>
Finally modify bigframe.htm to place navigate.htm into Frame1. The line:
<FRAME MARGINWIDTH="0" MARGINHEIGHT="0" SRC="Navigate.htm"
NAME="Frame1" NORESIZE SCROLLING="no">
reflects the placement of navigate.htm into Frame1. Place pjdynam.idc and pjdynam.htx into the scripts directory and fire up your browser. You should see something like Figure 9.13.
Figure 9.13. The navigation bar in the main frame .
As you play with this, you will notice a couple of things. First, the welcome window we designed seems out of place in this environment. I'm not running an art class (you may have seen my bicycle pictures in an earlier chapter), and it won't further
your study of design with ActiveX and JavaScript, but as you start to use frames in Web site, you will have to rethink how you present your content. Also, the text you put in the MouseMove events does change as you float over the buttons and does
communicate what the buttons are to the icon challenged. Time to build the next form.
The Change Request form needs to gather data about what the user wants to change. You will use the ActiveX Control Pad to create a Change Request form. Place four text boxes, one combo box, two buttons, and five labels as shown in Figure 9.14.
Figure 9.14. Change Request form.
Then name the controls and add the code shown in Listing 9.20.
Listing 9.20. crform.alx .
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="btnClear" EVENT="Click()">
<!--
DateofRequest.Text = ""
NeedByDate.Text = ""
RequestedChange.Text = ""
Requestor.Text = ""
-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="Layout1" EVENT="OnLoad()">
<!--
AffectedArea.AddItem('GUI')
AffectedArea.AddItem('Calculations')
AffectedArea.AddItem('Timing')
AffectedArea.AddItem('Security')
-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="btnSend" EVENT="Click()">
<!--
if (CheckValues())
{
//submit the data
}
-->
</SCRIPT>
<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:282pt;HEIGHT:127pt;">
<OBJECT ID="RequestedChange"
CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
STYLE="TOP:62pt;LEFT:8pt;WIDTH:172pt;HEIGHT:53pt;TABINDEX:0;ZINDEX:0;">
<PARAM NAME="VariousPropertyBits" VALUE="2894088219">
<PARAM NAME="Size" VALUE="6053;1863">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="Label6"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
STYLE="TOP:47pt;LEFT:8pt;WIDTH:78pt;HEIGHT:8pt;ZINDEX:1;">
<PARAM NAME="Caption" VALUE="Requested Change">
<PARAM NAME="Size" VALUE="2751;275">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="Label7"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
STYLE="TOP:8pt;LEFT:8pt;WIDTH:70pt;HEIGHT:8pt;ZINDEX:2;">
<PARAM NAME="Caption" VALUE="Requestor">
<PARAM NAME="Size" VALUE="2476;275">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="Requestor"
CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
STYLE="TOP:23pt;LEFT:8pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:3;ZINDEX:3;">
<PARAM NAME="VariousPropertyBits" VALUE="746604571">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="DateofRequest"
CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
STYLE="TOP:23pt;LEFT:109pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:4;ZINDEX:4;">
<PARAM NAME="VariousPropertyBits" VALUE="746604571">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="Label8"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
STYLE="TOP:8pt;LEFT:109pt;WIDTH:70pt;HEIGHT:8pt;ZINDEX:5;">
<PARAM NAME="Caption" VALUE="Date of Request">
<PARAM NAME="Size" VALUE="2476;275">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="Label9"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
STYLE="TOP:8pt;LEFT:203pt;WIDTH:70pt;HEIGHT:8pt;ZINDEX:6;">
<PARAM NAME="Caption" VALUE="Need By Date">
<PARAM NAME="Size" VALUE="2476;275">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="NeedByDate"
CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
STYLE="TOP:23pt;LEFT:203pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:7;ZINDEX:7;">
<PARAM NAME="VariousPropertyBits" VALUE="746604571">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="btnClear"
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:94pt;LEFT:242pt;WIDTH:31pt;HEIGHT:16pt;TABINDEX:8;ZINDEX:8;">
<PARAM NAME="Caption" VALUE="Clear">
<PARAM NAME="Size" VALUE="1101;550">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
</OBJECT>
<OBJECT ID="btnSend"
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:94pt;LEFT:203pt;WIDTH:31pt;HEIGHT:16pt;TABINDEX:9;ZINDEX:9;">
<PARAM NAME="Caption" VALUE="Send">
<PARAM NAME="Size" VALUE="1101;550">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
</OBJECT>
<OBJECT ID="AffectedArea"
CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3"
STYLE="TOP:62pt;LEFT:203pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:10;ZINDEX:10;"
>
<PARAM NAME="DisplayStyle" VALUE="7">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="MatchEntry" VALUE="1">
<PARAM NAME="ShowDropButtonWhen" VALUE="2">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
<OBJECT ID="Label10"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
STYLE="TOP:47pt;LEFT:203pt;WIDTH:70pt;HEIGHT:8pt;ZINDEX:11;">
<PARAM NAME="Caption" VALUE="Affected Area">
<PARAM NAME="Size" VALUE="2476;275">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
</OBJECT>
</DIV>
You put code in the bntClear click event to clear the fields. You made a new function, CheckValues, that is called on the btnSend click event. CheckValues makes sure the user has put values in all the fields. You placed code in the Layout1.onload event
to put items into the combo box (AffectedArea). In anticipation of the manipulation of the IDC files in the next section, add crform.alx to crinsrt.htm (the form you generated to insert the Change Request data into the database) and modify crinsrt.htm to
look like the Listing 9.21..
Listing 9.21. crinsrt.htm .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>Change Request Form</Title></HEAD> <BODY> <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="crform_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="crform.alx"> </OBJECT> <FORM ACTION="/scripts/crinsrt.idc" METHOD = "POST" NAME = "ORDERFORM" > <INPUT TYPE = "Hidden" NAME="Requestor"> <INPUT TYPE = "Hidden" NAME="DateofRequest"> <INPUT TYPE = "Hidden" NAME="AffectedArea"> <INPUT TYPE = "Hidden" NAME="RequestedChange"> <INPUT TYPE = "Hidden" NAME="NeedByDate"> <INPUT TYPE = "Hidden" NAME="Status"> </FORM> </BODY></HTML>
The layout of crinst.htm will become clearer in the next section. Open up navigate.alx and add this line:
window.parent.frames[3].location.href="/tax09/crinsrt.htm"
to the btnChangeRequest click method. This will enable crinsrt.htm to be placed into Frame4 by navigate.alx. Fire up bigframe.htm and test out your new page. It should look like Figure 9.15.
Figure 9.15. Change Request Form in action.
You are on the homestretch. One big and one little thing left to clean up. Let's do the big thing first.
The way crinst.htx is written now, it will send a list of the data the user sends via crinst.idc. What you want to do here is have it return a unique tracking number from the field ReqNum. In the Access database bigproj.mdb, this field is of type
Autonumber. This means that the database will assign it a unique value after the data is inserted. What you will do here is have crinst.htx create another request, routed through a new IDC and HTX file, that will return the ReqNum. Modify crinst.htx to
look like Listing 9.22.
Listing 9.22. Changed crinst.htx .
<HTML> <HEAD><Title>InterMedia</Title> <%IF idc.LastName EQ "NULL" %> <BODY BGCOLOR="#FFFFFF"> Nothing Happened </BODY></HTML> <%else%> <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onLoad()"> <!-- window.document.forms[0].elements[0].Value = "<%idc.DateofRequest%>" window.document.forms[0].elements[1].Value = "<%idc.Requestor%>" window.document.forms[0].submit() --> </SCRIPT> </HEAD> <BODY> <FORM ACTION="/scripts/crreqnum.idc" METHOD="POST" NAME="ORDERNUM"> <INPUT TYPE=Hidden NAME="DateofRequest"> <INPUT TYPE=Hidden NAME="Requestor"> </FORM> </BODY></HTML> <%endif%>
Here, you have embedded script in the template file that loads up another request and submits it when window.onload event occurs. Write a new file, crreqnum.idc, that will use RequestDate and Requestor to return a ReqNum. Name it crreqnum.idc. It
should look like Listing 9.23.
Listing 9.23. crreqnum.idc .
Datasource: BigProj Template: crreqnum.htx DefaultParameters: SQLStatement: +Select "Reqnum" +From "chngreq" +Where "Requestor" Like '%Requestor%' +And "DateofRequest" = '%DateofRequest%' #IDC-Insert FrontHTM-crinstr.htm ReportHTX-crreqnum.htx
Notice this is an SQL statement that returns a chngreq (which has been created by the database because it is an Autonumber) and passes the results to the template crreqnum.htx. What you need here is a simple template that will present the user with the
Change Request Number. Try the code in Listing 9.24.
Listing 9.24. crreqnum.htx .
<HTML> <HEAD><Title>Order Number</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <%begindetail%> <P> <P> <CENTER> <P><B>Thank You For You Attention</B><BR> <P><B>Change Request Received from <%idc.Requestor%></B><BR> <P><B>On <%idc.DateofRequest%> </B><BR> <P><B>This is your Order Number</B><BR> <P><B><%Reqnum%></B><BR> <P><B>Keep it for your records</B><BR> </CENTER> <%enddetail%> <%if CurrentRecord EQ 0 %> <HR=2><P> <CENTER><B>Can't Find Order for %Requestor%<B></CENTER><P> <CENTER><B>Call us at 904 555 1010 for assistance!<B></CENTER><P> <%endif%> <HR=2> <CENTER>I Made this Page By Hand</B></CENTER> </BODY></HTML>
Upon closer examination, this is a simple HTML that just presents the Change Request Number. The project now looks like Figure 9.16.
Figure 9.16. The Returned Change Tracking Number .
Now that you have given the users a Change Request Number, which they will probably lose (that is a different project), you need to give them a way to use it.
Add another button to the navigation bar. Name it btnfind. Use picture findpeps.gif. Your navigation bar should now look like Figure 9.17.
Figure 9.17. Final navigation bar.
Add code to the MouseMove and onclick events of btnfind. In the MouseMove, add a line to print a message to the status bar. In the click event, add code to launch the form crtrac.htm that you generated at the start of this process. You are now done
with the project. The code section of navigate.alx should look like Listing 9.25.
Listing 9.25. New navigate.alx .
<SCRIPT LANGUAGE="JavaScript" FOR="btnChangeRequest" EVENT="MouseMove(Button, Shift, X, Y)"> <!-- self.status = "Change Request" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnStatus" EVENT="Click()"> <!-- window.parent.frames[3].location.href="/scripts/pjdynam.idc?" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnHome" EVENT="Click()"> <!-- window.parent.frames[3].location.href="/tax09/welcome.htm" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnStatus" EVENT="MouseMove(Button, Shift, X, Y)"> <!-- self.status = "Project Status" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnHome" EVENT="MouseMove(Button, Shift, X, Y)"> <!-- self.status = "Home" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnChangeRequest" EVENT="Click()"> <!-- window.parent.frames[3].location.href="/tax09/crinsrt.htm" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnFind" EVENT="Click()"> <!-- window.parent.frames[3].location.href="/tax09/crtrack.htm" --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="btnFind" EVENT="MouseDown(Button, Shift, X, Y)"> <!-- self.status = "Find Change Request" --> </SCRIPT>
Remember the pictures in the <OBJECT> tags generate lots of lines of characters that you don't need to see. If you fire up your Web site and hit the Find button, your screen will look like Figure 9.18.
Figure 9.18. Finding a Change Request Number.
You have covered lots of ground today. You used all your acquired skill to build a project using ActiveX and JavaScript. The application you built looks more like a program that a traditional Web site, a trend I suspect will continue. At this point you
have had the opportunity to use both scripting languages. You should probably have some initial feelings about which one will suit your purpose. Tomorrow your ActiveX education will continue.
Make the Bike Shop Web site you did with VBScript on Day 8, "A VBScript Application," but use frames and a navigation bar like the example in this chapter.
Hint: Modify the navigation bar from this application to launch the order, sales, and tracking screens used in the bike shop example.
Note
Refer to the Appendix, "Answers to Quiz Questions," for the answers to these questions.
window.document.forms(0).elements[0].Value = "Launch"
window.document.forms[0].elements[0].Value = "Launch"
window.document.forms[0].submit
