How to Call a Servlet in GWT

Sometimes you may need a HttpServlet other than GWT Rpc Service in a real life application. If needed then how to call the Servlet from your GWT client? Here you will find the answer.

Here is a simple HelloServlet

public class HelloServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{ 
String name = request.getParameter("name");
response.getWriter().write("Hello "+name+", Welcome in My Servlet");
}
}

The Servlet uses a request a parameter 'name' and writes it in the response writer.

To call the Servlet from the client first configure the web.xml (war/WEB-INF/web.xml) file to let your GWT client know about the HelloServlet.

 HelloServlet
 org.ratul.servlettest.server.HelloServlet


 HelloServlet
 /hello

Value of the url-pattern node will be used later to call the Servlet.

Now make a simple UI with a TextBox and a Button.

final Button sendButton = new Button("Send");
final TextBox nameField = new TextBox();
RootPanel.get().add(nameField);
RootPanel.get().add(sendButton);

In the Click Handler of the sendButton call the Servlet with the 'name' parameter in the following way

sendButton.addClickHandler(new ClickHandler() {
  public void onClick(ClickEvent event) {
    Window.Location.replace("/hello?name="+nameField.getText());
    //the url-pattern value is used here
  }
});

Thats' all for today. Happy coding with GWT :-)

Getting Started with GXT (Ext GWT) Chart : Crate a Simple Horizontal Bar Chart

Ext GWT is providing us a very handy Chart library based on Open Flash Chart. Here you will find a step by step detail description about creating a simple horizontal bar chart using the GXT chart library.

Create a new project named GXTBascicChart and add GXT library in the project. Go to the GXTBascicChart.gwt.xml file and add this line

<inherits name='com.extjs.gxt.charts.Chart'/>

Now go to the directory where you have extracted the GXT library. In the resource folder you will find all the resources for using GXT. Copy the chart and flash folders in the war folder of you application.

Go to the onModuleLoad method of GXTBascicChart class and remove all the auto generated code of this method. Create a Content Panel to place the chart

ContentPanel cp = new ContentPanel();  
cp.setHeading("Horizontal Bar chart");  
cp.setFrame(true);  
cp.setSize(550, 400);  
cp.setLayout(new FitLayout());

Now create a Chart component by providing the location of the open flash chart Shockwave file which resides in the chart folder.

String url = "chart/open-flash-chart.swf";  
final Chart chart = new Chart(url);

Set a Chart Model for the chart object and add this to the Content Panel

chart.setBorders(true);  
chart.setChartModel(getHorizontalBarChartModel());  
cp.add(chart);      
RootPanel.get().add(cp);

The Chart Model is responsible for the chart title, axes, legends, labels, and draw-able elements in your chart. Here is the getHorizontalBarChartModel method

public ChartModel getHorizontalBarChartModel() 
{ 
  //Create a ChartModel with the Chart Title and some style attributes
  ChartModel cm = new ChartModel("Students by Department", "font-size: 14px; font-family:      Verdana; text-align: center;");
 
  XAxis xa = new XAxis();
  //set the maximum, minimum and the step value for the X axis
  xa.setRange(0, 200, 50);  
  cm.setXAxis(xa);
  
  YAxis ya = new YAxis();
  //Add the labels to the Y axis  
  ya.addLabels("CSE", "EEE", "CE", "ME","CHE");  
  ya.setOffset(true);  
  cm.setYAxis(ya);

  //create a Horizontal Bar Chart object and add bars to the object  
  HorizontalBarChart bchart = new HorizontalBarChart();  
  bchart.setTooltip("#val#Students");  
  bchart.addBars(new HorizontalBarChart.Bar(60, "#ffff00")); 
  //different color for different bars 
  bchart.addBars(new HorizontalBarChart.Bar(180, "#0000ff"));  
  bchart.addBars(new HorizontalBarChart.Bar(180, "#00ff00"));  
  bchart.addBars(new HorizontalBarChart.Bar(120, "#ff0000"));
  bchart.addBars(new HorizontalBarChart.Bar(120, "#333ccc"));

  //add the bchart as the Chart Config of the ChartModel
  cm.addChartConfig(bchart);       
  cm.setTooltipStyle(new ToolTip(MouseStyle.FOLLOW));  
  return cm;  
}

And here is the last step before running your application.
Go to the GXTBascicChart.html file and add the following line in the head section

<script language='javascript' src='flash/swfobject.js'></script>

That's all. Run the application and the output will be like this

How to Use Your Session Beans from GWT Client

Recently we have finished a project in which we were using EJB3.0 in the business tier and a GWT client for the user interface. Here i will share you how we connected them in a very convenient way.

Suppose you have an Entity class, Department and a stateless Session Bean named DepartmentBean which implements a remote interface DepartmentBeanRemote. To save a department the bean class
has a create method

public BigInteger create(Department department)
{
try
{
em.persist(department);
em.flush();
return department.getIdNr();
} catch (InvalidStateException in)
{
in.printStackTrace();
} catch (Exception ex)
{
ex.printStackTrace();
}
return null;
}

Now how to call this create method from your GWT client?

First create a GWT RPC Service named DepartmentService and DepartmentServiceImpl is the implementation class of this service interface. The service implemenltation class will serve as a gateway between client and bean class.

Create an instance of DepartmentBeanRemote by dependency injection in DepartmentServiceImpl.

@EJB
private DepartmentBeanRemote departmentBeanRemote;

Now use this instance to call the methods of the DepartmentBean in the following way

public Long create()
{
try
{
Department department = new Department();
department.setIdNr(null);
department.setDepartmentNameSt("Computer Science");
department.setDepartmentDescriptionSt("Most popular department of the university");
BigInteger returnValue = departmentBeanRemote.create(department);
return new Long(returnValue.toString());
}
catch (Exception e)
{
e.printStackTrace();
return null; 
}
}

Call the service method from the client. You have just made a complete path between your GWT Client and the Session Beans.