「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 不會出問題)