FREE! Dreamweaver/Ultradev - Server (Binding) Formats
by Chris Charlton

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 need to learn how to setup your site in Dreamweaver, check out this DMXzone article:   Cornerstones of Dreamweaver Design: Setting Up Your Site .

Also, if you would like to read an article about connecting to a database, here’s a PHP/MySQL article Adding Dynamic Data (PHP/My SQL) to your site.

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.

“Bindings” panel for DW MX/MX2004, “Data Bindings” window for Ultradev.

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.

 Tip: “None” is always the default formatting. You can easily remove any formatting by changing the format back to “None”.

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.

Chris Charlton

Chris CharltonChris, Los Angeles' CSS & ActionScript guru, successfully cannonballed into web development in the late 90's. Always caught up with the latest in Flash, Dreamweaver, Fireworks, and XML, Chris authored premium articles for the largest Dreamweaver/Flash community (www.DMXzone.com) and produced WebDevDesign (iTunes featured), a popular Web Design & Development Podcast. Somewhere, Chris finds time to run an authorized Adobe user group focused around open source and Adobe technologies. Being a big community leader, Chris Charlton remains a resident faculty member of the Rich Media Insitute and lends himself to speak at large industry events, like JobStock, NAB, and FITC Hollywood.

Brain cycles from Chris are always Web Standards, Flash Platform, and accessibility.

See All Postings From Chris Charlton >>

Place your review about FREE! Dreamweaver/Ultradev - Server (Binding) Formats




You must me logged in to write a review
Reviews

Be the first to place a review