integrate Bootstrap and GWT

Question

I'm investigating the best practices to use Bootstrap library with GWT. I prefer not use the GWT-Bootstrap project and prefer to use plain css and js Bootstrap library in my GWT app.

I'm searching how i can apply Bootstrap style to GWT UI components? do i need to do this in the UI view code by working on the DOM Elements of GWT components ? or is there any other clean way to achieve this integration of GWT and Bootstrap?

Answer 1

No, there's no way to simple add the bootstrap styles to gwt components. You will have to deal with DOM, remove some GWT CSS classes and add GWT ones instead, and, at least you copy your code from one place to everywhere, you will made a class that extend the original component and use this new class everywhere, which is basically what GWT-Bootstrap do.

I know this because about one year ago, I wanted to do exactly what you're saying now: apply bootstrap styles to GWT components in a clean way, than, I managed it to work, and start the GWT-Bootstrap development.

GWT-Bootstrap actually already solved the most of the gwt+bootstrap integration bugs, and works well for basically any project. I know that some components are not implemented yet or have bugs, but, maybe you can fix some and made a pull-request, IMHO, that's better than rebuild all the things.

Answer 2

You certainly can use Bootstrap and GWT without a third-party wrapper library, adding Bootstrap's CSS classes with the addStyleNames attribute in UiBinder XML or the same method in Java code. But Bootstrap also works heavily with custom data attributes like data-toggle for instance to let the "magic" happen. Since GWT's default widgets (FlowPanel etc.) don't offer setters for these custom attributes you can't set them in UiBinder XML and find yourself writing lots of

getElement().setAttribute(...)

in your Java code.

That's what wrapper libraries like GWT-Bootstrap or GwtBootstrap3 are for. They offer custom widgets that wrap these functionalities so that you can use Bootstrap widgets as you are used to with default GWT widgets.