Найти элемент с помощью CSS-селектора в GWT

Question

Я пытаюсь захватить произвольный элемент с помощью селектора CSS (например, «#someId .className a») в GWT.

Я строю виджет JS, который может жить на стороннем веб-сайте и хочет иметь возможность взаимодействовать с элементами на странице. Поиск через JavaDocs я не вижу ничего, что может найти элемент по селектору. Я столкнулся с GQuery, но похоже, что проект might be dead и я не уверен, что он работает с GWT 2.

Один из вариантов, который я рассмотрел, - это обертывание существующей библиотеки (jQuery, Mootools, Prototype и т. Д.). в класс GWT и подвергая желаемое поведение через JSNI. Кажется, это может быть очень сложным.

У кого-нибудь есть опыт использования общих селекторов CSS в GWT?

Answer 1

Класс DOM, который предоставляет множество методов-оберток для доступа к дереву DOM. Нет никакой функции, которая бы учитывала стиль jQuery для селектора CSS, о котором я знаю - GWT просто поощряет/обеспечивает доступ к элементам DOM через Widgets (и тому подобное), а не напрямую, хотя я понимаю, что в вашем случае такой подход «низкого уровня» может быть нужным. Единственный способ, по которому я вижу это, используя чистые методы 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

Вы можете использовать querySelector() и querySelectorAll(), доступный для новых браузеров ...

http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

...in terms of browser support, querySelector() and querySelectorAll() is supported in Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

Answer 3

Использование GwtQuery, обновляется до GWT 2.4: http://code.google.com/p/gwtquery/

примеры Selector :

//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

Answer 4

Inspire by Asfand Yar Qazi answer.

Просто определите этот метод и наслаждайтесь им, когда веб-приложение работает в современных браузерах.

public final native NodeList<Element> querySelectorAll(String selectors) /*-{ 
return $doc.querySelectorAll(selectors); 
}-*/; 

Answer 5

Вот пример использования классов GWT Element и 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; 
}