Hi Ed, How do you format the code?
Cheers, Juan 2012/7/19 Ed <[email protected]> > 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.cla**ss); >> >> public void onModuleLoad() { >> >> // make sure the CSS is here >> resources.blueCss().ensureInje**cted(); >> >> Element baseWidget = RootPanel.get("baseWidget").ge**tElement(); >> baseWidget.addClassName(resour**ces.blueCss().baseWidget()); >> >> Element blueWidget = RootPanel.get("blueWidget").ge**tElement(); >> blueWidget.addClassName(resour**ces.blueCss().baseWidget()); >> blueWidget.addClassName(resour**ces.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. > -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. 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.
