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.

   FOR N = O TO 256 STEP 8
     C = OCONV(N,’MCDX’)
     T := \<TD STYLE="\
     T := \background: #F000\
     T := C
     T := \;\
     T := \">&nbsp;</TD>\
   T := \</TR></TABLE>\
   DBWORK<5> = T

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?

Example of images assembled at run-timeAhhh, 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..

2 thoughts on “DesignBais Tip – Dynamic Color and Images

    • Tony,
      I have to answer the last question you asked, in parenthesis: (Are you?)
      In our case: MAYBE!!!
      We do have an ecommerce site, which is woefully out of date, NOT connected to our data, and driven by an archaic mode of uploading data and an even more restrictive ability to define product/new product pages.
      We are ALSO currently having a couple of programmers develop a robust Extranet, so that customers of our 2 stores (not the retail web customers) have full access to their accounts, order status, payment status, stock status, pricing and online ordering. As we work on this Extranet, it becomes more and more clear that our RETAIL website should be brought in house as a special case of the Extranet with a limited product offering.
      With our evaluating DB, part of the evaluation is whether or not we can use it for the Extranet/Website. It would certainly be a different site structure, one designed for the occasional user, while the main DB effort will be to replace the green screen interface for our internal use.
      The inability (or prohibitive difficulty) to use DB for the Extranet/Web work will NOT change our basic YES/NO decision on DB. Rather, if we CAN reasonably use DB for these purposes AND we decide to go with DB, then we will STOP work on the current Extranet.
      Biggest issues I see (and remember, I’m not really a DB user yet, just reading manuals, blogs and newsgroups) are dynamic menus, particularly side menus and dynamic content. We want to be able to drive this with (relatively) simple driver files and NOT have to design in DB each and every possible menu, ESPECIALLY since we want some side menu items to be USER defined (User specific, NAMED "Quick Lists" of products that that particular customer may order frequently enough to want to "Save")
      As far as dynamic CONTENT goes, the biggest need will be to restrict the offerings on a page to 1 variation of product. For instance, we might want to offer a number of different dimmer controls, each of which comes in a variety of colors, all on the same page, but allow the user to restrict the visible offerings on that page to just 1 color, for easier ordering of a room or house full of product without having to select the color for each and every offering.
      As regards the above, we will ALSO want to define similar products into groups and easily add them to page WITHOUT having to go back to a page designer for every little product change in the browsing interface.
      There you are, very long answer to a very short question!

    • It took a few days to get through this but I’m glad I did. The answer to most of your points is that the features you describe are application-defined, and yes, DesignBais allows you to create an environment which will make these features available to your users.

      I just received some information about how v4.1 will allow for dynamic forms and I am absolutely stoked. (Err, that means "really happy and excited") After I get a chance to use it, and as time permits, I’ll provide code samples in other articles. I don’t think this extends to dynamic menus but I’ll look into that as well.

      I personally am a bit reserved about using DB for internet usage, only because I lack experience in this area, but I’ll be working with W3C-compliant forms soon and providing some notes here. I hope someone else will share their experience.

      To keep these comments on-topic I’ll just re-iterate that it’s great to get the most out of the toolkit(s) but be careful about over-doing the glitz on a business site that’s intended for intranet, extranet, or internet. – Regards, T

Leave a Reply