Re: Conditional CSS & Updates
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 element and use the descendant selector everywhere: .portrait .foo, .landscape .foo, putting class="portrait" or "class="landscape" on the element. -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/2KsUbW8w6AoJ. To post to this group, send email to google-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
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. -- 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-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
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. -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/5quwFYzkhEQJ. To post to this group, send email to google-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
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.
On Aug 29, 12:39 am, rth wrote:
> 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
--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
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.
--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
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.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-web-toolkit/-/WXQat7N1vVQJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
Submitted as Issue 6754. http://code.google.com/p/google-web-toolkit/issues/detail?id=6754 On Aug 31, 3:21 pm, Rylan wrote: > +1 -- 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-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
+1
On Aug 28, 11:39 pm, rth wrote:
> 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
--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Conditional CSS & Updates
Interesting... +1
2011/8/29 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
>
> --
> 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-web-toolkit@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-toolkit+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
>
>
--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Conditional CSS & Updates
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
--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
