Rob Christensen

Adobe

Macromedia Dreamweaver 8 introduces a powerful new productivity feature that allows web developers and designers to quickly compare changes between files. To take advantage of this feature, however, you will need to download a third-party merge or "diff" utility and configure Dreamweaver to integrate with this program.

Once you have configured Dreamweaver 8, with just a few simple clicks, you will be able to compare files visually and understand the differences between two versions of a file. For any of you that have nervously uploaded or checked out files on a remote server, uncertain which changes might have been made previously, the file compare feature in Dreamweaver 8 may quickly become one of your favorite new features. In this article, I explain how to integrate a third-party file compare utility on both the Mac and Windows.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Tutorials and sample files:

• configure_utilities.zip (ZIP, 1K)

A third-party merge or "diff" utility such as FileMerge on Macintosh or WinMerge on Windows:

• Download WinMerge for Windows. Select the "WinMerge" link under the "Downloads" section in the left navigation area. Then, click the "Download WinMerge-2.2.4-Setup.exe" link to download the Windows Installer. I will show you how to install and configure WinMerge later in this article.
• Download XCode 2.1 that contains FileMerge for Mac OS X. I will show you how to install and configure FileMerge later in this article.

Note: FileMerge is distributed by Apple as part of the Xcode development tools which you can download for free from the Apple developer site by registering with the Apple Developer Connection (ADC). However, the latest version of Xcode requires Tiger, the latest major revision of the OSX known as Tiger (10.4).

Overview of the New File Compare Feature in Dreamweaver 8

Historically, Dreamweaver has appealed to both web designers and developers and, with few exceptions, many of the features in Dreamweaver tend to appeal to one camp or the other. Rarely, however, does a feature in the product serve the needs of both classes of user.

The file compare feature in Dreamweaver 8 is one of those rare features that has universal appeal. Whether you are tweaking CSS code for your page layout or updating your ColdFusion component code, file compare will likely become one of your favorite new tools in your web utility belt.

Difference (often referred to as just "diff") or merge utilities are very similar to simple text editors, except there are always two visible edit windows side-by-side. Each text editor typically features line numbering. When a text file is loaded in each of the two text editors, colors and other formatting are used to visually highlight differences between the files.

A couple of rules to consider when performing a file comparison include:

• File compare applications are intended to compare text files, not binary files such as images or movies. The file compare feature works well for many text file types you might edit in Dreamweaver, such as HTML, CSS, XML, ASP.NET, ColdFusion, and PHP.
• Dreamweaver 8 does not ship with a file comparison utility, but it instead allows you to integrate with many popular third-party applications—many of which are free to download. Significantly more powerful commercial applications are available such as Araxis Merge supporting advanced features such as three-way comparison, richer visual feedback, automatic merging, and folder comparison.
• Some file comparison utilities will help you merge your changes in addition to merely visualizing the differences. These applications are typically referred to as merge utilities.

Some examples of when you might want to use the file compare feature include:

1. To remind yourself of previous changes you may not have worked on for an extended period of time.
2. To help compare and understand changes made by a colleague to a file when collaborating together.
3. To verify the changes you made to a file before pushing it to the server. For example, did you leave in any extra comments or debugging code at the very bottom of the file that you may have forgotten about?

In my experience using Dreamweaver 8 so far, integrating file compare into my workflow has helped increase the quality of my code by reminding me to eliminate bloated code or debugging information. It's very easy to forget about snippets of code that you intended to remove at a later date. Fortunately, computers are much better at parsing code and highlighting changes than humans.

The following screen shot is an example of how the file compare utility, FileMerge, helps to visually compare modifications to an HTML file. In this case, the original file is displayed in the right-side text editor view and the updated version on the left side. At the bottom, FileMerge displays that it has detected two blocks of code that are different.

Figure 1. Two different versions of a document being compared in FileMerge

Downloading Third-Party Merge Utilities

A Google search for "diff" or merge utilities reveals an impressive number of applications ranging from open source options to professional grade (around $100) options. For Windows, there are a variety of free tools available, including WinDiff, WinMerge, and ExamDiff. Though any of these will suffice, I have opted to use WinMerge for this article due to its ease of use and powerful feature set. For the Mac, I recommend the utility FileMerge provided by Apple on its Development Tools website. You can download these using the links in the Requirements section of this article.

In the next sections, I will show you how to install WinMerge for Windows and FileMerge for Mac OS X.

Installing WinMerge on Windows

Follow these steps to install WinMerge on Windows. If you are a Mac OS X user, skip ahead to the section on installing FileMerge on OS X.

1. Open a browser and go to the WinMerge home page.
2. Select the WinMerge link under the Downloads section in the left navigation area.

3. Click the Download WinMerge-2.2.4-Setup.exe link to download the Windows Installer.

   

   Figure 2. Click the Download WinMerge-2.2.4-Setup.exe link to download the Windows Installer

