Dreamweaver MX and CF coding

Presented ByEron CohenBrainbox Productions

Ebc@brainbox.tv

What we’ll learn

A quick introduction the MX product family A comparison of ColdFusion Studio and

Dreamweaver How to set up a site in Dreamweaver MX The basics of using Dreamweaver MX The gems of using Dreamweaver MX to edit

ColdFusion code

What is MX?

Dreamweaver MX is part of the MX product family. MX also includes:

– HomeSite+ (ColdFusion Studio with minor changes)– FireWorks MX– FreeHand 10– ColdFusion MX– Flash MX

Studio MX: A suite of products which includes Dreamweaver MX, Flash MX, Fireworks MX, Freehand 10 and ColdFusion Developer Edition

Dreamweaver MX Hardware Requirements

Windows Platform: Pentium II / 128 Megs of Ram

Macintosh Platform: G3 / OS 9 or OS 10 (HomeSite+ does not work on Mactinosh, but by the way, ColdFusion MX Does!)

Dreamweaver MX vs. ColdFusion Studio

DreamWeaver MX

1. Has both WYSIWYG and code view

2. Code view is not as feature rich as the one in Studio

3. Round-trip editing and tie-ins with other Macromedia products

4. Requires a lot of screen real estate for best use

5. Support for FTP, RDS, WebDav* and SourceSafe

ColdFusion Studio

1. Only code view (Useless Design View)

2. Fully featured code view

3. Only basic integration with Dreamweaver

4. Streamlined for editing code, requires less screen real estate

5. Support for FTP and RDS. Some SourceSafe.

Continued….* WebDAV stands for "Web-based Distributed Authoring and Versioning". HTTP protocol extensions used edit and manage files on remote web

servers.

Dreamweaver MX vs. ColdFusion Studio (Continued…)

DreamWeaver MX1. Many Wizards to make coding

easier.2. Advanced support for Cascading

Style Sheets, as well as other programming languages like ASP, JSP and PHP

3. Runs on a Mac or Windows4. No AutoSave5. No Remote Search and Replace6. Eron’s Stability/Predictability

rating: 8.0

ColdFusion Studio1. Some wizards, but not as

complex or as useful as the ones in Dreamweaver

2. Limited support for other languages, virtually no support for style sheets (Top Style Lite included)

3. Runs only on Windows4. Has AutoSave5. Remote Search and replace via

FTP and RDS6. Eron’s Stability/Predictability

rating: 9.0

General Reasons NOT to upgrade from CF Studio to Dreamweaver MX

Cost ColdFusion Studio is more what you prefer You may have to get used to a new work flow Features from Studio which are not in Dreamweaver:

Autosave, Right-Click Menu features such as upper case, 80 column line, code templates with shortcut abbreviations, no control-shift-w to close all windows, no remote search and replace…

Dreamweaver MX can be a little quirky and sometimes the interface is “slow.”

Reasons to upgrade from CF Studio to Dreamweaver MX

General interface of Dreamweaver MX is improved over ColdFusion Studio: its more flexible, but at the same time does a pretty good job mimicking it.

Innovative features, many improvements such as better database interactions and the ability to generate common HTML forms based on your database table.

Many more ways to extend it—add behaviors, server models, extreme snippets…

Live Data view…awesome! (Like BROWSE in CF Studio, but better!)

It appears to be the way Macromedia sees the future of the IDE.

Standards Compatibility

Dreamweaver MX tries very hard to generate only the most browser compatible code. The code it generates is clean, and easy to read.

-HTML 3.2 or 4.0 (For DHTML)

-JavaScript 1.0 or JavaScript 1.2 Supports ASP, JSP, ASP.NET, PHP and ColdFusion For XML, it allows you to import Document Type Definitions

(DTDs) and schemas and also to validate XML documents.

Cost

If you already own ColdFusion Studio or any version of Dreamweaver 4, your upgrade cost will be $199. If you have Dreamweaver UltraDev, you can get the entire Studio MX suite for $399.

If you need to buy the full version of Dreamweaver MX, the cost is $399 ( Plus shipping if you get the boxed version.)

A Word About HomeSite+

This is a “slight” upgrade from ColdFusion Studio 5. New Features include:

– Support for ColdFusion MX tags/functions– A nifty file extension manager to allow you to better control

over how different types of files are handled by HomeSite+– Ability to select “always use binary transfer” for FTP.– Support for Fireworks by right clicking on the IMG tag.– A few bug fixes here and there

HomeSite+ is always included when you purchase Dreamweaver MX.

Setting your sites on Dreamweaver

One of the biggest sticking points for new users of Dreamweaver is the need to set up “sites”

This is also one of the biggest complaints about the software from ColdFusion Studio users.

When you set up a site, you specify the local server, the remote server and the testing server.

There are two methods of setting up a site: through the wizards or using normal dialog boxes.

Editing your pages

There are four views when editing: design view, live data view, code view and split view.

Demonstration of basic editing features Add a style sheet (Style Sheet view vs. Font view) Helpful hint: use the tag selector! Help features: use shift-f1 instead of f1 to get help with

a tag. (No help for functions built-in! See Resources)

“Behaviors”

Great shortcuts for doing common tasks in JavaScript and server side languages such as ColdFusion, ASP, JSP, etc.

Examples of Design behaviors include popup windows, image swaps, and popup menus.

Examples of Server Behaviors include Inserting records into a database and recordset paging…

Using Bindings

Bindings tell Dreamweaver MX where to find dynamic data

When working with dynamic data, you create bindings either by simply writing your usual code or using bindings wizards…

An example of a binding is the Query…you “bind” data from the database to a variable…

ColdFusion Specific Features

Many useful ColdFusion-specific behaviors such as updating records, inserting records,

Powerful support for exploring, building and using CFCs

Support for RDS Toolbar shortcuts ala ColdFusion Studio Drag and drop support for SQL databases ala

ColdFusion Studio The Application Tab—generates data insert and

update forms for you.

What is “Round Trip Editing”?

Round Trip Editing has to do with the tight integration between Dreamweaver and other MX products.

One of the best examples is editing of slices and images used in Dreamweaver MX in FireWorks MX.

Resources

Macromedia.Com:– Download the trial version– Help Forum:

http://webforums.macromedia.com/dreamweaver/– Getting Started Tutorials:

http://www.macromedia.com/software/coldfusion/resources/get_started/tutorials/

http://www.macromedia.com/software/dreamweaver/productinfo/tutorials/gettingstarted/

Tip of the week: highly recommended viewing from George Jardine. http://www.macromedia.com/desdev/tip/archive.html

Help for CF Functions:– http://www.dwteam.com/Tutorials/contexthelp