Dreamweaver MX Snippets

Packing a Snippet to be made installable using Extension Manager

Before we pack a snippet. It would be worth while learning how Dreamweaver stores snippets on your hard drive.

Open your windows explorer. Navigate to this folder

\Program Files\Macromedia\Dreamweaver MX\Configuration\Snippets

Depending on your installation the folder could vary.

You will see the folders almost match your snippets panel folders

The difference is that all predefined Snippet Folders exist in the Windows Explorer.

However any Snippets folders that you may have created or installed are missing if you are using a multiuser environment like Windows XP!

Eg. we just created Scrollable Menu Links Snippet in Sub Folder Navigation in Folder Javascript.Browse to this folder in windows explorer.

\Program Files\Macromedia\Dreamweaver MX\Configuration\Snippets\JavaScript

You will see Navigation Folder doesnot exist !

Dreamweaver MX is smart enough to store snippets created or installed by you in your Application Data folder in a multiuser environment.Browse to this directory in your windows explorer

\Documents and Settings\USERNAME\Application Data\Macromedia\Dreamweaver MX\Configuration\snippets\JavaScript\Navigation

where USERNAME is your Windows Login Name

Now you see that the file Scrollable Menu Links.csn in the sub folder Navigation and folder Javascript!

Cool so we now know how Snippets are stored. Lets learn about .mxi files that the Extension Manager uses to pack your files into code snippet extensions.

The MXI file tells Dreamweaver the information it needs to know about the extension, who created it, what it does, where it needs to be installed in the Dreamweaver directory. The file is basically an XML file and is quite simple to create and looks like this. Copy it paste it save it to the same directory that contains the csn file

<macromedia-extension name="Scrollable Menu Links" version="1.0.0" type="CodeSnippet" requires-restart="True"> <products> <product name="Dreamweaver" version="6" primary="true" /> </products> <author name="Ranjan Datta" /> <description> <![CDATA[If you have a lot of menu links and not a lot of space, this is the script to turn to. It compacts any content into a predefined area, with the content accessible via left and right scroll buttons. Browsers other than IE 4+ or NS 4+ will simply see nothing.]]> </description> <ui-access> <![CDATA[Snippets :: JavaScript :: Navigation :: Scrollable Menu Links]]> </ui-access> <files> <file source="Scrollable Menu Links.csn" destination="$dreamweaver/configuration/snippets/JavaScript/Navigation" /> </files> <configuration-changes> </configuration-changes> </macromedia-extension>

Lets look at the code step by step

<macromedia-extension
name="Scrollable Menu Links"
version="1.0.0"
type="CodeSnippet"
requires-restart="True">

Pretty self explainatory. It names the extension, defines it version, type is CodeSnippet and dreamweaver needs to be restarted after installation of the snippet through extension manager.

<products>
<product name="Dreamweaver" version="6" primary="true" />
</products>

Again product name is Dreamweaver, MX is actually version 6 and primary is true because previous versions do not have a snippet panel

<author name="Ranjan Datta" />

Heh that my Snippet, hence thats my name

<description>
<![CDATA[If you have a lot of menu links and not a lot of space, this is the script to turn to. It compacts any content into a predefined area, with the content accessible via left and right scroll buttons. Browsers other than IE 4+ or NS 4+ will simply see nothing.]]>
</description>

You can write a description to your snippet within [] of the tag <![CDATA[]]>

<ui-access>
<![CDATA[Snippets :: JavaScript :: Navigation :: Scrollable Menu Links]]>
</ui-access>

UI Access specifies how the snippet can be accessed in dreamweaver. Simple. Again its within the tag <![CDATA[]]>

<files>
<file source="Scrollable Menu Links.csn" destination="$dreamweaver/configuration/snippets/JavaScript/Navigation" />
</files>

This specifies where the Extension Manager can find the files it needs to pack the snippet into an extension and where it has to put them when someone install this snippet.

Presuming that the MXI file and CSN file are in the same directory, source can be just the file name. destination is $dreamweaver/configuration/snippets followed by the destination directory, in our case /JavaScript/Navigation. Again Dreamweaver is smart enough to install this \Documents and Settings\USERNAME\Application Data\Macromedia\Dreamweaver MX\Configuration\snippets\JavaScript\Navigation in a multi user enviroment.

So you have your CSN and MXI ready. Now you can use the extension manager to pack these into an MXP file that can be downloaded and installed by another user.

Open your extension manager, Click File -->Package Extension...

Browse to your MXI file, Click Ok

Save extension package as the same name, click save.

The extension has now been created. Install it using your extension manager and test it again.

Download the snippet

If every thing is fine. Upload it to your website for others to download.

Learn to create more extensions like objects, commands, behaviors, etc.