For an extension project I was working on, Design Notes seemed like a great candidate to store information about the users settings. Generally they work very well using the MMNotes object to store and retrieve data.

I wanted to store file paths as the key name to track the settings on a per file basis, and then a date for the value to indicate when a file was last edited by the extension. So to test out my reporting mechanism, I generated a demo notes file contains some sample file paths, and sample dates. I carefully made sure to match the file format for the .mno files that I've found.

However, I ran into an issue where my reporting based upon the content in the design notes file (.mno) wasn't giving me the info based upon what I knew was in the notes file from looking directly at its code. The file paths were getting truncated so that only the first 63 characters were recognized.

To see this in action, you can use the following code:

var dom = dw.getDocumentDOM();
var url = dom.URL;
var metaFile = MMNotes.open(url, true);
if (metaFile) {
// 63 character key name
var settingName = '123456789012345678901234567890123456789012345678901234567890123';
var value = 'value here';
MMNotes.set(metaFile,settingName,value);
// 70 character key name
var settingName2 = '1234567890123456789012345678901234567890123456789012345678901234567890';
MMNotes.set(metaFile,settingName2,value);
MMNotes.close(metaFile);
}

metaFile = MMNotes.open(url, true);
if (metaFile) {
var keys = MMNotes.getKeys(metaFile);
for(var i=0;i alert(keys[i]);
}
}
MMNotes.close(metaFile);

You should get an alert that displays the 63 charater key name, but not the 70 character key name.

So keepthis limitation in mind when you're working with design notes programatically through the MMNotes object.

Although Dreamweaver extensions can be written in HTML, there are a few things that the HTML within an extension cannot do, probably the most frustrating to a developing extension developer is that links do not work the way they do in HTML. For example, to create a link on a web page that delived the user to your company's help page would use code similar to the following:

<a href="http://www.example.com/help/">Help me!!!</a>

However, within a Dreamweaver extension, this code won't work. Particularily frustrating about this code is that it will actually look like a link within the extension, but clicking it won't do anything. So what's a developer to do? The Extending Dreamweaver documentation covers this situation in a round about way. For DWMX2004 it is located here:

Help > Extensions > Extending Dreamweaver > Extension APIs > How Dreamweaver processes JavaScript in extensions

This is what it says:

Dreamweaver supports the use of event handlers within links. Event handlers in links must use syntax, as shown in the following example:
<a href="#" onmousedown="alert('hi')">link text</a>

What it doesn't say here is that the href attribute is ignored. They also don't say that the onclick event isn't recognized for the <a> tag. So if you want to send your visitors over to your help page, you'd have to use the dw.browseDocument() API call within the event to open a browser and send your user onto your web site for support. Your code will look something like this (line feeds added for clarity):

<a href="#"
onmousedown="dw.browseDocument('http://www.example.com/help/');">
Help Me!!!
</a>

Now, if you want to have your logo clickable and have the user go to your home page, you'd have to do something a little different because when an lt;img> tag is wrapped with a link, the link's event's aren't triggered. To use an image as a link, within a Dreamweaver extension, you'd need to use code similar to the following (line feeds added for clarity):

<a href="#">
<img src="alert_icon.png" border="0" height="100" width="100"
onMouseDown="dw.browseDocument('http://www.example.com/help/');">
</a>

Note: Dreamweaver MX 2004, displays the hand pointer as expected when the mouse pointer is over a linked image, but Dreamweaver MX does not do this, even though the image is linked.

Just a reminder about the presentation I'll be doing on extension building for Dreamweaver on Monday Sept. 20:

Building a Better Dreamweaver, Sept 20, Chicago

A little boring given all the fun items that Paul Boon has been blogging about...

I frequently need to determine if an item is within an array. For example, in my extension CMX Create Include I have an array of file types that the extension can create includes for. When the extension loads up, in the initializeUI() function, I check the server model that the current document belongs to using dom.serverModel.getServerName();, so that within the list of avialable include types, I can automatically select the proper type of include.

So now, I need to find the position within the array that I need to select. to do this, I wrote a short utility funciton that will return the index within an array that the passed in item matches. If the item isn't present, then it returns -1. So here's the function:

