Wile Adobe dreamweaver CS5 Bible phần 7 pot

You’ll revisit this page in the next chapter when you learn how to show additional data from a recordset on the page using a Dreamweaver server behavior.. To see multiple records from th

8 Click OK when you’re done.

9 Test your page by switching to Live View (View ➪ Live View) CSS formatting can be added while in

Live View When you’re done, turn off Live View.

10 From the Bindings panel, select the agentFirstName entry.

11 Select the Format list on the far right of the entry and, from the list, choose AlphaCase ➪ Upper.

You may need to scroll the Bindings panel to the left to see the drop-down arrow in the Format

col-umn After you make the format change, the agent’s first name will automatically be uppercased.

12 Choose View ➪ Live View again to re-enter the mode and preview the revised data Save your page.

You’ll revisit this page in the next chapter when you learn how to show additional data from a

recordset on the page using a Dreamweaver server behavior

Integrating Flash and Other Dynamic Media

Just as text and images can be inserted into documents on-the-fly, all manner of multimedia —

including Flash and files requiring ActiveX controls or applets — can also be dynamically

incor-porated The core technique of attaching a data source is the same for multimedia files as it is for

images; when you insert a multimedia object, choose the desired data source from Dreamweaver’s

dialog box The linking code is automatically written into the proper parameter for the object

Most multimedia objects are inserted into HTML by using an <object> tag, an <embed> tag,

or a combination of the two; Java applets use the <applet> tag Dreamweaver handles the basic

file assignments for specific programs with its own icon in the Insert panel: examples are Flash

and Shockwave If you examine the code, you can see that even these objects use the <param>

tag (short for parameter) to declare the source of the media file ActiveX and applet files rely on

<param> tags to specify needed attributes Dreamweaver enables you to choose either static or

dynamic values for any <param> tag

Note

When you insert a Flash or shockwave movie, Dreamweaver now includes a Javascript file and references a

function from that file all parameters (dynamic and otherwise) inserted through the property inspector and

associated dialog boxes are correctly written into the Javascript code automatically n

You enter the <param> values through the Parameters dialog box, which is displayed when you click

the Parameters button on the Property inspector As shown in Figure 19-8, the Dreamweaver

Parameters dialog box consists of two columns, one for the name of the parameter and one for the

corresponding value Entries in either column can be assigned dynamic content by clicking the

lightning bolt icon When this icon is selected, the Dynamic Data dialog box opens and an

appro-priate data source — from those already declared in the Bindings panel — can be assigned

Figure 19-8

Dynamically alter parameters for any multimedia object by clicking the lightning bolt icon and picking a

proper data source

How you store the path to the movie is critical if you’re dynamically switching Flash movies As with

images, perhaps the best tactic is to use only the filename in the database field and supply additional

path information as needed Here are the steps to display different Flash movies dynamically:

1. Position your cursor where you’d like your dynamic content to appear, and click Insert

Flash from the Common category of the Insert panel

Alternatively, you can drag the Insert Flash button to the proper place on the page In either case, the Select File dialog box appears

2. Windows users choose the Select file name from Data sources option at the top of the

page Macintosh users select the Data Sources button found just below the URL field

3. Expand the data source to locate and select the desired field with the Flash movie filenames.

4. If your Flash data (the paths to the movies) contains spaces, tildes, or other nonstandard characters, the data must be encoded to be read properly by the server From the Format List, select Encode — Server.HTMLEncode (ASP); Encode — HTMLEncodedFormat (.NET); Encode — URLEncoded Format (ColdFusion); or Encode — Response

EncodeURL (JSP)

5. If your data is stored as filenames only, enter any required path in the URL field before the existing code

6. You can also link any Flash attributes to a dynamic source by clicking the Parameters

button to open the Parameters dialog box, entering a dynamic value by clicking the lightning bolt symbol under the Name or Value column, and choosing an appropriate data source from the Dynamic Data dialog box

7. Click OK when you’re finished

Cross-Reference

For more details on integrating Flash movies in your Web pages, see Chapter 25 n

Summary

Incorporating dynamic data into your standard Web pages is a core skill for building data-driven

Web applications, along with establishing a data source connection and defining a recordset

After you have these three components in place, you can begin combining HTML pages with

text, images, and even multimedia data Dreamweaver combines sophisticated connectivity with

drag-and-drop simplicity for quick insertion of dynamic content Keep the following items in

mind as you begin to integrate data-driven and static content:

The Bindings panel displays fields available for insertion into a Web document, much

formatting is another term for standard HTML and CSS formatting; dynamic text may

be styled with the same tags and attributes as regular text The final look for these tags and attributes is interpreted by the browser Server-side formatting, on the other hand, reshapes the data from the data source before it passes it on to the browser

If you encounter trouble inserting dynamic images into your Web applications, chances

Dreamweaver does not support loading images as binary images from data sources,

L

otherwise known as Binary Large Objects (BLOBs)

Flash movies — in fact, any multimedia file — can be dynamically inserted into a

In the next chapter, you see how to begin managing your data in Dreamweaver

Moving from record group to record group

Using Data objects for instant recordset navigation

Dreamweaver Technique:

establishing recordset navigation

With the power to access the data of the world — or at least your

part of it — comes great responsibility As a Web page designer,

you determine how best to present that information Not only

does this include the surrounding look-and-feel but also how the data itself

is structured How many records should you show at once? One? Ten? All?

How should the user navigate from one group of records to another? What

should the user see when there are no more records to display? Obviously,

there are no definitive answers to these questions; each response must

take into account the intent of the page, the type of data involved, and the

audience for that data This chapter can’t give you precise solutions for

every Web application, but it does give you the tools to devise your own

resolutions

Displaying Data Conditionally

What makes a Web page into a Web application? Connectivity to a data

source by itself does not make a Web application — after all, you’re merely

setting up the possibility for data integration, not actually utilizing it Some

would say that it is the power to programmatically control the display of the

