Integration of Ext-GWT with DataBase My-SQL performing CRUD Operation

ExtGWTCRUDExample : This example shows user to perform CRUD operation on My-SQL DataBase using ExtGWT.

ExtGWTCRUDExample.gwt.xml:

xml version="1.0" encoding="UTF-8"?>

<module rename-to='extgwtcrudexample'>

<inherits name='com.google.gwt.user.User' />

<inherits name='com.google.gwt.user.theme.standard.Standard' />

<inherits name='com.extjs.gxt.ui.GXT' />

<entry-point class='extGWTCRUDExample.client.ExtGWTCRUDExample' />

<source path='client' />

<source path='shared' />

module>

ExtGWTCRUDExample:

package extGWTCRUDExample.client;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;

import com.extjs.gxt.ui.client.event.ButtonEvent;

import com.extjs.gxt.ui.client.event.SelectionListener;

import com.extjs.gxt.ui.client.widget.Info;

import com.extjs.gxt.ui.client.widget.Layout;

import com.extjs.gxt.ui.client.widget.LayoutContainer;

import com.extjs.gxt.ui.client.widget.VerticalPanel;

import com.extjs.gxt.ui.client.widget.button.Button;

import com.extjs.gxt.ui.client.widget.form.FormButtonBinding;

import com.extjs.gxt.ui.client.widget.form.FormPanel;

import com.extjs.gxt.ui.client.widget.form.TextField;

import com.extjs.gxt.ui.client.widget.layout.AnchorLayout;

import com.extjs.gxt.ui.client.widget.layout.FormData;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.core.client.GWT;

import com.google.gwt.user.client.Element;

import com.google.gwt.user.client.rpc.AsyncCallback;

import com.google.gwt.user.client.ui.HTML;

import com.google.gwt.user.client.ui.RootPanel;

/**

* Entry point classes define onModuleLoad().

*/

public class ExtGWTCRUDExample implements EntryPoint {

private static final String SERVER_ERROR = "An error occurred while "

+ "attempting to contact the server. Please check your network "

+ "connection and try again.";

private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);

public void onModuleLoad() {

//to add something TBD

@SuppressWarnings("unused")

Layout junk = new AnchorLayout();

TemplateExample objTemplateExample = new TemplateExample();

RootPanel.get().add(objTemplateExample);

}

private VerticalPanel vp;

private FormData formData;

//by siddhu[

class TemplateExample extends LayoutContainer {

@Override

protected void onRender(Element parent, int index) {

super.onRender(parent, index);

formData = new FormData("-20");

vp = new VerticalPanel();

vp.setSpacing(10);

//createForm1();

FormPanel simple = new FormPanel();

simple.setHeading("Ext GWT CRUD Form");

simple.setFrame(true);

simple.setWidth(350);

final TextField id = new TextField();

id.setFieldLabel("Id");

//firstName.setAllowBlank(false);

simple.add(id, formData);

final TextField name = new TextField();

name.setFieldLabel("Name");

//name.setAllowBlank(false);

simple.add(name, formData);

SelectionListener l = new SelectionListener() {

@Override

public void componentSelected(ButtonEvent ce) {

//Info.display("Click", ce.getButton().getText() + " clicked");

if(ce.getButton().getText()!= null && (!ce.getButton().getText().equals("")&&ce.getButton().getText().equals("Insert")))

{

//String idText = id.getValue();

//String nameText = name.getValue();

insertToMYSQL(id.getValue(), name.getValue());

}

if(ce.getButton().getText()!= null && (!ce.getButton().getText().equals("")&&ce.getButton().getText().equals("Update")))

{

updateToMYSQL(id.getValue(), name.getValue());

}

if(ce.getButton().getText()!= null && (!ce.getButton().getText().equals("")&&ce.getButton().getText().equals("Delete")))

{

deleteToMYSQL(id.getValue(), name.getValue());

}

}

};

Button insert = new Button("Insert",l);

simple.addButton(insert);

Button update = new Button("Update",l);

simple.addButton(update);

Button delete = new Button("Delete",l);

simple.addButton(delete);

simple.setButtonAlign(HorizontalAlignment.CENTER);

FormButtonBinding binding = new FormButtonBinding(simple);

binding.addButton(insert);

binding.addButton(update);

binding.addButton(delete);

vp.add(simple);

add(vp);

//idText = id.getSelectedText();

//nameText = name.getSelectedText();

}

/**

* Send the name from the nameField to the server and wait for a response.

*/

private void insertToMYSQL(String idText, String nameText) {

//String idText = id.getText();

//String nameText = name.getText();

String methodname = "Insert";

greetingService.greetServer(idText,nameText,methodname,

new AsyncCallback() {

public void onFailure(Throwable caught) {

// Show the RPC error message to the user

RootPanel.get().add(new HTML("RPC call failed. :-("));

}

public void onSuccess(String result) {

RootPanel.get().add(new HTML("RPC call Success:"));

}

});

}

private void updateToMYSQL(String idText, String nameText) {

//String idText = idField.getText();

//String nameText = nameField.getText();

String methodname = "Update";

greetingService.greetServer(idText,nameText,methodname,

new AsyncCallback() {

public void onFailure(Throwable caught) {

// Show the RPC error message to the user

RootPanel.get().add(new HTML("RPC call failed. :-("));

}

public void onSuccess(String result) {

RootPanel.get().add(new HTML("RPC call Success:"));

}

});

}

private void deleteToMYSQL(String idText, String nameText) {

//String idText = idField.getText();

//String nameText = nameField.getText();

String methodname = "Delete";

greetingService.greetServer(idText,nameText,methodname,

new AsyncCallback() {

public void onFailure(Throwable caught) {

// Show the RPC error message to the user

RootPanel.get().add(new HTML("RPC call failed. :-("));

}

public void onSuccess(String result) {

RootPanel.get().add(new HTML("RPC call Success:"));

}

});

}

}

