Do you know Google is using JQuery for Google Code site and they written a jQuery-like API in GWT, it is called GWTQuery.
First we will see simple tutorial for JQuery and GWT Query. In my next post we will discuss the difference and performance of GWTQuery and jQuery. Ref : Ray Cromwell ( Timepedia.org )
What is jQuery ?
jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications. You can use jQuery to develop cool web 2.0 applications. jQuery helps the programmers to keep code simple and concise. The jQuery library is designed to keep the things very simple and reusable.
jQuery library simplifies the process of traversal of HTML DOM tree. You can use jQuery to handle events, perform animation, and add the ajax support into your web applications with ease.
You can use simple JavaScript to perform all the functions that jQuery provides. Then why jQuery? The jQuery library is providing many easy to use functions and methods to make rich applications. These functions are very easy to learn and even a designer can learn it fast. Due to these features jQuery is very popular and in high demand among the developers. You can use jQuery in all the web based applications irrespective of the technology.
jQuery is java script and can be used with JSP, Servlets, ASP, PHP, CGI and almost all the web programming languages.
The jQuery code is very simple and easy to learn.
Here are the features of jQuery
- DOM element selections functions
- DOM traversal and modification
- Events
- CSS manipulation
- Effects and animations
- Ajax
- Extensibility
- Utilities - such as browser version and the each function.
- JavaScript Plugins
This example shows you how to load the content of simple text file and then show on the text box.
Our jQuery Load Content example will do the following work
- Web page is displayed with a button "Load Content" and a blank text box
- User clicks on the "Load Content" button.
- jQuery loads the context of a text file "testFile.txt" and displays in the text areaAfter completing this example you will be able to use jQuery to Load the content from server side text file and show it to the user.
Here is the code of "showContent.jsp" file
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show Content</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function contentDisp()
{
$.ajax({
url : "textContent.jsp",
success : function (data) {
$("#contentArea").html(data);
}
});
}
</script>
</head>
<body>
<table width="100%" border=0>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td width="30%" > </td><td style="color:blue;" width="70%">
Download Content Example</td></tr>
<tr><td> </td><td ><input type="button" value="Click" onClick="
contentDisp();"> <span style="color:blue;"></span></td></tr>
<tr><td> </td><td>
<textarea id="contentArea" rows="10" cols="50"></textarea>
</td>
</tr>
</table>
</body>
</html>jQuery code in the page
The following jQuery code retrieves the data from server and display in the text area.
function contentDisp()
{
$.ajax({
url : "textContent.jsp",
success : function (data) {
$("#contentArea").html(data);
}
});
}Content of the text fileHere is the content of the text file: Welcome to jQuery World
Learn how you can do a lot of work with small code.Open your browse and type http://localhost:8080/showContent.jsp and press enter. You will see the click button in browser, click on the "Click" button. The program will fetch the text data from database and display in the text area.
jQuery is here to help us in achieving high result with less coding.
jQuery is great!!!!
GWTQUERY
- JQuery-like API in GWT
- Uses GWT 1.5 language features for succinct code
- Run-time CSS3 Selector parsing and evaluation
- Compile-time CSS3 Selector parsing
- Leverages modern browser features when available:
- XPath (document.evaluate)
- W3C CSS Selector API (document.querySelectorAll)
- getElementsByClassName()
Runtime Evaluation
Find all “menus”, make first element text “Hello”
import gwtquery.client.GwtQuery;
import static gwtquery.client.GwtQuery.$;public class GwtQueryModule implements EntryPoint {
public void onModuleLoad() {
$(“ul.menu > li:first-child”).html(“hello”);
}
} What does the $(selector) function translate into?- On Safari 3.1
- document.querySelectorAll(selector)
- On Firefox, Opera, older Safari
- Lots of Regexp parsing to compute xpathExpression
- document.evaluate(xpathExpression)
- On IE < 8 and others, a bunch of Regexp and DOM calls
- Note: Each browser gets separately compiled JS
- Feature of Deferred Binding Mechanism
- GWT.create(RequestedType.class)
- Replace requested type with generated implementation
- Turns into new GeneratedType()
- Selectors usually literal strings, known at compile time
- Why parse and translate these at runtime?!
- Perform parsing and translation to XPath or JS-DOM navigation calls at compile-time
public MySelectors extends Selectors {
@Selector(“ul.menu > li:first-child”)
GQuery allFirstMenuItems();
}MySelectors selector = GWT.create(MySelectors.class);
selector.allFirstMenuItems().html(“hello”);
- GWT.create(MySelectors.class) triggers Generator
- Different Generator for each browser (DOM, XPath, etc)
- Generator creates implementation of MySelectors interface
- For each method with a @Selector annotation
- Parses CSS Selector, emits implementation of method
- Compiler inlines method, elides everything else
ul > li:first-child
becomes
document.evaluate(“ul/li[position() = 1]”)
How big is the output?
- jQuery 1.2.3
- ~3400 lines of Javascript
- 98kb unprocessed source
- 15kb obfuscated and gzipped
- GwtQuery
- ~3400 lines of Java
- 116kb on disk
- How big is it compiled?
- 15kb or larger?
- How about 7kb, a 50% reduction?
- 3kb sounds about right!
- 712 bytes is the answer!
- Smaller than single packet, HTTP headers
- Trivial example
- More reasonable example would exercise larger part of API and reduce amount of pruned code
- Example shows how aggressive GWT optimizer is past GWT critics have used Hello World examples to demonstrate purported “bloat”
Sample Code
<div class="slide transition-fade"> Slide 1 <ul class="transition-fade"> <li>Point One</li> <li>Point Two</li> <li>Point Three</li> </ul> </div> <div class="slide transition-fade"> Slide 2 <ul class="transition-appear"> <li>Slide 2 Point One</li> <li>Slide 2 Point Two</li> <li>Slide 3 Point Three</li> </ul> </div>Sample Code for Selectors needed
interface Slide extends Selectors {
// find all LI elements rooted at ctx
@Selector("li")
NodeList<Element> slideBulletsCtx(Node ctx);// Find all DIV elements with class 'slide'
@Selector("div.slide")
NodeList<Element> allSlides();
}
Sample Code for Event Handlingfinal Slide s = GWT.create(Slide.class);
$(Document.get().getBody()).click(new Function() {
int curSlide = 0;
int curBullet = 0;
GQuery slides = $(s.allSlides());
GQuery bullets = $(s.slideBulletsCtx(slides.get(curSlide)));public boolean f(Event e) {
if (curBullet < bullets.size())
bullets.eq(curBullet++).as(Effects).fadeIn();
else
bullets.css("opacity","0");
slides.eq(curSlide).css("display", "none");
curSlide++;
if(curSlide == slides.size()) curSlide = 0;
curBullet = 0;
bullets = $(s.slideBulletsCtx(slides.get(curSlide)));
slides.eq(curSlide).css("display","block")
.as(Effects).fadeIn();
return true;
}
});
Sample of Generated Output for Selector “.slide li” W3C Selector API version
public class SlideNativeImpl extends SelectorEngine implements MySelectors {
public final NodeList<Element> slideBullets() {
return querySelectorAll(".slide li");
}
}
XPath Versionpublic class SlideXPathImpl extends SelectorEngine implements Slide {
public final NodeList<Element> slideBullets() {
return xpathEvaluate("./descendant::*[contains(concat(' ', @class, ' '), ' slide ')]/descendant::li");
}
}Live Demo
1 comments:
Excellent article!! Thank you for writing!
Post a Comment