data that is at the heart of an application Dreamweaver handles this

condi-tional display of data primarily through its Server Behaviors panel You can,

for example, opt to display the data — or any other page element — only if

certain conditions are met, such as an empty recordset Before you look at the

options for showing and hiding data conditionally, let’s first examine what

is perhaps the most commonly used Dreamweaver server behavior: Repeat

Region

Repeating data

After establishing a data source connection and defining a recordset, Dreamweaver displays all

the available fields in the Bindings panel Regardless of how many records are contained in the

declared recordset, you see only one record when you drag one or more fields onto your page and

preview the file To see multiple records from the same recordset on a single page, you can apply

the Repeat Region server behavior

The Repeat Region server behavior is very straightforward and extremely flexible After

select-ing the dynamic data and any surroundselect-ing code you’d like to repeat, you specify the number of

repetitions — you also have an option to display all the records in the recordset The key phrase

in the previous sentence is “and any surrounding code.” If you select only the dynamic data itself,

the data is repeated one record after another You have to include some HTML element to enable the

repeated data to appear separately, as on a different line Some of the most commonly used

sepa-ration elements and their HTML tags are:

For the Repeat Region to work correctly, you must select both the opening and the closing tags

that surround the dynamic data, as shown in Design view in Figure 20-1 The surest way to do

this is to place your cursor on the dynamic data and choose the surrounding element from the

Tag Selector

To implement a Repeat Region, follow these steps:

1. Select the dynamic data and surrounding code that you would like to repeat

2. From the Server Behaviors panel, click Add (+) and select Repeat Region from the list

The Repeat Region dialog box, shown in Figure 20-2, appears

3. Choose the recordset you want to work with from the Recordset drop-down list

4. If you want to present a subset of the recordset, enter the number of records you want to

display in the Show: Records field

The default is to show 10 records at a time You can change that value to anything you like if you select the Show: Records option

5. If you want to display every record in the recordset, choose the Show: All Records option

6. Click OK when you’re finished

Tip

To test your implementation, make sure that the View ➪ Visual aids ➪ Invisible elements option is enabled

Then click the Live View button on the Document toolbar Dreamweaver displays each repeated selection

with a highlight n

To automatically number your data, apply a Repeat Region to the <li> tag within an ordered (or numbered)

list Here PHP adds a do loop to repeat the elements

Figure 20-2

With the Repeat Region server behavior, you can show some or all the records in the chosen recordset

Although all the repeated elements are displayed on the screen, only the initial element within

a Repeat Region can be altered If you change the initial element’s formatting, you must click

the Refresh button from the Live View toolbar to apply those changes to the other elements; this

holds true even if you have Auto Refresh enabled

Multiple Repeat Region server behaviors may coexist on the same page, extracting data from

either the same recordset or a different one However, if you use the same recordset again, you

need to reset it so that Dreamweaver is extracting from the beginning To do this, locate the

sec-ond Repeat Region server behavior in the code by selecting its entry from the Server Behaviors

panel and switching to Code view Above the first line of server code, add the code appropriate to

your server model (substitute the name of your recordset for rsMine):

ASP <% rsMine.MoveFirst() %>

JSP <% rsMine.first() %>

PHP <? mysql_data_seek($rsMine, 0) ?>

Note

ColdFusion handles this for you If you start a new ColdFusion <cfoutput> block based on your recordsets,

it starts from the beginning again n

If you do not insert the resetting code, the second Repeat Region picks up where the first one

left off For example, if 10 records are displayed in the initial Repeat Region, the second Repeat

Region starts with the 11th record If you chose all records for the first Repeat Region, nothing is

shown in the second Repeat Region

Now that you know how to do this by hand, it’s time to show you the quick way (I know it’s

cruel, but everyone has to learn the hard way first.) Dreamweaver offers a fast and simple way

to add a table of records with a Repeat Region in just one step Choose Insert ➪ Data Objects ➪

Dynamic Table or click the Dynamic Table icon in the Data category of the Insert panel The

Dynamic Table dialog box, shown in Figure 20-3, is now active

Figure 20-3

Use the Dynamic Table Data object to add dynamic lists of tabular data quickly You can save lots of time

by skipping the tedious task of adding all your dynamic text manually

This dialog box has just a few options:

Recordset:

L Choose the recordset you want displayed in your table

Show:

L Choose whether to show a limited number of records or all records This

adds a regular Repeat Region to your field, just as you did earlier in this section

Table attributes:

L Specify your table border, cell padding, and cell spacing

After you click OK, the table contains the field names in the first row, the data items in the

sec-ond row, and a Repeat Region wrapped around the secsec-ond row, as shown in Figure 20-4

Figure 20-4

With the results from the Dynamic Table Data object, you simply change the basic table formatting and the

table headings, and you’re done

Applying a Repeat Region

Repeat Region is one of the most frequently used server behaviors In this Technique, you apply a Repeat

Region server behavior to a previously created table row so that multiple data records can be displayed

1 From the Techniques - Dynamic site (established in Chapter 17), expand the 20_Managing_Data

folder and open the managing_data_start file for your server model.

If you followed the Technique in the previous chapter, you’ll recognize this page There is, however,

one small difference: an additional recordset has been added to illustrate an important concept.

2 Place your cursor in the row of dynamic data by selecting any of the inserted fields, such as

rsAgents.agentPhone.

3 From the Tag Selector, choose the <tr> tag.

Choosing the <tr> tag ensures that the entire row of data will be repeated.

4 From the Server Behaviors panel, click Add (+) and select Repeat Region from the list.

continued

5 When the Repeat Region dialog box opens, choose rsAgents from the Recordset list.

You must be sure to select the recordset you want to repeat; if you were to leave the default choice,

rsProperties, no additional data would be displayed because there is no dynamic data from that

recordset in the table row.

6 Leave the default Show 10 Records At A Time option, and click OK.

In Dreamweaver’s Design view, a thin border appears around the row along with a tab indicating