function indexInArray(theArray, theValue){
var arLength = theArray.length;
for(var i=0; i
if (theArray[i] == theValue){
return i;
}
}
return -1;
}

Example usage

var mySites = site.getSites();
var mySite = 'CommunityMX';
var idx = indexInArray(mySites, mySite)
if(idx >-1){
alert('Found a great site at '+ idx );
}
else{
alert('Did not find the specified site');
}

When you're building Dreamweaver extensions, you may find that you need to obtain information about a defined site so that you can do further processing. For example, within my Retrieve FTP password extension I needed to grab the FTP password out of the settings for a specified site. Unfortunately, Dreamweaver doesn't expose an API call to grab info from a particular site, but you can work around this limitation using the preference accessing functions, dw.getPreferenceInt(), dw.getPreferenceString().

To access info for a site, let's say the default image folder, you can use: dw.getPreferenceString('Sites\\-SiteXX', 'Image Directory'); where XX is the site number that DW has assigned to the site. The site listing is in the same order as the list of sites with the Files panel, however, deleting and adding sites within a session can throw this order off within the preferences, so you can't jut take site.getSites(); and cycle through the site lists to find the index of the proper site to use in the preference API calls. So you have to do something a little different, and walk your way through the keys for the defined sites. To do this, I've writing the following function to find the index within the defined sites the specified site is located at.

function getSiteNumberFromPrefs(siteName){
var siteIdx = -1;
var numSites = dw.getPreferenceInt('Sites\\-Summary', 'Number Of Sites');

for(var i=0;i<numSites;i++){
var s = dw.getPreferenceString('Sites\\-Site'+i,'Site Name');
if(s == siteName){
siteIdx = i;
break;
}
}

return siteIdx;
}

Example code usage:

var siteIdx = getSiteNumberFromPrefs('CommunityMX');
alert(dw.getPreferenceString('Sites\\-Site'+siteIdx, 'Image Directory'));

This code first grabs the number of available sites, and then cycles through each of the defined sites until it reaches the appropriate site name, and then it sets siteIdx to the current index and then drops out of the loop, and returns the found index. If the site isn't found, then -1 is returned.

Note: The Dreamweaver MX 2004 release changed the location of the site definition preferences settings, however, the 7.0 initial version did not update the preference API calls to be able to pull from the new location. The 7.0.1 updater release corrected this issue. So be sure to check for the application version number before relying on this method. You can obtain the version of Dreamweaver that the extension is working within by using: dw.appVersion

It seems the more extensions I make for myself, as well as those that I've contracted to make for others, the more often I need to determine if the current document is within a defined site. One client required that the files their extension was to operate on had to be within a site because the operation of the extension used the site name as part of the code being added to document. So I came up with the following function:

function isInSite(){
var dom = dw.getDocumentDOM();
 return (site.getSiteForURL(dom.URL) != ');
}

Basically, this function grabs a DOM object reference for the current document, then uses the URL property of the DOM object, which stores the file URL of the document, and passes it to site.getSiteForURL() which determines the site name that the file belongs to. If it doesn't belong to a site, then an empty string is returned by site.getSiteForURL(). The value returned is then compared to an empty string and the result of that comparison is returned from the isInSite() function back to the calling code. If the file belongs to a site, then true is returned, and if it doesn't, then false is returned.

On September 20th, 6:30pm, I'll be giving a presentation on extending Dreamweaver at the Chicago Macromedia User group, so if you're in the area, please drop on by. While the location is still listed as TBD, the meetings are typically held at the Illinois Institute of Art, 180 N. Wabash Avenue downtown Chicago.

Building a Better Dreamweaver presentation description:

Dreamweaver has built in an extensibility programming interface that offers you the ability to automate some of Dreamweaver's current operations, as well as add entirely new functionality. This presentaion will introduce you to the parts of Dreamweaver that are extensibile, and guide you through the creation process required for several extensions types.

Visit the Chicago Macromedia User Group at http://www.mmugchicago.org/, for more information.