Encontrar un elemento mediante el selector de CSS en GWT

Question

Estoy tratando de agarrar un elemento arbitrario con un selector de CSS (por ejemplo, "#someId .className a") en GWT.

Estoy construyendo un widget JS que puede vivir en un sitio web de un tercero y desea poder interactuar con elementos en la página. Buscando a través de JavaDocs no veo nada que pueda encontrar un elemento por selector. Me encontré con GQuery, pero parece que el proyecto might be dead y no estoy seguro si funciona con GWT 2.

Una opción que he considerado es envolver una biblioteca existente (jQuery, Mootools, Prototype, etc.) en una clase GWT y exponer el comportamiento deseado a través de JSNI. Parece que esto podría ser muy arduo.

¿Alguien tiene experiencia en el uso de selectores CSS genéricos en GWT?

Answer 1

Existe la clase DOM, que proporciona muchos métodos de contenedor para acceder al árbol DOM. No hay una función que tenga un selector de CSS jQuery del que sea consciente: GWT simplemente fomenta/impone el acceso a elementos DOM a través de Widgets (y cosas similares), no directamente, aunque entiendo que en su caso tal enfoque de "bajo nivel" podría ser necesario. La única forma que veo de sacar eso a través de métodos puros de Java GWT es a través de montones y montones de (probablemente horribles) cadenas/invocaciones de la clase DOM. Sería más fácil si todo lo que tuviera que hacer fuera acceder a id - para eso hay RootPanel.get(id) (y DOM.getElementById(id), difieren en qué tipo de objetos devuelven).

Sin embargo, como ya se ha sugerido, JSNI podría ofrecer una mejor solución - intente volver, por ejemplo, $wnd.$("#someId .className a") de JSNI como Element - de hecho, puede devolver nada como cualquier cosa de JSNI, GWT se acaba de mierda hasta el segundo se intente usar, digamos un int como un elemento DOM o algo.

PD: si bien el proyecto GQuery parece muerto/inactivo, podría valer la pena comprobar cómo se ajustaron las llamadas jQuery (como $) para que puedan utilizarse aparentemente en GWT.

Answer 2

Usted podría utilizar querySelector() y querySelectorAll(), disponible para los nuevos navegadores ...

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

Uso GwtQuery, se actualiza para GWT 2.4: http://code.google.com/p/gwtquery/

ejemplos 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

Inspirar por Asfand Yar Qazi answer.

Simplemente defina este método y disfrútelo cuando su aplicación web se ejecuta en navegadores modernos.

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

Answer 5

Aquí hay un ejemplo que utiliza las clases Elemento y Nodo de GWT para encontrar un único elemento anidado con un nombre de clase dado.Esto no es como un final abierto y poderoso como un selector CSS literal, sino que puede modificarse según sea necesario para su caso de uso específico:

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