Archive for February, 2009

Extending Dreamweaver: Getting Started

Posted on February 25, 2009 by Randy Edmunds | Comments (9)

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.

Editing hidden elements in Design View

Posted on February 12, 2009 by Randy Edmunds | Comments (4)

Elements can be fully or partially hidden from Design View. Here are a few techniques for exposing these types of elements to Design View so that the content can be viewed and edited.
In DW8 and later, for overflow:auto/hidden/scroll elements where the content does not fit in the containing element, Design View displays what content it can (and truncates the rest) in the element in a view-only fashion. This means that, if you try to set the selection inside the element, the entire element is selected, so the whole element itself can be edited, but not any of its contents. For this case, right-click on the element and use Element View > Full (shortcut is to double-click) to temporarily see the entire element. Use Element View > Hidden (or F5) to revert to the default view. Note that this may disrupt the layout.
Since display:none elements do not take up any space in the flow layout, Design View does not display them. Starting with CS3, you can use the Element View feature to edit display:none elements. You may need to go to Preferences > Invisible Elements and turn on display:none elements. This will show an icon in Design View that you can select to use the Element View feature. Note that just displaying the icon may disrupt the layout, so that’s why it’s off by default.
Design View also hides visibility:hidden elements, but only if they are position:absolute (AP) elements. Use the AP Elements (formerly known as Layers) Panel to toggle the visibility of these elements. Design View always displays all non-AP visibility:hidden elements for the sake of editing. They take up the same space in the flow layout, so this does not affect the layout of the page.
You can also override any CSS using in a Design-time Style Sheet if you want to always see particular elements in Design View.
Starting with CS3 (or in DW8 with an extension), another technique is to turn off rendering of CSS styles using:
  View > Style Rendering > Display Styles
This causes all content of your page to be displayed in it’s glorious unstyled semantic form. Ever wonder what someone visiting your page with a Screen Reader “sees”? This is a good approximation.
Of course, you can always switch to Code View and edit :)

Code Coloring specific Tags

Posted on February 4, 2009 by Randy Edmunds | Comments (4)

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.