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