Tapestry 5 and GWT - part 1
GWT inside Tapestry 5 components with NetBeans support
This is a simple tutorial describing how to get my two favourite web "frameworks" (I guess GWT rather wants to be called a toolkit) Tapestry 5 and GWT to work together.
I'm using NetBeans and while this isn't specific to NetBeans, there is a hint or two for people using this excellent IDE.
When I searched Google for Tapestry and GWT I found this article this Google cached article this Internet Archive cached article (let's hope this one stays :) describing the procedure with Eclipse.
That's the inspiration for this blog post. So check that out if you use Eclipse.
And please jump back here for my part 2 when you're done reading the Clean Code article.
First you'll need some files...
- Tapestry 5 core
- Tapestry 5 IoC
- Tapestry 5 dependencies
- GWT
- GWT NetBeans plugin - optional, but very useful.
GWT
| Create new web application (a lot of info how web apps work in NetBeans here if you want to read more) with GWT as framework. GWT is available in the wizard if you have the GWT4NB plugin installed. |
|
Now you have a new project with the necessary libs and ant build scripts for GWT. It's probably easier than adding these to a T5 project since the GWT stuff differs more from the default project setup than T5. I've choosen to have different packages for GWT and T5 classes. It seems to work just fine to mix the packages, but it's probably easier keep them separate. |
Tapestry
I'll refer to Tapestry 5 as T5 from now on.Add the Tapestry servlet to web.xml like I've done here below. Notice the package se.pmdit.tutorial.t5gwt.tapestry which is the Tapestry applications root directory. All pages and components are placed in packages under this one. Also note the welcome-file "Start" which is a reference to T5's Start.tml and Start.java combination which builds a page.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>Start</welcome-file>
</welcome-file-list>
<display-name>Tapestry 5 With GWT</display-name>
<welcome-file-list>
<welcome-file>Start</welcome-file>
</welcome-file-list>
<context-param>
<param-name>tapestry.app-package</param-name>
<param-value>se.pmdit.tutorial.t5gwt.tapestry</param-value>
</context-param>
<filter>
<filter-name>app</filter-name>
<filter-class>org.apache.tapestry.TapestryFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>app</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
Create the first page, Start.tml, in the projects Web Pages directory. Just create a minimal template like this:
Start.tml
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<body>
The Start page
</body>
</html>
Then go on and create the corresponding Java class in the package ...tapestry.pages. Create an empty class named Start:
Start.java
public class Start {
}
Get NetBeans to recognize .tml files
Now we have set up the project to have both GWT and T5 stuff. However the .tml files T5 uses as templates won't show up as html files in NetBeans so let's take a few minutes and fix that before we continue.
|
|
|
Options/Advanced/IDE/System/Filetypes |
Put GWT to work
The next thing we do is to add the html part of the GWT code to our Start.tml page. If you created the GWT project from the wizard you can copy the two lines from the weclomeGWT.html. Here's the Start page after the change:Start.tml
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<body>
The Start page
<meta name='gwt:module'
content='se.pmdit.tutorial.t5gwt.gwt=se.pmdit.tutorial.t5gwt.gwt.GwtComponent'/>
<script type="text/javascript"
src="se.pmdit.tutorial.t5gwt.gwt/se.pmdit.tutorial.t5gwt.gwt.GwtComponent.nocache.js"/>
</body>
</html>
The bold part in the code above is the directory where GWT compiler places it's output. It's a bit verbose so you can change it to something shorter like js.
It's done in the file gwt.properties and the property name is gwt.output.dir. In part 2 we'll add some more javascript and a shorter name is easier to work with.
Try to build the project, GWT should place it's files in the js directory.
Now let's add some code to the GWT component. I took the example dialog from the GWT doc and created TheDialog class in the se.pmdit.tutorial.t5gwt.gwt.client package. The entry point class also needs to be changed a bit to have some way of showing the dialog.
GwtComponentEntryPoint.java
public class GwtComponentEntryPoint implements EntryPoint, ClickListener {
public GwtComponentEntryPoint() {
}
public void onModuleLoad() {
Button b = new Button("Open The Dialog!");
b.addClickListener(this);
RootPanel.get().add(b);
}
public void onClick(Widget sender) {
new TheDialog().show();
}
}
TheDialog.java
public class TheDialog extends DialogBox {
public TheDialog() {
setText("My First Dialog");
Button ok = new Button("OK");
ok.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
TheDialog.this.hide();
}
});
setWidget(ok);
}
}
And the finish...
That dialog wasn't pretty at all so let's style it a bit. Add a css directory under the projects Web Pages and create the file main.css there. Here's a simple example similar to the google style:main.css
.gwt-DialogBox {
border: 1px solid;
background-color: white;
width: 200px;
height: 100px;
}
.gwt-DialogBox .Caption {
background-color: #C3D9FF;
padding-left: 5px;
padding-right: 5px;
border-bottom-style: solid;
border-bottom-color: #999999;
border-bottom-width: 1px;
width: 190px;
}
| Just link in the css file with <head><link type="text/css" rel="stylesheet" href="css/main.css"/></head> and the result should look like the image to the right when you run it and click the button. |
|
- Update May 5 2008: Noticed that the cleancode blog where their article was hosted couldn't be reached. Updated link with this Google cached version.
- Update October 8 2008: Daniel Jue brought to my attention that even the Google cached version has disappeared. Updated link with this Internet Archive cached version instead. Thanks Daniel!