Jun 10

The Nokia WRT Extension for Dreamweaver CS4 project that I’ve been working on for the past few months has gone live. The extension can be downloaded from Nokia WRT Forums and Adobe Exchange.

The Nokia Extension allows users to author, validate, package and deploy Nokia WRT widgets.

The validation, packaging and deployment features were the most challenging to implement.

The validation calls the W3C Markup Validation Service which reads the DocType tag in the info.plist (widget configuration file) file to determine the DTD file that is used to validate the info.plist. Documentation on how to use the W3C Validator can be found here.

The packager used for the extension is a Java class written by Alexey Mykhaylov and his team from Xplorex; the packager is used to compress the files so that they can be deployed to Nokia S60 phones.

The deployment feature required the extension to send packaged widgets to a bluetooth paired phone. To implment this functionality I had to lean on Alexey and his team to create a Java wrapper so that I could use the BlueCove Java library.

I’d like to give thanks:

  • Andrew Odri from Konductor for helping me out with his knowledge the Dreamweaver API.
  • Alexey Mykhaylov and Xplorex for their assistance with the Java integration.
  • Scott Fegette and Chris Bank from Adobe for taking the time to answer my questions.
  • Michael Bierman and Matt Evered from Nokia for their patience and professionalism when managing the project under tight deadlines.
  • Otto Salminen and Timo Klinga from Sasken for their hard work in finding most (if not all) of my bugs.
  • Derek Zarbrook from Xplorex for acting as the contact between Nokia and Nitobi.
  • My colleague Chris Stone for his awesome UX work and managing the project from Nitobi‘s side.
May 13

One of Dreamweaver CS4′s new features is the ability to create codehints for JavaScript classes.

To create the codehints for a static javascript class you need to follow this xml structure in your codehints file:

1
2
3
4
5
6
7
 
<menu pattern="exampleObject." casesensitive="true">
	<menuitem label="identifier" icon="shared/mm/images/hintProperty.gif" source="Example Project" object="exampleObject" />
	<menuitem label="onShow" icon="shared/mm/images/hintProperty.gif" source="Example Project" object="exampleObject" />
	<menuitem label="onHide" icon="shared/mm/images/hintProperty.gif" source="Example Project" object="exampleObject" />
</menu>
<function pattern="exampleObject.openURL(String url)" casesensitive="true" icon="shared/mm/images/hintFunction.gif" source="Example Project" />
Codehinting Example for Static Classes

Codehinting Example for Static Classes

To create the codehints for an instantiated javascript class you need to follow this xml structure in your codehints file:

1
2
3
4
5
6
7
8
 
<function pattern="ExampleItem()" casesensitive="true" icon="shared/mm/images/hintClass.gif" source="Example Project" />
<menu classpattern="ExampleItem">
	<method pattern="append(ExampleItem childExampleItem)" icon="shared/mm/images/hintFunction.gif" />
	<menuitem label="ExampleItemStateChanged" icon="shared/mm/images/hintEvent.gif" />	
	<menuitem label="onSelect" icon="shared/mm/images/hintProperty.gif" />
	<method pattern="remove(ExampleItem childExampleItem)" icon="shared/mm/images/hintFunction.gif" />
</menu>
Codehinting Example for Instantiated Class

Codehinting Example for Instantiated Class

The JavaScript codehinting works perfectly in .js files; however I’ve noticed that the codehints for instantiated JavaScript classes do not display when you are working within <script> tags in .html files.

I’ve included a simple example Dreamweaver Extension that implements the exampleObject and ExampleItem JavaScript classes in the codehints. You can use the Example_CodeHints.xml file in the source as a reference point.

Link to source code download.

May 07

For the last couple of months, I’ve been tinkering around in Adobe Dreamweaver’s Extension APIs and uncovering alot of hidden or undocumented features in Dreamweaver’s API. This will be my first post in a series regarding the Dreamweaver API. In this post I will be discussing the hidden extension eventhandlers in the Dreamweaver API.

There are three eventhandlers:

  1. after save event – this is triggered when the changes to a file have been saved.
  2. before save event – this is triggered before the changes to a file have been saved.
  3. on open event – this is triggered when Dreamweaver (and when documents) are opened.

You can find the global events in Dreamweaver’s default Commands directory.

Mac: Macintosh HD:Applications:Adobe Dreamweaver CS4:configuration:Commands

Windows: C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\Commands

The eventhandler files are:

  1. _afterSave.htm
  2. _beforeSave.htm
  3. _onOpen.htm

To create your own eventhandlers you simple create a prefixed version of the eventhandler command (e.g. alert_afterSave.htm). You can include the necessary JavaScript within <script> tags in your .htm file or you can write a corresponding .js (alert_afterSave.js) file that needs to be included in your .htm file.

I’ve created a very simple example extension that demonstrates how the eventhandlers work. The .mxp installer and source code can be downloaded at the end of this post. The example extension will install into your user account’s application data folder.

Mac: Macintosh HD:Users:<userName>:Library:Application Support:Adobe:Dreamweaver CS4:en_US:Configuration:Commands

Windows: C:\Documents and Settings\<userName>\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration\Commands

Link to source code download.