FOTD 09: Dreamweaver 8 – Coder’s Toolbar

Dreamweaver is becoming much more friendly to hand-coders these days- with v8 introducing a new Coder’s Toolbar that runs vertically along the left of your document window in Code View. Sure, toolbars like this have been a staple of many other code-centric editors for some time, but given a large theme of the Studio 8 release has been expressiveness and workflow improvement, it makes sense for Dreamweaver to start shoring up gaps in this respect. Let’s take a look.


Little exploration is required to find the Coder’s Toolbar, just open a document and switch into either Split View or Code View- and you’ll find it running right down the left margin of your window. You can, of course, hide and display this toolbar as needed- and on a window-by-window basis.

coder_toolbar.jpg

Let’s step through the buttons that are displayed by default (starting from top to bottom) to give you an idea of what you can do with this toolbar out of the box.

  • Open Document
    (menu button, to switch between currently open documents)

  • Collapse Full Tag
    (Code Collapse feature)
  • Collapse Selection
    (Code Collapse feature)
  • Expand All
    (Code Collapse feature)
  • Select Parent Tag
  • Balance Braces
  • Show Line Numbers
    (toggle on and off)
  • Highlight Invalid HTML
    (toggle on and off)
  • Apply Comment
    (menu button, containing the following)
    • Apply HTML Comment
    • Apply /* */ Comment
    • Apply // Comment
    • Apply ‘ Comment
    • Apply Server Comment (conditional- based on server model of current doc)
  • Remove Comment
  • Wrap Tag
    (opens ‘Wrap Tag’ dialog for currently selected tag)
  • Recent Snippets
    (Menu button, listing recently used snippets for quick insertion)
  • Indent Code
  • Outdent Code
  • Format Source Code
    (Menu button, containing the following)
    • Apply Source Formatting
    • Apply Source Formatting to Selection
    • Code Format Settings
    • Edit Tag Libraries

And as you’d expect- the Coder’s Toolbar is fully customizable and extensible as is just about every other aspect of Dreamweaver. You can find the XML configuration file for the Coder’s Toolbar at the following location:(Dreamweaver Application Directory)/Configuration/Toolbars/Toolbars.xmlOnce you open up this Toolbars.xml config file and scroll down to the ‘Code view toolbar’ section, you’ll see some ‘hidden features’ as well- commented out in the XML source. There were so many feature candidates for this toolbar, the product engineers couldn’t fit them all in- so had to make some choices for real-estate’s sake. But you can re-enable as you see fit. The ‘hidden’ buttons are as follows:

  • Go To Line

  • Word Wrap
    (toggle on and off)
  • Show Hidden Characters
  • Syntax Coloring
  • Auto Indent
  • Code Conversion
    (menu button, containing the following)
    • Convert Tabs to Spaces
    • Convert Spaces to Tabs
    • Remove All Tags
    • Convert Lines to Table
    • Add Line Break
    • Convert to Uppercase
    • Convert to Lowercase
    • Convert Tags to Uppercase
    • Convert Tags to Lowercase

By simply editing the Toolbars.xml file (always make a backup first just in case you screw up!) you can reorder the buttons as you see fit, add new ones, uncomment the ‘hidden’ options to expand the features- customizing the toolbar is a snap. Seriously. If you add some really cool custom features of your own, you can always package ‘em up as an MXP to be distributed and installed via the Extension Manager, too. Share and share alike!So if you’re a hand-coder like me, who prefers having more options close at hand while typing in Code View than were available in earlier versions of Dreamweaver- the new Coder’s Toolbar will be helpful and flexible indeed- and quite a familiar sight if you’re jumping in from other code-centric applications. A long awaited, much needed, and very much appreciated addition, in my opinion. Hope you like it too.