ColorPicker: From the OpenLaszlo Incubator

I have blogged previously on components from the OpenLaszlo Incubator, including OpenLaszlo ToolTips (tooltips) and From the OpenLaszlo Incubator: Validators (layoutform and validators). In this blog entry, I'll show an extremely simple example of how to use the ColorPicker component from the OpenLaszlo Incubator and will show it in action in SWF and DHTML runtimes in the Firefox 3, Internet Explorer 7, and Google Chrome 0.2 web browsers.

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.

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"
                   allowdrag="false" width="275">
         <handler name="onclick">
            canvas.setAttribute("bgcolor", this.selectedColor);
         </handler>
      </colorpicker>
 
</canvas>

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.