Thanks for your detailed and clear example and your time. I am aware of this concept and use it a lot.
But, sorry, that doesn't solve my problem. Like you said, I have to set 2 styles on the widget, which is not what I want as I want it to be style agnostic as much as possible. That said, it's a style optimization to reuse styles rules at several places which the widget shouldn't be aware of, especially not if it concerns reusable widgets. Example: I want to reuse the background, select, etc.. style rules in your bluewidget, redwidget, but also calendar widget, niceButton widget, etc... in several places that have nothing to do with eachother. I think I need closure-stylesheet, see: http://code.google.com/p/closure-stylesheets, But like thomas mentioned this is currently not supported in GWT. I am currently looking if I can parse my css fils with closure-stylesheets before the gwt compiler processes them. Let's see if this is possible through a maven plugin... - Ed Op donderdag 19 juli 2012 02:08:32 UTC+2 schreef Joseph Lust het volgende: > > Ed, > > My apologies for my late reply. I've been ruminating over this the last > few days as I've thought about doing it, but never made a working example. > Here is the example. We have our BaseWidget and our BlueWidget which > extends it. Everything about the widget is defined in the BaseWidget CSS, > except the color,fill, and border seen in the extending BlueWidget. > > > <https://lh5.googleusercontent.com/-WK8iyPCFL2M/UAdLoBuFgrI/AAAAAAAAB6Q/NvG5i68nOFQ/s1600/Screen+Shot+2012-07-18+at+7.48.59+PM+%282%29.png> > The CSSResource interface files: > > // BaseWidgetCSSResource.javapackage com.testbed.client.resources; > import com.google.gwt.resources.client.CssResource; > public interface BaseWidgetCssResource extends CssResource { > String baseWidget(); } > > // BlueWidgetCSSResource.javapackage com.testbed.client.resources; > public interface BlueWidgetCssResource extends BaseWidgetCssResource { > String blueWidget(); } > > The CSS Files: > > // baseWidget.cssdiv.baseWidget { > background-color: red; > border: 1px solid darkred; > border-radius: 10px; > padding: 20px; > height: 45px; > width: 100px; > margin:10px; > text-align:center; > vertical-align:middle; > font-size: 2em; > float: left;} > > // blueWidget.cssdiv.baseWidget.blueWidget { > /* same as regular widget, but with a few changes */ > background-color: blue; > border: 5px dashed orange; > color: white;} > > ClientBundle Resource: > > // WidgetResources.javapackage com.testbed.client.resources; > import com.google.gwt.resources.client.ClientBundle;import > com.google.gwt.resources.client.CssResource.Import; > public interface WidgetResources extends ClientBundle { > // base widget > @Source("css/baseWidget.css") > BaseWidgetCssResource baseCss(); > > // pulls in both files, overriding one with the other > @Import(BaseWidgetCssResource.class) > @Source({ "css/blueWidget.css", "css/baseWidget.css" }) > BlueWidgetCssResource blueCss();} > > Implementing Class: > > // Testbed.javapackage com.testbed.client; > import com.google.gwt.core.client.EntryPoint;import > com.google.gwt.core.client.GWT;import > com.google.gwt.user.client.Element;import > com.google.gwt.user.client.ui.RootPanel;import > com.testbed.client.resources.WidgetResources; > public class TestBed implements EntryPoint { > > WidgetResources resources = GWT.create(WidgetResources.class); > > public void onModuleLoad() { > > // make sure the CSS is here > resources.blueCss().ensureInjected(); > > Element baseWidget = RootPanel.get("baseWidget").getElement(); > baseWidget.addClassName(resources.blueCss().baseWidget()); > > Element blueWidget = RootPanel.get("blueWidget").getElement(); > blueWidget.addClassName(resources.blueCss().baseWidget()); > blueWidget.addClassName(resources.blueCss().blueWidget()); > > }} > > I hope that helps. Note that you would need to use both classes as someone > else mentioned, so "baseWidget blueWidget". You could make a helper method > do do that, or just apply both. > > Sincerely, > Joseph > -- 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/-/644IQ3b_2zYJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
