What Is Extending Dreamweaver?

Extending Dreamweaver means adding custom interface elements, and the extended functionality that goes along with them, to the program. If you've been to the Macromedia Exchange, you know all about this. On the Exchange, you'll find custom objects, behaviors, commands, Property inspectors, panels, and more for every purpose under the sun. You download them, you use the Extension Manager to install them, and your copy of Dreamweaver is transformedextended.

note

You've never used the Exchange? Check it out at http://www.macromedia.com/exchange/dreamweaver. You can also read all about it in Appendix D, "Submitting Extensions to the Macromedia Dreamweaver Exchange."

If you're like me, though, the Macromedia Exchange isn't enough. I often find myself unable to find the perfect extension that will make my work life easier, or my job more efficient and productive. I don't want to be limited by what other people write; I want to create my own extensions. However, I don't have years to dedicate to learning and doing that. I just want to do it as part of my real job, which is designing for the web.

Macromedia Dreamweaver is possibly the most easily and powerfully extensible piece of commercial software in common use today. The reason there is such a thriving community of extension authors submitting to the Exchange is that it doesn't take a rocket scientist to create Dreamweaver extensions, nor does it take any special software. This means that with Dreamweaver, software users can become software authors. Everyday users with a certain amount of scripting knowledge and a stout heart can author their own extensions. You aren't limited to what you can find on the Exchange. You can build custom interface elements that will meet your particular workflow needs. You can even submit them to the Exchange and become part of the extension-sharing community. My purpose in this book is to show you how to do that.

Who's On First? Confusing Terminology

One of the tricky things about starting to write software extensions is keeping track of who's doing what and for whom.

If you're used to using Dreamweaver to create web pages, you know how to create code that will become part of a web page, to be viewed in a browser and appreciated by visitors to your web site.

When you author extensions, most of what you create will never see the inside of a browser, and will never be appreciated (or underappreciated) by anyone surfing the Net.

In its documentation, Macromedia uses a strict terminology to keep confusion out of these matters. This book also uses that terminology, as follows :

• Authors write Dreamweaver objects, behaviors, commands, and so forth to customize how the program does its job.

• Users use Dreamweaver to create web pages.

• Visitors go online and view the finished web pages.

Now, you personally may be an author and a user and a visitorbut you won't be all three at the same time. When you're an author, you're creating things for users; when you're a user, you're creating things for visitors. When you're doing the exercises in this book, you're an author. When you're testing your extensions to see if they work and if they're useful, you're a user .

Get it? Got it? Good!

How to Use This Book

Here are some tips about approaching this particular book.

Who Should Read This Book

This book is not intended to teach you how to use Dreamweaver. There are plenty of good books for that. ( Inside Dreamweaver MX , published by New Riders, is a great allaround information source; The Dreamweaver Bible , published by Wiley, is another.) You should read this book if you're already using Dreamweaver successfully; have worked with prepackaged extensions; and want to start creating your own objects, behaviors, commands, and panels.

You should be comfortable working with HTML and have some knowledge of JavaScript. Maybe you're a busy web designer and can see all sorts of opportunities to streamline your workflow. Maybe you're part of your company's web team, and you want to write extensions to make everyone's jobs easier. Maybe you just love learning how things work and how to make them better, and you're all set to become the next star author on the Macromedia Exchange.

If you think you fit these criteria but aren't sure if your JavaScript skills are up to it, start by reading Appendix A, "JavaScript Primer." Although this appendix isn't intended as a complete teach-yourself-JavaScript kit, it offers a crash course on the basic concepts of JavaScript with an emphasis on those language features that will be used throughout this book. Use it as a refresher or a quick reference. If you understand everything in the appendix, you know enough to start extending Dreamweaver.

How the Book Is Structured

This book should be a teaching source for you first, and a reference source after you've learned its topics. When you're first learning how-to, it's best to go through the book from front to back because the topics are presented in order of difficulty, and some of the more advanced projects build on earlier projects.

The book is divided into three main parts :

• Part I: Objects and Behaviors: Learning the API. Part I covers the Dreamweaver Application Programming Interface (API) and how to work with it to script simple extension types that insert HTML or JavaScript code into the user document.

• Part II: Commands, Inspectors, Floating Panels: Working with the DOM. Part II covers the Dreamweaver Document Object Model (DOM) and how to use it to create extension types that alter existing code in user documents. You also delve into problem solving and strategizing.

• Part III: Appendixes. The appendixes include a quick tour of JavaScript, user interface guidelines, the procedure for creating an MXP file for easy sharing, guidelines for submitting extensions to Macromedia's Dreamweaver Exchange, online resources, and information on the companion web site.

How the Tutorials Work

For each new topic that is introduced, we'll start with an explanatory section or chapter. You will probably refer to these sections after you have read the book to learn how-to, and just want some reference material.

The explanatory section is followed by one or more tutorials:

• Practice tutorials are very simple, hands-on explorations to get you used to the underlying architecture of how each extension type works. Practice tutorials are divided into tasks that encourage you to experiment. Every extension type includes a practice tutorial.

• Workshop tutorials go step-by-step through the creation of usually simple, but potentially useful extensions. Every extension type includes at least one workshop tutorial.

What This Book Isn't

