When you’re dealing with conditional formatting of objects based on enumerated values you can eliminate conditional assignments by directly mapping your ENUMs to CSS classes.

There are many cases where enumerated values are used to describe values, especially in the world of infrastructure 2.0. Availability status, for example, is a commonly used enumeration to indicate whether a load balancing related object – a virtual server, a pool, a node (server) – is available, unavailable, or in some unknown state. When building web-based dashboards or management interfaces for such solutions, the server-side code often ends up with a lot of conditional formatting statements as developers map enumerated status codes to HTML to make it look, well, a lot more attractive. I’m using iControl and infrastructure as an example – any application that requires formatting based on enumerated values may find this technique useful in reducing the amount of code (and time) spent on conditional formatting.

By directly mapping enumerated values to CSS classes, you can eliminate the conditional formatting statements in the code which reduces the overall footprint and execution time but also has the added benefit of making it easier to hand off the styling and CSS chores to a web designer without having to worry about CSS class names and documentation around formatting. This also eliminates the need for a mapping via an associative array or other dictionary-style structures in which statuses are mapped to classes.

• AVAILABILITY_STATUS_GREEN
• AVAILABILITY_STATUS_RED
• AVAILABILITY_STATUS_BLUE
• AVAILABILITY_STATUS_YELLOW
• AVAILABILITY_STATUS_GRAY
• AVAILABILITY_STATUS_NONE

I’ve defined a couple of classes to differentiate between a virtual server status (highest level) and component (pools, nodes) statuses, and then further defined a style for each availability status that sets the background color of the HTML element to the corresponding status “color”. I’ve made these specifically DIV classes rather than global classes, but that’s just me – you could just define a global CSS class for each availability status if you want. Flexibility is fun!

div.statusbar {

        width: 350px;

        margin-bottom: 20px;

        padding: 5px;

}

div.poolstatusbar {

        width: 250px;

        border: thin solid white;

        margin-left: 50px;

        margin-top: 10px;

}

div.AVAILABILITY_STATUS_GREEN {

        background: green;

}

div.AVAILABILITY_STATUS_RED {

        background: red;

}

div.AVAILABILITY_STATUS_BLUE {

        background: blue;

}

You can see that the style class names map directly to the enumerated values used by iControl (not all options are shown in sample code). In the past the PHP code to retrieve the status of virtual servers and their associated pools relied upon conditional statements to format each component based on the value of the availability_status property.

   1: foreach ($member as $item) {

   2:    $color = "green";

   3:    if ($member->availability_status == 'AVAILABILITY_STATUS_RED')

   4:        $color = "red";

   5:    else

   6:    if ($member->availability_status == 'AVAILABILITY_STATUS_BLUE')

   7:        $color = "blue";

   8:    else

   9:    if ($member->availability_status == 'AVAILABILITY_STATUS_GRAY')

  10:        $color = "gray";

  11:    echo "<div style=\"background: $color; width: 350px; padding: 5px;\">";

  12:    echo "<b>$item->address:$item->port</b><br/>";

  13:    echo "</div>";

  14: }

I’ve now removed all that code and replaced it by simply assigning the enumerated value to the class on each DIV containing the components.

   1: foreach ($member as $item) {

   2:    $status = $member->availability_status;

   3:    echo "<div class=\"poolstatusbar $status\">";

   4:    echo "<b>$item->address:$item->port</b><br/>";

   5:    echo "</div>";

   6: }

The result is what you’d expect: each component is properly formatted based on its availability status. Much cleaner. Even using a switch statement wouldn’t have cleaned up as nicely as directly mapping the enumerations to CSS classes. The resulting HTML is not very exciting but then I’m not a GUI design specialist and it just turns out that all the component statuses match up with the virtual server statuses at the moment.

What this does is remove the need to code specifically for special formatting and style and lets me (and you) focus on meaty coding rather than on the more tedious formatting code. It’s obviously very easy to do this with enumerated values but any property whose values are constrained could be used in the same way to map directly to CSS classes for formatting. I chose enums because in general they’re (1) static, (2) have a very constrained set of values, and (3) used in just about every language there is, which makes this technique very portable.

Happy coding!

Related blogs & articles:

• XAJAX Perfect Choice to Build Scalable Web Applications for Cloud Computing Environments
• AJAX and Network-Side Scripting
• Putting the network back in social networking
• Using "X-Forwarded-For" in Apache or PHP
• iControl and PHP: Updated
• If Your Users See an HTTP Error Code You’re Doing It Wrong
• I Can Has UR .htaccess File
• Automatically Removing Cookies
• Clickjacking Protection Using X-FRAME-OPTIONS Available for Firefox