DesignBais Tip – Dynamic Color and Images

DesignBais uses CSS styles to help us maintain a consistent style and color palatte throughout our applications. Too much variety decreases the professional look and feel (L&F) of the environment. But there are times where a little splash of color can be helpful. Displaying one or more images programmatically can also help to accentuate significant data.

As a simple example of how we can generate color at run-time, the following code loads a DBWORK field with an HTML table. The purpose of the table is to display a bar of color which gradually changes color.

SUBROUTINE GRADIANT
   $INCLUDE DBI DBI.COMMON
   T = \<TABLE CELLPADDING=0 CELLSPACING=0><TR>\
   FOR N = O TO 256 STEP 8
     C = OCONV(N,’MCDX’)
     T := \<TD STYLE="\
     T := \background: #F000\
     T := C
     T := \;\
     T := \">&nbsp;</TD>\
   NEXT N
   T := \</TR></TABLE>\
   DBWORK<5> = T
RETURN

The result is a bar of color that looks like the first image to the right. What’s happening is that we have one table with one row (<TR>) and that row has a series of cells (<TD>), each with a different color. The gap between the cells is removed with the CELLPADDING and CELLSPACING attributes on the TABLE tag. The value of the color is calculated. As many of you know from your work with DesignBais styles, we can use the RGB (Red Green Blue) values to create whatever color we like. In the above example I’m starting at #F00000 and going through #F0000FF in increments of 8. By changing the RGB values we can get other colors, as we see in these other images which are inclined toward the green and blue end of the spectrum.

This last blue to black example takes the concept further and uses text in addition to the color. I’ll leave it to you to work out the code for doing this, but essentially each cell now includes "color: white" in the style definition, and each cell displays one letter of a stream of text.

Where would you use something like this?

I think everyone who uses DesignBais knows the trick to get a bar with text going across the page: Use a text only field with style Label Header and a 100% colspan. Well, now you can get a bar that goes as long as you want, in whatever colors you want, with text in whatever format you want.

As implied by the "Goal $50,000" above, this can be a progress bar which changes lengths and/or colors depending on how far you are toward some goal.

We can use the Graph field type to display a bar graph on the page, but what if you want a simple graph that doesn’t quite fit the specs for the graph types supported in DesignBais? You can display a single table with several rows, each of which has a length corresponding to some bit of data.

What about an image?

Sure, you can generate a bar of color using whatever image editing tool you wish, then upload that image to your site, and use an Image field to display it. That doesn’t allow for customization as with the "Goal" example above, but it’s sure better than calculating the colors every time. Another Tip coming up called Alternative Graphs explains how to use other tools to generate really complex graphs using tools other than the DesignBais Graph component.

What about lots of images?

Ahhh, so rather than just displaying text in the cells, you’re thinking we can use <img> tags to create a dynamic stream of images across the page. Good idea! The image to the right includes a single text field under the available balance label. The value is set at run-time and consists of a series of <img> tags when the available bank balance is less than zero (seriously overdrawn). As another example, you might have a number of little hands or arrows pointing to important data. How about displaying some number of stars depending on how much business you do with specific customers? – It’s sometimes very important for a user to be able to quickly recognize a four star customer! Are you in the hardware business? How about displaying a series of hammers depending on how much stock is available for inventory items? Holidays coming up? Change the images to something more festive in your code. Through use of a configuration table you can change the images without changing a single line of code.

Note: The DB Image field fires an IMAGE event when clicked. The pretty text fields described above won’t fire any events, but you can also wrap <a href tags around them to allow them to launch other web pages, perhaps other DB forms.

Don’t go overboard now…

For better or worse, using the techniques shown here and in my other article about IFrames, you can add all sorts of things to your DesignBais web pages: banners and Flash ActionScript, DHTML with objects and behaviours, and all of those things that you probably should not be adding to your data entry pages. You can also add code which calls to other sites to display the weather, time of day in an analog clock, or otherwise makes use of common Web Services (see my articles on Web Services and .NET if you want more info on those topics).

But remember that you’re building "business professional" pages for processing data. You aren’t creating a flashy site for Joe and Jane Internet. (Are you?) Use your tools wisely, and try to not over-do the use of tools, gizmos, glitz, etc..