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.

10 Responses to FOTD 09: Dreamweaver 8 – Coder’s Toolbar

  1. Jack says:

    This code bar is great I realy love this!! I am very happy with the css upgrade also. Lets hoop it got instand detection of the firefox brower on install and give me the choose to set it like my main test brower…(well maybe that is to much to hope for)

  2. Thanks for the good words, Jack!FYI, you can always set Firefox to your main test browser – even in DWMX 2004 – just go to the Preferences, and choose the ‘Preview in Browser’ tab. You can register any browser on your system there to be used with the Preview In Browser feature, but only two can be used with the hotkeys (Primary browser: F12, Secondary Browser: Option + F12).Autodetection is another thing entirely- depending on your system and it’s defaults, the DW installer may not catch all your browsers – but you can always add them later using the steps above. Hope this helps out!

  3. Alan Tocheri says:

    How about DW checking for firefox browser errors? And maybe with minor patches to DW 8 for when new browsers are released that come with a whole new set of rendering problems/ things they doesn’t support.Oh and I’m not sure who to suggest this to, but you seem to be the best person. Although I’ve never used dw 8 yet, I was thinking for the code hiding feature…. can developers add in an auto colour highlight? Like labelling in OSX?I think it would be a little easier to scroll through. So like, instead of mousing over and waiting for a tooltip to show you the code that is hiding and then you reading it and saying “oh yeah that’s what I want to expand” If the block of code that represents the full block of code is highlighted different colours (either random or controlled by the user).. you can scroll through condensed code thinking .. ok I need to look at orange.. or pink. It would make finding the right block of condensed code faster.I think.. please pass it on to whoever might want to hear the suggestion :) thanksoh and I love the overview you’re giving for the new products :D

  4. Hi, Alan-Interesting thought on the coloring- there isn’t a direct way to do that with code collapse through the Dreamweaver API, but it certainly sounds like it could be a handy way to differentiate between your collapsed regions visually.(and I’m glad you’re enjoying the overviews- it’s been a lot of fun writing them, too!)Your thought on Firefox error checking is interesting, tho my preference is to proof directly in the browsers themselves (always the most direct way to debug), and have Dreamweaver’s design view render as closely to the published standards as possible (something that’s also greatly improved in DW8). I find it easier to write for Firefox first and then tweak/hack around Internet Explorer, which is definitely the more …emm… twitchy of the two browsers. ;)Happy to pass the thought along of course, note you can always submit feature requests thru the following URL too:http://www.macromedia.com/go/wish/

  5. Alan Tocheri says:

    Thanks :) I hope it can be implemented at some point.. say right click on the collapsed tag (not sure what is there for a right click alrighty) but have a spot for ‘label’ or ‘colour’ and pick a colour if you don’t like the randomly generated colour.Yeah I like checking the page rendered right in the browser as well. I was referring to uh.. well an example is like on opening a document, dw checks browser support. So I always get an error about how netscape 7 doesn’t support the ‘virtual’ wrap attribute in a text area. Things like that.Thanks for the link btw. I could never find it on the site. I’ve looked a lot. Maybe I’m blind.. but it should be on each product page and on the contact page as well. I can only find site feedback and not product feedback.thanks :)

  6. Paul says:

    Scott, I’ve wracked my brain for the last hour trying to get this to work only to keep getting an error about duplicate buttons in the toolbar.It finally dawned on me why that was happening…I’d been backing up the original toolbars.xml to the same location as “Copy of toolbars.xml”. DW was trying to load two, almost identical toolbar files then when I reloaded extensions.I have not seen anyone caution about this yet! :)Please note that you should back up the file somewhere outside of DW’s sight. *smile* Then it works like a charm, just like it did for DW MX 2004. (Although, I don’t remember having to do this for that version.)–Paul

  7. Aha- that’s a great point I did NOT highlight above, thanks for raising it, Paul. My ‘best practice’ in this respect is that I usually make a copy of my entire config folder every week and move it to another disk as a backup- just in case I munch something in one of my main files. That way I can copy specific files – or the entire config directory – back over in the event my hacking goes horribly wrong.-S

  8. Davi Volpato says:

    Is possible to develop my personal Dreamweaver´s toolbar ?If it is, is there any site about it ?Tks!

  9. You bet, Davi- the toolbars.xml file noted in my post is how the toolbar itself is configured, and I’d recommend checking the online extension development docs (Menu locations: Help > Extending Dreamweaver and Help > Dreamweaver API Reference) to get started. You can customize much of Dreamweaver, the questions are really what you specifically want to do, and how much time you’ve got to explore. ;-)Hope this helps get you pointed in the right direction- best of luck!

  10. Davi Volpato says:

    Thank ya, i´ve already developed my dreamweaver´s toolbar thanx to you and a lot of documentations around.seeya, tks again.