Editing CSS in Gwt Windowbuilder

Editing CSS in Gwt WindowBuilder

I had the same problem and was able to work around it by moving my CSS-resources from the war-directory to the classpath, specifically inside a package that is declared as a "public path" inside the GWT module descriptior via "<public path='...' />".

Project layout (odd location for module descriptor because of Eclipse Plugin Bug):

src
|- main
   |- java
   |  |- demo
   |     |- client
   |     |  |- MyWidget.java
   |     |  |- MyWidget.ui.xml
   |     |- Demo.gwt.xml
   |- resources
      |- demo
         |- css
            |- Demo.css

Demo.gwt.xml:

<module>
         ...
    <source path="client" />
         ...
    <public path="css" />
    <stylesheet src="Demo.css" />
         ...
</module>

Cannot apply CSS through GWT WindowBuilder editor for a multiple modules/Entrypoint application

The solution is simple,

I created a package like this:

com.mycompany.css

and put the CSS there and it works.

Eclipse GWT There are no CSS files referenced

You need to have your project packages and references correct. You can follow the solution offered here regarding project/file organization - Editing CSS in Gwt WindowBuilder

GWT + CSS Style Overloading

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;
}

How to apply a CSS that is fetched from the application as a string in GWT?

Try something like this:

Element head = Document.get().getElementsByTagName("head").getItem(0);
StyleElement style = Document.get().createStyleElement();
style.setType("text/css");
style.setInnerHTML("your css goes here");
head.appendChild(style);

Can I force GWT to leave out default CSS classes?

No, it's not possible.

IIRC, it was suggested a long time ago but no one took the time to do it. Particularly as it apparent doesn't have a big impact in performance (either output size or runtime perf)

GWT example app and the GWT Designer: what you see is not what you get

I found the GWT designer a pita tool on eclipse platform which takes memory hogging to whole new level even in comparison to GWT Hosted mode!!!!!

List of GWT Articles from Dev Guide on google.

Preferre Option at enterprise workplace

1. HTML/CSS/UIBinder for rich look and feel
2. Handcoded GWT Layouting and Widgets for complex gui behaviour/performance.

Edit - *GWT Designer is hardly updated/maintained* - I have seen only 10 odd checkins in a year. I wish i am wrong ( does google team not update the public svn !!! ) - https://code.google.com/p/gwt-designer/source/list

What is the best way to lay out elements in GWT?

GWT generates terrible, horrible, no-good, very-bad HTML. This is just my opinion, and others will disagree. But I work with GWT every day, and the infinitely nested divs and tables are enough to make even a newbie web developer cry. And all of its styles are inline, so if you want to apply or override these with an external style sheet, you'll end up with a forest of !important declarations.

It does, however, generate amazingly lovely JavaScript. As someone who once had to maintain and develop a supremely complex DHTML project and provide support for IE 5.5 and up -- by hand -- I have to admit, this is the best part of GWT.

Admittedly, I am a DHTML purist, having been a web devleoper long before I became a software developer. Personally I believe that HTML should only be for structure, CSS should provide styling, and JavaScript should provide the other functionality, and all three should be completely separate. GWT is pretty good at the last part -- the JavaScript -- but its generated HTML offends my sensibilities and is at least ten times more complicated than it has to be. But then again, most generated code is. (Consider websites created in MS Word or the HTML generated from WYSIWYG-style editors.)

Given a complex web-based application -- and the restriction against rolling a Ruby on Rails application -- I'd happily go with GWT. But my app would be pretty much a collection of FlowPanels (which compile to HTML <div>s) and GWT-generated Javascript, with my own CSS on top. So in the situation laid out by the OP, I'd use a FlowPanel, add the elements (eg. GWT form elements), apply any server-side logic, and then do styling with external CSS.

When looking at GWT, you may want to consider whether you'll be wanted to re-design your application later on, or wish to have a designer or other non-programmer create templates/styles/CSS to apply on top. If this is the came, you'll want to be very careful when you design your GWT app to not apply styles and instead apply classes and id's.

Also as a testing side note: if you plan on using Selenium for UI testing, you'll really want to hang id's on things. The xpath's from the generated HTML are practically unsuable and can stretch into the hundreds of characters in length.

This being said, I'd be very interested in hearing about other peoples' experiences, especially if they differ from mine.

tl;dr version:

1. GWT-generated HTML is quite bad with nested tables and many layers of nested <div>s (more than necessary)
2. GWT does not generate CSS stylesheets, but places all styling inline. This makes using external stylesheets tedious and difficult.
3. GWT does an excellent job with cross-browser Javascript.
4. GWT does not, by default, attach id's to elements, so if you plan on using a tool like Selenium, you must add your own id's by hand or face amazingly long xpath's like you've never seen before.

---

Related Topics