Welcome!

PowerBuilder Authors: Chris Pollach, Yeshim Deniz, Jayaram Krishnaswamy, Kevin Benedict, Avi Rosenthal

Related Topics: PowerBuilder, .NET

PowerBuilder: Article

Gradients, Not Glitz: Methods to Modernize PowerBuilder User Experiences

Gradients add a new dimension for communication

Surprisingly few applications have used DataWindow gradients since they were introduced in PowerBuilder 10.5. Modern applications frequently have controls with gradients. They can give a fresh look to an old application. Where developers used solid colors to highlight columns, gradients add nuance, flair and more.

This article will show practical methods and guidelines for applying gradients to convey meaning, grouping, and give visual focus. It begins by introducing the basics of gradient properties. The discussion advances to many types of subtle effects for general visual interest. Examples are "soft spots" or "title bar shades," or focus indicators for rows and columns. Gradients can be used in detail and group bands and framing free form objects inside - or instead of - group boxes. Readers will see distinctive DataWindow controls like edits, checkboxes and radio buttons. Property expressions can also create data-driven effects to convey meaning in a variety of cases. Gradients can do a lot for your application when users have been getting less. They provide an extra channel to convey focus, grouping, depth and distinction in subtle and appealing ways (see Figure 1).

Figure 1

Inside PowerBuilder DataWindows, gradients come alive. You can find them in contemporary menus and their toolbars. They aren't in classic windows or other user objects, nor supported in Webforms applications, nor deployed in Appeon 6.5, nor do Richtext, graph, and OLE DataWindow presentation styles support gradients.

Gradients are among the background properties in many levels and objects. They all have similar attributes as shown in Table 1.

Table 1

Where Can DataWindows Use Them?
In the background properties of the following, you can apply gradients as shown in Figure 2:

Ÿ  DataWindow, the entire size of the control

Ÿ  Bands

-     Headers

-     Footers

-     Detail

-     Group Headers and Trailers

Ÿ  Controls

-     Rectangles

-     Group Boxes

-     Text

-     Edit

Figure 2

Gradient Properties
The kind of effect you get begins with the (Brush) Mode. There are many options starting with solid, in which only the primary color shows because the gradient color is off (see Table 2).

Table 2

Color: Primary color when mode is Solid.

Transparency: Percent inverse of opacity. Behind every good gradient stands a transparency. Over the years and very recently, I've seen developers struggle with ways to highlight their columns when they have focus. For the (feature-)rich client in PowerBuilder Classic, here's a trick. The DataWindow engine paints its edit buffer background with the primary color and overlays the painted column. Any gradient or transparency of an Edit will hide upon the control receiving focus. Assume a typical Windows Background white and a light, mid-tone buttonface DataWindow background. A column with 50% transparency will normally be dull and light up when it gets focus. Here is a small code sample for DataWindow constructor to get this effect architecturally instead of changing every DataWindow object.

// Code in a datawindow constructor event to set columns to 40% Transparency (if editable)
long ll_rc, ll, ll_pos
String ls_rc, ls_mod, ls_objlist[]
this.of_Setbase(TRUE) //PFC         all bands, visible
ll_rc = this.inv_base.of_GetObjects(ls_objlist, "column", "*", TRUE)
for ll=1 to ll_rc
ls_rc = this.Describe(ls_objlist[ll]+".tabsequence")
IF ls_rc = '0' THEN CONTINUE     //skip if no tab number


ls_rc = this.Describe(ls_objlist[ll]+".protect")
IF ls_rc = '1' THEN CONTINUE     //skip if protected
ls_mod += ls_objlist[ll]+".Background.Transparency=40 "
Next
ls_rc = this.Modify(ls_mod)

Gradient Color: Secondary color

Gradient Transparency: PowerBuilder Help says gradient transparency is "An integer in the range 0 to 100, where 0 means that the secondary (gradient) background is opaque and 100 that it is completely transparent." The transparency value limits the maximum amount that the gradient color shows. Sometimes a chosen color like Navy is too dark, so adding a lot of transparency softens it into a more useful pastel. Active Window Titlebar is prudently applied at 50% to protect the design from being overrun by an odd color theme.

Angle: Useful only with Angle gradient modes.

Focus: From 0 to 100, this sets the position within the object where the gradient is concentrated as shown in Figure 3.

Figure 3

Figure 4

Scale: See Transparency. I see no useful difference between scale and transparency (see Figure 4).

Spread: An integer in the range 0 to 100 that setts the percent of the objects' distance that the gradient goes from max to min value. Help incorrectly says, "An integer in the range 0 to 100 indicating the contribution of the second color to the blend (as a percentage)." I think of spread as the opposite of concentration.

Repetition Mode: can be 0=Count, or 1=Length. I couldn't see how this could be very useful except when a radio button's column count is greater than one (see Figure 5).

Ÿ  Repetition Count: 0=none, 1+ =evenly divided length of object

Ÿ  Repetition Length in absolute DW units

Figure 5

Guidelines for Use
Eye Catching: The Hierarchy of Visual Stimuli

The human eye tends to notice and fix on objects, preferring qualities mostly in this order:

  1. Motion,
  2. Color saturation, Hue,
  3. Brightness,
  4. Contrast

