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/-/-QRKMbaWuWoJ. 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.
