What deferred binding properties are used in GWT CSSResource @if statement?

452 views Asked by At

I'm currently attempting to use Conditional CSS in a CssResource file as described here, but I'm a little unclear on the "<deferred-binding-property>" part.

Where must these properties be defined? I would like to think that any <define-property> tag within the inheritance tree of the module that is currently being compiled would be available, but that doesn't seem to be true. I seriously can't find any documentation of this online.

In my case, the project I am working on consists of two applications that each have their own GWT module, but they both inherit a "core" module that contains shared code, including the ClientBundle/CssResource with the @if statements. The deferred binding property that I wish to evaluate on is defined in another gwt module file, formfactor.gwt.xml.

I am attempting to use the following:

@if formfactor mobile{
  .wrapper{
     top:50px;
  } 
}

Everything gwt-compiles without any errors. Any deferred binding within the module files themselves that is based on the "formfactor" property is being evaluated correctly (ie, I am getting "mobile"-specific Views as expected). None of the css rules in the @if block are being injected.

I have tried inheriting formfactor.gwt.xml both in the core gwt.xml file and in the application gwt.xml files and both worked as described in the previous paragraph.

If I include an @else statement in the CssResource file, the code in the @else block does get injected, but if I include @elif formfactor desktop tablet (the only other two values defined for the formfactor property), then neither the @if block nor the @elif block are injected.

update - While I still think it would be useful to have the question answered definitively, it appears that my CssResource file does have the formfactor property in scope. The issue seems to be related to GWT issue 4697 (code.google.com/p/google-web-toolkit/issues/detail?id=4697), where the final clause of an @if/@elif/@else statement always gets injected, regardless of the value of the defferred-binding-property being evaluated.

One workaround in my situation was to simply set the "standard" value in normal css, and then manually change the value in an @if block, eg:

.wrapper{ 
  top:66px; 
  ... 
}
@if formfactor mobile {
  .wrapper{
    top:50px;
  }
}

As long as you are not using @def statements inside the conditional, the second rule will only be injected if the conditional evaluates to true.

I realize this may not work with all css rules, since it essentially defines a second value for the rule without removing the first value, but it's only a workaround!

0

There are 0 answers