Posts in Category "Extensibility"

Packaging widgets with the Adobe Widget Browser

This tutorial by Scott Richards on the Adobe Developer Connection shows how to package an existing HTML and JavaScript widget using the Adobe Widget Browser so that it can be shared with other users of the Widget Browser. Read the full article here:

http://www.adobe.com/devnet/dreamweaver/articles/packaging-widgets-with-widget-browser.html

CS5 Updates to Style Rendering Toolbar

In Dreamweaver CS5, the Design View Style Rendering Toolbar was given a couple new features.

Note that the Style Rendering Toolbar is not displayed by default, so you may need to turn it on using the View > Toolbars menu.

Text Size

These are buttons to quickly adjust the font size on the page. This is a temporary adjustment to emulate font zooming as done in browsers so you can quickly see how this may affect the layout of your page.

Increase, reset, and decrease text size buttons

  • Increase Text Size (by 15%)
  • Reset Text Size to original size
  • Decrease Text Size (by 15%)

Pseudo-class Rendering

These radio buttons are used to temporarily change the filtering of CSS pseudo-class styles in your page. By default, browsers display the :link styles and hide all of the other pseudo-class styles until a certain action takes place. This is a temporary change in the way styles are cascaded so you can quickly see how the other pseudo class styles are rendered in your page.

Pseudo class buttons

  • :l – :link
  • :v – :visited
  • :h – :hover
  • :a – :active
  • :f – :focus

Notice that it’s not possible to hover over more than 1 link at a time, so this feature can cause your page to render in a state that can never be seen in a browser. This is just for doing a quick, temporary check of how styles are rendered, not to represent valid link states in your page.

All of the Style Rendering Toolbar functionality is also available through the View > Style Rendering menu.

Dark Background Color in Dreamweaver Code View

In Dreamweaver, you can manually change the Code Coloring colors that are displayed in Code View in the Code Coloring Category of the Preferences dialog.

This is easy when you just want to tweak a few colors, but changing your entire coloring scheme to a dark background requires changing many different settings, which can be a lot of work.

Fortunately, I found the Dark Code Colorization for Dreamweaver extension written by Tom Sramek which does the work for you. Thank you for sharing, Tom.

This Week in Dreamweaver Extensibility

Hi,
The Dreamweaver team is happy to announce the release of 3 extensions this week!
We got feedback on a number of issues that we could solve via extensions, so we packaged them up.
First is the HTML5 pack for Dreamweaver CS3 and CS4. We released a version for CS5 only and we heard from users that they wanted it too. This extension contains the code hinting for:

  • New HTML5 tags
  • New attributes and values for existing tags.
  • Many CSS3 features.
  • Some -moz and -webkit CSS properties.

Multi-screen Preview, Media Queries and Starter Layouts were not included since they were not fully backwards compatible.
So hopefully this will help DW users get into all the new HTML5 goodies.
Second, some CS5 users were sad to see the Validator feature go away. We got a lot of requests for this feature, so we packaged up the files to reinstate it.
After installing, you will get the old File > Validate > Markup back in the menu and the Results panel.
Fair warning: We removed it because it wasn’t totally accurate, so check with the W3C before you go live. People like this feature to find bugs in product, before they get to W3C.
And lastly, DW CS4 users that are trying out the Widget Browser, and specifically the new Spry UI widgets are getting a warning about missing widget code. DW CS4 isn’t recognizing these new widgets as Spry widgets. So we made an extension with a new translator that recognizes the new widgets and suppresses the warning.
So we hope that these new extensions will solve some issues for users. Let us know if you have other things you would like to see. We read every e-mail that comes through the wish list and it is how we saw these issues come up, so let us know!
Thanks,
Donald Booth
Dreamweaver Quality Engineering

Dreamweaver CS5 HTML5 Pack is now available for download

For more information, see Adobe Labs:
http://labs.adobe.com/technologies/html5pack/

Looking for Old Features that have been removed from Dreamweaver?

The Dreamweaver product sometimes removes old features that are no longer used enough to justify their maintenance cost. If the feature can be still be provided as an Extension, the the DW Team tries to provide that code on an “as is” (i.e. unsupported) basis.
Start by looking in this folder to find some old Server Models:

  [install-dir]/configuration/DisabledFeatures/

Also, check the Dreamweaver Exchange:
http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=3
Then search for the Feature name. For example, you can find the old table-based Starter Pages here:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1915526
Are there any other old features that you’d like to be able to install as an extension?

Displaying Styles in Design View

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

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

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 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.