When a page contains multiple values that might change from time to time it is a good idea to bring the users attention to the updated value. The DataFade implements this by changing the background color of a field and fading it from yellow to the original background color that defined by the regular style.
The fading effect takes about a second and this is enough time for a human reader to focus the new field and reading the new value. The effect even seems to work if there are more values that are changed at the same time and it seems that the eyes can remember for some short time what fields have changed.
Here is a simple implementation using a horizontal scrollbar and a simple field.
 |
0 |
When the DataFade control is initialized the actual background color is detected and stored in the local orgcolor field.
If the DataFade control detects that the value has changed it sets the background color to yellow and by starting a timer the background color is changed by smoothly adopting the red, green and blue to the original color that was found when the control was initialized.
The DataFade control is implemented using a JavaScript Behavior so it can be used inside AjaxForms for displaying, but not entering values. This is because it is inheriting the DataOutput Behaviour it implements a setData(newValue) method that is detected by the ajaxForms implementation and is used for setting the new value.
See the source code of the DataFade Behavior and the DataOutput Behavior.
The Slider is implemented by the HSlider Behavior.
This page is part of the http://www.mathertel.de/ web site.
