1. McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Dynamic Action with Macromedia Dreamweaver MX Barry Sosinsky Valda Hilley Programming the Web Chapter 13

2. 13-2 Learning Objectives Using JavaScript with Dreamweaver MX Using Dreamweaver MX’s built-in actions Creating new actions or scripts

3. 13-3 Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a professional tool for building web sites and Internet applications. It allows every member of a development team-designers, developers, and programmers to work in a single integrated environment to create, build, and manage websites and Internet applications. Dreamweaver MX combines visual layout tools with extensive code-editing support of Macromedia HomeSite.

4. 13-4 Features in Dreamweaver MX Dreamweaver MX’s features let you do the following: –Use an integrated development environment to develop HTML, XHTML, XML, ASP, ASP.NET, JSP, PHP, and Macromedia ColdFusion web sites. –Develop common Internet applications using libraries of code to create database insertion and update forms, recordset navigation pages, and user authentication pages. –Jumpstart design and production using pre-built layouts and code, including site structures, forms, accessible templates, and JavaScript functions for client-side interactivity. –Write code using coding features like code hints, tag editors, extensible color coding, tag choosers, snippets, and code validation.

5. 13-5 Dreamweaver Coding Features: Code Hints Dreamweaver MX has many tools to make coding more productive. For example, you can use Code Hints to suggest code as you type in Code view. When you type certain characters, a list appears, suggesting options to complete your entry. You can select an item in the list or press Enter to insert it in your code.

6. 13-6 Dreamweaver Coding Features: Tag Chooser Dreamweaver MX’s Tag Chooser lets you insert any tag in the Dreamweaver MX tag libraries, which include the HTML, ASP, ASP.NET, and others. All you do is right-click the desired position in your code and select Insert Tag from the shortcut menu. The Tag Chooser appears.

7. 13-7 Dreamweaver Coding Features: Editing Code Dreamweaver MX has a number of tools that let you edit code more efficiently and with less errors. For example, you can edit most tags using special dialog boxes called tag editors. To access a tag editor, right-click inside a tag in your code and select Edit Tag from the shortcut menu. The tag editor for that tag appears.

8. 13-8 Using Behaviors Behaviors allow visitors to interact with a Web page to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.

9. 13-9 Using Behaviors (2) Behaviors consist of an action and an event. –An event, such as onClick, onLoad, or onMouseOver initiates an action, such as Swap Image, Go to URL, or Hide Layer. –Each HTML element, such as an image or link, allows a different set of events that vary according to browser and browser version.

10. 13-10 About Actions Actions are the foundations of behaviors. They are defined in simple HTML files: –The BODY of an action file generally contains an HTML form that accepts parameters relevant to the action. –The HEAD of an action file contains JavaScript functions that process form input from the BODY and control what functions, arguments, and event handlers are inserted into a user’s document.

11. 13-11 About Events When a visitor to your Web page interacts with the page – for example, by clicking an image – the browser generates events. These events can be used to call JavaScript functions that cause an action to occur. Events can also be generated without user interaction, such as when you set a page to automatically reload every 10 seconds. Dreamweaver supplies many common actions that you can trigger using these events.

12. 13-12 Creating New Actions Dreamweaver provides about two dozen behavior actions and you can write your own behavior actions. Once added, the new behavior will be available to you with the click of a button. Turning your commonly used scripts into behaviors not only saves you development time, but it allows you to share your scripts. –These scripts must consist of a single function that can be inserted in the user's HTML document. They should be as portable as possible and tested on as many web browsers as possible.

13. 13-13 Learning From Dreamweaver Dreamweaver ships with several built-in behaviors or actions. The following is a list of some of the commonly used ones. Check Browser Check Plug-in Go to URL Open Browser Window Play Sound Popup Message Set Text of Layer Set Text of Text Field Show-Hide Layers Swap Image Validate Form

14. 13-14 Debugging Behavior Actions If Dreamweaver displays an error message on starting or when you attempt to apply a behavior, your action file may contain JavaScript errors. If the error is severe, Dreamweaver displays an error message on starting and the action does not appear in the Actions pop- up menu. You must fix the problem and restart Dreamweaver to load your action file. If the error appears in a function other than behaviorFunction() or applyBehavior(), the action may appear in the Actions menu. –Dreamweaver will then display an error message when you select the action from the pop-up menu or when you enter parameters into the dialog box. –You may be able to debug your script by modifying your action file and selecting it again without restarting Dreamweaver.

15. 13-15 Debugging Behavior Actions (2) To debug scripts without restarting Dreamweaver: 1.Open your action file in a text editor. Save any changes you make. 2.In the Behavior inspector, add the action, enter some values, and click OK. Immediately delete the action you just added by clicking the minus (-) button. 3.Add the action again, and it should load the latest version. You may also find the alert() method useful for uncovering errors. For example, if the inspectBehavior() function doesn’t seem to work, add some alerts to display the variables.

16. McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. 13-16 The End