Conditional CSS & Updates

[rth]

Hi,

I have a Conditional CSS block that calls isPortrait() at runtime and
correctly renders the right rule based on its return value. My problem
is that I cannot figure out how to get the condition to be reevaluated
in the future (e.g., when the orientation changes, I would like to
have the conditional CSS evaluated again and the page rendered with
the new CSS). My sample CSS is below.

@if (org.foo.Application.isPortrait()) {
.stats {
border: 3px solid red;
}
} @else {
.stats {
border: 3px solid blue;
}
}

The docs (http://code.google.com/webtoolkit/doc/latest/
DevGuideClientBundle.html#Conditional_CSS) states that these
conditions are evaluated at runtime (which I can confirm), so I am
hoping I can somehow force the re-evaluation to happen again.

Any pointers would be greatly appreciated.

--rth

[Juan Pablo Gardella]

Interesting... +1

2011/8/29 rth <rtho...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Rylan]

+1

[rth]

Submitted as Issue 6754.

http://code.google.com/p/google-web-toolkit/issues/detail?id=6754

On Aug 31, 3:21 pm, Rylan <ry...@icottrell.com> wrote:
> +1

[Sanjay]

AFAIK, ensureInjected() on CssResource just calls getText() and injects a style element into the DOM using StyleInjector once and only once.

getText() is more interesting. Every CssResource text is converted into a series of string concatenations. The runtime evaluation

@if (boolean-expr) {

true-value

} @else {

false-value

}

turns into something like this:

(boolean-expr)?(true-value):(false-value)

it is then concatenated to the rest of the css resource.

If you want reevaluation you need to call getText() again, and reinject into the DOM manually, without using the ensureInjected call.

[rth]

Thanks for the tip Sanjay,

Looking into getText for the CssResource though it looks like only one
branch of the @if statement is contained in the CssResource.getText()
value. E.g., below you can see that only the @else block has been
included in the CssResource text (the correct block is always there on
initial load according to the value of isPortrait()).

/* @if (org.foo.Application.isPortrait()) { */
.GCP5JXACOJ-org-foo-
MainPaneTablet_MainPaneTabletUiBinderImpl_GenCss_style-stats {
border : 3px solid blue;
}
/* } */
... rest of the styles

Because the alternate style has been compiled away even injecting it
again will not help in this case.

[Ben Munge]

I don't think you can do this with conditional styles. I think you'd
be better off firing an event on the event bus when they orientation
changes and just change class/style through an event handler.

[Sanjay]

Yes, I agree. Even if my proposed method worked, it is not meant for this. If anything, CSS3 Media Queries are meant for this. Alas, gwt doesnt support them yet.

My advice: as much as possible, build fluid layouts that scale to the amount of room on the screen. If you need a master/details view in landscape and a details view in portrait do that in code, with a view handling a custom OrientationChange event on the event bus.

Also, don't think you absolutely have to do this with CSS alone. You can swap out Views and keep the presenters the same. Only thing is make sure in the final implementation you handle the details, like persisting scroll location.

[rth]

Thanks all for your feedback. The reason I was trying to do this in
CSS is that I have one CSS files with media selectors that handle
subtle (but important) layout changes for different orientations that
also work on mobile phones, small (~7in) tables, and large tablets. To
do this in UIBinder would seem to require 3 devices x 2 orientations =
6 .ui.xml and CSS files for each of my views which feels really heavy-
weight.

I agree that CSS queries would totally fix this problem but I don't
really expect http://code.google.com/p/google-web-toolkit/issues/detail?id=4911
to see any progress in the near future.

If I end up finding a solution I will be sure to post it here.

[Thomas Broyer]

If you can detect the changes in JS, can't you simply switch a few CSS classes here and there?

You could even switch a global one on the <body> element and use the descendant selector everywhere: .portrait .foo, .landscape .foo, putting class="portrait" or "class="landscape" on the <body> element.