1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default Unanswered: What part of the Appearance controls the borders of Window

    Unanswered: What part of the Appearance controls the borders of Window


    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:
    HTML Code:
    <!-- 
      <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
    PHP Code:
    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 BlueWindowResourcesClientBundle {

        @
    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.<HeaderDefaultResourcescreate(MyHeaderResources.class));
      }

    Here is my MyWindowDivFrame.css file:
    Code:
    .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?

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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

    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    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:
    PHP Code:
    Window w = new Window(); 
    and
    PHP Code:
    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:
    PHP Code:
      @Override
      
    protected Frame createFrame() {
        return new 
    NestedDivFrame(GWT.<MyWindowDivFrameResourcescreate(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:
    PHP Code:
      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((NestedDivFrameResourcesGWT.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:
    PHP Code:
    frame createFrame(); 


    As a workaround, I modified my own class's constructors as follows:
    PHP Code:
      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!

Thread Participants: 1