2014-01-13 32 views
0

我在GWT中設置FormPanel的backgroundcolor時遇到了問題。 我發現它可以改變backgroundcolor與下面的代碼片段。 所以我在構造函數中更改面板背景添加了一行:GWT:啓動程序後的FormPanel的SetBackgroundColor

this.fpDefaultColorBlack.getElement().getStyle().setBackgroundColor("#000000"); 

(this.fpDefaultColorBlack是FormPanel中)

我的問題是,開始我的計劃後右,面板backgroundColor時其默認的顏色,只有當我與這個FormPanel進行交互時,它的顏色會發生變化。

有什麼辦法刷新面板?我正在尋找一個解決方案几個小時...

btw .:使用的所有組件來自lib:com.extjs.gxt.ui.client.widget 這裏是它的實際外觀預覽: http://www.directupload.net/file/d/3503/hq6pii62_png.htm

這是整個類的代碼:

package de.rwthaachen.imib.cua.client.imageAnnotation; 


    public class ColorPickerDialog extends Window{ 

/** ToolBoxPanel to be able to return the color from this window */ 
private ToolBoxPanel tbp; 
/** Color in hexadecimal-format */ 
private String selectedColor; 
/** FormPanel, which is used to show the current selectedColor */ 
private FormPanel colorVisualization; 
/** Slider to change the red-value of selectedColor (0-255)*/ 
private Slider sliderRed; 
/** Slider to change the green-value of selectedColor (0-255)*/ 
private Slider sliderGreen; 
/** Slider to change the blue-value of selectedColor (0-255)*/ 
private Slider sliderBlue; 
/** NumberField to show the sliders values (0-255)*/ 
private NumberField nfRed; 
/** NumberField to show the sliders values (0-255)*/ 
private NumberField nfGreen; 
/** NumberField to show the sliders values (0-255)*/ 
private NumberField nfBlue; 
/** Listener for Default-Colors(onclick) */ 
private Listener<BaseEvent> lFormPanelListener; 

/** red-value of selectedColor*/ 
private int redValue; 
/** green-value of selectedColor*/ 
private int greenValue; 
/** blue-value of selectedColor*/ 
private int blueValue; 
/** Button to save changes and return to the ToolBoxPanel*/ 
private Button btnOK; 
/** Button to close the window without saving */ 
private Button btnCancel; 

private FormPanel fpDefaultColorBlack; 
private FormPanel fpDefaultColorWhite; 
private FormPanel fpDefaultColorRed; 
private FormPanel fpDefaultColorGreen; 
private FormPanel fpDefaultColorBlue; 

public ColorPickerDialog(ToolBoxPanel tbp, String color){ 
    super(); 
    this.tbp = tbp; 
    this.selectedColor = color; 

    this.initMainWindow(); 

    this.initComponents(); 
} 

private void initMainWindow(){ 
    this.setSize(290, 230); 
    this.setLayout(new AbsoluteLayout()); 
    this.setResizable(false); 
    this.setModal(true); 
    this.setBlinkModal(true); 

} 

private void initComponents(){ 
    this.updateColorRGB(); 
    this.initFormPanelListener(); 

    /* *************************** 
    *   RED 
    * **************************/ 
    Label lblRed = new Label("Red:"); 
    lblRed.setWidth(50); 
    this.add(lblRed, new AbsoluteData(6, 6)); 

    this.sliderRed = new Slider(); 
    this.sliderRed.setMinValue(0); 
    this.sliderRed.setMaxValue(255); 
    this.sliderRed.setValue(this.redValue); 
    this.sliderRed.setIncrement(1); 
    this.sliderRed.setWidth(150); 
    this.sliderRed.setMessage("{0}"); 
    this.sliderRed.addListener(Events.Change, new Listener<SliderEvent>(){ 
     @Override 
     public void handleEvent(SliderEvent be) { 
      // Set redValue and nfRed to the sliders value and update the colorPanels color 
      redValue = sliderRed.getValue(); 
      nfRed.setValue(redValue); 
      updateColorHex(); 
     } 
    }); 
    this.add(sliderRed, new AbsoluteData(50,6)); 

    this.nfRed = new NumberField(); 
    this.nfRed.setWidth(30); 
    this.nfRed.setReadOnly(true); 
    this.nfRed.setValue(this.redValue); 
    this.add(this.nfRed, new AbsoluteData(210,6)); 


    /* *************************** 
    *   GREEN 
    * **************************/ 
    Label lblGreen = new Label("Green:"); 
    lblGreen.setWidth(50); 
    this.add(lblGreen, new AbsoluteData(6, 34)); 

    this.sliderGreen = new Slider(); 
    this.sliderGreen.setMinValue(0); 
    this.sliderGreen.setMaxValue(255); 
    this.sliderGreen.setValue(this.greenValue); 
    this.sliderGreen.setIncrement(1); 
    this.sliderGreen.setWidth(150); 
    this.sliderGreen.setMessage("{0}"); 
    this.sliderGreen.addListener(Events.Change, new Listener<SliderEvent>(){ 
     @Override 
     public void handleEvent(SliderEvent be) { 
      // Set greenValue and nfGreen to the sliders value and update the colorPanels color 
      greenValue = sliderGreen.getValue(); 
      nfGreen.setValue(greenValue); 
      updateColorHex(); 
     } 
    }); 

    this.add(sliderGreen, new AbsoluteData(50,34)); 

    this.nfGreen = new NumberField(); 
    this.nfGreen.setWidth(30); 
    this.nfGreen.setReadOnly(true); 
    this.nfGreen.setValue(this.greenValue); 
    this.add(this.nfGreen, new AbsoluteData(210,34)); 

    /* *************************** 
    *   BLUE 
    * **************************/ 
    Label lblBlue = new Label("Blue:"); 
    lblBlue.setWidth(50); 
    this.add(lblBlue, new AbsoluteData(6, 62)); 

    this.sliderBlue = new Slider(); 
    this.sliderBlue.setMinValue(0); 
    this.sliderBlue.setMaxValue(255); 
    this.sliderBlue.setValue(this.blueValue); 
    this.sliderBlue.setIncrement(1); 
    this.sliderBlue.setWidth(150); 
    this.sliderBlue.setMessage("{0}"); 
    this.sliderBlue.addListener(Events.Change, new Listener<SliderEvent>(){ 
     @Override 
     public void handleEvent(SliderEvent be) { 
      // Set blueValue and nfBlue to the sliders value and update the colorPanels color 
      blueValue = sliderBlue.getValue(); 
      nfBlue.setValue(blueValue); 
      updateColorHex(); 
     } 
    }); 

    this.add(sliderBlue, new AbsoluteData(50,62)); 

    this.nfBlue = new NumberField(); 
    this.nfBlue.setWidth(30); 
    this.nfBlue.setReadOnly(true); 
    this.nfBlue.setValue(this.blueValue); 
    this.add(this.nfBlue, new AbsoluteData(210,62)); 

    /* *************************** 
    *   COLOR PANEL 
    * **************************/ 
    this.colorVisualization = new FormPanel(); 
    this.colorVisualization.setSize(20, 80); 
    this.colorVisualization.setHeaderVisible(false); 
    this.add(colorVisualization, new AbsoluteData(250, 6)); 
    this.updateColorHex(); 

    /* *************************** 
    * DEFAULT COLOR PANELS 
    * **************************/ 

    Label lblDefaultColors = new Label("Default Colors:"); 
    lblBlue.setWidth(80); 
    this.add(lblDefaultColors, new AbsoluteData(6, 90)); 

    this.fpDefaultColorBlack = new FormPanel(); 
    this.fpDefaultColorBlack.setWidth(20); 
    this.fpDefaultColorBlack.setHeaderVisible(false); 
    this.fpDefaultColorBlack.getElement().getStyle().setBackgroundColor("#000000"); 
    this.add(fpDefaultColorBlack, new AbsoluteData(100, 90)); 
    this.fpDefaultColorBlack.addListener(Events.OnClick, this.lFormPanelListener); 

    this.fpDefaultColorWhite = new FormPanel(); 
    this.fpDefaultColorWhite.setWidth(20); 
    this.fpDefaultColorWhite.setHeaderVisible(false); 
    this.fpDefaultColorWhite.getElement().getStyle().setBackgroundColor("#FFFFFFF"); 
    this.add(fpDefaultColorWhite, new AbsoluteData(130, 90)); 
    this.fpDefaultColorWhite.addListener(Events.OnClick, this.lFormPanelListener); 

    this.fpDefaultColorRed = new FormPanel(); 
    this.fpDefaultColorRed.setWidth(20); 
    this.fpDefaultColorRed.setHeaderVisible(false); 
    this.fpDefaultColorRed.getElement().getStyle().setBackgroundColor("#FF0000"); 
    this.add(fpDefaultColorRed, new AbsoluteData(160, 90)); 
    this.fpDefaultColorRed.addListener(Events.OnClick, this.lFormPanelListener); 

    this.fpDefaultColorGreen = new FormPanel(); 
    this.fpDefaultColorGreen.setWidth(20); 
    this.fpDefaultColorGreen.setHeaderVisible(false); 
    this.fpDefaultColorGreen.getElement().getStyle().setBackgroundColor("#00FF00"); 
    this.add(fpDefaultColorGreen, new AbsoluteData(190, 90)); 
    this.fpDefaultColorGreen.addListener(Events.OnClick, this.lFormPanelListener); 

    this.fpDefaultColorBlue = new FormPanel(); 
    this.fpDefaultColorBlue.setWidth(20); 
    this.fpDefaultColorBlue.setHeaderVisible(false); 
    this.fpDefaultColorBlue.getElement().getStyle().setBackgroundColor("#0000FF"); 
    this.add(fpDefaultColorBlue, new AbsoluteData(220, 90)); 
    this.fpDefaultColorBlue.addListener(Events.OnClick, this.lFormPanelListener); 

    /* *************************** 
    *   BUTTON OK 
    * **************************/ 

    this.btnOK = new Button("Apply"); 
    this.btnOK.setSize(88, 22); 
    this.btnOK.addSelectionListener(new SelectionListener<ButtonEvent>() { 

     @Override 
     public void componentSelected(ButtonEvent ce) { 
      // Save changes and close window 
      tbp.setSelectedColor(selectedColor); 
      tbp.updateColor(); 
      hide(); 
     } 
    }); 
    this.add(this.btnOK, new AbsoluteData(185, 146)); 

    /* *************************** 
    *   BUTTON CANCEL 
    * **************************/ 

    this.btnCancel = new Button("Cancel"); 
    this.btnCancel.setSize(88, 22); 
    this.btnCancel.addSelectionListener(new SelectionListener<ButtonEvent>() { 

     @Override 
     public void componentSelected(ButtonEvent ce) { 
      // Throw changes and close window 
      hide(); 
     } 
    }); 
    this.add(this.btnCancel, new AbsoluteData(185, 174)); 

} 

/** 
* Calculate redValue, greenValue and blueValue by converting hex-format to binary-format 
*/ 
private void updateColorRGB(){ 
    int r1 = 0, r2 = 0, g1 = 0, g2 = 0, b1 = 0, b2 = 0; 

    for(int i = 1; i < this.selectedColor.length(); i++){ 
     char currentChar = this.selectedColor.charAt(i); 
     int currentCharValue; 
     if(currentChar < 58){ 
      currentCharValue = currentChar - 48; 
     } 
     else{ 
      currentCharValue = currentChar - 55; 
     } 
     switch(i){ 
     case 1: 
      r1 = currentCharValue; 
      break; 
     case 2: 
      r2 = currentCharValue; 
      break; 
     case 3: 
      g1 = currentCharValue; 
      break; 
     case 4: 
      g2 = currentCharValue; 
      break; 
     case 5: 
      b1 = currentCharValue; 
      break; 
     case 6: 
      b2 = currentCharValue; 
      break; 

     } 
    } 
    this.redValue = r1 * 16 + r2; 
    this.greenValue = g1 * 16 + g2; 
    this.blueValue = b1 * 16 + b2; 
} 

/** 
* Convert redValue, greenValue and blueValue to hex-format and update selectedColor + colorVisualization-panel 
*/ 
private void updateColorHex(){ 

    String rString = Integer.toHexString(this.redValue); 
    if(this.redValue == 0){ 
     rString = "0" + rString; 
    } 
    String gString = Integer.toHexString(this.greenValue); 
    if(this.greenValue == 0){ 
     gString = "0" + gString; 
    } 
    String bString = Integer.toHexString(this.blueValue); 
    if(this.blueValue == 0){ 
     bString = "0" + bString; 
    } 
    this.selectedColor = "#" + rString + gString + bString; 
    this.colorVisualization.getElement().getStyle().setBackgroundColor(this.selectedColor); 
    this.colorVisualization.repaint(); 

} 

/** 
* Initialize Listener for all default color-panels (black, white, red, green, blue) 
* Sets all colors, depending on which formPanel was clicked on 
*/ 
private void initFormPanelListener(){ 
    this.lFormPanelListener = new Listener<BaseEvent>(){ 
     @Override 
     public void handleEvent(BaseEvent be) { 
      // Set selectedColor depending on which FormPanel was clicked on 
      if(be.getSource().equals(fpDefaultColorBlack)){ 
       selectedColor = "#000000"; 
      } 
      else if(be.getSource().equals(fpDefaultColorWhite)){ 
       selectedColor = "#FFFFFF"; 
      } 
      else if(be.getSource().equals(fpDefaultColorRed)){ 
       selectedColor = "#FF0000";  
      } 
      else if(be.getSource().equals(fpDefaultColorGreen)){ 
       selectedColor = "#00FF00"; 
      } 
      else if(be.getSource().equals(fpDefaultColorBlue)){ 
       selectedColor = "#0000FF"; 
      } 

      updateColorRGB(); 

      sliderBlue.setValue(blueValue); 
      sliderRed.setValue(redValue); 
      sliderGreen.setValue(greenValue); 
     } 
    }; 
} 

}

回答

0

我試圖代碼添加FormPanelRootPanel並且還涉及一種UI-Binder,它確實呈現良好,無需爲了看到更改而進行交互。你能提供更多的代碼嗎?同時有一種叫做onFrameLoad()的方法,但我不知道它是否符合你的目的。

+0

感謝提示:) 我通過覆蓋onLoad()方法並在那裏設置bachgrounds來解決問題。 我想問題是,窗體面板必須被渲染來添加背景顏色。 – marsimoto

+0

很高興你解決了它:) – Onkar