First steps with GWT Bootstrap


Gwt-Bootstrap is the port for Gwt of the Twitter Bootstrap framework. Twitter Bootstrap  defines a set of javascript and css components which are used to kickstart the development of websites (at least on the client-side).

The idea is to make it easy to develop a reasonably-good looking website without too much effort. Although of course a truly polished result will require additional customisation work on top of the framework. Twitter bootstrap also provides advanced features out-of-the-box, eg. responsive design (the components size is automatically adjusted function of the resolution of the device they're being drawn on to). 


How to use.

The best way to learn is to download the Gwt-bootstrap sources from Github and study the examples provided... but to sum up:

- Grab the GWT-bootstrap jar , version 2.0.3.0-SNAPSHOT at the time of writing.

- Add the jar to your project build path (menu File->Properties->Java Build Path in Eclipse)

- In the gwt.xml config file add a reference to the gwt-bootstrap library.
 <inherits name ="com.github.gwtbootstrap.Bootstrap"/>

- Assuming you're using UI binder then add the following namespace to the <ui:UiBinder> element.
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"

- the bootstrap components are now ready to be used:
<b:heading size="2">Hello World</b:heading>
    

Downsides.

- Gwt-Bootstrap it's still a work in progress. Not all Gwt widgets have been ported yet, eg.CellTable is missing at the time of writing.

- Most sites built with bootstrap tend to look a little bit similar. Greyish tones, the top navigation bar and the "Hero" unit underneath are the usual dead giveaways.


Examples.

Builtwithbootstrap has an extensive collection of websites leveraging Twitter bootstrap.

For Gwt-bootstrap specific websites - the main reference is the gwt-bootstrap showcase.


Edit 1: my side-project also runs gwt-bootstrap. Check it out.

Edit 2: one of the GWT-bootstrap committer copies most of the above post, without attribution. Now - as the saying goes imitation is the most sincere form of flattery but still that's another point in the downsides section - dubious ethics from (some) of the developers on this project.





3 comments:

  1. Actually, the GWT-Bootstrap version in maven repo is already with celltable support. Also, you can take a look at our updated showcase.

    ReplyDelete
  2. i followed your instructions and i am geeting the following error: No class matching "heading" in urn:import:com.github.gwtbootstrap.client.ui Element

    ReplyDelete
  3. hello i saw your project can u please tell me how did u do the responsive design i'm little bit confused here actually i tried with
    https://github.com/gwtbootstrap/gwt-bootstrap/issues/73 but it doesn't work please if possible can u tell me step by step what should i do please. Please help

    ReplyDelete