Getting started with GWT-Bootstrap

GWT-Bootstrap is a project that aims to provide all the Twitter Bootstrap styles and widgets to GWT applications. I had this idea in Jan/2012, and it was not a library, initially, I just made a simple InputText and Button widgets as a proof of concept, and then I think: “Why not?”.

So, here we go. The initial release is almost done, and has a lot of widgets and functionally ported and working, including the awesome responsiveness and the great NavBar.

So, let’s start using it.

Get the jar

There are 2 ways to get the jar:

• Maven
• Downloading the jar by hand and put it in you app classpath

Configuring you module

You will have to configure your App.gwt.xml file to inherit the GWT-Bootstrap widget library. You can do it like this:

<inherits name="com.github.gwtbootstrap.Bootstrap"/>

UiBinder usage

Assuming that you’re using UIBinder, add the following namespace to the <ui:UIBinder> element:

xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"

Then you can easily use the b namespace in your widget design, like Heading:

<b:heading size="2">Hello World GWT-Bootstrap</b:heading>

Datepicker

We also have the bootstrap datepicker ported into GWT-Bootstrap, but, in a different module and namespace.

Add to your App.gwt.xml:

<inherits name='com.github.gwtbootstrap.datepicker.Datepicker' />

And in your Widget.ui.xml file:

xmlns:b2="urn:import:com.github.gwtbootstrap.datepicker.client.ui"

Then, just use the widget like this:

<b2:DateBox format="dd/mm/yyyy" autoClose="true" />

Pros and Cons

Pros

• Easy to setup and use
• Themeable
• Almost all widgets ported
• Active forum and development

Cons

• Doesn’t support less files (#29)
• Load all the JavaScript files in the bootstrap of the app (#70)

Happy coding!