GXT3 new style(s) ?

[DavidHoffer]

Right that is a GWT design concept document explaining the basis/reason for the GWT appearance pattern...but I'd like to see a document recommending specifically how to customize the GXT themes.

[sven]

There is not so much special about it. There are java files and css files. Depending on what you want to do, you either need to change the css files or extend the java files, or maybe even both.

Your question needs to be more specific.

[DavidHoffer]

Okay I'll try to provide a couple specific examples, what's the right way to do this?

1. Create a ContentPanel (with no header) that has a yellow border and transparent body background? As a test I copied all the blue classes/resources to my project and then renamed with Yellow, e.g.

public class YellowContentPanelAppearance extends ContentPanelBaseAppearance {
  public interface YellowContentPanelResources extends ContentPanelResources {
    @Source({"ipt/tas/chatdashboard/ui/gwt/client/widgets/appearance/gxt/theme/base/client/panel/ContentPanel.css", "YellowContentPanel.css"})
    @Override
    YellowContentPanelStyle style();
  }


  public interface YellowContentPanelStyle extends ContentPanelStyle {
  }


  public YellowContentPanelAppearance() {
    super(GWT.<YellowContentPanelResources> create(YellowContentPanelResources.class),
        GWT.<ContentPanelTemplate> create(ContentPanelTemplate.class));
  }


  public YellowContentPanelAppearance(YellowContentPanelResources resources) {
    super(resources, GWT.<ContentPanelTemplate> create(ContentPanelTemplate.class));
  }


  @Override
  public HeaderBaseAppearance getHeaderAppearance() {
    return new BlueHeaderAppearance();
  }
}

And YellowContentPanel.css:

.panel {
    border-color: #ffc125;
}


.body {
  background-color: transparent;
  border-color: #FFC125;
}

Notice I didn't change the default HeaderBaseAppearance yet as I didn't need to change that part (in this case). Also notice that I did copy the GXT base ContentPanel.css to my project because I wasn't sure if @Source worked across jars.


2. I also often need to be able to style things dynamically, that is some state changes in the app and I need to reflect that change in the UI. Changing the header color of a ContentPanel is a good example. For the dynamic case static CSS doesn't make sense to me so I've tried extending GXT Appearance patterns, e.g.

public class BlueHeaderAppearanceEx extends BlueHeaderAppearance {


    private static Logger logger = Logger.getLogger("BlueHeaderAppearanceEx");
    private IColorFormatter colorFormatter = new ColorFormatter();
    private XElement barElem;
    private XElement textElem;
    private XElement parent;


    public BlueHeaderAppearanceEx() {
    }


    public BlueHeaderAppearanceEx(HeaderResources resources, Template template) {
        super(resources, template);
    }


    @Override
    public XElement getBarElem(XElement parent) {
        this.parent = parent;
        barElem = super.getBarElem(parent);
        return barElem;
    }


    @Override
    public XElement getTextElem(XElement parent) {
        textElem = super.getTextElem(parent);
        return textElem;
    }


    public void setColor(int colorRGB, int backgroundRGB) {
        String colorHTML = colorFormatter.toHTMLColor(colorRGB);
        String backgroundHTML = colorFormatter.toHTMLColor(backgroundRGB);


        if (textElem != null) {
            textElem.applyStyles("backgroundColor:" + backgroundHTML + "; color:" + colorHTML + ";");
            textElem.repaint();
        }
    }
}

However this does not provide a good result as the text element is not the full header element (and setting style on the bar and parent elements didn't work)...what I really want to do is dynamically change the full header color and foreground text color.

[sven]

You should not save a reference to the elements in the appereance, why do you want to do this?

what I really want to do is dynamically change the full header color and foreground text color.

In that case you would have an appearance that has special methods to assign inline styles to the specific elements.

However this does not provide a good result as the text element is not the full header element

You can create another getter that gets the element that is required for your custom styling.

[sven]

You can skip the call to repaint also.

[DavidHoffer]

Regarding 'skip the call to repaint'...yes I verified that was not needed.

Regarding the other issues, I don't understand. I don't want to store a reference to any XElement but could not see another way. The only methods the Appearance interface gives me are:

XElement getBarElem(XElement parent);
 XElement getTextElem(XElement parent);
void render(SafeHtmlBuilder sb);
void setIcon(XElement parent, ImageResource icon);

So given that I want to dynamically apply a custom style to the header I didn't know how to do it. I added a new method called setColor but the question is how to apply it given the methods above? I don't know how to 'assign inline styles to the specific elements' as you described.

Regarding 'You can create another getter that gets the element that is required for your custom styling. ' I don't yet know how to get the right element, I would have thought that might be the parent XElement but that didn't seem to be right either.

[sven]

The parent is the parent element if the widget/cell. From that one you can go down to get any child element.

You know the markup, and so you can get any element you require from this widget/cell. getBarElem and getTextElem are doing exact the same thing, you should look at their implementation.

You can add a third method doing the same thing, just getting you the element you require for your custom styling.

[DavidHoffer]

But how to use methods like those without storing state? E.g. when I call my new setXXXColor() method how can I call any method that takes an input XElement param? I don't have access to the parent XElement in my setXXXColor() method.

[sven]

You know the parent element of your widget/cell and you could pass it into that method.

[DavidHoffer]

Hum, well I thought that since I wanted to change the appearance of a widget I would call a method on the appearance instance that was injected into the widget. So if I have pass a reference of the widget into the method to change the appearance one wonders what's the point of the appearance instance in this case. E.g. since the code operates on things external to the appearance instance the code might as well be someplace else.

When I try to set the background color on the parent (the header XElement) nothing happens. I think this is because the header is using an image. Is there a way I can affect the color of this (or make the image transparent so the color can be seen)? I.e. I'd like the full header color to be changed at dynamic points in the app...but it's not yet clear to me how to do this.