//by siddhu]

}

GreetingService:

package extGWTCRUDExample.client;

import com.google.gwt.user.client.rpc.RemoteService;

import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

/**

* The client side stub for the RPC service.

*/

@RemoteServiceRelativePath("greet")

public interface GreetingService extends RemoteService {

String greetServer(String id,String name,String methodName) throws IllegalArgumentException;

}

GreetingServiceAsync:

package extGWTCRUDExample.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

/**

* The async counterpart of GreetingService.

*/

public interface GreetingServiceAsync {

public void greetServer(String input1,String input2,String methodName, AsyncCallback callback)

throws IllegalArgumentException;

}

GreetingServiceImpl:

package extGWTCRUDExample.server;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.Statement;

import extGWTCRUDExample.client.GreetingService;

import extGWTCRUDExample.shared.FieldVerifier;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

/**

* The server side implementation of the RPC service.

*/

@SuppressWarnings("serial")

public class GreetingServiceImpl extends RemoteServiceServlet implements

GreetingService {

String dbUrl = "jdbc:mysql://localhost/siddhutest_db";

String dbClass = "com.mysql.jdbc.Driver";

public String greetServer(String id,String name,String methodName) throws IllegalArgumentException {

// Verify that the input is valid.

/*

if (!FieldVerifier.isValidName(input)) {

// If the input is not valid, throw an IllegalArgumentException back to

// the client.

throw new IllegalArgumentException(

"Name must be at least 4 characters long");

}

String serverInfo = getServletContext().getServerInfo();

String userAgent = getThreadLocalRequest().getHeader("User-Agent");

return "Hello, " + input + "!

I am running " + serverInfo

+ ".

It looks like you are using:
" + userAgent;

*/

if(methodName.equals("Insert"))

{

try {

Class.forName(dbClass).newInstance();

Connection con = DriverManager.getConnection(dbUrl,"root","");

Statement stmt = con.createStatement();

String query = "insert into test_table (id, name) values ("+id+",'"+name+"')";

int i = stmt.executeUpdate(query);

con.close();

return "success";

} //end try

catch(Exception e) {

e.printStackTrace();

}

}

else if(methodName.equals("Delete"))

{

try {

Class.forName(dbClass).newInstance();

Connection con = DriverManager.getConnection(dbUrl,"root","");

Statement stmt = con.createStatement();

String query = "delete from test_table where id ="+id;

int i = stmt.executeUpdate(query);

con.close();

return "success";

} //end try

catch(Exception e) {

e.printStackTrace();

}

}else if (methodName.equals("Update"))

{

try {

Class.forName(dbClass).newInstance();

Connection con = DriverManager.getConnection(dbUrl,"root","");

Statement stmt = con.createStatement();

String query = "update test_table set name = '"+name+"' where id ="+id;

int i = stmt.executeUpdate(query);

con.close();

return "success";

} //end try

catch(Exception e) {

e.printStackTrace();

}

}

return "failure";

}

}

Web.xml:

xml version="1.0" encoding="UTF-8"?>

DOCTYPE web-app

PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<servlet>

<servlet-name>greetServletservlet-name>

<servlet-class>extGWTCRUDExample.server.GreetingServiceImplservlet-class>

servlet>

<servlet-mapping>

<servlet-name>greetServletservlet-name>

<url-pattern>/extgwtcrudexample/greeturl-pattern>

servlet-mapping>

<welcome-file-list>

<welcome-file>ExtGWTCRUDExample.htmlwelcome-file>

welcome-file-list>

web-app>

ExtGWTCRUDExample.html:

doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />

<title>Web Application Starter Projecttitle>

<script type="text/javascript" language="javascript" src="extgwtcrudexample/extgwtcrudexample.nocache.js">script>

head>

<body>

<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0">iframe>

<noscript>

<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">

Your web browser must have JavaScript enabled

in order for this application to display correctly.

div>

noscript>

<h1>Web Application Starter Projecth1>

<table align="center">

<tr>

<td colspan="2" style="color:red;" id="errorLabelContainer">td>

tr>

table>

body>

html>