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

Question

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

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

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

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

Answer 1

Существует класс DOM, который предоставляет множество методов-оболочек для доступа к дереву DOM. Я не знаю ни одной функции, использующей стиль jQuery для селектора CSS - GWT просто поощряет / обеспечивает доступ к элементам 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

Answer 3

Вдохновить Асфанд Яр Кази ответ .

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

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

Answer 4

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

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

... с точки зрения поддержки браузера, querySelector () и querySelectorAll () поддерживается в Firefox 3.1+, IE8 + (только в режиме стандартов IE8) и Safari 3.1 +

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;
}