4. A list of download servers appears. Find a server located near you and click the download icon.

   

   Figure 3. Click the download icon

5. Once WinMerge has downloaded, run the installer. Proceed through the installation wizard. The default options should be fine.

In the next section, you configure Dreamweaver to recognize WinMerge as your diff/merge utility.

Windows: Configuring Dreamweaver 8 to Recognize Your Diff/Merge Utility

Configuring Dreamweaver to detect the file compare application on Windows takes a few quick steps.

1. In Dreamweaver, Select Edit > Preferences.

2. Select the File Compare category.

   

   Figure 4. The File Compare category in the preferences

3. Click the Browse… button and specify the path of the "diff" or merge utility. See the screen shot below for the path to the EXE file.

   

   Figure 5. The File Compare category in the preferences pointing to the file compare utility executable

4. Click OK. Dreamweaver is configured to communicate with your Diff/Merge Utility.

The next section of this article covers installing and setting up a diff/merge utility on Mac OS X. If you are not a Mac user, skip to the section on Performing Your First File Compare.

Installing FileMerge on OS X

Note: FileMerge is distributed by Apple as part of the Xcode development tools which you can download for free from the Apple developer site by registering with the Apple Developer Connection (ADC). However, the latest version of Xcode requires Tiger, the latest major revision of the OSX known as Tiger (10.4). Also note XCode is approximately 750 megabytes in size.

1. Open a browser and go to the XCode home page.
2. Click the Download Xcode 2.1 link.
3. If you are not already a member, create a new account Apple Developer Connection (ADC)—it's free and quick to do.
4. After successfully logging in, click the Download button to download the file, xcode_tools_2.1dmg.
5. Open the xcode_tools_2.1.dmg file after the download has completed to decompress the developer tools disk image. Several files and folders appear inside the disk image.

6. Open the XcodeTools.mpkg package to launch the Xcode Tools Installer application.

   

   Figure 6. The Xcode Tools Installer application

7. Review the license agreement and click Continue.

   

   Figure 7. The Xcode License agreement

8. The Xcode Tools must be installed on the same volume that has OSX. Select the appropriate volume and click Continue.

   

   Figure 8. Selecting a destination for the Xcode tools.

9. On the installation type step, click the Customize button.

   

   Figure 9. On the installation type step, click the Customize button

   Xcode includes a great deal of software that is not necessary to run FileMerge. In fact, the default installation requires well over one gigabyte.

   

   Figure 10. The full list of tools included with Xcode

10. Since we are only concerned with installing FileMerge, deselect all installation options except Developer Tools.
11. Click the Install button.

Uninstalling FileMerge on OS X

 

Figure 11. Selecting only Developer Tools

Later, if you need to uninstall FileMerge for any reason, use the following steps.

Note: The current version of Xcode uses a PERL script called uninstall-devtools.pl located in the /Developer/Tools/ directory. To execute the installer, perform the following steps:

1. Open a terminal window.

2. Type sudo perl /Developer/Tools/uninstall-devtools.pl (if you installed the Developers in another location, find the script and specify the appropriate location).

   

   Figure 12. Type the command to execute the PERL script

3. Enter your system administrator password:

   

   Figure 13. Entering your system administrator password

4. The installation process begins.

   

   Figure 14. The prompt to enter your administrator password

5. You will be asked to specify the administrator password.

In the next section, I show you how to configure Dreamweaver to recognize your diff utility.

Mac: Configuring Dreamweaver 8 to Recognize Your Diff/Merge Utility

Configuring Dreamweaver to detect the file compare application you have installed on Mac is very similar to Windows, with one major difference: Instead of pointing to the application file, you must select the command-line tool that launches the diff utility.

1. In Dreamweaver, select Dreamweaver > Preferences.
2. Select File Compare in category list.

3. Click the Browse… button. On Mac, instead of browsing to the application file, Dreamweaver requires that you put it to a command-line utility that can invoke the file compare utility. In this case, browse to /usr/bin/opendiff, and click the Open button.

   

   Figure 15. Browsing to and selecting the command-line utility that can invoke the file compare utility

4. A path to the opendiff command-line utility will display. Click OK to accept changes.

   

   Figure 16. The File Compare preferences dialog box with the path to the the command-line utility that can invoke the file-compare utility

Performing Your First File Compare

Now that you've configured Dreamweaver 8 to recognize the merge WinMerge or FileMerge utility, I will show you how to perform your first file comparison. The screen shots below are taken from WinMerge, however, FileMerge is very similar and the steps for Dreamweaver are identical.

Setting Up the Scenario

