Remote MySql connection

Hi folks, in project you may need to connect to remote database server. To connect remote mysql server, you have to follow some steps:

Creating User: CREATE USER testuser IDENTIFIED BY 'testuser';

Grant access: GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,DROP ON test.* TO 'testuser';

You need to open firewall port to access mysql server,on which your mysql server is running bydefault it takes 3306.

1) On Windows : controlpanel->Windows Firewall >Exceptions ->Add Port
2) On Ubuntu use command: sudo iptables -A INPUT -p tcp -d 0/0 -s 0/0 --dport 3306 -j ACCEPT

Connect to remote db by : mysql --host=remoteserverip -u testuser -p testuser

GWT and Fusion Chart

In today's blog we are going to discuss about charts.
There are various libraries available for charting in GWT.
But the fusion chart is more interactive and with good UI.
I was asked to integrate Fusion chart with GWT. I searched for code witch will help me integrating fusion chart with GWT. On Fusion chart website I found http://code.google.com/p/gwt-fusionchart/ this link in which there are many classes using which you can integrate it with GWT. But if you want easy way to integrate it with GWT. Then you can use GWT2SWF library. You can get it from http://code.google.com/p/gwt2swf, its a very useful library.
Put the swf in your 'war' dir in application so it will get copied in parent folder when you are deploy you app on web server. You can put 'Data.xml' as data to swf file in same dir or you can pass it as a string from application. Now you can do it with couple of lines of code. The code is as follow:

SWFWidget piChart2D = new SWFWidget("Pie2D.swf", "600px", "600px");
Chart2D.addFlashVar("dataURL", "Data.xml");
panel.add(piChart2D);

Or

SWFWidget piChart3D = new SWFWidget("Pie3D.swf", "550px", "300px");
piChart3D.addFlashVar("dataXML", getXML());
piChart3D.addParam("dataXML", getXML());
panel.add(piChart3D);

In getXML() method you can create your own xml. here it is just a static file string as bellow:
private String getXML() {
return "<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' /><set label='test Apr' value='23800' /> <set label='May' value='29600' /><set label='June' value='27600' /><set label='July' value='31800' /> <set label='August' value='39700' /><set label='September' value='37800' /> <set label='Zee11' value='21900' /><set label='November' value='32900' /> <set label='December' value='39800' /></chart>";
}

GWT Printing

In my GWT application I was asked to write printing functionality, to print a pop-over content. I searched a lot on a web, I got a reference where I found a code that prints a content of DIV or specified HTML element. The target I wanna to print was a pop-over with CSS. I tried code but print I was getting without CSS, scattered UI. With the following code you can print any GWT widget or doc with CSS. If you print a html page with following line
< link rel="StyleSheet" type="text/css" media="print" href="/myCss.css" >
browser apply its own CSS to the printing document.

Print.java

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.UIObject;

public class Print {

public static native void it() /*-{
$wnd.print();
}-*/;

public static native void buildFrame(String html) /*-{
var frame = $doc.getElementById('__printingFrame');
if (!frame) {
$wnd.alert("Error: Can't find printing frame.");
return;
}
frame = frame.contentWindow;
var doc = frame.document;
doc.open();
doc.write(html);
doc.close();
frame.focus();
frame.print();
}-*/;

public static native void printFrame() /*-{
var frame = $doc.getElementById('__printingFrame');
frame = frame.contentWindow;
frame.focus();
frame.print();
}-*/;

public static class PrintFrame implements Command {

public void execute() {
printFrame();
}
}
public static PrintFrame printFrameCommmand = new PrintFrame();

public static void it(String html) {
try {
buildFrame(html);
} catch (Throwable exc) {
Window.alert(exc.getMessage());
}
}

public static void it(UIObject obj) {
it("", obj.getElement().getInnerHTML());
}

public static void it(Element element) {
it("", element.getInnerHTML());
}

public static void it(String style, String it) {
it("" + style + "" + it + "");
}

public static void it(String style, UIObject obj) {
it(style, obj.getElement().getInnerHTML());
}

public static void it(String style, Element element) {
it(style, element.getInnerHTML());
}
}

You have to insert following line of code into your GWT application's html file :
< iframe id="__printingFrame" style="width:0;height:0;border:0"> </iframe>

So you can set a ID to a GWT element and pass it to print method. To print a element content with css you can call

Print.it("",DOM.getElementById("html_id"));

You can set Id to any widget in GWT easily e.g. if you to set Id to panel
panelObject.getElement().setId("html_id");

GWT EditableLabel

GWT provide a feature of creating your own widget. Today I will demonstrate you how can you create your own widget. You can create a widget in GWT by extending your class with com.google.gwt.user.client.ui.Composite. You have to set the widget to be wrapped by Composite by calling Composite class's initWidget(Widget w) method. Wrapped object must be set before calling any method on widget or adding to panel.

EditableLabel.java

import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FocusListener;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