Things that blink or move (like the cursor where you insert type) grab your eye so well that many animated images on web site ads can be a nuisance. That's why people shun MSN and Yahoo (though they're learning), but like Google.

Most of my screens have muted colors and have few reds. I prefer pastels and keep to mid-tones so I have something in reserve to use when it needs to be eye-catching. The highest contrast is where the data should engage the user. There's no way to get a screen brighter when it starts out fully white.

Glitter or functional presentation - how does one tell where the line is? Ask if it makes it easier to read or understand. Does it add dimension?

Remember to maintain focus, use contrast and simplicity. This is challenging when users demand so many facts on one screen. Gradients can group sections of the layout into larger blocks that users naturally learn to look in.

Use System Colors mostly, and then make exceptions. Active Titlebar, Button Highlight and Shadow, Selected Text, Windows Text and Background can coordinate the users' chosen theme with the application.

Achieve subtlety through transparency when gradient colors cover or compete with text. When the user changes system colors, transparency can save the design.

Examples of places to use gradients in DataWindows
Background
The whole DataWindow has a vertical gradient using the system color, "Active Titlebar." Primary color is "Button face" (see Figure 6).

Figure 6

Bands
Elements of headers can have gradients.

ŸDetail bands with stacked columns group better. Wide rows have defined swim lanes (see Figure 7).

Figure 7

This invoice uses gradients with opposing focus in header and summary bands to book end the contents (see Figure 8). Note the spread is low to stay clear of text.

Figure 8

Examples of gradients in Group Boxes, Rounded Rectangles
Multiple fields will visually unify as a group when inside a boundary of a subtle rectangle made softer by a gradient (see Figure 9).

Figure 9

Examples of Gradients in Columns
By adding gradients to columns, many narrow columns gain vertical swim lanes. It helps to keep contrast by focusing the lesser-contrast away from text (opposing justification) (see Figure 10).

Figure 10

Vertical gradients in detail bands help less if each row is short. Consider alternating colors after the fashion of green-bar paper. Column backgrounds and gradients with transparency to allow alternating row color to work (see Figure 11).

Figure 11

In Figure 12, a Radio Button hides and shows DataWindows according to its selection. This acted like a tab control, so a repeating gradient simulated tabs on a tab object. The client's architecture did not support real tab objects, so this was a poor-man's tab.

Figure 12

Expressions for Gradient Properties Provide Data Distinction
Developers should already know how to highlight data to catch the user's eye. The background primary color, font color, etc., change per the expression. Edit the expression by pressing the button next to the property. The only difference with gradients is that the similar expression changes the mode to reveal the gradient. Turn it on in the painter to preview the effect and let the runtime decide when to use it. I usually prefer the visual finesse of a gradient for highlighting over a solid color. It does so by painting on a different channel than the primary background. So it need not conflict with whatever else is going on in the background. The choice of colors is greater when transparency and spread maintain contrast for readability.

In Figure 13, I highlight when a value is out of range, in the direction of its excess. For pH, it models litmus paper color red/blue.

Saturated colors are for exceptions. This makes variances from the expected easy to spot. We're all well-schooled to traffic light color schemes where red means stop. If everything is screaming red, it's little more than an eyesore.

I saw a rare Java screen integrated into a PowerBuilder window. The Java color theme was pure red and gray. "Isn't that cool?" No, it made me wince and shake my head to see it.

Checkboxes have minimal visual distinction with the tiny check. A gradient glow tied to its on-off value can clarify.

Figure 13

Figure 14

Use Gradients Functionally With Click-Sort Column Headers
The PowerBuilder Foundation Class (PFC) has a sort service for DataWindows that sorts a column when the user clicks on its label (see Figure 14). I extended this service visually to:

  1. Advertise its availability. The labels associated with columns get a vertical gradient that uses Button Highlight and Button Shadow to add dimension. A tooltip helps, too.
  2. Assure quality. Label names have the column_name suffixed with "_t". If the label departs from that convention, it will not click-sort and will look flat.
  3. Show selection. The selected label(s) will change their gradient color to the system color, selected text "Highlight". Also a triangle displays to anchor the first column sorted. (Thanks to Ken Howe of PBDR.COM for the triangle idea and code.)
  4. Show direction. The gradient focus shifts from top to bottom when the same column gets a second click. This shows that the order flips from an ascending to a descending sequence. The triangle flips, too.
  5. Use of the Control key while clicking adds a column to the sort list, typical of extended select. The second ctrl+click reverses order for that column. The third removes the column from the sort list.

Figure 15

The gradient becomes integral to making extended click-sort work by means of its visual cues.

Conclusion
Steve Jobs knew that graphics matter to users because the eye is the highest bandwidth to the brain. As a graphic effect, gradients add a new dimension for communication. Other emerging technologies, like CSS# and HTML5, are embracing the power and efficiency of gradients. This article has shown how to strengthen your PowerBuilder application with another tool in the toolbox. You don't need to be a special graphics designer to modernize your application while you guide your user's eye to the task. Gradients visually unify the presentation and add distinction to your data.

•   •   •

From a presentation to the PowerBuilder Developers Conference in Las Vegas, Nevada, October 2012.

More Stories By Jeff Wayt

Jeff Wayt is president of IOBar, Inc., a Houston, Texas, consultant and independent software vendor. He started his career in information technology in 1980, and has developed with PowerBuilder since 1998.

Comments (1)

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.