This book isn't the be-all and end-all ultimate resource for everything anyone ever wanted to know about Dreamweaver extensions. A book like that would be many times bigger than what you're now holding in your handsespecially if there were tutorials all along the waybecause there's such a lot to learn! Not every single extension type is covered; not every single tip, tool, and technique known to man is in here. What you'll get from reading this book and working through the tutorials is a good, solid foundation in extensibility and how the major kinds of extensions work, as well as lots of hands-on practice creating simple and useful extensions. You'll also learn how and where to find out more when you need to know more.

Setting Up Shop

Before you start extending, you need to collect your materials and prepare your work environment.

Choosing a Text Editor

Extending Dreamweaver involves a lot of hand coding, for which you'll need a text editor. Various text editors are available on each computer platform, from the nofrills variety to full-featured commercial applications.

Text Editors (Windows)

The full Windows version of Dreamweaver ships with Macromedia HomeSite+, an excellent text editor with all sorts of bells and whistles. (Note that HomeSite+ doesn't install automatically as you install Dreamweaver. You have to find it on the application CD and install it separately.) There are also a variety of other commercial, shareware, and freeware text editors available for Windows, including TextPad, CuteHTML, and others. Go to www.download.com and search for "text editor"you'll be overwhelmed with text editors available for download. Or, if you prefer, there's always good old NotePad.

Text Editors (Mac)

For the Mac, the most popular text editor is BareBones ' BBEdit. The Mac version of Dreamweaver ships with a copy of BBEdit, but unfortunately it's only a demo version that expires after 24 uses. If you want to keep things free, you can try BBEdit Lite instead (downloadable from www.barebones.com). For Mac OS X users, a popular shareware alternative is Pepper (www.hekkelman.com). And of course, there's always SimpleText (OS 9) or TextEdit (OS X).

Dreamweaver As a Text Editor

Don't forget, though, that Dreamweaver itself includes a handy text editor with lots of nice features such as line numbers , auto completion, code hints, syntax coloring, and even debugging. Although it may seem strange to use Dreamweaver to edit its own extensions, you can do it. With a few exceptions, Dreamweaver accesses extension files only when it's launching, so it's not trying to access the extensions as you're writing them.

You may, however, find it confusing using Dreamweaver to create extensions, and then using Dreamweaver to test and use those same extensions. Working like this, it's easy to get lost and confused and forget which part of the process you should be focusing on. Using a separate text editor (even a simple one like NotePad) makes it easier to maintain a sense of when you're developing and when you're testing.

Assembling Reference Materials

Because extending Dreamweaver involves lots of JavaScript coding, it's a good idea to have a good general JavaScript reference book handy while working. Danny Goodman's JavaScript Bible or David Flanagan's JavaScript: The Definitive Guide and JavaScript Pocket Reference are good resources; or you may have your favorite. If you'd rather use an online reference than a printed book, the Dreamweaver Reference panel is a good resource.

note

To access the Reference panel's JavaScript help, choose Window > Reference to open the panel and choose O'Reilly JavaScript Reference from the Book popup menu (see Figure 1). The information in this panel is orga-nized by JavaScript object, so you need to know something about how JavaScript's predefined objects, methods , and properties work before you can use it efficiently .

Figure 1. The Reference panel, part of the Dreamweaver online help system.

The most important reference sourceone you can't do withoutis Macromedia's Extending Dreamweaver manual. This 550-page book includes explanations of the API and the DOM, and a complete dictionary of custom objects, methods, and properties. It comes in PDF form on the Dreamweaver application CD. If you like online references, copy the PDF file to your hard drive, and keep it open in the background as you're working. If you'd rather work with a printed reference, you can order a printed copy from the Macromedia web site, or you can print the PDF file and pop it in a three-ring binder (or two). Mine always sits right next to my chair as I work.

Backing Up

Extending Dreamweaver involves making some serious changes to the program. It's possible to goof things up so that the program won't function at all. Of course, you can always reinstall the software if this happens. A simpler solution, however, is to make a backup copy of the Configuration folder (found inside the Dreamweaver application folder). If in the middle of extending, you need your original untouched Dreamweaver back in action, just remove the altered Configuration folder from the Dreamweaver application folder and replace it with your backup.

note

Warning: Never replace the Configuration folder while Dreamweaver is running. Quit the program first!

note

When restoring the original Configuration folder, make sure you're really eliminating the problem. First, delete or move the damaged Configuration folder; then put the backup copy in place. Just copying the backup over the damaged copy doesn't necessarily delete problematic files.

Setting Up Files and Folders

For efficient working, set up the following:

• Somewhere outside the Dreamweaver application folder, create a folder called " Working " for storing test files, disabled extensions, and other working files. (This is a good place to keep your backup Configuration folder, as well.)

• Create a shortcut/alias for the active Configuration folder (that is, not the backup copy), and place it in an easily accessible placeon the desktop, for instance, or in the " Working " folder. You'll need to access this folder frequently, and don't want to have to navigate to it repeatedly.

Conventions Used in This Book

This book also follows a few typographical conventions:

• A new term is set in italic the first time it is introduced.

• Program text, functions, variables , and other "computer language" are set in a monospaced , fixed-pitch fontfor example:

   var myFile = dw.browseForFileURL(  "select"  ); 

• During the exercises, when the text instructs you to add or change existing code, the new code will appear in boldface so that you can easily distinguish it from the surrounding code.

Are you excited about writing your own extensions? Do you have the lay of the land, knowing which parts of the book to tackle first? Do you have your text editor and working folders in place, and your Configuration folder backed up? If so, you're ready to rumble.