FREE! Dreamweaver/Ultradev - Server (Binding) Formats Support

Normally your dynamic data consists of text but easily could be dates, time, numbers, prices, or even a common hyperlink. Reguardless of what server language and database you use, there always will come a need to alter the display of your data that comes in.

Almost everything I cover in this article stays within the Dreamweaver interface and brings out a highly underutilized feature of Dreamweaver/Ultradev - Server (Binding) Formats. There is more mouse usage than keyboard action in this article.

This article will take you through the history and basics of Server Formats and will take you through two mini-projects showing how Server Formats not only save us time - but saves you from headaches!

What are Server (Binding) Formats?

Macromedia's Dreamweaver documentation states Server Formats “enhance the display of dynamic data.” Additionally, they say “Server Formats let you apply different types of numerical, monetary, date/time, and percentage values to dynamic text.” Those statements definitely misrepresent what Server Formats are and especially how useful they really are! Here's my rendition of what the documentation should say... Server Formats help to:

1.    Stylize your dynamic data (not to be confused with CSS styling).
2.    Automatically add numerical or textual values to your dynamic data.

Where are all the Server Formats?

To see your Server Formats, you’ll need to make sure you have already:

1.    setup your Site Definition (with Testing Server).

2.    established a Connection to your database.

3.    defined at least one Recordset.

If you haven’t poked around your Bindings panel in Dreamweaver, you may have overlooked that there are two columns next to your Recordset fields; easy to overlook, especially with a small monitor. Expand the width of your Bindings panel and follow along.

The Bindings panel

Looking at the column headers in the Bindings panel, you’ll notice that the first column is titled “Source” - so Macromedia kept true to some form naming that column (remember the term “DataSource”).

Next, to the Source column, we have the “Binding” column – this is where the true meaning of Binding is and should be used. The handy Bindings column allows you to choose what the dynamic data should be binded to. By default, you’ll see “Selected Text” until you apply a CSS style or make text into a hyperlink, then automatically the Bindings column changes to reveal a dropdown for easy control to pick whether you want to bind to just the text or some HTML tag attribute – but, that’s for another article.

Now, our third column in the Bindings panel, the “Format” column is our Server Formats. This column becomes active when a dynamic data element is selected in either Code View or Design View.

Server Format types

Text is our most common dynamic data. Here are some string formats that come with Dreamweaver.

AlphaCase – this set does basic string case formatting, here’s the list:

·       Lower – formats text to pure lowercase (example: “BoBbY” -> “bobby”).

·       Upper – formats text to pure uppercase (example: “Bobby” -> “BOBBY”).

·       First Letter Upper – formats the first letter of a sentence to uppercase (example: “the brown cow” -> “The brown cow”).

·       Capitalize – formats the first letter of each word to uppercase (example: “the brown cow jumped over the moon” ->   “The Brown Cow Jumped Over The Moon”).

Trim – this set helps remove unwanted whitespace (spaces), here’s the list:

·       Left – removes whitespace from the left side (example: “     bob” -> “bob”).

·       Right – removes whitespace from the right side (example: “bob     “ -> “bob”).

·       Both – removes whitespace from both sides (example: “     bob     “ -> “bob”).

Encode – this set really is a lifesaver for converting special characters in URLs, here’s the list:

·       HTML Encode – converts all characters to their HTML character entities (example: “jon@doe.com” -> “jon@doe.com”).

·       URL Encode – converts non-alphanumeric characters to their hexadecimal format; works best for special character like quotes, periods, ampersands, and slashes – great way to encode email addresses, making them look like ignorable junk to email spiders/snaggers (example: “jon@doe.com” -> “jon%40doe%2Ecom”).

·       Raw URL Encode – converts literal characters so they don’t get interpreted as special URL delimiters, used commonly for displaying passwords with special characters.

·       HTML Decode – the reverse of HTML Encode above (example: see HTML Encode above).

·       Raw URL Decode – reverse of Raw URL Encode above.