Skip to main content

Real Ajax for Real Java Developers: GWT & jQUERY

In this days every Ajax application uses jQuery or Dojo or something like this. If you ask me jQuery is the most often framework because it is small, it helps a lot, it has cool features and it is promoted by Microsoft (we live in strange days). jQuery can be used for many things one of them is effects. We all know how Flash, Silverilght and JavaFX “Rich UI” look and often with CSS and JavaScript it’s very hard to make things that can be done in easy in flash. The jQuery helps a lot with it fade effects slideUp/slideDown and etc. I as a Java Developer I like GWT but often I use JSF too. When I use JSF I’ve always add JQuery because at certain point I’ve always  need to type some javascript and with jquery its easier. When I use GWT I’ve wanted to be able to use JQuery the same way like I’ve use it in JSF app or even better. The solution is GWTQuery or GQuery: http://code.google.com/p/gwtquery/ . From the website we can see That Gwt Query is a jQuery-like API written in GWT, which allows GWT to be used in progressive enhancement scenarios where perhaps GWT widgets are too heavyweight.

When I saw this I said: “awesome”. You can read how to get started from here http://code.google.com/p/gwtquery/wiki/GettingStarted I will not explain how to setup and use gwt query because in the wiki you will get up2date information about possible changes but the result is awesome.

Lets assume that we have a table and we want to hide it when the user clicks a button or link but with some transition effect like fade. To do this I use gwt plugin for eclipse from google  and created a simple project. My welcome-file GwtJQuery.html looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set -->
<!-- the browser's rendering engine into -->
<!-- "Quirks Mode". Replacing this declaration -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout. -->

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

<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="GwtJQuery.css">

<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>

<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="gwtjquery/gwtjquery.nocache.js"></script>
</head>

<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

<h1>Web Application Starter Project</h1>

<table align="center" bgcolor="yellow" id="table">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
<td id="hideButtonContainer"></td>
</tr>
</table>
</body>
</html>



The only changes from the base project are the script tag for gwtquery,  the id for the table with value “table” and one new column with id hideButtonContainer. The new code is only this:




...
final Button hideButton=new Button("Hide");
...
RootPanel.get("hideButtonContainer").add(hideButton);
...
hideButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
hideContainer();
}
});
...
protected void hideContainer() {
$("table").css("background-color", "grey");
$("table").click(new Function() {
@Override
public boolean f(Event e) {
$(e).as(Effects).fadeOut();
return true;
}
});
}
...



We have hideButton, we add it to the RootPanel and we have clickHandler that invokes method called hideContainer. The methods uses GWTQuery which looks like jquery and what we do: we are make instant changing of the background-color to grey and fade effect on the table. You can read the getting started guide of gwt query for more info but the result looks like this:











Comments

Popular posts from this blog

Convert PFX certificate to JKS, P12, CRT

I recently had to use a PFX certificate for client authentication (maybe another post will be coming) and for that reason I had to convert it to a Java keystore (JKS).  We will create BOTH a truststore and a keystore, because based on your needs you might need one or the other.  The difference between truststore and keystore if you are not aware is(quote from the JSSE ref guide : TrustManager: Determines whether the remote authentication credentials (and thus the connection) should be trusted. KeyManager: Determines which authentication credentials to send to the remote host. Ok that's enough what you will need is openssl and Java 7+ ;) ! First let's generate a key from the pfx file, this key is later used for p12 keystore. openssl pkcs12 -in example.pfx -nocerts -out  example .key   Enter Import Password: MAC verified OK Enter PEM pass phrase: Verifying - Enter PEM pass phrase: As shown here you will be asked for the password of the pfx file, l

Hibernate Generic DAO.

When you use Hibernate and DAO pattern it is a good idea to use a Generic Base Dao. The fallowing code snippet contains GenericDAO that is a base class for all my DAO classes. This GenericDAO uses HibernateDaoSupport from Spring for its implementation if you want you can use JpaDaoSupport or JdbcDaoSupport in your projects. My Generic DAO interface looks like this : package org.joke.myproject.dao.base; import java.io.Serializable; import java.util.List; /** * @author Naiden Gochev * @param <E> * @param <PK> */ public interface GenericDao<E,PK  extends Serializable> {     PK save(E newInstance);     void update(E transientObject);     void saveOrUpdate(E transientObject);     void delete(E persistentObject);     E findById(PK id);     List<E> findAll();     List<E> findAllByProperty(String propertyName,Object value); } All method names are very common so I don't

Patching a Maven library with your custom class.

Sometimes you use a library that has a bug. Or maybe it doesn’t has a bug but you want to change something. Of course if it is an open source you can get the sources… build them … with your change and so on. However this first takes a lot of time and second you need the sources. What you usually want .. is to just replace one class.. or few classes with something custom… maybe add a line .. or remove a line and so on. Yesterday… I had an issue with jboss-logging. The version I was using was 3.2.0Beta1 and it turns out that using this version and log4j2 2.0 final basically meant that no log is send to log4j2. The reason was a null pointer exception that was catched in jboss logging class called Log4j2Logger. The bug I submitted is here https://issues.jboss.org/browse/JBLOGGING-107 and it was fixed at the same day. However I will use it as an example since I didn’t knew when this will be fixed.. and I didn’t want to wait till it is fixed. So I was thinking what I want.. to take the j