/**
* @author Yogesh Bhave
*
* Class represent editable label, when user click on label user can
* edit label text.
*/
public class EditableLabel extends Composite {
private Panel editPanel;
private Label label;
private EditableLabel editableLabel;
private TextBox editBox;
private EditableLabelListener listeners;

public EditableLabel(String text) {
super();
editableLabel = this;
editPanel = new HorizontalPanel();
label = new Label(text);
editBox = new TextBox();
editBox.setWidth("100px");
editPanel.add(label);

label.setStyleName("editableStyle");
label.addClickListener(new ClickListener() {
@Override
public void onClick(Widget sender) {
editPanel.remove(label);
editPanel.add(editBox);
editBox.setText(label.getText());
editBox.setFocus(true);
}
});

editBox.addFocusListener(new FocusListener() {
@Override
public void onFocus(Widget arg0) {
}

@Override
public void onLostFocus(Widget arg0) {
label.setText(editBox.getText());
editPanel.remove(editBox);
editPanel.add(label);
if(listeners!=null)
listeners.onLabelModified(label.getText(),
editableLabel);
}
});

initWidget(editPanel);
}

public void addEditableLabelListener(EditableLabelListener listener) {
listeners = listener;
}


public String getText() {
return label.getText();
}

public void setText(String text) {
label.setText(text);
}
}

****************************************************************************
EditableLabelListener.java

/**
* @author Yogesh Bhave
*
*/
public interface EditableLabelListener {
public void onLabelModified(String text,EditableLabel sender);
}


Above example illustrate the Listener patteren also. You can directly use 'EditableLabel' class in your code. If you want any notification on label text changed then you can add listener on editable label object by implementing EditableLabelListener and using method addEditableLabelListener(EditableLabelListener listener).

Why GWT?

Whenever you are studying any framework/technology learn it by WWH way. What is the technology? Why to use this? and how it works?

Lets start with what is GWT?
Google Web Toolkit is open source framework that allow you to write an Ajax based application without a pain. So you can develop Ajax application in Java language. GWT comes with GWT compile that convert Java code into browser compliant HTML and javascript.

Ok so gwt just convert Java code into HTML and JS but why to use GWT?
Writing a code in JS is tedious job from my point of view.
As GWT allow user to write application in Java. GWT comes with java features. OO is the most important. So you can code your ajax application as OO, can reuse code efficiently.
You can write test cases for the GWt app.
It provide real time client side debugging, with the hosted mode browser provided by google or in browser mode.
Also you can use internationalization(i18n) feature in your app easily.
GWT comes with the features like ResouceBundle, ImageBundle. Cacheing.
You can use JSNI(Java Script Native Interface), you can write JS code in Java file.
GWT support most of the standard browsers, means GWT compiler create a compatible JS for supported browsers, also GWT compress the JS code while generating to improve performance.

GWT how it works?
Creating GWT application:
In my post I am going to explain GWT project creation with the eclipse and GWT plugin.

Open eclipse, if you have GWT plugin. Go to file menu -> new -> Web application.
It will show you a dialog box asking 'Project Name' and 'package'. Enter the project name 'MyGwtPro' and package name 'com.google.mygwtpro', plugin will create a GWT project for you.

You will get structure of GWT(1.6) project as follow:
src
+com.google.gwtpro
+com.google.gwtpro.client
+com.google.gwtpro.server
war
+WEB-INF
+lib
+web.xml
+MyGwtPro.css
+MyGwtPro.html

In above packages client package contains java source code which will melt down to JS. In your client package you will get GreetingService.java and GreetingServiceAsync.java, which are useful in Async callback using RPC(Remote Procedure Call). And server side contain all server implementation stuff/servlet stuff.

When you compile code, it will create a folder 'mygwtpro' in your war folder. Where you will find a boot start JS for your application: mygwtpro.nocache.js.

You can run your web app in hosted mode, Go to package explorer right click on your project go to run as and click on Web Application. Same way you can debug your application add breakpoint use debug as.

ImageBundle: Typically, an application uses many small images for icons. An HTTP request has to be sent to the server for each of these images, and in some cases, the size of the image is smaller than the HTTP response header that is sent back with the image data. These round trips to the server for small pieces of data are wasteful. Even when the images have been cached by the client, a 304 ("Not Modified") request is still sent to check and see if the image has changed. Since images change infrequently, these freshness checks are also wasteful.
To solve this problem, GWT introduces the concept of an image bundle. Users can define an image bundle that contains the images used by their application, and GWT will automatically create the composite image and provide an implementation of the interface for accessing each individual image. Instead of a round trip to the server for each image, only one round trip to the server for the composite image is needed. Since the filename of the composite image is based on a hash of the file's contents, the filename will change only if the composite image is changed. This means that it is safe for clients to cache the composite image permanently, which avoids the unnecessary freshness checks for unchanged images.

Other things I am going to explain in my coming posts, things how it works. I will write separate post for above mentioned features. So stay tuned. And enjoy coding with GWT with ease :-)