Macromedia Studio 8 [Electronic resources] : Training from the Source

Jeffrey Bardzell, Shaowen Bardzell

نسخه متنی -صفحه : 240/ 187

Preparing the ColdFusion Pages

In this task, you'll prepare the dante_quiz_login.cfm page and the dante_quiz_questions.cfm page. You'll complete the third pagedante_quiz_results.cfmin Lesson 16.

Open dante_quiz_login.cfm in Dreamweaver. Add three paragraphs of text, as follows, to the main body of the document. After the second line, press Enter/Return twice before adding the last line. Link the word Return to index.cfm .

Take this ungraded quiz to see how well you've mastered the material.
To access the quiz, please login below.
Return to the Dante site home page.

The third line is supposed to be blank; that's where you'll add the form in a moment.

[View full size image]

2.	Switch to either code view or split view for the following steps. Select the code ` ` between the opening and closing `<p></p>` tags which form the blank line you created in the previous step.

The code   represents a non-breaking space, and was inserted by Dreamweaver to give content to the paragraph you created for the blank line. As you'll recall, it's considered ba217 form to have tags that lack content, such as opening and immediately closing <p></p> tags. The non-breaking space is invisible, so it doesn't mess up your pagebut it's technically content, so th218 is still well formed.

[View full size image]

Use the CFForm category of the Insert bar to insert a CF Form. The cfform tag editor will open. In the General category, set the Action to dante_quiz_questions.cfm, the Method to post, and the name to

frm_login . Select the Miscellaneous category and set the Format to Flash. You can choose a Skin at this time to give your form a particular look. Click OK to close the tag editor .

This step creates the basic functionality of the form. Now all the form needs is a field to enable the user to enter her or his username, and a Submit button so she or he can submit the form.

[View full size image]

With the insertion point inside the <cfform> tags, insert a CF Text field from the insert bar. The cfinput tag editor will open. On the General category, set the Type to text, the Name to

username , and the Size to

30 . In the Validation category, check the Required checkbox, set Validate to email, and set Validate at to onSubmit. In the Miscellaneous category, type

Email Address for the Label. Click OK to close the tag editor. Dreamweaver will insert the code to create the cfinput element .

[View full size image]

ColdFusion's Flash forms not only provide elegantly simple design and layout tools, but they also give you other useful capabilities. When you check Required, ColdFusion will mark the field with a red asterisk to indicate that the field is required. When you set Validate to email, the form will know that it must contain a properly formed email address. The Validate at value tells ColdFusion when to check both the existence and format of a value in this required field. By setting the value to onSubmit, you've chosen to have the browser check when the form is submitted.

[View full size image]

To complete the form, you must insert a Submit button. With the cursor at the end of the first <cfinput> tag, press Enter/Return to make room for another form input. Insert another CF Text field from the insert bar. The cfinput tag editor opens. Set the Type to submit, and both the name and value to

Submit . Click OK to close the tag editor .

The form is now ready for use.

[View full size image]

6.	Save, Put, and Close dante_quiz_login.cfm .

It's easy to forget to Put files when you're finished working on them, so get in the habit of putting files just before you close them.

7.	Open dante_quiz_questions.cfm. In the Bindings panel, select New Binding (+) > Form Variable. In the Form Variable dialog, name it username .

As before, creating the binding tells Dreamweaver how to find data that you expect to be available to the page.

8.	Replace the placeholder body text with You logged in as: and press Enter/Return once to create a new paragraph beneath it .

You'll dynamically output the username after the colon in the first line, and you'll insert the Flash movie in the second line.

[View full size image]

9.	From the Bindings panel, press and drag the username variable onto the page, to the right of the colon in the first line .

As before, Dreamweaver writes a <cfoutput> tag into the code. At runtime, ColdFusion will replace <cfoutput>#form.username#</cfoutput> with the email address entered into the form on dante_quiz_login.cfm.

[View full size image]

10.

Position the insertion point in the blank line just below the first line, and choose Insert > Media > Flash. Navigate to and select flash/dante_quiz.swf. The Object Tag Accessibility Attributes dialog box appears. Set the Title to

Dante's Inferno: Quiz Questions and click OK.

This step inserts the Flash movie into the page, but it doesn't yet insert the username variable Flash movie.

Flash has numerous options for sending data in and out. One of the simplest is to pass the variable in as a part of the request for the movie. When you insert a Flash movie int228, you provide the URL specifying where the movie is located.

11.

Click to select the Flash movie, and switch to code view .

If you look at the code, you'll see the Flash movie's URL referenced twice. Inserting Flash movies int228 pages requires a bit of redundancy, because Internet Explorer deals with media players like the Flash player differently than Netscape and other browsers. Specifically, th218 includes both the <object> and <embed> tags, which are used to insert special media files into browsers. Both tags require that you specify the URL pointing to the plug-in file (in this case, a Flash SWF).

[View full size image]

You can append namevalue pairs to these URLs. When you do, those variables are available in the main timeline of the Flash movie. Thus, if you wanted to pass the variable pairing username=yuki@sheepman.com into your Flash movie, the URL for the <object> and <embed> tags that insert the Flash movie would look like this:

flash/dante_quiz.swf?username=yuki@sheepman.com

The question mark separates the file from the variable(s). In this case, only one namevalue pairing follows. The only catch is that you don't know the value in advance; you'll need to capture the username entered into the form. This problem can also be resolved with the ever-useful <cfoutput> tag.

12.

In code view, append ?username=<cfoutput>#form.username#</cfoutput> to each of the two URLs. Each URL should read as follows:

"flash/dante_quiz.swf?username=<cfoutput>#form.username#</cfoutput>"

The <cfoutput> block will be resolved before the page is sent back to the browser, so by the time the Flash movie is requested, the correct data will already exist and be inserted into the Flash movie.

[View full size image]

13.

Save and Put dante_quiz_questions.cfm. Also, be sure to Put flash/dante_quiz.swf .

You're ready to test this portion of the pages/movie.

14.

Select dante_quiz_login.cfm in the Files panel, and press F12 (Windows) or Option+F12 (Macintosh). Enter an email address in the form and click Submit .

The second page, dante_quiz_questions.cfm, should load, and the Flash movie with it.

The username variable should be resolved in both the regular page and the Flash movie.