Getting started with GWT-Bootstrap

GWT-Bootstrap is an open source project that aims to provide all the Twitter Bootstrap styles and widgets to GWT applications.
The steps getting started with GWT-Bootstrap include :

STEP 1 : add gwt-bootstrap maven dependency in pom.xml

Add gwt-bootstrap maven dependency to pom.xml :

<!-- gwt-bootstrap dependencies start -->

<dependency>

<groupId>com.github.gwtbootstrap</groupId>

<artifactId>gwt-bootstrap</artifactId>

<version>2.1.0.0-SNAPSHOT</version>

</dependency>

<!-- gwt-bootstrap dependencies end -->

And then add gwt-bootstrap maven repository to pom.xml :

<repository>
<id>sonatype</id>
<url>http://oss.sonatype.org/content/repositories/snapshots</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</repository>


Here is a sample pom.xml :

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>
<groupId>com.zcode</groupId>
<artifactId>t</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>t</name>
<url>http://www.t.com.np</url>



<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jetty.version>6.1.4</jetty.version>
<spring.version>3.0.5.RELEASE</spring.version>
<slf4j.version>1.6.1</slf4j.version>
<java.version>1.6</java.version>
<junit.version>4.8.2</junit.version>
<logback.version>0.9.26</logback.version>
<gwt.version>2.4.0</gwt.version>
<webappDirectory>src/main/webapp</webappDirectory>
</properties>



<dependencies>

<!-- gwt dependencies start -->

<dependency>

<groupId>com.google.gwt</groupId>

<artifactId>gwt-user</artifactId>

<version>${gwt.version}</version>

<type>jar</type>

<scope>provided</scope>

</dependency>

<dependency>

<groupId>com.google.gwt</groupId>

<artifactId>gwt-servlet</artifactId>

<version>${gwt.version}</version>

<type>jar</type>

<scope>compile</scope>

</dependency>

<dependency>

<groupId>com.gwtplatform</groupId>

<artifactId>gwtp-mvp-client</artifactId>

<version>0.6</version>

<type>jar</type>

<scope>compile</scope>

</dependency>

<dependency>

<groupId>com.google.inject</groupId>

<artifactId>guice</artifactId>

<version>3.0</version>

<type>jar</type>

<scope>compile</scope>

</dependency>

<dependency>

<groupId>com.google.inject.extensions</groupId>

<artifactId>guice-assistedinject</artifactId>

<version>3.0</version>

<type>jar</type>

<scope>compile</scope>

</dependency>

<dependency>

<groupId>com.google.gwt.inject</groupId>

<artifactId>gin</artifactId>

<version>1.5.0</version>

<type>jar</type>

<scope>compile</scope>

</dependency>

<!-- gwt dependencies end -->

<!-- gwt-bootstrap dependencies start -->

<dependency>

<groupId>com.github.gwtbootstrap</groupId>

<artifactId>gwt-bootstrap</artifactId>

<version>2.1.0.0-SNAPSHOT</version>

</dependency>

<!-- gwt-bootstrap dependencies end -->

<dependencies>



<!-- gwt-bootstrap repo -->
<repositories>

<repository>
<id>sonatype</id>
<url>http://oss.sonatype.org/content/repositories/snapshots</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</repository>

</repositories>
</project>

STEP 2 : Configuring module -  inherit the GWT-Bootstrap widget library

Here is a sample gwt module inheriting gwt-bootstrap library :  t.gwt.xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.4.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.4.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="t">
<inherits name="com.google.gwt.user.User" />
<inherits name="com.google.gwt.i18n.I18N" />
<inherits name="com.google.gwt.http.HTTP" />
<inherits name="com.google.gwt.json.JSON"/>

<inherits name="com.google.gwt.uibinder.UiBinder" />
  <inherits name="com.google.gwt.inject.Inject" />
<inherits name="com.gwtplatform.mvp.Mvp" />
<!--  inherit the GWT-Bootstrap widget library -->
<inherits name="com.github.gwtbootstrap.Bootstrap"/>
<!--  end of inherit the GWT-Bootstrap widget library -->

<!--  start of inherit the GWT-Bootstrap  datepicker library -->
<inherits name='com.github.gwtbootstrap.datepicker.Datepicker' />
<!--  end of inherit the GWT-Bootstrap  datepicker library -->
<source path="client" />
<source path="shared" />


<define-configuration-property name="gin.ginjector" is-multi-valued="false"/>
<set-configuration-property name="gin.ginjector" value="com.zcode.t.client.mvp.TGinInjector"/>
<set-configuration-property name="UiBinder.useSafeHtmlTemplates" value="true" /> 

<set-property name="user.agent" value="safari"/>
<extend-property name="locale" values="en" />
<set-property-fallback name="locale" value="en"/>


<entry-point class="com.zcode.t.client.T" />
</module>

STEP 3 : using in UiBinder

Add xml namespaces, 

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

and  

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

Here is a sample UiBinder : 
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:w="urn:import:com.zcode.t.client.ui.widget" 
xmlns:c="urn:import:com.google.gwt.user.cellview.client"
xmlns:gwt="urn:import:com.google.gwt.user.cellview.client"
xmlns:com="urn:import:com.zcode.t.client.view.components"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
xmlns:b2="urn:import:com.github.gwtbootstrap.datepicker.client.ui"

>

<ui:with field="res" type="com.zcode.t.client.resources.TResources" />
<ui:style>
.button {
float: left;
}

.label {
margin-top: 5px;
margin-right: 5px;
float: left;
}

.box {
margin-right: 5px;
}

.rbutton {
float: left;
margin-right: 5px;
}
</ui:style>
<g:HTMLPanel styleName="{res.tCss.mainContentPanel}">
<g:HTMLPanel styleName="{res.tCss.msDatePickerHolder}">
<g:Label styleName="{res.tCss.msLabel}">From</g:Label>
<!-- using the DateBox widget -->
<b2:DateBox ui:field="fromDate" styleName="{res.tCss.msDatePicker}"/>
<g:Label styleName="{res.tCss.msLabel}">To</g:Label>
<b2:DateBox ui:field="toDate" styleName="{res.tCss.msDatePicker}"/>
<g:Button ui:field="dateRangeSubmit" styleName="{res.tCss.msResetButton}">Submit</g:Button>
</g:HTMLPanel>
<g:HTMLPanel styleName="{res.tCss.clear}" />
</g:HTMLPanel>
</ui:UiBinder> 

References :

1 - Using GWT Bootstrap SNAPSHOTS version with Maven, available at https://github.com/gwtbootstrap/gwt-bootstrap/wiki/Using-GWT-Bootstrap-SNAPSHOTS-version-with-Maven

2 - Base Widgets, Styles for Buttons, available at http://gwtbootstrap.github.com/#base:

3 -  Demo of Datepicker for Bootstrap, available at http://www.eyecon.ro/bootstrap-datepicker/

4 - USING A CUSTOM BOOTSTRAP THEME WITH GWT-BOOTSTRAP, available at http://caarlos0.github.com/posts/using-a-custom-bootstrap-theme-in-gwt-bootstrap/