GWT: SetBackgroundColor of a FormPanel right after starting the program

Question

I have a problem with setting the backgroundcolor of a FormPanel in GWT. I found out thats its possible to change the backgroundcolor with the following code snippet. So i added a line in my constructor to change the panels background:

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

(this.fpDefaultColorBlack is a FormPanel)

My Problem is, that right after starting my program, the panels backgroundcolor is its default color and only if I interact with this FormPanel its color changes.

Is there any way to refresh the panel? I'm searching for a solution for several hours...

btw.: All components used are from lib :com.extjs.gxt.ui.client.widget Here is a preview of how it actually looks: http://www.directupload.net/file/d/3503/hq6pii62_png.htm

This is the code of the whole class:

    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);
        }
    };
}

}

Answer 1

I tried the code adding a FormPanel to the RootPanel and also to a UI-Binderand it does render fine no need to interact in order see changes. Can you provide some more code? Meanwhile there is a method called onFrameLoad() but I don't know if it serves your purpose.