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 your name
• 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.

Page 7 of 7

Previous Page