Suchen Sie ein Element durch CSS-Selektor in GWT

Question

Ich versuche, ein beliebiges Element mit einem CSS-Selektor (z. B. "#someId .className a") in GWT greifen.

Ich baue ein JS-Widget, das auf einer Website von Drittanbietern leben und in der Lage sein soll, mit Elementen auf der Seite zu interagieren. Beim Durchsuchen der JavaDocs sehe ich nichts, was ein Element nach Selektor finden könnte. Ich habe über GQuery kommen, aber es scheint, wie das Projekt might be dead und ich bin nicht sicher, ob es mit GWT funktioniert 2.

Eine Option, die ich in Betracht gezogen habe wickelt eine vorhandene Bibliothek (jQuery, Mootools, Prototype, etc.) in eine GWT-Klasse und das gewünschte Verhalten durch JSNI offen legen. Es scheint, dass dies sehr stark ist.

Jeder hat Erfahrung mit generischen CSS-Selektoren in GWT?

Answer 1

Es gibt die Klasse DOM, die viele Wrapper-Methoden für den Zugriff auf den DOM-Baum bietet. Es gibt keine Funktion, die einen CSS-Selektor jQuery-Stil, der mir bekannt ist - GWT ermutigt/erzwingt den Zugriff auf DOM-Elemente durch Widgets (und so), nicht direkt - obwohl ich verstehe, dass in Ihrem Fall solche "Low-Level" -Ansatz könnte benötigt werden. Der einzige Weg, den ich durch reine Java-GWT-Methoden ziehen kann, ist über viele, viele (wahrscheinlich schreckliche) Verkettungen/Aufrufe der Klasse DOM. Es wäre einfacher, wenn Sie nur auf id zugreifen müssten - dafür gibt es RootPanel.get(id) (und DOM.getElementById(id), sie unterscheiden sich darin, welche Art von Objekten sie zurückgeben).

Jedoch, wie Sie bereits angedeutet, JSNI vielleicht eine bessere Lösung bieten - versuchen Rückkehr zum Beispiel $wnd.$("#someId .className a") von JSNI als Element - tatsächlich, du etwas als etwas von JSNI zurückkehren kann, wird GWT Mist up nur die zweite Sie versuche zu verwenden, sage ein int als ein DOM-Element oder etwas.

PS: während das GQuery-Projekt scheint tot/inaktiv, könnte es sich lohnen, zu überprüfen, wie sie die jQuery Aufrufe (wie $), so dass sie scheinbar in GWT verwendet werden konnte.

Answer 2

Sie könnten verwenden querySelector() und querySelectorAll(), für neueren Browser ...

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

Verwendung GwtQuery, wird aktualisiert, um GWT 2.4: http://code.google.com/p/gwtquery/

Selector Beispiele :

//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 von Asfand Yar Qazi answer.

Definieren Sie einfach diese Methode und genießen Sie es, wenn Ihre Webanwendung in modernen Browsern ausgeführt wird.

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

Answer 5

Hier ist ein Beispiel mit GWT Element und Node-Klassen, um ein einzelnes verschachteltes Element mit einem gegebenen Klassennamen zu finden.Das ist nicht so offen beendet und mächtig wie ein wörtlicher CSS-Selektor, kann aber geändert werden, wie für Ihren speziellen Anwendungsfall benötigt:

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