Wile Adobe dreamweaver CS5 Bible phần 7 pot

773
Chapter 19: Making Data Dynamic
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.

774
Part IV: Incorporating Dynamic Data
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.

775

Chapter 19: Making Data Dynamic
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

L
like the Assets panel, which shows available images and other elements. Like the Assets
panel, data is inserted from the Bindings panel through a drag-and-drop procedure.
For complex layouts, you can position your cursor precisely and click the Insert button
instead of dragging and dropping the dynamic fields.
Dynamic text accepts two types of formatting: client-side and server-side. Client-side
L
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
L
are you’re not doing anything wrong in Dreamweaver. The error may lie in your data-
base setup. It’s key to store the path and/or filename of the images in the data source as
a text field rather than as a hyperlink.

776
Part IV: Incorporating Dynamic Data
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
L
Dreamweaver page. Again, storing just the filename or the filename and path in the
database field is the best approach.
Any attribute, whether of a multimedia object or regular image, can be dynamically
L
derived. The Parameters dialog offers options for inputting either dynamic or static
attributes and values on multimedia objects, and the Bindings panel allows you to

bind dynamic data to attributes.
In the next chapter, you see how to begin managing your data in Dreamweaver.

777
Managing Data
IN THIS CHAPTER
Repeating data on a page
Dreamweaver Technique:
Applying a Repeat Region
Selectively showing and
hiding areas
Moving from record group to
record group
Using Data objects for instant
recordset navigation
Dreamweaver Technique:
Establishing Recordset
Navigation
W
ith 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.

778
Part IV: Incorporating Dynamic Data
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 surrounding 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:
Line break:

L
<br>
Paragraph:
L
<p> . . . </p>
Table row:
L
<tr> . . . </tr>
Table data:
L
<td> . . . </td>
Unordered or ordered list item:
L
<li> . . . </li>
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

779
Chapter 20: Managing Data
Figure20-1
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

780
Part IV: Incorporating Dynamic Data
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.

781
Chapter 20: Managing Data
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 second 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

782
Part IV: Incorporating Dynamic Data
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

783
Chapter 20: Managing Data
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
L
Show Region If Recordset Is Not Empty
L
Show Region If First Record

L
Show Region If Not First Record
L
Show Region If Last Record
L
Show Region If Not Last Record
L
Tip
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 backward. 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.

784
Part IV: Incorporating Dynamic Data
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.

785
Chapter 20: Managing Data
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
L
Move To Previous Record
L
Move To Next Record
L
Move To Last Record
L
Move To Specific Record
L
Note
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.

786
Part IV: Incorporating Dynamic Data
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.

787
Chapter 20: Managing Data
Figure20-8
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.
L
Adds a Show Region server behavior to each of the links:
L
Show If Not First Record is added to the First and Previous record links.
L
Show If Not Last Record is added to the Next and Last record links.
L
Centers the table on the page and sets the width to 50 percent.
L

788
Part IV: Incorporating Dynamic Data
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

789
Chapter 20: Managing Data
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_Records
Like 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

790
Part IV: Incorporating Dynamic Data
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

791
Chapter 20: Managing Data
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 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 previ-
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.
Recordset navigation can be integrated in several ways. You can add each building block
L
(the graphics or the text, the server behaviors, and so on) by itself, or you can accom-
plish the same task in one operation by using a Dreamweaver Data object. Depending
on the Web application, you might find it quicker to insert and modify the Recordset

Navigation Bar Data object rather than build your own step-by-step.
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.


793
Working with
Dynamic Live View
IN THIS CHAPTER
Understanding the Live
View process
Designing in Live View
Testing different variable values
Dreamweaver Technique:
Changing HTTP Request
Settings
Previewing with a testing server
W
hen 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.

794
Part IV: Incorporating Dynamic Data
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 desig-
nated in the Site Definition Testing Server category is used to invoke the page.

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.

795
Chapter 21: Working with Dynamic Live View
Figure21-1
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.

796
Part IV: Incorporating Dynamic 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 Testing 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.

797
Chapter 21: Working with Dynamic Live View
Figure21-3
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 Direc-
tory Creation dialog box (Wizard in Windows XP).

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.