快速的介绍使用GQuery

快速的介绍使用GQuery 官方翻译 原创
英语很差
大家凑和看吧

介绍

GQuery是"克隆"jQuery API的一个开源项目。GQuery不是在jQuery的基础上进行封装，而是完全采用GWT1.5新特性实现。可以利用该

项目在GWT中使用jQuery的语法来查询和操作DOM元素。源代码下载地址：[url]http://code.google.com/p/gwtquery[/url]

建立一个项目
　　首先你需要下载最新版本的gwtquery,然后把它放在你的classpath。如果你是一位有经验的WEB开发者或许已经知道,如何做到这

一点,但如果你是一个初学者来说,这是一个快速复习。

第一 创建一个新的项目。并运行
项目名webAppCreator

$GWT_HOME/webAppCreator gwtquery.sample.Sample

which will create a bunch of files containing a sample project. Find the build.xml file and edit the section with

id="project.class.path" adding

<pathelement location="PATH_TO_DOWNLOADED_gwtquery-1.0-SNAPSHOT.jar"/>

If you're using Eclipse, you may also want to edit the .classpath file and add the following:

如果你使用的是Eclipse, 你可以将PATH_TO_DOWNLOADED_gwtquery-1.0-SNAPSHOT.jar这个jar放到你的.classpath 目录下

<classpathentry kind="lib" path="PATH_TO_DOWNLOADED_gwtquery-1.0-SNAPSHOT.jar"/>

Next, edit the src/gwtquery/sample/Sample.gwt.xml file or your project's existing module file, and add the following

line to import GQuery into your GWT module:

接下来,编辑src/gwtquery/的sample/Sample.gwt.xml文件或你的项目现有的模块文件,并加入下面一行的GQuery配置代码加入到

Sample.gwt.xml这个你建立的文件中。

<inherits name='com.google.gwt.query.Query'/>

最后在你的模块中(e.g. src/gwtquery/sample/client/Sample.java)加入下面的GQuery配置代码 。

import com.google.gwt.query.client.GQuery;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.Selector;
import com.google.gwt.query.client.Selectors;
import static com.google.gwt.query.client.GQuery.*;
import static com.google.gwt.query.client.css.CSS.*;

使用GQuery
这里有丰富的详细的jQuery教程(

http://docs.jquery.com/Tutorials

)官方网站,其中大多数工作在GQuery。下面是一个简化版本。

使用GQuery,你先设计你的HTML页面包含预期的静态或动态内容(如生成JSP)。一旦你拥有你想要的东西,你插入一个脚本的标签来负

载你的GQuery模块,例如在项目中,你可以添加 war/Sample.html 如下:

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

这导致编译Javascript的GQuery模块会当页面加载。接下来,你开始连接到HTML内容的行为在你的主机页通过使用CSS选择。为写一个

简单的实例,加载src/gwtquery/sample/client/Sample.java和删除整个onModuleLoad()功能。

我们现在准备写的第一个GQuery代码。

选择内容


使用CSS选择器找到DOM节点，GQuery的核心是一个快速、有效率的。这个Sample.html文件包含了标题标签,让我们选择它写了下面的

代码在onModuleLoad()功能。

$("h1");

这个代码相当于document.getElementsByTagName("h1")获得H1标签的属性。$是一个静态函数,相当于GQuery.$，它作为DOM参数选择

CSS,一个元素节点列表,或者HTML字符串和储存他们操纵的匹配的元素集合。对于一个更为复杂的选择器的例子, $("table > tr > td");


操作DOM 和样式表


既然你已经得到了一些元素,您就可以开始打开GQuery满怀信心的使用他。开始改变一些CSS属性的元素。

$("h1").css("background-color", "red");

这个代码循环结束每个元素在匹配的元素集合中,并设置CSS指定的CSS财产指定的值。几乎每一个方法被调用返回相同的GQuery匹配

的元素集合中,这意味着你可以使用别的方法来改变你的参数和你需要的一个特效

$("h1").css("background-color", "red").attr("align", "left").text("GQuery Rocks!");