the Repeat Region.

7 Test your newly applied server behavior by choosing View ➪ Live View.

8 Choose View ➪ Live View again to exit the mode.

9 Save your page.

In the next Technique, you see how to add elements to the page to indicate which records are

currently displayed and to navigate through a larger recordset

continued

Showing and hiding page elements

In the rush to push a site live, designers often pay too little attention to the user experience

When you are designing static Web pages, it’s especially easy to lose sight of the importance

of the user interface However, with dynamic pages — where user interaction often determines

what’s on the page — an intuitive, reactive design helps to focus the audience on the content,

rather than the engine driving the content Dreamweaver provides a set of server behaviors that

enable you to show or hide any area of the page dynamically: the Show Region server behaviors

The six Show Region server behaviors are as follows:

Show Region If Recordset Is Empty

Don’t let the terminology throw you: although they are all called show region server behaviors, you can just

as easily use them to hide an area n

Dreamweaver’s capability to conditionally hide or reveal areas of the page is extremely

help-ful for smoothing the user experience For example, suppose you have a Web application that

shows all 23 items in a particular recordset, 5 at a time, with Next and Previous links (see

Figure 20-5) The record navigation controls enable users to page through the recordset,

for-ward and backfor-ward When they reach the final record, the Next and Last buttons should be

hidden; when they’re on the first record, the Previous and First buttons should be hidden I’ve

used Show Region If Not Last Record to hide the Next button and Show Region If Not First

Record to hide the Previous button

To apply a Show Region server behavior, follow these steps:

1. Select the page area you would like to conditionally show

2. From the Server Behaviors panel, click Add (+) and select one of the server behaviors

from the Show Record submenu The dialog box for the specific Show Record server behavior you chose is displayed, like the one shown in Figure 20-6 The dialog boxes for all the Show Record server behaviors are identical

3. From the Recordset list, select the recordset on which to base the Show Record condition

4. Click OK when you’re done

Typically, the Show Region server behaviors are used in pairs Apply a Show Region If Not First

Record server behavior to a Previous Record link — it hides the link when the user is on the first

record Similarly, apply a Show Region If Not Last Record server behavior to the Next Record link

to cause the link to disappear when the last record is called

Figure 20-5

Use Dreamweaver’s Show Region server behavior to display or hide navigation buttons, depending on the

dynamic data shown

Figure 20-6

To use a Show Record server behavior, all you do is choose a region to show/hide and a recordset

Only the first two Show Region server behaviors — Show Region If Recordset Is Empty and Show

Region If Recordset Is Not Empty — can be applied to a page without any preconditions The

other four Show Region server behaviors require that one other type of server behavior be

pres-ent on the page: the Recordset Paging server behavior The Recordset Paging server behaviors act

like VCR controls, adding a link that, when selected, displays the first, last, next, or previous set

of records The Recordset Paging server behaviors are covered in more detail in the next section

Handling Record Navigation

So far in this chapter, you’ve seen how to repeat dynamic data and how to hide and display data

and other page elements programmatically Now it’s time to put some real interactive controls

into the hands of your Web application users Dreamweaver includes a set of server behaviors

that enable users to page through your recordset much as if they were flipping the pages of a

catalog

You can approach Dreamweaver’s record navigation through two avenues: One is a do-it-yourself

route, and the other lets Dreamweaver do most of the work for you To better understand how

record navigation works, examine the piece-by-piece approach first

Building record navigation links

As mentioned earlier, Dreamweaver includes a set of Recordset Paging server behaviors to control

navigation within a recordset Again, the application is straightforward: Select the text or image

you’d like to serve as a trigger and attach the appropriate server behavior When selected, the

trig-ger fires the server-side code that retrieves the chosen record If a Repeat Region is inserted on

the page, the next or previous group of records is displayed

You can find five server behaviors under the Recordset Paging submenu:

Move To First Record

Move To specific record is most often used in conjunction with a search routine or a master-detail application n

As noted, you can use either text or images as your controls Navigation links, such as those

shown in Figure 20-7, may include rollovers or other client-side behaviors

Figure 20-7

You can use images — with or without rollovers — to navigate through a recordset with Dreamweaver’s

Recordset Paging server behaviors

Tip

You don’t need to add an initial or placeholder link to your image or text When the recordset paging server

behavior is applied, the link is written for you n

To create recordset navigation links, follow these steps:

1. Select the text or image to which you’d like to attach the server behavior

2. From the Server Behaviors panel, click Add (+) Choose the desired behavior from the

Recordset Paging submenu The appropriate Recordset Paging dialog box appears If you’ve made a selection, it’s highlighted in the Link list as shown in Figure 20-8;

otherwise, a new text link is created

3. Make sure that the selection in the Link list is the link you want

4. Choose the recordset you want to work with from the Recordset drop-down list

5. Click OK when you’re finished

6. Repeat Steps 1 through 5 to add more recordset navigation elements

The Recordset Paging server behaviors identify your selected target, whether it is an image or text

Note

record navigation is done within a particular recordset; you can’t link one recordset to another using the

Dreamweaver server behaviors or Data objects n

After you’ve added your navigation controls, you may want to take the next step toward a more

complete user interface by adding Show Region server behaviors to ensure that the controls are

displayed only when they serve a purpose For example, if you have a navigation element that

moves to the last record of a recordset, you probably want to attach a Show If Not Last Record

server behavior to the trigger

Using Data objects for record navigation

Although the process for setting up a single navigation control is fairly simple, you’d have to

perform that process four times (as well as attach four additional server behaviors) to accomplish

what the Recordset Navigation Bar does in one operation The Recordset Navigation Bar is one of

Dreamweaver’s Data objects — one that can take the drudgery out of a repetitious

implementa-tion All the Data objects are accessible through either the Insert ➪ Data Objects menu or the

Data category in the Insert panel

The Recordset Navigation Bar Data object serves the following purposes:

