Integrating Yahoo! UI Widgets with Backbase: Color Picker

One of the great advantages of Backbase is that it easily integrates with third-party widgets. In this example, we will demonstrate how you can combine Backbase widgets with the Yahoo! UI widget library. In particular, we will implement the Yahoo! Color Picker to allow users to change the color of the Backbase chameleon skin using the Backbase skinSettings widget.

Live Example

Integrating Yahoo! Color Picker with Backbase

The first requirement for having Yahoo! widgets work inside any web application is to include the <script> which loads the Yahoo! UI widget library:

<head>

        <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />

        <!-- Dependencies -->

        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/utilities/utilities.js" />

        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/slider/slider-min.js" />

        <!-- Color Picker source files for CSS and JavaScript -->

        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/colorpicker/assets/skins/sam/colorpicker-skin.css" />

        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/colorpicker/colorpicker-beta-min.js" />

        <style type="text/css">

                *html .yui-picker-bg {

                        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yui.yahooapis.com/2.3.1/build/colorpicker/assets/picker_mask.png', sizingMethod='scale');

                }

        </style>

</head>

Now we create a <div> that will become our color picker. When the element is placed in the DOM tree, we transform it into a Yahoo! Color Picker using the Yahoo! Color Picker constructor. Finally we add an event listener to the rgbChange event which will update the skinSettings widget, which in turn will update all Backbase chameleon skin widgets in the application to reflect the chosen color.

<div id="colorpicker" style="margin:0 15%; position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px;">

        <e:handler event="DOMNodeInsertedIntoDocument" type="text/javascript">

                var picker = new YAHOO.widget.ColorPicker(this.viewNode, {

                        images: {

                                PICKER_THUMB: "http://yui.yahooapis.com/2.3.1/build/colorpicker/assets/picker_thumb.png",

                                HUE_THUMB: "http://yui.yahooapis.com/2.3.1/build/colorpicker/assets/hue_thumb.png"

                        }

                });

                // Add the change event to update the colors

                picker.on('rgbChange', function(e){

                        var value = 'rgb(' + e.newValue.join(',')+');'

                        var target = bb.document.getElementById('skinSettings');

                        if(target){

                                target.setAttribute("normalBorder", value);

                                target.setAttribute("highlightBorder", value);

                                target.setAttribute("highlightBackground", value);

                                target.setAttribute("activeBorder", value);

                                target.setAttribute("activeBackground", value);

                                target.setAttribute("infoBorder", value);

                                target.setAttribute("infoBackground", value);

                        };

                });

        </e:handler>

</div>

Download

You can download a zipped version of the example provided on this page to try it out for yourself.

Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.

Additional Resources

For more information on integrating other third-party widgets with Backbase, refer to the following documentation:

Client Framework