This document will show off the switch between the old and the new implementations of both QxColor and QxBorder.

• If you directly define a color it was not possible to re-apply this color if it depends on something like colortheming.
• You was not able to define colors objects and share them between multiple objects

• It was impossible to create cross-browser identical themed borders. The problem there is especially with IE, where you have no possibility to define a series of colours to have full control of the border look. (This is also valid for any other browser than Mozilla, currently, not just IE.)

As explained above the previous model does not use a color object directly to store informations. There was something like a “normalizer” which sits inside the property handling and converted the value to an RGB-string (which could be used as a style property internally). After you have set the new value, it was not easily possible to get a hex-value or a hsb-value for the color defined previously. You have had to reparse the value and then convert it to the desired target value.

The new model uses a color object to store the complex informations of a single color. The properties color and backgroundColor of QxWidget have been transformed to use this new model already. This means the default way to define a new color for a widget looks somewhat like the following:

myWidget.setColor(new QxColor([200,30,66]));

The array inside the constructor call contains the seperated RGB values.

QxColor also understand the old sixteen HTML color names:

• maroon
• red
• orange
• yellow
• olive
• purple
• fuchsia
• white
• lime
• green
• navy
• blue
• aqua
• teal
• black
• silver
• gray

Other web safe colors are currently not supported by their name

QxColor understand, like the old version, hex colors, read them and internally convert them to RGB. You can use the short definition like #333 or in the default way #333333.

One nice additional feature is that you can define a color by a single integer value. By example “128” means nothing more or less than [128,128,128] but is a bit shorter. Needless to say, that this only works for grayscaled colors.

The border object follows the color object style. Here comes an example:

myWidget.setBorder(new QxBorder(2, "solid", new QxColor([200,30,66])));

The first argument inside the QxBorder constructor is the border width. The second one defines the border style. The third is the color value (needs to be any value which QxColor can handle).

Available border styles:

• solid
• double
• dotted
• dashed

(more in QxBorderObject, simple continue reading ;))

With the new code you can define your (color- and border-) objects in a global data structure and share them between multiple widgets for example. This means your QxUserApplication for instance could store a internal array with the most used colors by your application. This allows you to make your application look differently without searching for the real color value strings as before.

First define some colors:

var appColors = {
  bg : new QxColor("white"),
  fg : new QxColor("#332211"),
  frame : new QxColor("676767")
};

And use them:

myWidget.setBackgroundColor(appColors.bg);
myWidget.setColor(appColors.fg);
myWidget.setBorder(new QxBorder(1, "solid", appColors.frame));

Naturally you can also do this with borders.

var appBorders = {
  frame : new QxBorder(1, "solid", appColors.frame)
};

And use them as above with the colors:

myWidget.setBorder(appBorders.frame);

As this is not enough for some guys we also have developed a dynamic updating for colors and borders. This only works if you use QxColorObject instead of QxColor and QxBorderObject instead of QxBorder.

Both new objects bring a bit overhead, so if you don’t need their additional features please use the basic types instead.

Only two things currently:

• Object Binding
• Themed Values

The basic objects (QxColor and QxBorder) only apply the styles to the object to their current value. There is no binding. If you update the border or the value if the color later they will look like before.

If you use QxColorObject and QxBorderObject instead the widgets will register themself to the color or border object and will get informed if they will be updated.

Have a look at the following code:

var myBoundedColor = new QxColorObject([20,10,100]);
myWidget.setBackgroundColor(myBoundedColor);
 
myWidget.addEventListener("click", function(e) {
  myBoundedColor.setValue([200,30,50]);
};

In this example the widget gets the background color RGB. And it will always be updated if you change the value of the color object again.

This also work with QxBorderObject like you can see here:

var myBoundedBorder = new QxBorder(1, "solid", new QxColor([200,10,20]));
myWidget.setBorder(myBoundedBorder);
 
myWidget.addEventListener("click", function(e) {
  myBoundedBorder.setTopWidth(4);
};

The widget will get a one pixel reddish border but the top width is four pixel.

The next step of the revolution is the introductions of themes (for colors and borders). Themes works with named colors. We currently use all the known system colors supported by CSS 2.1. We use their name but not their value. If we find out later that these colors are not enough already we need to add some more. But currently it seems be a good base to start with.

A short overview of the supported color values (case-insensitive).

• ActiveBorder: Active window border.
• ActiveCaption: Active window caption.
• AppWorkspace: Background color of multiple document interface.
• Background: Desktop background.
• ButtonFace: Face color for three-dimensional display elements.
• ButtonHighlight: Highlight color for three-dimensional display elements (for edges facing away from the light source).
• ButtonShadow: Shadow color for three-dimensional display elements.
• ButtonText: Text on push buttons.
• CaptionText: Text in caption, size box, and scrollbar arrow box.
• GrayText: Grayed (disabled) text.
• Highlight: Item(s) selected in a control.
• HighlightText: Text of item(s) selected in a control.
• InactiveBorder: Inactive window border.
• InactiveCaption: Inactive window caption.
• InactiveCaptionText: Color of text in an inactive caption.
• InfoBackground: Background color for tooltip controls.
• InfoText: Text color for tooltip controls.
• Menu: Menu background.
• MenuText: Text in menus.
• Scrollbar: Scroll bar gray area.
• ThreeDDarkShadow: Dark shadow for three-dimensional display elements.
• ThreeDFace: Face color for three-dimensional display elements.
• ThreeDHighlight: Highlight color for three-dimensional display elements.
• ThreeDLightShadow: Light color for three-dimensional display elements (for edges facing the light source).
• ThreeDShadow: Dark shadow for three-dimensional display elements.
• Window: Window background.
• WindowFrame: Window frame.
• WindowText: Text in windows.

As themed colors need to be updated if the theme will be changed during the site runtime it has been decided to only allow QxColorObject to be themeable.

There are some “special” styles which are additionally available in QxBorderObject:

• outset
• inset
• groove
• ridge

These are typcially colored by the browser itself and not by the user. Here you can simply leave out the third argument in the constructor call of QxBorderObject.

To make this color and border handling a bit more user friendly and more compatible to the old style, we have introduced “converter” possibilities to our property handling. This means that the value, before it will be stored, will be send to a converter method which will “transform” the value to an acceptable one for the property.

This is currently built-in for the QxWidget properties color and backgroundColor and the four color properties of QxBorder.

The method used is QxColorCache. A new global function which gets an input value, convert it to a key, looks if the key if it is already known, use the previously instanciated color object, or create a new one and store it internally.

This has some advantages:

• Already converted RGB, Hex or HSB values for a key could be re-used between multiple widgets without the user have to know something from these shared usage.
• Automatically minimize the object usage for often used colors.
• Much simpler color setups for objects.

myWidget.setColor("red");
myWidget.setColor(200,100,30);
myWidget.setColor([200,100,30]);
myWidget.setColor("#338899");
myWidget.setColor("#389");

This functionality also exist for the new border handling. The border property of QxWidget already use this new method.

All the following lines should create the same border. And all of them use the same border object, created by the first line.

myWidget.setBorder(1, "solid", "red");
myWidget.setBorder([1, "solid", "red"]);
myWidget.setBorder("1px solid red");