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