Tải bản đầy đủ - 0trang
Chapter 10. Cyber Greetings: Drag-and-Drop Email
Figure 10.1. The Cyber Greetings default screen
Figure 10.2. Recognize anyone in this group photo?
When the greeting is done, users can preview the work in progress by choosing "Test." This opens a
remote window that shows what the greeting will look like when the recipient views it. See Figure
Figure 10.3. This is how the recipient will see it
Once satisfied, the user simply chooses "Send." That submits all the form info to a ready-and-willing
server-side script that creates the greeting and returns a final confirmation page containing a "Send"
button (Figure 10.4). When the button is pressed, the script sends email to the recipient, providing the
URL of the card.
Figure 10.4. Success: just submit this form, and off the message goes
Now it's up to the user to read the mail. (I don't have an Uncle Hairy, so I sent this one to my Hotmail
account.) Figure 10.5 shows what a greeting announcement looks like. Not much to it, just a simple
message and a link. Once the recipient follows the link in the email message, the document that loads
is exactly what the sender created. Figure 10.6 proves it.
Figure 10.5. The Cyber Greeting announcement
Figure 10.6. The Cyber Greetings flow
10.1 Execution Requirements
You'll need MSIE or Navigator 4.x or higher because of the DHTML and massive stylesheet
positioning. The program is designed for a monitor with a resolution of at least 1024x768, though you
can modify it to accommodate 800x600. I wouldn't go any lower.
This program also requires a web server with a server-side scripting environment. Don't let that scare
you if you aren't familiar with server-side scripting. I've provided a script that is fairly easy to install
on just about every web server on Earth. It is written in Perl. You just have to copy to the correct
directory and set up some permissions. You can get those details in Appendix C.
10.2 Syntax Breakdown
This is another application that warrants a flowchart before we look at any code. Figure 10.7 shows
how the user enters the recipient's email address and message, chooses a greeting and background,
then positions desired icons "on top" of the greeting card. The user then previews the work. Once
satisfied, it's off to the server, and so on.
Figure 10.7. Cyber Greeting logic: how the recipient gets the message
This application works on two levels—in the client browser and on the web server. The browser is
obviously where the user creates the entire greeting—background, icon graphics, and message. When
the user submits the HTML form, the information is sent back to a web server, where a file is created
to match the greeting. The web server returns an HTML form so the greeting sender can send an email
message to the recipient. This message contains nothing more than an announcement of the cyber
greeting and a link that the recipient must follow to "pick it up." The recipient follows the link to load
the awaiting Cyber Greeting.
Let's go over this app first in terms of the client and then the server. There are four files. The
following list gives a quick rundown:
Top level; holds the frameset
Contains the workspace for choosing the greeting, background, and icons
Contains the interface for creating and sending the message
The server-side script used to create and store each greeting in a file, then create an HTML
form to send email to the recipient
As you can see from the screen captures, there are two sides to this interface. The back (back.html ) is
the greeting display where the user can see what he or she has after choosing the greeting and
positioning any graphics. The front (front.html ) contains the entry form and is responsible for entering
email address and a message, choosing backgrounds, and producing the available graphics, referred to
as icons. Both documents are referenced in index.html. Example 10.1 has the details.
Example 10.1. index.html
index.html contains an array called greetings in lines 7-14. These are the greetings that users can
choose from. baseURL contains the base directory on the web server of this application. Everything is
contained within it: all four files, all the images, and the directory that will contain each user-created
greeting. baseURL is even included in the greeting itself. When you change this value, you change it
for the entire application—client and server.
So why declare a variable and an array in this file? Both files defined in the frames of index.html need
those greetings to create the respective pages as they load. If greetings were defined in one of the
it. The same goes for baseURL. This helps avoid load-time errors.
10.2.1 The Other Two Documents
The concept of front and back sides are analogous to a traditional postcard. The front (I think) has the
address and message on it, and the back has the pretty picture of picknickers on the beach. In this case,
back.html contains the background display area and the icons for you to drag. This file is responsible
for much of the initial setup during the document loading. front.html facilitates things after the
document loads, such as entering a message and choosing and sending a greeting. It makes sense,
then, to cover back.html first. Fortunately, you've probably seen much of it in earlier chapters. Take a
look at Example 10.2.
Example 10.2. back.html
Before the sender can create a greeting, several functions have to generate a lot of layers and
determine the location of the mouse-pointer arrow relative to the document. There is very similar
functionality discussed in Chapter 3, and Chapter 8. In fact, several of the functions came directly
from those chapters. I'll mention them as we go along. For now, look at the onslaught of variables
declared at the top in lines 19-36:
= (document.layers ? true : false);
hideName = (NN ? 'hide' : 'hidden');
showName = (NN ? 'show' : 'visible');
iconNum = 4;
startWdh = 25;
activate = false;
activeLayer = null;
var backImgs = ;
var icons = [
'bear', 'cowprod', 'dragon', 'judo',
'robot', 'seniorexec', 'dude', 'juicemoose',
'logo1', 'logo2', 'logo3','tree',
'sun', 'gator', 'tornado', 'cactus'
The first four variables were brought in from earlier scripts. NN helps determine which browser is
being used. showName and hideName are different strings for showing and hiding layers, depending
on the browser, and zIdx represents an integer that will be used to set the z-index of each layer created.
Variable iconNum is an integer that determines how many icons to display on the screen at a time. We
start with 4. startWdh is used to initially position all the icons. You'll see that shortly in function
imgIdx tracks images. activate is a Boolean variable that determines whether a layer should be
dragged or dropped. activeLayer determines which layer the user currently has the mouse pointer over
If that isn't enough, there are also two array variables. backImgs is originally set to an empty array. It
will soon be populated with Image objects, each containing a background image. The background
images are named background0.jpg, background1.jpg, background2.jpg, and so forth.
icons is an array of strings that identifies the name of each icon. That means that each icon will be
created on a layer of the icon element's name. The image used for the icon is also the same name. The
layer named bear, for example, will contain the image bear.gif. By the way, all the icon images are
transparent GIFs. White is the transparent color. Since the background images are primarily white,
you can place icons on top of one another and still see "all the way" to the background without one
icon covering a portion of the other.
10.2.2 Walking on Familiar Ground
If you have been working with other chapters in this book, you'll be glad to know that some of your
hard work will be rewarded. A few functions used here have been used throughout, so you can breeze
through them. This happens in other chapters, too, but even more so here.
Table 10.1 will help identify which functions you have probably seen.
Table 10.1. Functions for Layer Manipulation
Create the layers in NN or MSIE
3, 4, 6, 9, 11
Hide layers by name
3, 4, 6, 9, 11
Show layers by name
3, 4, 6, 9, 11
Refer to layers by name
3, 4, 6, 9, 11
Track mouse movement
Obtain x and y positions of element
The first four functions in the table are exactly the same as in other chapters. If you aren't familiar
with these functions, see the discussion in Chapter 3. motionListener(), however, has been