Найти элемент с помощью CSS-селектора в GWT
Я пытаюсь захватить произвольный элемент, используя селектор CSS (например, "#someId.className a" ) в GWT.
Я создаю виджет JS, который может жить на стороннем веб-сайте и хочу иметь возможность взаимодействовать с элементами на странице. Поиск через JavaDocs я не вижу ничего, что может найти элемент по селектору. Я столкнулся с GQuery, но похоже, что проект может быть мертвым, и я не уверен, что он работает с GWT 2.
Один из вариантов, который я рассмотрел, - это перенос существующей библиотеки (jQuery, Mootools, Prototype и т.д.) в класс GWT и отображение желаемого поведения через JSNI. Кажется, это может быть очень сложным.
У кого-нибудь есть опыт использования общих селекторов CSS в GWT?
Ответы
Ответ 1
Здесь класс DOM
, который предоставляет множество методов-обложек для доступа к дереву DOM. Там нет функции, которая использует стиль jQuery для селектора CSS, о котором я знаю - GWT просто поощряет/обеспечивает доступ к элементам DOM через Widgets (и тому подобное), а не напрямую, хотя я понимаю, что в вашем случае такой подход "низкого уровня" может быть нужным. Единственный способ, по которому я вижу это, используя чистые Java-методы GWT, - это много-много (возможно, ужасных) цепочек /invocations класса DOM
. Было бы проще, если бы все, что вам нужно было сделать, это получить доступ к некоторым id
- для этого RootPanel.get(id)
(и DOM.getElementById(id)
, они различаются по типу возвращаемых объектов).
Однако, как вы уже сказали, JSNI может предложить лучшее решение - попробуйте вернуть, например, $wnd.$("#someId .className a")
из JSNI как Element
- на самом деле, вы можете вернуть что-нибудь как угодно из JSNI, GWT просто дернет второй, который вы пытаетесь использовать, например, int как элемент DOM или что-то в этом роде.
PS: в то время как проект GQuery кажется мертвым/неактивным, возможно, стоит проверить, как они завернули вызовы jQuery (например, $
), чтобы они могли использоваться, казалось бы, в GWT.
Ответ 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
Ответ 3
Вы можете использовать querySelector() и querySelectorAll(), доступные для более новых браузеров...
http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml
... с точки зрения поддержки браузера, querySelector() и querySelectorAll() поддерживается в Firefox 3.1+, IE8 + (только в режиме стандартов IE8) и Safari 3.1 +
Ответ 4
Вдохни от Ответ Асфанда Яря Кази.
Просто определите этот метод и наслаждайтесь им, когда веб-приложение работает в современных браузерах.
public final native NodeList<Element> querySelectorAll(String selectors) /*-{
return $doc.querySelectorAll(selectors);
}-*/;
Ответ 5
Вот пример использования классов GWT и Node для поиска одного вложенного элемента с заданным именем класса. Это не так открыто и мощно, как литеральный селектор CSS, но может быть изменен по мере необходимости для вашего конкретного варианта использования:
static public Element findFirstChildElementByClassName( Widget w, String className ){
return findFirstChildElementByClassName( w.getElement(), className );
}
static private Element findFirstChildElementByClassName( Element e, String className ){
for( int i=0; i != e.getChildCount(); ++i ){
Node childNode = e.getChild(i);
if( childNode.getNodeType() == Node.ELEMENT_NODE ){
Element childElement = (Element)childNode;
if( childElement.getClassName().equalsIgnoreCase( className ) )
return childElement;
else if( childElement.hasChildNodes() ){
Element grandChildElement =
findFirstChildElementByClassName(
childElement, className );
if( grandChildElement != null ) return grandChildElement;
}
}
}
return null;
}