PDA

View Full Version : What part of the Appearance controls the borders of Window



jvahabzadeh
9 Jan 2012, 1:32 PM
I have been experimenting with changing the look of a Window object.

I have created a MyWindowAppearance class, which extends BlueWindowAppearance

I've overridden some of the Resources objects, including the one I believe to indicate the color of the window borders, but while all the other overrides work, that one seems to be ignored. No errors or exceptions occur, though.

My project's .gwt.xml has the replace-with as follows:

<!--
<replace-with class="com.sencha.gxt.theme.blue.client.window.BlueWindowAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.Window.WindowAppearance" />
</replace-with>
-->
<replace-with class="com.joev.senchaexperiments.client.MyWindowAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.Window.WindowAppearance" />
</replace-with>

Here's MyWindowAppearance.java


public class MyWindowAppearance extends BlueWindowAppearance {

public interface MyWindowDivFrameResources extends BlueWindowDivFrameResources {
@Source({"com/sencha/gxt/theme/base/client/frame/NestedDivFrame.css", "MyWindowDivFrame.css"})
@Override
BlueWindowDivFrameStyle style();

}

public interface MyHeaderResources extends BlueHeaderResources {
@Source({"com/sencha/gxt/theme/base/client/widget/Header.css", "MyWindowHeader.css"})
@Override
HeaderStyle style();
}

public interface MyWindowResources extends BlueWindowResources, ClientBundle {

@Source({"com/sencha/gxt/theme/base/client/panel/ContentPanel.css", "MyBaseWindow.css", "MyWindow.css"})
@Override
BlueWindowStyle style();
}

public MyWindowAppearance() {
super((MyWindowResources)GWT.create(MyWindowResources.class));
}

@Override
public HeaderBaseAppearance getHeaderAppearance() {
return new HeaderBaseAppearance(GWT.<HeaderDefaultResources> create(MyHeaderResources.class));
}
}


Here is my MyWindowDivFrame.css file:


.topLeft,.top,.topRight {
height: auto;
}

.topLeft {
border: none;
}

.left {
/*background-color: #dfe8f6;*/
background-color: #f04040;
padding-left: 6px;
}

.right {
/*background-color: #dfe8f6;*/
background-color: #f04040;
padding-right: 6px;
}

.content {
padding-top: 0px;
/*background: #cdd9e8 !important;*/
background: #fd0948 !important;
}

.bottom,.bottomLeft,.bottomRight {
height: 6px;
}


MyWindowResources and MyHeaderResources correctly do what I expect (I changed some colors in MyWindow.css and MyWindowHeader.css), but MyWindowDivFrameResources appears to be ignored in terms of what file is looked at.

The colors for the borders match what's in BlueWindowDivFrame.css rather than what's in MyWindowDivFrame.css (the latter is a copy of the former with the background color values changed).

What am I missing/forgetting to do?

Colin Alworth
9 Jan 2012, 4:44 PM
Those appear to be the important steps. You can verify if a Window instance has your appearance or not by creating an instance, and using the debugger to check the type of its appearance field, to make sure it matches your new type.

If it does, then I'd suspect a problem with your appearance, perhaps you are not overriding something, or the order of css files in your @Source annotation is wrong. If it doesn't, then somehow you haven't replaced the appearance correctly. This latter piece can be tested by using the Window constructor that takes an appearance instance directly


Window w = new Window(new MyWindowAppearance());

If that works, then it confirms that your rebind rule is having no effect. One reason that could be is that it comes before either the GXT or Blue inherits statements in your module file - the last rebind rule to match a class is the one that takes effect.

jvahabzadeh
10 Jan 2012, 7:19 AM
I found the reason for the problem, but also have not been able to accomplish what I've set out to do with this.

It's definitely using the MyWindowAppearance class.

I have tried both:


Window w = new Window();

and


Window w = new Window((MyWindowAppearance)GWT.create(MyWindowAppearance.class));


Both to the same effect. Additionally, I put breakpoints in to look at Window in the constructor, and the appearance parameter is

The baffling part is that:
- MyWindowAppearance.MyWindowResources is being used
- MyWindowAppearance.MyHeaderResources is being used

but
- MyWindowAppearance.MyWindowDivFrameResources is NOT being used. The behavior is exactly as if BlueWindowAppearance.BlueWindowDivFrameResources was being used in its place.

I added a createFrame method to override the one in BlueWindowAppearance. So mine is:


@Override
protected Frame createFrame() {
return new NestedDivFrame(GWT.<MyWindowDivFrameResources> create(MyWindowDivFrameResources.class));
}



I set up some breakpoints, and discovered that while MyWindowAppearance was being used, in the Window.frame object, it was still using BlueWindowDivFrame.

Baffled, I stepped through, and discovered this in BlueWindowAppearance's constructor:

public BlueWindowAppearance(BlueWindowResources resources) {
super(resources);

this.style = resources.style();

// if (GXT.isIE6()) {
// frame = new TableFrame((TableFrameResources)
// GWT.create(ButtonTableFrameResources.class));
// } else {
frame = new NestedDivFrame((NestedDivFrameResources) GWT.create(BlueWindowDivFrameResources.class));
// }
}

That last line appears to be the root of the problem. I believe that's a bug, and SHOULD read, if I'm not mistaken:

frame = createFrame();



As a workaround, I modified my own class's constructors as follows:

public MyWindowAppearance() {
this((MyWindowResources)GWT.create(MyWindowResources.class));
}

public MyWindowAppearance(MyWindowResources resources) {
super(resources);
frame = createFrame();
}



It was at this point, VERY belatedly, that I realized that the colors weren't set up as colors for the window frame, but as sprites, with png files! But in any case, at least I know that I wasn't losing my mind!