Adds four links to the page in a borderless, single-row table: First, Previous, Next, and

L

Last The links may be either text or graphics

Attaches the appropriate Recordset Paging server behavior to the four links

What’s even more impressive about this list of functions is that they are implemented with a

single command, which in turn, references a very simple dialog box, as shown in Figure 20-9

Figure 20-9

The Recordset Navigation Bar dialog box offers a choice between text links or graphics

Here’s how it works:

1. Choose Insert ➪ Data Objects ➪ Recordset Navigation Bar or choose Insert Recordset

Navigation Bar from the Data category of the Insert panel The Recordset Navigation Bar dialog box is displayed

2. Select the data you want to control from the Recordset list

3. To create a series of text links, choose the Display Using Text option

4. To use graphics to trigger the navigation, choose the Display Using Images option

Caution

You must save the page if you select the Display Using Images option Dreamweaver copies images from the

shared/Dreamweaver/Images folder when you choose this option, and the page into which they are being

inserted must be saved to store the images properly in the site They are stored in the same folder as the page

containing them n

5. Click OK

After the recordset navigation bar has been inserted, you can adjust the text or images in any

way you see fit The text may be styled or modified, and you can even swap out the images — by

changing the src attribute — for other graphics

Tracking record status

Another Data object inserts the text and all the server behaviors necessary to identify the records

currently being viewed By default, the syntax used by the Recordset Navigation Status Data

object is:

Records First_Record_Shown to Last_Record_Shown of Total_Records

This syntax works perfectly for Web applications that use a Repeat Region server behavior to

show multiple records When viewed through the browser, the recordset navigation status output

looks like this:

Records 5 to 10 of 37

If you’re displaying one record at a time, you can adjust the Data object code inserted so that it is

similar to the following:

Record First_Record_Shown of Total_RecordsLike the recordset navigation bar, the recordset navigation status Data object works with only one

recordset at a time:

1. Choose Insert ➪ Data Objects ➪ Recordset Navigation or click the Recordset Navigation Status icon on the Data category of the Insert panel The Recordset Navigation Status dialog box is displayed, as shown in Figure 20-10

2. Select the data you want to control from the Recordset list

3. Click OK when you’re finished

Figure 20-10

The Recordset Navigation Status Data object inserts three different server behaviors in one operation

Establishing Recordset Navigation

In this Technique, you make sure your site visitors get a complete picture of the data you’re displaying by

adding two Dreamweaver Data objects: Recordset Navigation Status and Recordset Navigation Bar

1 Open the managing_data_start file for your server model previously worked upon.

The first task is to extend the table to accompany the objects.

2 Place your cursor in the first row of the table next to any of the header labels, such as Leading

Agent.

3 Press Ctrl+M (Command+M) to insert a new row above the current row.

continued

4 You need to merge the second and third cells of the top table row to make room for the Data

objects Select the two cells above Office Phone and Cell Phone and, from the Property inspector,

click Merge Cells.

5 To insert the first Data object, place your cursor in the first cell of the top row and, from the Data

category of the Insert panel, click Recordset Navigation Status.

6 When the Recordset Navigation Status object opens, choose rsAgents from the Recordset list and

click OK.

Dreamweaver inserts the dynamic code for your server model that, at runtime, will specify which

records are currently being viewed.

7 Now add the capability to move through a recordset Place your cursor in the second cell of the top

row and, from the Insert panel’s Data category, choose Recordset Paging: Recordset Navigation Bar.

8 In the Recordset Navigation Bar dialog box, choose rsAgent from the Recordset list, leave the default

Display Using Text option, and click OK The Recordset Navigation Bar table, along with all the

necessary server behaviors, is added to the page.

9 Test your page by choosing View ➪ Live View or clicking the Live View button.

continued

You’ll see one of the results from inserting one of the objects — the Recordset Navigation Status — but

not the other Because the returned recordset contains fewer than the number of records set to be

displayed by the Repeat Region server behavior (10), the automatically applied conditional server

behaviors hide the recordset navigation bar It is, however, ready to be displayed should the

record-set ever expand beyond the record-set value.

10 When you’re done, exit Live View by choosing View ➪ Live View again and save your page.

Summary

To be part of an effective Web application, dynamic data can’t just be displayed; it has to be

designed Dreamweaver, through a variety of server behaviors, gives you the power to selectively

repeat page elements as well as show them programmatically Data design is an important aspect

of integrating the server side with the client side As you look for ways to manage the data in your

Web applications more effectively, remember the following points:

Dreamweaver’s Repeat Region server behavior can help you to show as much of the

L

data on a single page as you desire Repeat Region server behaviors are usually applied

to table rows, but they can also be used with line breaks, paragraphs, list items, or any other HTML element

It’s often necessary to show data only if a certain condition is met Dreamweaver handles

L

these operations through a variety of Show Region server behaviors With these tools, you can also selectively display any element — text, graphic, or dynamic data — on the current page

After you have the capability to display a portion of your data, you must navigate the

L

recordset Dreamweaver’s Recordset Paging server behaviors can show the next or ous record (or group of records, if the Repeat Region server behavior is used), as well as enable you to quickly navigate to the first or last record of your data

previ-Recordset navigation can be integrated in several ways You can add each building block

In the next chapter, you learn how you can use Dreamweaver’s Live View to enhance your

work-flow and test your application under a variety of circumstances

Changing hTTp request settings

previewing with a testing server

When I first started with print and design layout (back in the

pre-computer dinosaur age), I would drive all over the city to

finish a job After receiving the client’s go-ahead, I had to pick

up my type from a phototypesetter and my images from a stat house Then,

back at my studio, I’d cut and paste — and I mean literally, with scissors

and glue — the text and images into place, hoping against hope that I had

specified the type and image sizes correctly If not, it was back in the car

for another trip or two around town Ah, the good old days

Now designers (especially those who design for the Web) have the

luxury of developing their creations right in their own studio Until

