Re: Overriding CSS styles in ResourceBundle

I don't know if it's proper solution, but be aware of

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

If I understand correctly consequences of above issue, if your ResourceBundles would use the same class TestCss, styles will be mixed up, in your stylesheet you'll have two different styles with the same names.
 


W dniu środa, 20 lutego 2013 14:58:10 UTC+1 użytkownik Igor Cherednichenko napisał:

I have try to find good solution to  partially override css styles of CssResources in ResourceBundle. 

In generally, I create my UI components and use simple components (like ValueBox) for constructing more complicated components (like DatePickerBox). 

From begin, I use ResourceBundle instances for manage style of simple components. So, when they should be aggregated into complicated one, I have problem with fine styles adjusting.  

As posible decision, simple components has alternative constructor with ResourceBundle parameter. Using it, is possible to extend default ResourceBundle and override required styles. 

And now the problem in that I dont want reimplement all styles in my CssResource (where can be a lot of CSS classes). Usually, I need fine only several CSS classes.  

I found one solution, it work, but I cannot find confirmation for this trick in official documentation. I use @Import and @ImportedWithPrefix annotation for same scope and  override some css styles using prefix. 

The ClientBundle for simple component. 

public interface TestResources extends ClientBundle

{

    @Source(TestCss.DEFAULT_CSS)

    TestCss css();

    @CssResource.ImportedWithPrefix("tr")

    interface TestCss extends CssResource

    {

        String DEFAULT_CSS = "/client/test/test.css";

        String imgStyle();

        String frameStyle();

        String textStyle();

    }

}

Default CSS clases are stored in default file "/client/test/test.css".

.frameStyle {

    border: 1px solid #000000;

    margin: 10px;

}

.textStyle {

    font-size: 15px;

    color: red;

    background-color: #ffd700;

}

.imgStyle {

    border: 2px dashed green;

}

Override default styles, CHANGE ONLY IMAGE BORDER STYLE

public interface OverriddenTestResource extends TestResources

{

    @CssResource.Import(TestCss.class)

    @Source({TestCss.DEFAULT_CSS, "changedtest.css"})

    TestCss css();

}

The style changes is stored in additional file "changedtest.css". 

.tr-imgStyle {

    border: 1px solid red;

}

 

Can some one confirm that it done in right way or just post link to related docs?

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.