A guide to Subversion integration
in Adobe Dreamweaver CS4

by Thomas Ortega II

On September 23, Adobe announced Creative Suite 4. Among the many products being upgraded is Dreamweaver, the long-time web development tool. Dreamweaver CS4 is a major upgrade with countless enhancements for both designers and developers.

Scott Fegette covered a few of the hidden gems of Dreamweaver CS4 in the October issue. This article explores one of the new release's most important new features: Subversion integration. This feature alone makes life much easier for developers.

The basics of version control

Subversion (SVN) is a version control system that enables teams of developers to work on projects independently, while facilitating easier synching among the individual developers. The general process of a version control system is:

  1. A repository is created on a server: Think of this as the system of record. This copy of the code is the official copy. While there may be anywhere from two to hundreds of developers working on a project, all team members agree to use this system to track the changes in the files of code they modify.
  2. Developers get a local copy of the repository: In order to work, programmers need to make changes to the source code files in the repository, so they pull down all the files needed to successfully make and test their changes.
  3. Developers make changes to the files in the local repository: Some repositories require developers to explicitly check out a file before they can make changes. Others enable developers to make changes without checking out the file.
  4. Developers send modified code back to the repository: When developers are finished programming new features or bug fixes, they put their changes back on the repository on the server.
  5. A version of the file is tracked: The new version of the file is added to the server. The modified file doesn't just overwrite the file that already exists in the repository. Instead, the differences are noted as a new version of the file. This creates a history of the file over time. Thus, any developer can then go back to any past version and look at the differences between the code.

That is basically how a version control system works, and the benefits of using one are tremendous. They include:

In this article, we cover three important areas of Subversion integration in Dreamweaver CS4: how to set up a Dreamweaver site with Subversion, how to execute basic Subversion tasks, and how to get the most out of revision support.

Setting up your Dreamweaver site to use a Subversion repository

Seasoned Dreamweaver users may recall its poor man's attempt at version control. In previous versions, the screen in Figure 1 appeared while setting up a new site.

The homegrown version control system in Dreamweaver.n

Figure 1. The homegrown version control system in Dreamweaver.

This is not Subversion integration; it is merely a homegrown system built into Dreamweaver that was designed to create minimal version control functionality. Creating a version control system is not easy. Integrating Dreamweaver with another established version control system is definitely an upgrade. Many developers use SVN every day. Now that Dreamweaver offers SVN integration, developers can be much more productive.

In the Advanced tab of your Site Definition is the Version Control category. The default value for Access is None. Click the drop-down menu and select Subversion to set up your SVN system. Look to your system administrator or SVN provider for the correct setup information for your system. Once you have entered all the information, click Test.

If you were successful, you will see a dialog box that tells you the server is accessible. If you don't see that dialog box, double-check that your setup information is correct. Without a working configuration, SVN integration is not possible.

Basic Subversion tasks from within Dreamweaver

Now that you have SVN set up, you need to either set up a new repository or connect to a specific repository with existing files. To connect to an existing SVN repository, read on. To set up a new repository, skip to the next section, "File status icons and expanded view."

Getting the latest files

To start working on an existing project in SVN, you need to move the latest files to your system. Once you have a copy on your local hard drive, you can get to work. To get the local copy, right-click your site folder, and choose Version Control > Get Latest Versions. You should see a progress box pop up to indicate that files are being transferred. This process could take quite a while if you are downloading several files.

File status icons and expanded view

Dreamweaver makes it easy to track the SVN status of your files. Next to each file icon in the File panel, you will see one of three icons that indicates that file's status (see Figure 2).

The three file status icons in SVN.

Figure 2. The three file status icons in SVN.

The three icons are:

While it's nice to see the status icons, wouldn't it be great to see the repository and local copy directories side by side? Dreamweaver has that covered. If you click the Expand icon in the File panel (highlighted in Figure 2), you can see both the repository directory and your local directory (see Figure 3).