Dreamweaver, however, the development of a Web application often

undertook a faster, albeit parallel, course to my inner-city travels After a

basic page was designed, complete with server-side code, the document

had to be uploaded to a testing server and then viewed in a browser over

the Internet If — make that when — changes were needed, the pages were

revamped back in the studio Because the designer was not able to lay

out the page with the actual data in place, modifications were a

trial-and-error process that often required many, many trips to the server and back

Dreamweaver’s Live View eliminates the tedium and the lengthy time

required for the upload-preview-modify-upload cycle It enables

develop-ers to work with the layout while the actual data is live on the page If a

table width needs to be adjusted because one of the records is too long, you

can make the change immediately with no guesswork

Live View processes the page in the chosen server model If the page requires variables, such as

search criteria, to run properly, the Live View feature enables you to set such values as needed

Although a preliminary discussion of Live View was presented in Chapter 20, this chapter covers

all the necessary details for using both basic and advanced Live View capabilities

Live View is a terrific timesaving feature, but you can’t rely on it totally for testing your Web

application You still need to preview the page in various browsers to ensure cross-browser

com-patibility The final section of this chapter is dedicated to Dreamweaver’s Preview In Browser

fea-ture and its relationship to your testing server

Engaging Live View

After your site is properly set up, entering Live View is just a click away Click the Live View

but-ton on the toolbar to refresh Dreamweaver’s Document window and to replace all the dynamic

data placeholders with information from the declared data source

To get the most out of Live View — and to avoid problems — you need a firm grasp of how

Dreamweaver is able to present your data, live The following sections can help you understand

this timesaving feature

How Live View works

Once you enter Live View, there’s a lot going on under the hood:

1. The developer inserts dynamic data elements into a standard HTML page The dynamic

data is represented by placeholders that combine the recordset and field names in a set

of curly braces, such as {rsEmployees.FirstName}

2. When the Live View is enabled, Dreamweaver creates a hidden, temporary copy of the

current page

3. The temporary page is stored in the folder designated in the Testing Server category of

the Site Definition dialog box

4. Dreamweaver instructs the defined testing server to execute the server-side code within

the page and passes along any variables that have been specified The URL prefix nated in the Site Definition Testing Server category is used to invoke the page

desig-5. When the code is executed, Dreamweaver reads the resulting HTML code

6. Finally, Dreamweaver displays the page with its built-in rendering engine

If all goes well, a page with dynamic data placeholders (shown in Figure 21-1) is replaced with

the actual data integrated into Live View (shown in Figure 21-2)

If Dreamweaver encounters an error, it displays a message that explains where the process failed

and suggests some possible remedies

This table contains a row with four dynamic data fields, surrounded by a Repeat Region server behavior

Figure 21-2

After Live View is enabled, the full number of records allowed by the Repeat Region is displayed and

provides an accurate representation of the data

Setting up for Live View

As noted in the summary of how Live View works, several values found in the Testing Server

category of the Site Definition dialog are key to this feature’s operation Live View must know the

location of the site root for the temporary page and how that location may be reached with an

HTTP request If either of these values is not found, the attempt to switch to Live View is aborted

and an error message appears

Two different methods exist for accessing the testing server: locally through a network, or

remotely via FTP If the testing server is to be accessed locally, the location of the folder

stor-ing the pages is entered in the Teststor-ing Server Folder field, shown in Figure 21-3 Although it

is referred to as the Testing Server folder, if you’re using a local Web server such as Internet

Information Services (IIS) on your local testing machine, this entry is likely to be the same as

your Local Root Folder, as defined in the Local Info category of the Site Definition dialog box

The other field essential to proper Live View operation is the URL Prefix field When Live View

sends the HTTP request to the testing server, the address contained in this field prefaces the

name of the temporary page For example, if my temporary page is named TMPGX123455.asp

and the URL prefix is http://localhost/dba, the URL used is http://localhost/dba/

TMPGX123455.asp

Tip

Localhost is common shorthand for addressing a local Web server; generally, you can also use the Internet

protocol (Ip) address 127.0.0.1 n

Initially, Dreamweaver inserts only the http://localhost/ address into the URL Prefix field

This works if your local site root corresponds to the local Web server root If your site root is

in a different directory, you have to fill in the path of that directory Most Web servers permit

the creation of virtual directories, which are aliases recognized by the Web server If you’re

using Windows XP Professional, Windows Vista Business, Windows Vista Ultimate, Windows 7

Professional, or Windows 7 Ultimate, you may already have Internet Information Services (IIS)

available, and you can set up your own virtual directories

To create a virtual directory, follow these steps:

1. First, check to see if you have IIS by right-clicking YourComputerName (My Computer

on Windows XP) on your desktop and choosing Manage In the Computer Management console, expand Services and Applications If you see Internet Information Services listed, you’ve got everything you need installed and you can skip to Step 2 If you don’t see IIS listed, choose Start ➪ Control Panel, double-click Add/Remove Programs and choose Add/Remove Windows Components Check Internet Information Services in the Windows Component Wizard and follow the dialogs to install IIS

2. For Vista or Windows 7, select Internet Information Services (IIS) Manager In the

Connections column, expand the Web Sites entry

Enter the location of your local files and a locally established site in the URL Prefix field to enable Live

View to find your application

3. Right-click the Default Web Site and choose Add Virtual Directory (New ➪ Virtual

Directory in Windows XP), as shown in Figure 21-4 This action opens the Virtual tory Creation dialog box (Wizard in Windows XP)

Direc-4. In the Alias field (Virtual Directory Alias screen in Windows XP), enter the alias for the folder This will be appended to the end of the http://localhost/ address (If you name your virtual directory dba, for example, the URL would be http://localhost/dba.) In Windows XP, click Next to continue

5. In the Physical path field (the Web Site Content Directory screen in Windows XP), browse to the folder that contains your site and click OK or Next in Windows XP

The final step is for Windows XP users only

