My simple example application demonstrates that the ColorPicker allows a color to be selected tentatively by dragging the bars on the bottom three rows of the widget or by selecting a color box in the upper portion of that widget. The color selected tentatively with either of these approaches then appears in the vertical rectangle on the right. Clicking on that rectangle or on the top title bar of the ColorPicker window kicks off the "onclick" event and the selected color is applied to the canvas's background color. The source code for this sample is very brief. It is shown below and is called ColorPickerExample.lzx.
<canvas title="Very Simple OpenLaszlo ColorPicker Example" debug="true">
<include href="incubator/colorpicker.lzx" />
<simplelayout axis="y" spacing="50" />
<colorpicker title="Select Your Favorite Color"
This simple code example leads to a color picker that is demonstrated in a series of images in DHTML and in SWF8 on the three web browsers mentioned previously. A label above each screen snapshot indicates which runtime and web browser is being used. It is difficult to see major differences in the output no matter the browser or the SWF or DHTML runtime. That is exactly the point!
Initial ColorPicker in SWF8 on Firefox
Initial ColorPicker in DHTML in Firefox
Initial ColorPicker in SWF8 on Internet Explorer
Initial ColorPicker in DHTML on Internet Explorer
Initial ColorPicker in SWF8 on Google Chrome
Initial ColorPicker in DHTML on Google Chrome
Tentatively Selected Color in SWF8 on Firefox
Color Selected and Applied in SWF8 on Firefox
Color Selected and Applied in DHTML on Firefox
Color Selected and Applied in SWF8 on Internet Explorer
Color Selected and Applied in DHTML on Internet Explorer
Color Selected and Applied in SWF8 on Google Chrome
Color Selected and Applied in DHTML on Google Chrome
Although this example is very simple, it demonstrates how easy it is to use the ColorPicker from the OpenLaszlo Incubator to allow users to select colors that can be easily applied to the application's style. In this example, the background of the canvas was changed as a color was selected in the ColorPicker.