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.
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:
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.
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.
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.
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."
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.
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).
Figure 2. The three file status icons in SVN.
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).
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 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.
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.
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.
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.
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.
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.
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".