First, imagine a specific use case or usage scenario where file compare might come into play. In this scenario, a coworker of mine—I'll call him Elvis—created a status page on our project site several months ago. Unfortunately, Elvis has since left the building and I have been asked to update the page. After defining a site in Dreamweaver that connects to the project web server, I download the page to my local machine. I've included the status.htm page in the sample files linked at the beginning of the article if you want to follow along. Unzip the file and upload status.htm to your remote server before proceeding.

Opening Elvis' original project page in Dreamweaver (status.htm), you will see a document that looks like Figure 17.

Figure 17. The project page Elvis created

Next, I will make a few of my own changes to the document to update the status page. Make these changes yourself if you are following along with the sample file, but be sure to upload your file to your remote server before making the changes because you will be comparing the two files in the next steps. Make the following changes:

• Change the word "Top" to "Very"
• Change the name "Elvis Presley" to "Rob Christensen"
• Change the status to "Elvis has left the building."

The time stamp on the page will automatically change since I added it to the page using the Dreamweaver Date object (Insert > Date), and it is set to automatically update every time the page is saved. If you are following along, save the file, but don't upload it to your server.

Figure 18. The page after the changes have been made

You have created a state where the local version of the file status.htm is different than the server. But what if I wanted to know exactly what was different between the file I edited and the current version on the server before I upload it?

Method 1: Performing a File Compare Using the Files Panel

The first method to compare the file is to select the local file in the Files panel and select Compare with Remote. You do this by selecting the file and then right-clicking (Control-click on Mac). Then, choose the Compare with Remote menu option.

Note: This menu item is also available with the Files panel is set to remote view but the context menu indicates "Compare with Local."

Figure 19. Selecting Compare with Remote from the contextual menu in the Files panel

Once you select the Compare with Remote option, Dreamweaver downloads the remote file and makes a temporary copy of it. Next, it launches WinMerge or FileMerge and loads both the local version of status.htm and the remote version. The local version appears on the right and the remote version appears on the left. Note: If you are using WinMerge and it asks you whether you want to ignore comparing line feed endings, click Yes. Different server platforms often add special platform-specific line endings that you can ignore for the purposes of this exercise.

Note: The screen shots below are from WinMerge. If you are using FileMerge, the user interface and buttons will be similar to those shown.

Figure 20. WinMerge showing the two versions of status.htm next to each other

As you can see, the text highlighted in yellow reflects the three changes that I made in Dreamweaver. If in WinMerge, click the Next Diff toolbar button.

Figure 21. Clicking the Next Diff button to move to the next difference between the documents

After clicking the Next Diff toolbar button, WinMerge highlights the first block of text that is different between the files with red highlights. The red highlight simply indicates a block of text that is in focus.

Figure 22. WinMerge showing the next line with a difference highlighted in red

Next, click the Diff in Current Line button. This highlights the specific differences between the two files on the current line. Notice that it highlights the Word "Top" and "Very" making it very clear that I made a local change to the file.

Figure 23. Using the Diff in Current Line button to show the specific difference between that line in the two versions of the file

Using the cursor, select the second line highlighted in red and click the Diff in Current Line button. Notice that it also picked up the name change.

Figure 24. Manually selecting a line using the "Diff in Current Line" button to show the specific difference between that line in the two versions of the file

Method 2: Performing a File Compare Using the Files Panel

The second method for invoking the file compare feature is under the File Menu. Select File > Compare With Remote. The only difference between method 1 and 2 is the location of the menu item within the user interface.

Method 3: Performing a File Compare Against Two Local Files

The file compare feature can also come in handy when comparing two files locally. For those of you that do not use a version control system and simply iterate the name of the file to store file versions, you can select two files in the Files Panel by shift clicking and selecting Compare Local Files in the context menu by right-clicking.

Method 4: Synchronization When Both Local and Remote Files Have Changed

When performing a site synchronization in Dreamweaver (Site > Synchronize Sitewide) where both the local and remote files have changed, the Synchronize preview dialog box will appear. In this dialog box, you can choose the Compare button to see (and merge) the changes into the local version and then choose to put the local version back on the remote server to resolve the conflict.

Method 5: Comparing Before Putting and Overwriting a Modified Version of a Remote File

When putting a local file, you may run into an instance where you are presented with a message stating the remote version has changed. From that dialog box, you can click the Compare button to merge any remote changes into your local version before continuing to put the file. This will help ensure that you are not overwriting someone else's changes.

Where to Go from Here

Now that you have successfully configured Dreamweaver to integrate with a third-party "diff" or merge utility, you might also consider exploring the various options in whatever diff tool you might be using. For instance, you might consider changing the colors that the application uses to indicate differences between the two files.

Also, if your diff utility supports merging, you might consider learning more about how to take advantage of this functionality. In some cases, you might find that you may want certain sections of code on the remote server as well as certain sections that you've added locally. Merge tools makes the process of selecting these pieces seamless.

About the author