在GWT中通过CSS选择器查找元素

Question

我正试图在GWT中使用CSS选择器(例如"#someId .className a")来获取任意元素.

我正在构建一个可以在第三方网站上生活的JS小部件,并且希望能够与页面上的元素进行交互.通过JavaDocs搜索我没有看到任何可以通过选择器找到元素的东西.我确实遇到过GQuery,但似乎项目可能已经死了,我不确定它是否适用于GWT 2.

我考虑过的一个选项是将现有的库(jQuery,Mootools,Prototype等)包装到GWT类中,并通过JSNI公开所需的行为.看起来这可能非常庞大.

任何人都有使用GWT中的通用CSS选择器的经验？

Answer 1

这个DOM类提供了许多用于访问DOM树的包装器方法.我没有采用我所知道的CSS选择器jQuery样式的函数--GWT只是通过Widgets(等等)鼓励/强制访问DOM元素,而不是直接 - 虽然我知道在你的情况下这种"低级"方法可能被需要.我通过纯Java GWT方法看到的唯一方法是通过很多很多(可能是可怕的)类的链接/调用DOM.如果您只需访问一些就会更容易id- 因为它们RootPanel.get(id)(并且DOM.getElementById(id),它们返回的对象类型不同).

但是,就像你已经建议的那样,JSNI可能会提供一个更好的解决方案 - 例如,尝试$wnd.$("#someId .className a")从JSNI Element返回 - 实际上,你可以从JSNI返回任何内容,GWT只会废弃你尝试使用的第二个,比如说int作为DOM元素或其他东西.

PS:虽然GQuery项目确实看似死/不活跃,但是可能值得检查它们如何包装jQuery调用(例如$),以便它们可以在GWT中使用.

Answer 2

使用GwtQuery,更新到GWT 2.4:http://code.google.com/p/gwtquery/

选择器示例:

//select an element having id equals to 'container'
GQuery myElement = $("#container");
//select all elements having 'article' as css class
GQuery allArticles = $(".article");
/select all cells of tables
GQuery allCells = $("table > tr > td");
//find the ul elements being inside a element with class 'article' itself inside a element with id 'container'
GQuery articleUls = $("#container .article ul");

http://code.google.com/p/gwtquery/wiki/GettingStarted