6. Click Next on the Access Properties screen to continue, and click Finish on the next

screen to add the virtual directory

Figure 21-4

Right-click the Default Web Site in IIS and choose New ➪ Virtual Directory to open the Virtual Directory

Creation dialog box Complete the dialog to add a new virtual directory

If you’re connecting to a remote testing server, choose FTP from the Access list on the Testing

Server category of the Site Definition dialog box When FTP is selected, Dreamweaver displays

the same information entered under the FTP heading in the Remote Info category Additionally,

Dreamweaver combines the entries under FTP Host and Host Directory in the URL prefix with

an initial http:// For example, if your entry under FTP Host is www.drinkgoodstuff.com

and Host Directory is blank, the URL prefix reads http://www.drinkgoodstuff.com/

Caution

You may have to edit your UrL prefix if your FTp host uses an ftp prefix If my host directory were

ftp.drinkgoodstuff.com, Dreamweaver would create the UrL prefix entry http://ftp

.drinkgoodstuff.com, an unworkable UrL here, the ftp must be changed to www n

Entering and exiting Live View

Dreamweaver provides several different methods for invoking Live View Use the one that best

suits your work style:

Click Live View in the Document toolbar

L

Choose View

Use the keyboard shortcut Alt+F11 (Option+F11)

L

Regardless of the method used, Dreamweaver initially displays an alert that asks if you’d like to

update the copy on the testing server To preview the most recent changes, click Yes

Once you’re in Live View, executing either of these actions returns you to Standard mode, where

you see dynamic data placeholders

If, for any reason, you need to interrupt the Live View connection process, click the stop button on the Live

View toolbar The stop button remains active only while Dreamweaver is transitioning into Live View n

Making changes in Live View

If a feature in a software program can be said to have a raison d’etre, then modifying the layout

must surely be the raison d’etre of Live View When in Live View, new elements — dynamic or

static — can be formatted or styled using HTML or CSS

Live View solves the thorny challenge of laying out a table without resorting to a time-consuming

trial-and-error approach For instance, varying lengths of data in the same column often

com-plicate designing table layout with dynamic data If, for example, the sample data includes a last

name field that is 12 characters long and the real data contains a hyphenated name that is 25

characters long, you have a problem When working in Live View, you can see the entire page as

it would be generated on the server, including dynamic elements and repeating table rows (see

Figure 21-5), with all the styling applied

The Live View toolbar includes a Refresh button that, when clicked, resends your application to

the server for processing and then redisplays the page in the Document window The Refresh

option is valuable in the following circumstances:

Information from the data source is reassessed This feature enables you to make

L

changes in the database and then see those changes incorporated into your page

Server formatting changes are applied to dynamic data

repeat region server behaviors enable multiple records from the same recordset to be incorporated into a

page For details on how to insert and manage a repeat region, see Chapter 20 n

HTTP Request Settings

Although the capability to work with data from the current recordset is impressive, it’s really only

half the story of Live View Many Web applications depend on variables used when the page is

processed by the testing server Users may intentionally submit these variables when they fill out

a form or they may submit variables unintentionally when they navigate from a particular page

Session or application variables, from authentication routines or simple counters, may also be

integrated into a page Dreamweaver permits developers to interactively alter all such variables

and preview the resulting Web page This facility not only enables the designer to work with a

wide range of real-life conditions, but it also facilitates testing of the application under a variety

of circumstances Dreamweaver offers two avenues of approach to variable handling: through the

Address field and through the Settings dialog box

Getting the query string

Remember the first time you noticed that the link you clicked was carrying quite a bit of

addi-tional baggage? Where you might have selected a link that took you to a specific product page

with a URL such as http://www.idest.com/products/widgets.htm, the link in the

Location field of your browser looked more like the following:

http://www.idest.com/products/products.asp?prod=

widget&sessionID=2343215&login=no&visited=gadgets%20%r%20us

The text following the question mark is called a query string, or the URL parameters Query

strings are a tool used by Web applications to pass information from one page to the next

Frequently, you see a query string after submitting a form Forms using the Get method pass

their variables by appending a question mark and the form information to the URL of the

requested page The form information is in a series of name/value pairs; and each name/value

pair is linked by an equal sign, as follows:

Firstname=Joseph

Query strings may include any number of name/value pairs, separated by an ampersand Thus,

for a form that passes the data entered into a first name field and a last name field, the query

string may look like this:

?firstname=Joseph&lastname=Lowery

Neither single nor double quotation marks are used because they are in HTML attributes Quotation

marks and other characters — including spaces, apostrophes, and tildes — are represented

by hexadecimal values so that they are properly understood by servers Such strings are said

to be URL encoded, and they are designated by an initial percent sign, followed by the ASCII

value of the character in hexadecimal The following table offers some commonly used

encod-ing values:

Character ASCII Value

Apostrophe or single quotation mark ‘ %27

The query string field appears in the Live View toolbar by default, prefaced by the URL path used

by Live View plus a question mark The URL path, question mark, and the text entered into the

field constitute the complete URL submitted to the testing server when you invoke or refresh

Live View

Note

Depending on the length of the pathname, some elements, such as folders, may be represented by an ellipsis

(three dots) so that Dreamweaver can display the filename and question mark n

Consider an example that uses the query string Suppose that you’ve developed a page for an

organization that displays employees and whether they’re under contract The contract status

shown depends on the link selected by the user; the links are identical except for the query string

portion For uncontracted employees, the link reads employees.cfm?contract=no, whereas

for contracted employees, the link reads employees.cfm?contract=yes The recordset on the

employees.cfm page uses a filter that sets the Contract field equal to the URL parameter called

contract

Note

although the query string field is present by default, you can disable it by switching the Method option in

the hTTp request settings dialog box from Get to Post To re-enable the query string field, choose View ➪

hTTp request settings and select Get as the Method option n

After entering Live View by any of the methods described previously, you can switch back

and forth between the two sets of returned data by changing the value in the query string

