Tải bản đầy đủ - 0 (trang)
Chapter 10. Cyber Greetings: Drag-and-Drop Email

Chapter 10. Cyber Greetings: Drag-and-Drop Email

Tải bản đầy đủ - 0trang

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

10.3.

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:

index.html

Top level; holds the frameset

back.html

Contains the workspace for choosing the greeting, background, and icons

front.html

Contains the interface for creating and sending the message

greet.pl



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



1

2

3

Cyber Greetings

4

20

21

22



23


SCROLLING="NO">

24

25

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

other two files, it might not have loaded by the time the JavaScript code in the other file tried to access

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



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40







Cyber Greetings





131

132

133

134

141

142

143

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:



var

var

var

var



NN

= (document.layers ? true : false);

hideName = (NN ? 'hide' : 'hidden');

showName = (NN ? 'show' : 'visible');

zIdx

= -1;



var

var

var

var

var



iconNum = 4;

startWdh = 25;

imgIdx

= 0;

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

genLayout().

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

after clicking.

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

Function

Purpose

genLayer()

Create the layers in NN or MSIE



hideSlide()

showSlide()

refSlide()

motionListener()

grabXY()



Chapter(s)

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



11

11



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



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 10. Cyber Greetings: Drag-and-Drop Email

Tải bản đầy đủ ngay(0 tr)

×