Author Archive: Donald Booth

This Week in Dreamweaver Extensibility

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!
Donald Booth
Dreamweaver Quality Engineering

CS4 Features – Spry Widgets

Hi All,
Continuing my series on new features in CS4, today I will discuss the new Spry Widgets.
We introduced Spry Widgets in CS3 and rounded out the feature set in CS4
For those following along at home, these can be found in Insert > Spry.
We wanted to finish up the form validation widgets that we started in CS3. So for this version we added:
-Spry Validation Password
-Spry Validation Confirm
-Spry Validation Radio Group
We now provide form validation for all the main input types.
The Password widget works in conjunction with a password text field.
This widget if for users that are creating a new password and you want to ensure that it is following the strength rules.
You can use the widget to specify:
-Min and Max characters
-Min and Max numbers or letters
-Min and Max special characters
-Min and Max upper case letters.
The Password Confirm widget is used in the scenario where you have the user enter the password twice to confirm the first one.
Simply bind the Confirm widget to another text entry field and it will validate that they are equal.
The Radio Group rounds out the form widgets by allowing users to validation a radio group. The widget determines if the field is required and can check for empty and/or invalid values.
The last Spry widget we added is the Spry Tooltip. This allows users to add a tooltip to any element on the page.
We add a hook to the ‘trigger’ and then provide a DIV in which developers can add any content they want to act as a tooltip. The dev can then specify where and when the tooltip shows and can edit the default style sheet to tweak the appearance.
The one hidden thing about this feature is a menu item to hide and show the tooltips. Since they show by default for editing, it will get in the way of the basic design.
You can go to View > Show Spry Tooltips to show and hide all the tooltips.
Hope you find these new features helpful.
Thanks for reading,

The CSS PI in CS4

In this, the latest post on new features of CS4, I will be talking about the CSS Property Inspector (CSS PI).
With CS4 we continue to improve (hopefully) the CSS editing experience. We continually try to meet the needs of design pros, who know the code and want to be efficient, and those that are learning CSS, and need to understand what they are creating.
The new CSS PI is a good step towards that goal.
First, why the CSS PI? A couple of reasons:
We, and you, have been pained by ‘style1,style2′ for a few releases now. We knew we had to get rid of that. (For those of you that don’t know, those are the names of DW auto-generated classes.)
We wanted to make the distinction between editing the HTML and editing CSS properties. In the old PI, those properties were mashed together (Format wrote HTML, Size wrote CSS).
So now the text PI has 2 buttons on the far left. The HTML button shows the properties that write or change HTML: Link, Class, Format, etc.
The CSS button shows those properties that will change CSS properties: Font, Size, etc.
But in the past, DW would blindly make that change and fester the page with style1, style2. Not only that, it didn’t educate the user on what was being created on the code level.
So the PI now prompts for and helps to determine intent. If you set a Size property, DW will open a dialog that prompts for a class name. It assumes a class in this instance, but in the dialog, you have an opportunity to set an ID or contextual selector.
The Size property is added to this newly formed class and that class name shows up in the Targeted Rule field. No more style1. Hopefully, this will help new users learn about classes, IDs, CSS properties and how to properly harness the abilities of CSS.
There are many ways to design features like this and we hope we have struck a good balance between experienced user efficiency and new user education.
And yes, even we panicked a little bit when we looked at the PI and didn’t see the Link field. Hopefully the change is workflow is worth it.
Let us know either way.

Web Widgets

Happy New Year to all and here’s hoping that we work together to make 2009 successful.

Today I am going to continue the discussion on the new features in CS4. Today’s topic is Web Widgets.

We introduced Spry widgets in DW CS3 and they were well received. But we noticed many many other widgets out there, some more complicated than others, and wanted a way to let DW users easily get and insert these widgets into their pages.

Web Widgets is a couple of things. First: It is a set of widget extensions from 3rd party developers that can be installed into Dreamweaver, much like Spry widgets. Second: It is the ability to create these widget extensions.

When CS4 was released, we introduced a set of 15-20 Web Widgets from Yahoo, jQuery and Phatfusion. This allows you to install these extension into DW and insert, say, a YUI Calendar directly into a page.

These Web Widgets can be downloaded for free from the Dreamweaver Exchange. There is a new menu option in DW CS4 that takes you right to the Web Widgets Exchange. Check the gear icon to the right of the Help menu. (Note that these widgets are for CS4 and higher.)

The second big part of the Web Widgets world is the Widget Packager. The Packager is an extension that installs into DW. This then consumes a Widget Descriptor File (WDF), which is an XML file that describes all the properties of the widget. The WDF file follows the spec of the OpenAjax Alliance.

When a WDF is run through the packager, DW will create all the files needed to create a new widget object, and then it will wrap it up into an extension (and install it into DW if you wish). This extension can be uploaded to the Exchange and distributed to the world. We tried to make it easy for people to create widget objects for Dreamweaver and share them with the community. You don’t have to be a widget developer to make a Web Widget. If you can write XML, you can easily package up an existing widget (following all licence agreements of course).

So we hope that users will see the benefit of a wide range of widgets for DW and take the initiative to create and upload widgets.

The Widget Packager is available for free on Labs here.

Thanks for reading,

New Feature: Code Navigator in CS4

Good Afternoon,
In Part II of the “What’s New in DW CS4″ series, we are going to talk about Code Navigator.
Code Navigator allows users to easily see the CSS files and rules that are affecting the current selection (or insertion point) and quickly jump directly to the exact rule, right from the Design/Code View window. It also opens and navigates to other file types.
You may have noticed Code Nav already. When in Design View, if you pause the cursor or insertion point for a few seconds, an icon of a ship’s wheel will show up. Clicking on this icon opens up the Code Nav window. (This assumes you have CSS on your page.)
This Code Nav window will show all the rules associated with the current selection, organized by CSS files and internal rules. Mousing over any of these rules will show the actual declarations within the rule. Clicking on the rule will take you directly to the rule in the CSS file (or Style tag) for editing.
The Code Nav window an also be brought up by Alt+Click. Notice that the Code Nav window also has a checkbox if you want to disable the wheel icon. We also added the wheel icon to the Coding toolbar (second from the top). Clicking this will also bring up the Code Nav window.
But Code Nav is for more than CSS. It will also work for:

  • Going to Javascript files from the <script> tag.
  • Opening server-side includes. (One level deep only)
  • Dreamweaver Templates and Library items: Open the dwt from an instance.
  • iframes

You will notice that Code Nav works when in Live View (see last week’s post). There are a couple limitations when in Live View, mostly having to do with navigating to includes while in Live View, but the CSS part works well and is quite useful for navigating through rules on the real page.
Code Nav is another good feature that helps you stay in Design/View while providing contextual information without having to go to a panel. This will hopefully streamline work flows and lead to quicker CSS navigation and editing.
That is a wrap for this week. There will likely be a delay on the next post as we head into the holidays.
Wishing you well,

New Features in DW CS4: A mini-series

My name is Donald Booth and I work on the Dreamweaver Quality Engineering team here in San Francisco.
The DW blog hasn’t seen much action lately. But now that CS4 is out the door and the team has had time to straighten our collective desks, I thought I would start a mini-series and discuss the new features of CS4: explain how they work and the thinking behind them.
For the inaugural CS4 post, we will talk about the probably the best new feature in CS4: Live View.
We long knew that the Edit > PIB > Edit > PIB cycle was central to the DW web development workflow. (PIB is Preview in Browser. F12, of course)
But that constant app switching was tedious, as any constant app switching is. Thanks to the open source movement in general, and Web kit in particular, we can help solve it.

Continue reading…