gwt - varias - selectores de atributos css

Encontrar un elemento por selector de CSS en GWT

Question

Estoy tratando de agarrar un elemento arbitrario usando un selector 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 podría estar muerto y no estoy seguro de 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 de CSS genéricos en GWT?

Answer 1

Aquí hay un ejemplo que usa las clases GWT Element y Node para encontrar un solo elemento anidado con un nombre de clase dado. Esto no es tan abierto y poderoso como un selector literal de CSS, pero se puede modificar 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;
}

Answer 2

Puede usar querySelector () y querySelectorAll (), disponible para los navegadores más nuevos ...

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

... en términos de compatibilidad con navegadores, querySelector () y querySelectorAll () son compatibles con Firefox 3.1+, IE8 + (solo en el modo de estándares IE8) y Safari 3.1+

Answer 3

Use GwtQuery, se actualiza a GWT 2.4: http://code.google.com/p/gwtquery/

Selector de ejemplos:

//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

DOM 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 Java GWT es a través de montones y montones (probablemente horribles) de encadenamientos / invocaciones de la clase DOM . Sería más fácil si todo lo que tienes que hacer es acceder a una id , para eso hay RootPanel.get(id) (y DOM.getElementById(id) , difieren en qué tipo de objetos devuelven).

Sin embargo, como ya sugirió, JSNI podría ofrecer una mejor solución: intente devolver, por ejemplo, $wnd.$("#someId .className a") de JSNI como Element . De hecho, puede devolver cualquier cosa de JSNI, GWT simplemente destruirá el segundo que intente usar, digamos un int como un elemento DOM o algo así.

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

Answer 5

Inspirar por respuesta de Asfand Yar Qazi .

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

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