GXT 3 Gray Theme - forgot to theme Mask window.

[IcgNickK]

The com.sencha.gxt.core.client.dom.Mask message window has a blue border even when using the Gray theme.

[Colin Alworth]

The Gray theme is implemented as it was in 2.x - some highlights are still done with blue, as making everything gray gets rather drab.

Here's an example with the mask as blue in GXT 2
- navigate to http://www.sencha.com/examples-2/#xmlgrid
- set the theme to gray in the upper right
- click the load button and watch the mask

The same blue colors can be seen in the Gray theme in a few other cases - grid row selection, some field styles (focus, for example), the Slider thumb icon, etc.

[IcgNickK]

I should have been more specific with my problem report...

The problem isn't so much that the mask window is blue in the gray theme...

The problem is that the Mask window can not be configured with a custom theme since the Mask class itself references the MaskStyle interface which is a member of the MaskDefaultAppearance. This makes it impossible to plug in an alternative MaskAppearance implementation using deferred binding:

Mask -> MessageTemplates -> MaskDefaultAppearance.MaskStyle

[Colin Alworth]

Ah, thanks for the clarification.

The Mask class is defined in the com.sencha.gxt.core.Core module, which is at a higher level than themes even exist - this module doesn't even have support for Component. Several appearances are still defined there, but mostly for basic wiring kinds of stuff - Layer and Mask, as well as the somewhat ambiguous CommonStyles.

As of 3.0.3 anyway, the latest release, the MaskAppearance can be bound in your module. The private Mask constructor GWT.create's a MaskAppearance, which will then follow those rebind rules. Here is the built-in rule:

  <replace-with class="com.sencha.gxt.core.client.dom.Mask.MaskDefaultAppearance">
    <when-type-is class="com.sencha.gxt.core.client.dom.Mask.MaskAppearance" />
  </replace-with>

Making a new rule in your module, and listing it after the GXT inherits statement (and any other com.sencha inherits) should make your take precedence - is this not working correctly?

[IcgNickK]

Thanks Colin,


Your recommendation does work but requires duplication of a large chunk of GXT code when simply creating a new color theme.


It would be great if the default mask appearance could be refactored so that the code could be re-used by other themes where only the css and image resources are being changed.


Please see the attached code that shows how this might be achieved.


Regards,


Nick

[Colin Alworth]

I'm confused - isn't the

MaskDefaultAppearance(MessageTemplates template, MaskResources resources)

almost exactly what you've made? Yes, it has one additional argument, but rather than building four constructors for every default appearance (no-arg, template, resources, templte&resources), we make two - one for default for GWT.create to hit, and one with both arguments so they can easily be overridden.

My version of GrayMaskAppearance:

public class GrayMaskAppearance extends MaskDefaultAppearance { 
    public GrayMaskAppearance() { 
        super(GWT.<MessageTemplates>create(MessageTemplates.class), 
                GWT.<GrayMaskResources>create(GrayMaskResources.class));
    } 
}

The one other change required is that your ClientBundle extend the MaskResources interface to pick up other pieces:

public interface GrayMaskResources extends MaskResources { 
    @ImageOptions(repeatStyle = RepeatStyle.Horizontal) 
    ImageResource boxBackground(); 
 
    @Source("GrayMask.css") 
    MaskStyle css(); 
}

Does this not work?

Sidenote: in this case it is okay (just one mask impl for the whole page) but in other cases your re-use of MaskStyle might bite you - usually you want to extend that interface so it has a new name - that will inform the CssResource generating code that you actually want different generated css class names. Otherwise one FooWidget with AppearanceX and another with AppearanceY will actually end up sharing CSS after all

[IcgNickK]

I probably should have mentioned that I'm still using GXT 3.0.2

It looks like you introduced that new constructor in 3.0.3.
That's exactly what I was looking for!

Thanks!

Nick

[Colin Alworth]

Yep, that was a quirk that was pointed out to us shortly after 3.0.2 - not really sure how we missed it... But as part of 3.0.3 I think we got several confused rebindable appearances worked out, including this one.