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 [email protected].
To post to this group, send email to [email protected].
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.
