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:

• Protection from hardware disaster: Whether you are developing a project alone or with a team, the last thing you want to do is lose all the project code. The repository makes sure that there's always a copy on the server. Even if the repository server dies and it wasn't backed up, it's likely that at least one developer on your team has a fairly updated copy stored locally as well.
• Protection from bad programming decisions: There's nothing like having a new member of a project accidentally delete a large portion of important system code. Can you imagine having to re-create that code quickly? Even worse, can you imagine if the person who originally created it is no longer working on the project? With a version control system, all you have to do is pull down (or revert back to) the previous version, and you're back in business.
• Shared knowledge over time: Comments in code are nice, but eventually they get deleted or no longer make sense. Being able to review the history of a codebase over time provides a much clearer idea of what the architects were thinking when they built the system. A project's history also shows where the most improvements have occurred over time and what those improvements were.

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.

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 icons are:

• The plus (+) icon: This icon shows you that you have added this file to your project, but you have not sent it back to the repository.

• The check (✓) icon: This icon indicates that you have modified this file since you brought it down from the repository.

• The blank icon: One could argue that a blank icon is not actually an icon at all, but the absence of an icon indicates that a file is in the repository and has not been modified locally.

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).

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.

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.

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.

Conclusion

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.

• Try Dreamweaver CS4
• Visit the Dreamweaver Developer Center

‹ Back

---