If everyone is thinking the same, someone isn't thinking

Lori MacVittie

Subscribe to Lori MacVittie: eMailAlertsEmail Alerts
Get Lori MacVittie via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Related Topics: RIA Developer's Journal, Cloud Computing, Enterprise Mashups, Infrastructure On Demand, Cloudonomics Journal, Twitter on Ulitzer, Infrastructure 2.0 Journal, CIO/CTO Update, Married to Chocolate

Blog Feed Post

Let Your ENUMs Do the Talking with CSS

You could just define a global CSS class for each availability status if you want


As an example I’ve grabbed the availability status values possible for various objects on a BIG-IP as defined in the iControl WSDL:


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;
        background: green;
        background: red;
        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: }

imageThe 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!


More Stories By Lori MacVittie

Lori MacVittie is responsible for education and evangelism of application services available across F5’s entire product suite. Her role includes authorship of technical materials and participation in a number of community-based forums and industry standards organizations, among other efforts. MacVittie has extensive programming experience as an application architect, as well as network and systems development and administration expertise. Prior to joining F5, MacVittie was an award-winning Senior Technology Editor at Network Computing Magazine, where she conducted product research and evaluation focused on integration with application and network architectures, and authored articles on a variety of topics aimed at IT professionals. Her most recent area of focus included SOA-related products and architectures. She holds a B.S. in Information and Computing Science from the University of Wisconsin at Green Bay, and an M.S. in Computer Science from Nova Southeastern University.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.