name=value pair In this instance, the two accepted values — as defined in the data

source — are no for employees not under contract and yes for employees under contract

After changing the value and pressing Enter (Return), Live View is refreshed, as shown in

Figure 21-6

If you encounter a Live View error indicating that the page cannot be displayed because the current record

could not be found, you’re probably including values in the query string that do not match any records in a

recordset on the page You have a couple of options for proceeding press the esc key to dismiss the error

dialog box and enter a new value in the query string field (Don’t click the Close button on the dialog box, or

you’ll close the Live View and the Live View toolbar.) alternatively, you can enter a name/value pair through

the hTTp request settings dialog box as outlined in the following section n

Posting responses with HTTP Request Settings

Although the query string is handy for changing one or two simple variables, the more complex

the variables, the less convenient it becomes Dreamweaver offers another route to

control-ling Live View variables: Live View settings The HTTP Request Settings dialog box, shown in

Figure 21-7, offers several important advantages over the query string:

The name/value pairs are easier to enter and maintain in a straightforward two-column

Variables may be sent to the application by either the

string uses only the Get method

Variable settings may be optionally stored If you select this option, Dreamweaver uses

L

its Design Notes facility to maintain the variables

Figure 21-7

Invoke the HTTP Request Settings command to simulate forms using either the GET or POST method

To establish variables using the HTTP Request Settings feature, follow these steps:

1. Choose View ➪ HTTP Request Settings, or enter Live View and select Settings from the Live View toolbar The HTTP Request Settings dialog box for the current page is displayed, with the title Live View Settings

2. To create a new variable, click the Add (+) button

3. In the Name column, enter the name of the variable

4. In the corresponding field under the Value column, enter a value for the variable

5. Repeat Steps 2 through 4 to add additional variables

6. To delete a name/value pair, select it and click the Remove (–) button

7. You can adjust the sequence in which the variables are presented to the page by using the Up and Down buttons to move name/value pairs higher or lower in the list

8. By default, Dreamweaver sends variables to a page using the GET method, which

appends URL-encoded name/value pairs in a query string To simulate a form passing variables in an encapsulated, hidden manner, choose POST from the Method list

Tip

If you choose the GET method, enter the variables and their values without encoding them for the UrL

Dreamweaver translates any necessary characters into their hexadecimal equivalents when the Live View

page is processed n

9. To store your variable settings, select the Save Settings For This Document option

Dream-weaver requires that Design Notes be enabled in order to save the Live View settings If Design Notes is disabled when you select this option, you get an opportunity to enable it

Changing HTTP Request Settings

In this Technique, you practice working with Live View settings, both in the dialog box and in the Live

View query string field

1 From the Techniques - Dynamic site (established in Chapter 17), expand the 21_Live_Data folder

and open the live_data_start file for your server model.

Before you can use the Live View settings to alter the preview, you need to know how the recordset

is being filtered.

2 In the Bindings panel, double-click the Recordset (rsProperties) entry to reopen the associated

dia-log box.

3 Take note of the Filter section and you’ll see that the recordset is filtered by the URL parameter type.

4 Click Cancel to close the recordset dialog box.

5 Now that you know what variable the recordset is filtered on, you can specify it in the Live View

settings Choose View ➪ HTTP Request Settings.

6 When the HTTP Request Settings dialog box opens, click Add (+) and in the Name column enter

type and press Tab.

7 In the Value column, enter rental and click OK.

8 Choose View ➪ Live View.

Only the rental type records are displayed Now, switch to a different set of records.

9 In the Live View Query String field, change the type value from rental to purchase so that the entire

query string reads type=purchase, and press Enter (Return).

10 Choose View ➪ Live View again to return to standard Design view.

Although you can discover which parameters are used to filter the recordset, you can’t uncover the

expected values from within Dreamweaver If they weren’t provided for you as in this Technique,

you’d need to examine the data source to see what values were expected and stored

Previewing an Application in the Browser

Live View saves a tremendous amount of time in the early design phase, yet when it comes time

to test your application in various browsers — a necessary step for virtually all Web developers —

there is no substitute for previewing in the browser Dreamweaver does a decent job of

approxi-mating a browser’s-eye view of your page However, with so many variations between the major

browsers — not to mention the versions within each major browser — you must test your page in

as many browsers as possible Dreamweaver’s Preview In Browser feature enables you to specify

up to 13 different browsers in Preferences After this feature is defined, you can test your page by

choosing File ➪ Preview in Browser ➪ Browser Name at any point If the toolbar is open, you can

also choose a browser under the Preview/Debug in Browser option

To view Web applications properly, Dreamweaver must process the pages with a testing server To

use this facility, you must satisfy two requirements:

Specify the route to the testing server, either via a local (or networked) folder or through

L

FTP in the Servers category of the Site Definition dialog box

Transfer any dependent or related files to the testing server Although you don’t have to

L

include dependent files such as graphics on the current page, you must transfer side includes, such as the connection script Related files are other pages referenced in the Web application; Dreamweaver only uploads a copy of the current page during the Preview In Browser operation

server-After the testing server is properly set up (as described in Chapter 5), you can transfer any

neces-sary files quickly in the Site window On the Site window toolbar, click the Testing Server button

The files on the testing server are displayed in the Testing Server pane of the Site window, as

shown in Figure 21-8 Transfer files from the local site by dragging them from the local pane to

the Testing Server pane or by selecting the files and then clicking the Put or Check In button

Figure 21-8

The Dreamweaver Site window enables you to connect to the testing server or the remote server

Site files Staging server

When you begin to test a new page, let Dreamweaver transfer the dependent files for you simply transfer a

saved copy of the current page to the testing server and okay the request to transfer the dependent files as

well To take advantage of this feature, make sure that you select the Dependent Files: prompt On put/Check

In option found in the site category of preferences n

Using the Server Debug Panel

with ColdFusion

The Server Debug panel offers you an integrated view of all errors and server variables on your

