GWT + CSS Style Overloading

Question

I'm looking at making some custom GWT widgets styled in a uniform fashion without requiring the designer to go into each widget's UI file every time they want something to appear differently. I would provide a bunch of base styles for elements in the widget and the designer comes along later and sets, in UIBinder, HTML, CSS, anything really, the style using the same selector.

For example: I have a composite widget which I have setup to use a CSSResource. This CSS resource has a style named .myHeaderStyle which is applied to an element on the composite.

This composite is used in another GWT Widget and needs to appear slightly differently when used in the enclosing widget.

My hope here is that I can specify another style in the UIBinder definition of that UI also named .myHeaderStyle and have this style override the style specified in the composite widget's CSSResource.

However, in my attempts to make this happen even with !important included on the style properties that are to override the initial style, I'm only getting the original .myHeaderStyle set on the composite widget.

I'm trying to specifically avoid adding/changing the style in the composite every time we compile, I want it to inherit from the enclosing page effectively overriding the composite widget's original styling.

Is what I'm trying to do possible in some form with GWT+CSS?

Andrei Volgin · Accepted Answer · 2014-02-20 21:50:42Z

2

After building complex GWT apps for 6 years, I am a big proponent of using a single CSS file for the entire app, and never using CSS resources or UIBinder definitions. Then you can set ".myWidget" style in your widget, and your designer can do:

.myHeaderStyle {
   font-size: 1.4rem;
}
.myWidget .myHeaderStyle {
   font-size: 1.6rem;
}

In my opinion, this is the easiest way to maintain consistency throughout the app - all styles are in one place, using inheritance, rem, and other best practices. It's much easier for designers that CSS resources scattered throughout the app.

By the way, this is also the easiest approach to implement themes (or skins), or change CSS based on the screen size without touching the code.

EDIT:

This is an example from one of my apps:

<g:HTMLPanel>
    <g:Label ui:field="logo" styleName="logo">My App</g:Label>
    <div class="menu" >
        <div class="tab" >
            <g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label>
            <g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label>
            <g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label>
        </div>
    </div>
</g:HTMLPanel>

Note that I use 'class' for div element, but styleName for a widget. I don't set style on my tab labels, because I use CSS to style all of them at once:

.tab>div {
    float: right;
    margin: 0 0 0 6px;
    padding: 2px 6px;
    width: 120px;
}

edited Feb 20, 2014 at 21:50

answered Feb 20, 2014 at 18:43

Andrei Volgin

41.1k6 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jollyRoger Over a year ago

So you're suggesting I ditch the css resource and uibinder defs, specify the style on the widget using .addStyleName() or .setStyleName() and include the css file containing any of my style defs in the host page?

Andrei Volgin Over a year ago

Yes, and the designers will love you for doing that. And you will appreciate the benefits too.

Andrei Volgin Over a year ago

By the way, I went a step further and merged GWT CSS with my own CSS. No more "!important" to fight with whatever arbitrary styles original GWT developers decided to add to their widgets.

jollyRoger Over a year ago

This works, however, I'm concerned that it appears I would need to assign a style to nearly anything the designer would want to style and it seems that I have to do all of the styling assignments in my code (eek!), one of the reasons we chose UIBinder was for ease of UI manipulation and this use case would throw that argument out the window. In addition, I'm concerned that this approach is deprecated by the GWT Project as mentioned about half way down this page http://www.gwtproject.org/doc/latest/DevGuideUiCss.html

Andrei Volgin Over a year ago

First, I set all styles in UIBinder (styleName or addStyleNames for widgets or class name for HTML elements). I do not define styles in UIBinder. Second, a smart designer knows how to create efficient CSS. You don't need to set fonts, backgrounds, colors, margins, etc. for every widget - these styles are inherited from their parents.

|

Collectives™ on Stack Overflow

GWT + CSS Style Overloading

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related