2009-09-10

ColorPicker (auroris) Bug Fix

技術提供:aries

「http://code.google.com/p/auroris/」這是一個 GWT 上的 3rd party library,負責提供還不錯的 color picker 元件。不過,在實際使用的時候,卻會有「某些時候」中間那條直立漸層色條出不來的 bug。經過一番血戰之後,終於抓到了... 設定顏色的時候少一個「#」

//ColorPicker.java 的片段
    public void onClick(Widget sender) {
        if (sender == rbHue) {
            // skip
        } else if (sender == rbSaturation) {
            if (colorMode != SliderMap.Saturation) {
                colorMode = SliderMap.Saturation;
                slidermap.setColorSelectMode(SliderMap.Saturation);
                sliderbar.setColorSelectMode(SliderBar.Saturation);
                slidermap.setOverlayColor("transparent");
                sliderbar.setLayerColor("#ffffff", SliderBar.BarC);
                sliderbar.setLayerOpacity(100, SliderBar.BarD);
            }

            slidermap.setOverlayOpacity(100 - saturation);
            /* ERROR
             * sliderbar.setLayerColor(tbHexColor.getText(), SliderBar.BarD);
             */
            sliderbar.setLayerColor("#" + tbHexColor.getText(), SliderBar.BarD);

            sliderbar.setSliderPosition(256 - (int) ((new Integer(saturation)
                    .floatValue() / 100) * 256));
            slidermap
                    .setSliderPosition(
                            (int) ((new Integer(hue).floatValue() / 360) * 256),
                            256 - (int) ((new Integer(brightness).floatValue() / 100) * 256));
        } else if (sender == rbBrightness) {
            // skip
        } else if (sender == rbRed) {
            // skip
        } else if (sender == rbGreen) {
            // skip
        } else if (sender == rbBlue) {
            // skip
        }

        if (colorMode == SliderMap.Red || colorMode == SliderMap.Green
                || colorMode == SliderMap.Blue) {
            // skip
        }
    }

其實造成「某些時候」才會出問題的原因不在這裡,而是 HTML 碼有沒有這個「
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」。拿掉的話,錯誤也就不會發生,不過,不怎麼建議用這招就是了。

測試環境:
  • GWT 1.7
  • FireFox, Chrome(IE 不會出問題)