Viewing the SVN repository and local directory side by side in Dreamweaver.

Figure 3. Viewing the SVN repository and local directory side by side in Dreamweaver.

Once you expand the view, make sure that the Repository Files toggle is switched on (highlighted in Figure 3). This gives you a side-by-side view of your repository files on the left and your local files on the right.

Adding files to the repository

Adding files to the repository is usually a manual task in SVN tools, but Dreamweaver makes that process easier. When you choose New File from within your Dreamweaver site, an Add File command is automatically stored with your file. This eliminates the manual process you must follow with many SVN toolsets.

File check in/commits

Now that you have either created new files or modified existing ones, you need to get your changes into the repository. With Dreamweaver, that's simple.

Just select the files you want to move to the repository, and then right-click and choose Check In. You can also select the files and then click the Check In button, which is the button with the arrow pointing upward and the lock icon, in the File panel.

You will then see a dialog box that gives you the option to comment on the version of the file you're committing. It is important to note any changes you made to the file. One best practice is to include a bug number or feature request ticket number in this box for easier tracking. A brief explanation of what you changed or added is also helpful for your fellow programmers. This way, they can easily go through the history of the files later and get a good idea of what changes were made and when.

When you click OK, you will see a progress box pop up to show you that your files are being added to the repository.

Revision support

One of most useful features of version control systems is revision support. Each time you check in a file, you create a new revision in the system. Whether you changed one word or several hundred lines, the repository system tracks the changes for each revision. This in turn enables you to perform some useful tasks.

To use revision support, you need a file that has been modified and checked back in a few times. Once you have found a qualifying file, right-click it and choose Version Control > Show Revisions. This pulls up the Revision History dialog box (as shown in Figure 4), which lists all the past revisions of the file by date.

Comparing multiple versions of an SVN file.

Figure 4. Comparing multiple versions of an SVN file.

As you can see, the comments you enter during check-in are listed in this box as well. Each revision is numbered so you can tell which version of the file you have. When you click a revision, it is highlighted in blue. The View button is also enabled, so you can view past versions of the files themselves.

In Figure 5, three versions of the same file are being compared. One is a past version, one is the latest version in the repository, and one is the local modified file. This feature comes in handy when management or your client wants to revive the sidebar you got rid of a few months back. With just a few clicks, you can easily retrieve it.

Comparing multiple versions of an SVN file.

Figure 5. Comparing multiple versions of an SVN file.

If you select one revision in the dialog box, the Compare To Local button becomes active. When you have two revisions selected, the Compare button becomes available instead. Clicking either button will launch a file comparison tool. But you will likely need to configure it. If so, you will see a configuration screen pop up. The easiest way to set up the tool is to click Help and follow the excellent platform-specific guidance.

Figure 6 shows you the output from the file comparison tool. As you can see, the changes are highlighted, so you can focus on the differences. This is especially helpful when you have multiple changes throughout the file and you want to find them fast.

The file comparison tool highlights changes between different versions of the same file.

Figure 6. The file comparison tool highlights changes between different versions of the same file.


As you can see, Subversion integration within Dreamweaver CS4 will have a profound impact on developers. Whether the integration introduces you to the benefits of version control for the first time or helps seasoned Subversion users work more quickly, this feature helps make Dreamweaver users more productive over time.

As mentioned during the Creative Suite 4 launch, this release is the first full development cycle after the Macromedia and Adobe merger. The synergy between these two great companies is now coming to fruition. And Dreamweaver is just one of the products that's benefiting from the combined knowledge. Be sure to download the 30-day trial of Dreamweaver CS4 and check out all the new features.

‹ Back

Tom Ortega II is a Principal at 360Conferences, where he coordinates low-cost, developer-friendly conferences such as 360Flex and 360|iDev. In addition, he keeps up his coding skills with projects at RapidNinja under the alias of "Ninja Debu".