As I continue to grow in my programming role, I always look for faster ways of accomplishing tasks. Recently I found a useful tool within Adobe Dreamweaver which will definitely help save time for not only me but for other members of the development team I am on. This tool is the ability to create SNIPPETs and then package them into an Extension to be loaded with the Extension Manager.

My teammates and I are running a large website which we do a lot of code reuse across multiple applications. In one small example, we have gone as far as creating custom tags for buttons to standardize the look and feel for our customers throughout the website. There are many attributes associated with these buttons but there are only a few that are required. Instead of trying to remember what is required, we have created a Snippet.

What is a SNIPPET anyway and where do you find it? Dreamweaver Snippets allow you to save and reuse chunks of code over and over. The Snippet will insert the custom code into the code on your page. Actually, it will insert whatever is in the Snippet into your page. This could be custom Comment Tags, custom Forms, custom Javascript, and more. You can view the Snippets within Dreamweaver by opening the Snippets tab of the code panel. To do this, choose Window then Snippets -OR- Press Shift-F9. Dreamweaver comes pre-loaded with some Snippets. These may be helpful. But what if you don't use any that are preloaded? What if you wanted to create your own? Let me show you how.

Once you have the Snippet Panel opened, you can create a new Snippet by Clicking on the New Snippet icon below the Snippets window (it looks like a file with a plus sign) -OR- Right Click within the panel and choose New Snippet. You can also Edit or Delete a Snippet and even organize your Snippets into Folders by using the other icons or Right Click Menu options.

The Snippet window allows you to name your Snippet and give it a description. The Snippet Type determines if the Snippet is inserted into your code or wrapped around a selection of code you have chosen. If you choose Wrap Selection, then you will have to include an Insert Before and an Insert After code. Once you have the information filled in, Click on OK and your Snippet is ready to be used by you.

"That was easy!" But how do you get it to be used by other people? Let me begin this section by briefly informing you of our system. We are using Windows 7, Adobe CS5 with Dreamweaver 11. The path names listed below may differ for you but the concept remains the same. You will just have to locate the files for your system.

When you follow the steps to create your Snippet, Dreamweaver creates a .csn file under your computer profile located at: \Users\{User Profile}\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\Snippets. The .csn is an XML file and you can modify it directly if you are comfortable with that. You will need this file and one more file before you are ready to share your Snippets.

The other file is called an .mxi file which is another XML file. This file is an Adobe Extension Information file which the Extension Manager will use to create the extension package to install in your Dreamweaver. You can find a sample of this file at: C:\Program Files (x86)\Adobe\Adobe Extension Manager CS5\Samples\Dreamweaver\DreamweaverBlank.mxi. Open it in a text editor to view. Here is an example .mxi from our system:

<macromedia-extension
   name="Custom Snippets"
   version="1.0"
   type="suite">

   <!-- Describe the author -->
   
   <author name="Our Team" />

   <!-- List the required/compatible products -->
   
   <products>
      <product name="Dreamweaver" version="11" primary="true" />
   </products>

   <!-- Describe the extension -->
   
   <description>
   <![CDATA[A collection of custom snippets to be shared among team members.]]>
   </description>

   <!-- Describe where the extension shows in the UI of the product -->

   <ui-access>
   <![CDATA[The Snippets will be located inside the Custom Snippets folder of the Snippets Panel.]]>
   </ui-access>

   <!-- Describe the files that comprise the extension -->
   
   <files>
      <file name="cfButton100.csn" destination="$dreamweaver/configuration/Snippets/Custom_Snippets" />
      <file name="cfButton200.csn" destination="$dreamweaver/configuration/Snippets/Custom_Snippets" />
      <file name="GROCommentSection.csn" destination="$dreamweaver/configuration/Snippets/Custom_Snippets" />
      <file name="cfMessageBox.csn" destination="$dreamweaver/configuration/Snippets/Custom_Snippets" />
      <file name="cfquery.csn" destination="$dreamweaver/configuration/Snippets/Custom_Snippets" />
   </files>

   <!-- Describe the changes to the configuration -->
   
   <configuration-changes>
   </configuration-changes>

</macromedia-extension>

To modify this file, fill in the Name, Version and Type (because I was packaging several snippets, I used "suite" as the type. For a single snippet, the correct value is "codesnippet".) The rest is optional with the exception of the Files section. This is the most important section. It details a separate tag for each Snippet you want to package together for your Extension. The name attribute is the name of the .csn file for the snippet. The destination always begins with $dreamweaver/configuration/ followed by the name of the folder(s) where the files are to be installed. In the case of snippets, you should use Snippets followed by the name of any subfolder you want to store them in. The destination folders don't need to exist. The Extension Manager creates them automatically. Also, for convenience, I copied the .csn files to the same folder as my .mxi file. Otherwise the name attribute for each .csn file needs to include the path to the file's current location.

Now you are ready to create the Extension package. Open the Extension Manager and select File - Package MXP Extension. Choose the .mxi file and then name your .mxp file (this is the packaged Extension file type). Now you can install the Snippet on any computer. Just open the Extension manager and choose Install. Select the .mxp file you want to install and your Snippets will be in the Snippet panel.

If you are on a network with multiple team members, recommend you create a folder to store all your .csn, .mxi and .mxp files together. This way all team members will have access to all the information they need.