Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Gwt Hogan is a templating solution for GWT

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 examples
Octocat-spinner-32 gwt-hogan
Octocat-spinner-32 .gitignore
Octocat-spinner-32 notice.md
Octocat-spinner-32 pom.xml
Octocat-spinner-32 readme.md
readme.md

Gwt Hogan

Description

GwtHogan is a templating solution for GWT.

It changes the Gwt paradigm of widget based code and brings a more jquery + templates approach to coding while maintaining the power of GWT/Java as a strongly typed language and very efficient javascript compiler

Features

  • Generator which pre-compiles the templates
  • Can work with Native Java Object data or JSON object data
  • Can manipulate the template and add widgets to the template using GQuery

Getting started

  • Check out the source and run 'mvn clean install'
  • Change directory into the examples directory, and run mvn gwt:run

Setup:

Use the following maven dependency. NOTE: there's no distribution, so for now you'll have to use your local repository.

<dependency>
  <groupId>com.villagechief.gwt</groupId>
  <artifactId>gwt-hogan</artifactId>
  <version>${project.version}</version>
</dependency>

Add the following to your gwt.xml file:

<!-- required for gwt-hogan -->
<inherits name="com.google.gwt.json.JSON" />
<!-- required for doing jquery like expressions --> 
<inherits name='com.google.gwt.query.Query'/>
<!-- required for passing java objects to templates -->
<inherits name="com.google.web.bindery.autobean.AutoBean"/>
<!-- include gwt-hogan -->
<inherits name="com.villagechief.gwt.hogan.gwtHogan" />

The HoganWidget:

A template is made up of 2 components, the html mustache file and a Java class. For example:

MyTemplate.java:

public class MyTemplate extends HoganWidget {
  public Test(){
    addParameter("planet", new JSONString("world"));
  }
}

MyTemplate.html:

Hello {{planet}}

MyTemplate can then be used like any other widget. But it MUST be constructed using GWT.create. For example:

MyTemplate myTemplate = GWT.create(MyTemplate.class);
RootPanel.get().add(myTemplate);

Adding Widgets must be done after the widget is loaded onto the page. You can use GQuery to provide a selector to the add function which will be the container

MyTemplate.html:

Click this button: <span id="button"></span>

MyTemplate.java:

public class MyTemplate extends HoganWidget {
  public void onLoad(){
    super.onLoad();
    add(new Button(), $("#button1"));
  }
}

Using Java Objects:

Gwt Java objects need to be managed by the Gwt AutoBeans framework. See http://code.google.com/p/google-web-toolkit/wiki/AutoBean for more details.

AutoBeans and Managed java objects can be passed as parameters to a HoganWidget

Data object:

public interface TestData {
    public String getField1();
    public void setField1(String v);
}

Factory:

public interface TestDataFactory extends AutoBeanFactory {
    AutoBean<TestData> data();
}

MyTemplate.java:

public class MyTemplate extends HoganWidget {
  public Test(){
    TestDataFactory beanFactory = GWT.create(TestDataFactory.class);
    TestData test1 = beanFactory.data().as(); //get a managed TestData object
    test1.setField1("foo");

    addParameter("data", test1);
  }
}

MyTemplate.html

Field1: {{data.field1}}

Event Handling and DOM Handling

A HoganWidget doesn't contain widgets the way a normal GWT Composite widget does, but you can use GwtQuery to manipulate the DOM.

So for a template like:

Hello <span id="planet"></span>

You can put in your Template widget:

import static com.google.gwt.query.client.GQuery.*;
public MyTemplate()}
  $("#planet").text("world");
}

References

Something went wrong with that request. Please try again.