[SOLVED] GWT Bootstrap Responsive Design of existing webapp with screens

GWT Bootstrap Responsive Design of existing webapp with screens

I have a working web application developed with GWT. Now that it has to resize on a tablet or smaller screens I thought of using GWT Bootstrap. But the existing application has only one project.html and project.css file under war folder. Currently no UI binders are used. There are four screens displaying different charts created by d3js.

My Question is it still possible to use gwt bootstrap for resizing? Or what about only Bootstrap and use the css file without any UI binders?

Which approach is better ? As im confused and have spent couple of hours searching and reading.

Solution

If you plan to interact in your GWT app with bootstrap components (i.e. NavBar, Caoursel, etc) then I would go with gwt-bootstrap because you don't have to use JSNI and you get some type safety.

If you don't need to interact those components or you use mostly pure HTML in your GWT app you can also use plain bootstrap and add the corresponding classes.

Edit code example:

UiBinder:

<b:NavPills>
  <b:AnchorListItem active="true">Item 1</b:AnchorListItem>
  <b:AnchorListItem>Item 2</b:AnchorListItem>
  <b:AnchorListItem>Item 3</b:AnchorListItem>
  <b:AnchorListItem enabled="false">Item 4</b:AnchorListItem>
  <b:AnchorListItem pull="RIGHT">Pulled right</b:AnchorListItem>
</b:NavPills>

Code:

NavPills pills = new NavPills();
AnchorListItem item1 = new AnchorListItem("Item 1");
item1.setActive(true);
pills.add(item1);
pills.add(new AnchorListItem("Item 2");
pills.add(new AnchorListItem("Item 3");
...