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.

Beyond default Server Formats

Just as any part of Dreamweaver/Ultradev can be expanded, Server Formats are no stranger to extensions. Great sites like DMXzone and Macromedia Exchange allow us to hunt for Server Formats that will take out most of our formatting pains.

Here’s the most common Server Formats available from extensions on the web today:

Numerical – numbers and digit formatting of all kinds, here’s the list:

·       General Integers – formats numbers with commas or spaces to seperate your thousands or millions! Decimal, binary, or hex formating as well to name a few.

·       Currency (Monetary) – talk about time saver! These will take all your price/money data and automatically applys the desired currency symbol (U.S. Dollar, Euro, Yen, etc.) and desired demical format (comma, space, period, etc.) in just about every popular currency you can find.

·       Date/Time – universal or local, full day and month names or their abbreviations, and year formats.

·       Percent – easy but necessary, that % sign is going to appear automatically. Decimal percentage formatting too.

Strings/Text – these are more fun than the default formats, here’s the list:

·       Newlines to <br> – each “\n” converts to HTML <br> (linebreak), or vise-versa.

·       Num of Characters – this will trim a line of text to whatever character length you limit it too be; perfect for those side nuggets/mini-content boxes (like on DMXzone) where your design only allows so many characters to show.

·       HTML as Text & Strip HTML Tags – convert HTML tags to just plain text, strip out HTML tags.

·       Reversed Text – display words backwards, fun for people who read text in a mirror!?

·       Text to Smilies – convert any smilies within any text to real smilies images (emoticons).

Server Format mini-project

I supply a batch of Server Format extension links at the end of this article. I think all of you will find the extension links usefull in at least one project or another.

This mini-project shows the use of string, date/time, integer, and currency Server Formats in action. This mini-project assums you alreay have knowledge of creating Recordsets, and knowing about Server Behaviors doesn’t hurt either.

Example database structure: table and data

    
I have setup a basic table with some fake data in MySQL, but this can be replicated in pratically any database. I am using four fields: text (“marco polo”), date/time (“2004-12-31 22:48:09”), integer (“12000”), and decimal integer (“0.125”).

1.    Start a dynamic page and setup our Recordset - here’s generally how the Recordset should look:

2.   Now, drag in one of each dynamic element into our page, and highlight one of our dynamic elements so we can choose a Server Format. Don’t forget to save the page.

3.    Upload our dynamic page to preview what shows up in our browser before we apply any Server Formats.

4.    Now, back in Dreamweaver, let’s change from Design View to Split View to see the code generated for us before any Server Formats.

5.    Since we have our decimal element highlighted, let’s apply our first Server Format in our Bindings panel, select Currency > US Dollar.

6.    You’ll notice that the Format column changes from “None” to “Currency - US Dollar”, as you can see in the following screenshot:

Quickly check what code Dreamweaver generates after applying a Server Format. It basically wraps the dynamic element with a small function that the will reformat the default decimal text before it’s displayed to our users, highlighted in the following screenshot:

7.    Now, let’s move up in the chain of our dynamic elements. Highlight our integer element and the Server Format will be Number > Default, this will generate the proper thousandths seperator for us... just how we like, in one click!

8.    Then we’ll apply a Date/Time Server Format. Highlight our dateField element and the Server Format we will choose is Date/Time > Monday, January 5^th 200414:35:18.

NOTE: Don’t be confused by what the Date/Time Server Format listing says – it’s a fake day, fake date, fake time - they are all just examples.

9.    Finally, we’ll use a Dreamweaver default Server Format, the text dynamic element – choose AlphaCase >
Captialize. Done.

10. Before we test our page, let’s quickly see what Dreamweaver added in our code up near our Recordset  code – that’s where Dreamweaver places it’s custom formatting functions.

Okay, not too heavy in code. I don’t think we need to get into detail about the code in this article, I wouldn’t want to kill the “magic” of Dreamweaver. Besides, DMXzone has a great library of articles and tutorials that are always growing. You can learn how to code in PHP/ASP/.NET and other languages at your own pace. For this article, we’re here to enjoy the ease and speed of working in our favorite visual web tool – Dreamweaver!

One thing you should take notice about the code is not all our Server Formats needed a custom function that was defined in our page. As languages like PHP/ASP grow, they incorporate shortcut functions that make all our development lives easier. You can tell easily in Dreamweaver’s code because language keywords (recognized functions) are displayed with blue text, and custom (unrecognized) functions are in default black – just like regular code.

11. Upload your page with it’s fancy Server Formats and let’s see the magic in all its glory!

Wow, better than we thought because our hands are clean (no dirty code work) and they all worked on the first try!