ColdFusion pages The Server Debug view also gives you the capability to browse your site inside

the Dreamweaver interface, testing values as you go

To enable debugging directly inside Dreamweaver, follow these simple steps:

1. Enable server debugging by choosing Debugging & Logging ➪ Debug Output Settings

in the left-hand pane of the ColdFusion Administrator (see Figure 21-9) The Debug Output Settings page opens in the right-hand pane Select the Enable Robust Exception Information and Enable Request Debugging Output options and click Submit Changes

Figure 21-9

Enable the server debugging options in ColdFusion before using the Server Debug panel in Dreamweaver

2. In Dreamweaver, choose View ➪ Server Debug, and an additional toolbar with the

fol-lowing buttons appears directly above your document window:

L Emulates the browser Refresh button and reloads the current page

It also includes an Address bar for passing query string values to your page and enabling you to see where you are in your site

When you preview Live View, you can see all the Server Debug output (see Figure 21-10), and you can browse through your pages just as you would in a regular Web browser

Figure 21-10

The Server Debug view gives you additional options on the toolbar for browsing your ColdFusion documents

3. Open the Server Debug panel (see Figure 21-11) by choosing Window ➪ Results or pressing F7 and selecting the Server Debug tab The Server Debug panel should now

be shown below the Property inspector

After you open the Server Debug panel, you can see all your variables, as well as any errors Any

exceptions provide a link to the page that is throwing the error If that error was contained inside

a <CFINCLUDE>, the URL for the page is a clickable link next to the error

Tip

If you right-click inside the server Debug panel, you can choose select all and copy the contents of the panel

by choosing Copy from the context menu You can then paste it inside a new document — in Dreamweaver or

another text editor — for future reference or to send to another ColdFusion developer for further debugging n

Figure 21-11

The Server Debug panel gives you a quick overview of all the returned variables from the ColdFusion

server

Summary

Sometimes, when an unusual idea appears in a software program, it’s hard to separate the merely

glitzy from the truly grand As implemented in Dreamweaver, Live View proves to be very

func-tional and, thus, more than a flash in the pan — although I have to admit, it’s pretty darn cool as

well To make the most of Live View, remember the following points:

Live View depends on proper setup of the testing server to run dynamic pages smoothly

L

If any of the information entered into the Servers category of the Site Definition dialog box is incomplete or incorrect, Dreamweaver won’t be able to process your Web applica-tion and display the results successfully

The query string field and the Settings button in the Live View toolbar both offer

devel-L

opers a way to test their Web application with different variables Use the query string field to emulate the passing of URL parameters and the Settings dialog box for Post-enabled forms

debug your ColdFusion applications.

In the next chapter, you learn how to create multiple page applications

Crafting Multi-page

applications

In ThIs ChapTer

Forwarding parameters via a UrL

automating application object production

Getting values from a form Dreamweaver Technique:

Building a search page Making form elements dynamic administering data sources with Web applications

Dreamweaver Technique:

Creating the results page Displaying variables authenticating site visitors

In a Web site composed of static HTML pages, each page generally

stands on its own and is developed individually In a dynamic Web

site, however, applications often require multiple pages to be

effec-tive A prime example is the master-detail Web application where a search

box on one page leads to a master list of results on a second page, each of

which, in turn, is linked to a third dynamically generated detail page To

execute the application, variables and other information must be passed

from one page to the next The dynamic Web site developer has a variety of

tools capable of handling this task, including forms and session variables

All these methods for creating multiple-page Web applications are available

in Dreamweaver and are covered in this chapter I also show you a one-step

procedure for developing a master-detail Web application

Additionally, this chapter covers the use of form elements, such as text

fields, checkboxes, and drop-down lists for dynamic data display Form

elements are extremely useful to the Web-application developer because

they let the developer update objects on-the-fly By making a choice in one

drop-down list, the developer can determine which options are available

in another list This chapter also describes how to put your new knowledge

of form elements to work in creating a search field Finally, you learn how

to protect your site by authenticating your site visitors and permitting only

authorized ones in

Using the URL to Pass Parameters

In a static Web site, links are used to navigate from one page to another In a dynamic site, links

can have an additional function: passing parameters to an application server so that it can

deter-mine the dynamic content on the linked page The added parameters are known as a query string

and follow the standard URL after a question mark, like this:

dvd_details.asp?movie=Serenity

Every parameter is composed of a name/value pair separated by an equal sign If more than one

parameter is sent, each pair is separated by an ampersand, as in the following example:

dvd_details.asp?movie=Serenity&genre=scifi

Unlike in HTML or other languages, quotation marks are not used to set off the values Quotation

marks and other non-alphanumeric characters including spaces, single quotes, and tildes must

be translated into encoded characters so that the server interprets them correctly Spaces, for

instance, are rendered as a %20, as shown here:

dvd_details.asp?movie=Serenity&genre=scifi&director=Joss%20Whedon

Dreamweaver provides all the tools necessary for constructing query strings within its

point-and-click interface However, if you understand the required syntax, you can quickly test your page

using the Address field found on the Live View toolbar

Sending parameters

With a master-detail Web application, typically only a single parameter is used The parameter

uniquely identifies the record selected on the master page and is appended to the link for the

detail page For example, suppose the detail page is details.php, the identifying variable is

called tripID, and the specific item is Conquering K2 The full link, with the query string,

reads:

details.php?tripID=Conquering%20K2

Note

Master pages are one of two types: either the master list is defined by the designer or by search criteria

submitted by the user The examples in this section are designer-based and rely on a specific recordset

being declared Details on how to create a search field are covered later in this chapter in the Dreamweaver

Technique “Building a search page.” n

To create the proper code within Dreamweaver, apply a Go To Detail Page server behavior to the

linking text, image, or dynamic data Master pages also include a Repeat Region server behavior;

the Go To Detail Page server behavior is attached to the text or graphic within the region, as

shown in Figure 22-1