上面的这个代码,同时设置CSS上面框框内背景色,红色的,集属性的对齐(左)和改变内在的文本的每一个匹配的元素,“GQuery Rocks!

”。
注意,这是一个改变,您可以输入错误的CSS属性名和数值。GQuery 有别于JQuery是它提供了一种类型安全的界面,操作CSS。CSS类的

包含很多静态的CSS属性,举个例子,你可以成为：

$("h1").css(VERTICAL_ALIGN, TOP);代替$("h1").css("vertical-align", "top");或者 $("h1").css(BACKGROUND_COLOR, RED);

编译时的选择


如果你已使用大部分的CSS选,你可以转换成编译时可选择器运行。不同的是,他们有很大的潜力来运行速度更快,产生较小的代码,并

检测编译时说产生的错误。


切换到你自己的选择器是一个很容易的事情,首先要声明一个接口。

interface MySelectors extends Selectors {

}

接下来,为每一个选择,你创造一个方法的作用是:返回一个GQuery对象

interface MySelectors extends Selectors { 
  GQuery getAllHeaderElements();
}

然后,你用一个@Selector注释来告诉GWT

interface MySelectors extends Selectors { 
  @Selector("h1") 
  GQuery getAllHeaderElements();
}

最后,你用GWT.create创造和调用这个函数

MySelectors s = GWT.create(MySelectors.class);
GQuery allH1 = s.getAllHeaderElements();
allH1.css(BACKGROUND_COLOR, RED);

绑定事件：

做任何有用的操作,你会想要绑事件处理到DOM的元素。你这样做是用一个事件的特殊功能,通过一个回调。让我们改变背景颜色代码,

并没有改变,直到你点击元素。

$("h1").click(new Function() { 
public boolean f(Event e) { 
   $(e).css(BACKGROUND_COLOR, RED); 
   return true; 
 }
});

这个GQuery接口函数是一种多功能的回调接口用于事件处理器和迭代函数。对于事件处理器,我们总是重载f(Event e)函数能即当事

件被触发。然后你用$函数转换成一个GQuery事件对象的对象上的元素事件就开始产生变化了，其背景变红了。

然而,在很多情况下,回调的代码是如此的简单,它并不需要完全匿名内部类。在这种情况下,你可以使用这个Lazy GQuery 延迟执行

GQuery接口方法,使他们成为回调。

$("h1").click(lazy().css(BACKGROUND_COLOR, RED).done());

lazy() 方法的作用是:返回一个GQuery界面,不立即执行方法的调用。相反,队列在执行的时候被done() 方法调用,并把它变成一个函

数调用接口。


使用插件
GQuery支持核心GQuery对象的延伸的插件系统的。WritingPlugins覆盖在一个单独的文件中。GQuery带有一个插件称为效果的影响

JQuery相应的API。使用任何插件,你必须做两件事情。首先,静态输入一个参考插件类文字,

import static com.google.gwt.query.client.Effects.Effects;

其次,调用方法的基本GQuery接口转换成一个插件的接口

$("h1").click(new Function { 
  public boolean f(Event e) {
     $(e).as(Effects).slideDown(); 
    return true;  
 }
});

这个方法将返回一个这个类的实例Effects 具有相同的匹配的元素。GQuery插件必须继承GQuery自身的类。

不像JQuery,GQuery并不提供了AJAX的方法实现。新版本包括自己的设备进行沟通和服务器。请看看 GWT RPC指南 或请求建立者指南

为例,关于怎样使用新版本本的内部设施。

Running
If this is your first time using GWT, you can now launch hosted mode from the command line by running the command

ant hosted, or you may use the Sample.launch file for Eclipse. Once Hosted Mode is running, changes to your HTML or

Java code are instantly available by hitting the refresh button without recompiling Java or relaunching Hosted Mode.
Compiling
After to have your code running satisfactorily in Hosted Mode, now you'll want to deploy it. Type ant or ant war to

compile Java to Javascript and build files for deployment.