Adobe Dreamweaver Team Blog: Extensibility Archives

Displaying Styles in Design View

By Randy Edmunds on June 25, 2009 8:58 AM | 1 Comment

In Dreamweaver CS3, a feature was introduced to allow CSS style rendering to be turned OFF in Design View:

  View > Style Rendering > Display Styles

This allows you to quickly view the semantic structure of a page. It's also helpful when marking up or editing content inside elements that are not accessible in Design View for whatever reason.

Originally, this setting persisted until changed. But, many users turned off this setting without knowing what it was, and later would go crazy trying to figure out why their styles weren't rendering. So starting in CS4, this setting is always reset to ON when DW is restarted (which is a natural action to take when things don't make sense).

You can change it to default to OFF as follows:

1. Place the following code in a file called myStartup.htm :

<html>
<head>
<script language="JavaScript">
  dw.cssStylePalette.setDisplayStyles(false);
</script>
</head>
<body>
</body>
</html>

2. Place a copy of this file in the Configuration/Startup folder so that it gets executed every time you start DW.

Notice that I gave it a generic name in case you want to add any other commands to be executed at every startup.

Extending Dreamweaver: Getting Started

By Randy Edmunds on February 25, 2009 9:52 AM | 6 Comments

Dreamweaver was designed to be highly extensible. After deciding that you'd like to add or streamline some functionality in Dreamweaver, how do you get started?

The extension may have already been written by someone else, so first, check the Adobe Exchange. Also, search the internet because there are many third party extensions that are not uploaded to the Adobe Exchange.

The easiest way to create your first extension is to open the History Panel (Window > History), select 1 or more steps, right-click and select "Save as Command…". This creates a Command in the User Configuration folder Commands sub-folder which on WinXP is usually something like:

C:\Documents and Settings\[username]\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration\Commands

Note that the "Application Data" folder is hidden by default, so you may need to enable displaying of hidden folders in the Folder Options of the File Explorer.

Next, look around in the Application Configuration folder for code samples. On WinXP, it's usually here:

C:\Program Files\Adobe\Adobe Dreamweaver CS4\en_US\Configuration

Some tools provide an interface for users to extend it, but don't actually use it themselves. Dreamweaver uses it's own extensibility layer extensively (warning: pun attempt), so you'll find an example of almost all thousand or so JS API calls.

DW extensibility UIs are written in HTML, CSS, and JavaScript, so you already know how to do it. They are rendered with our proprietary rendering engine, so not all HTML/CSS/DOM is supported, and the rendering maybe different from current browsers, so you have to play around with it a bit.

Some aspects of the extensibility UI rendering is controlled by the DOCTYPE. Our proprietary rendering engine (note to wikipedia: it's not Opera) has evolved over the years, so be sure to target the desired DW version number in your DOCTYPE. So, to create a Property Inspector to target Dreamweaver Version 8 and above, use:

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 8.0//pi">

Note that starting with version 10, the DOCTYPE was changed to use "Adobe":

<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">

There are online Extending and API docs here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Extending/index.html
http://help.adobe.com/en_US/Dreamweaver/10.0_API_Ref/index.html

Finally, be sure to upload your extension to the Exchange if you'd like to share it with others.

Code Coloring specific Tags

By Randy Edmunds on February 4, 2009 2:03 PM | 2 Comments

Many Dreamweaver versions ago, there was an Preference setting where you could specify a unique code color for certain tags in the Code View. You can still do that, but there is no longer a UI, which means you need to edit some XML.

Take a look at the Configuration/CodeColoring/CodeColoring.xml file. At the very end of the file, you'll see some <tagGroup> tags that specify a list of one or more tag names in the tags attribute. The name field is what gets displayed in the Code Coloring Preferences Styles list so you can use the "Editing Coloring Scheme" dialog for setting the color of the group of tags.

IECC handling in Dreamweaver

By Randy Edmunds on January 15, 2009 9:58 AM | 5 Comments

By default, Dreamweaver recognizes Internet Explorer Conditional Comments (IECC) in "downlevel" mode just as any non-IE browser would. One problem caused by this is that files referenced in IECCs are not seen by the DW DOM, so the file paths are not fixed when they are moved, and they are not recognized as dependent files. See http://msdn.microsoft.com/en-us/library/ms537512.aspx for more information regarding IECCs.

In DW8 and above, the IECC support "level" can be changed. I wrote an extension for doing this:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1564018

Note that the IECC Support Level affects which markup is seen by the DW DOM, so it affects all related features. So, while it fixes the file path fixing and dependent file problem, it also affects Design View rendering. Live View is not affected.

Dreamweaver Extensibility is alive and well

By Randy Edmunds on January 7, 2009 2:45 PM | No Comments

The Adobe Exchange has extensions for Dreamweaver and other Adobe products:
http://www.adobe.com/cfusion/exchange/

A few years ago, the number of uploads and downloads of DW extensions on the Exchange slowed to a crawl because the web site was, uh, a bit challenged. OK, it sucked. But the web site has been redesigned, so please give it another look. I currently see 1,408 extensions for DW.

Also, there are many Dreamweaver extensions written by third party developers that do not get uploaded to the Exchange, so be sure to search the web for more. There are too many good developers to list them all here, and I don't want to play favorites :)

Recently in Extensibility Category

Displaying Styles in Design View

Extending Dreamweaver: Getting Started

Code Coloring specific Tags

IECC handling in Dreamweaver

Dreamweaver Extensibility is alive and well

Search

About this Archive

Categories

Monthly Archives

Pages