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