Найти элемент с помощью 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;
}