GWT UiBinder - Grid based css styling

2
votes

I would ask if anyone has had experience in integrating a grid based CSS system (960 or similar) with a GWT uibinder application.

Our application is done with GWT 2.1, UIBinder and the latest GWT CSS capabilities, which have been really great to work with and enabled us to have a modular and flexible styling system. Our design team has returned a HTML layout with the corresponding grid css files and we are supposed to integrate them with our GWT code.

If we were to integrate the grid styles into our uibinder xml files we would have to wrap all our GWT widgets with divs with the right grid class names.

Personally I don't like the idea of mixing a completely separate grid css concern with the modular uibinder system, but I do understand the benefits the grid system can provide.

Any opinions or experiences? Pros and Cons for either approach?

1
cssgwtuibinder

1 Answers

3
votes

We found ourselves in a similar position, having the app built around gwt, MVP and uibinder. This is great for developers, but it turned out to not be so great for designers. At the begining we gave them a html snapshot of our app + css and asked them to design it. They did't like this. It became a nightmare when customers wanted custom designs done by their designers.

The question is will simply wrapping you widgets in div be enough? Our designer provided custom buttons, tables, links, etc.. It was quite a task to force gwt widgets to look like the design.

So what we did was:

  1. Replaced gwt-centric app design with html-centric one. This means we avoid generating html in code. We use classic html+JS+jQuery apporach, just instead of JS we have gwt and instead jQuery we use gwtQuery. We use only a few gwt widgets. Instead, in out Views we use gwtQuery to copy&expand example html that designer provided. GwtQuery can be externalized: all selectors can be put in one (or many) external interfaces, if a design changes (customers want changes or even bring in their designs) this intersection of html and gwt is all in one place.

  2. Ditched gwt 2.2 mvp (activities, places), for our own which is a simplified version of gwt 2.1 mvp architecture. We no longer have to add 2 new classes and update others (place, tokenizer, update place factory) to have a new place.