Trouver un élément en CSS sélecteur dans GWT

Je suis en train de saisir l'arbitraire d'un élément à l'aide d'un sélecteur CSS (par exemple. "#someId .className") dans GWT.

Je suis en train de construire un JS widget qui peut vivre sur une 3ème partie site web et que vous voulez être en mesure d'interagir avec des éléments sur la page. La recherche par le biais de la documentation Javadoc je ne vois pas ce que peut rechercher un élément par un sélecteur. Je l'ai fait venir à travers GQuery, mais il semble que le projet peut-être mort et je ne suis pas sûr si cela fonctionne avec GWT 2.

Une option que j'ai considéré est l'enveloppant d'une bibliothèque existante (jQuery, Mootools, Prototype, etc) dans un GWT classe et d'exposer le comportement souhaité par JSNI. Il semble que cela pourrait être très builky.

Quelqu'un a une expérience de l'utilisation de générique sélecteurs CSS dans GWT?

GWTQuery/GQuery semble avoir été relancé et l'inactivité serait le plus susceptible de correspondre à la version de GWT 2.1.
Il est vraiment frusting de ne pas avoir le natif querySelector[All] dans GWT. Je me demande si ce projet est condamné à être exécuté par des gens qui détestent développement côté client.

OriginalL'auteur etoleb | 2010-03-09

  1. 8

    Il y a le DOM classe, qui fournit de nombreuses méthodes de wrapper pour accéder à l'arborescence DOM. Il n'y a pas de fonction qui prend un sélecteur CSS jQuery style que je suis au courant de GWT encourage simplement/applique accéder aux éléments du DOM via les Widgets (et par exemple), ne sont pas directement - si je comprends que dans votre cas, ces "bas-niveau" approche pourrait être nécessaire. La seule façon dont je vois les tirant hors de pure Java GWT méthodes est par les lots et les lots de (probablement horrible) chaînage/invocations de la DOM classe. Ce serait plus simple si tout ce que vous aviez à faire était d'accéder à certains id - pour qu'il n'y a RootPanel.get(id) (et DOM.getElementById(id), ils diffèrent dans ce type d'objets qu'ils retour).

    Cependant, comme vous l'a déjà suggéré, JSNI pourrait offrir une meilleure solution - essayer de retourner, par exemple, $wnd.$("#someId .className a") de JSNI comme un Element - en fait, vous pouvez retourner tout ce que JSNI, GWT va tout simplement de la merde jusqu'à la seconde où vous essayez d'utiliser, par exemple un int comme un élément du DOM ou quelque chose.

    PS: tout le GQuery projet semble mort/inactif, il pourrait être utile de vérifier comment ils ont enveloppé le jQuery, les appels (comme $), de sorte qu'ils pourraient être utilisés apparemment dans GWT.

    Essaie ceci, j'obtiens: "Uncaught TypeError: Object [objet DOMWindow] n'a pas de méthode '$'" ai-je besoin d'jQuery.js sur la page ou quelque chose?
    Oui, vous devez inclure jQuery .fichier js dans votre page d'accueil. Aussi, jetez un oeil à question, mais le $ devrait fonctionner à partir de JSNI.
    Je devine document.querySelector(...) n'était pas une option?

    OriginalL'auteur Igor Klimer

  2. 6

    Utilisation GwtQuery, est mis à jour à GWT 2.4: http://code.google.com/p/gwtquery/

    Sélecteur exemples :

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

    OriginalL'auteur Daniel De León

  3. 3

    Vous pouvez utiliser querySelector() et querySelectorAll(), disponible pour les navigateurs les plus récents...

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

    ...en termes de prise en charge du navigateur, querySelector() et querySelectorAll() est pris en charge dans Firefox 3.1+, IE8+ (uniquement dans IE8 mode normes), et Safari 3.1+

    querySelector et querySelectorAll ne sont pas disponibles dans GWT. Il y a un sélecteur de réécriture de jQuery disponibles appelé "GwtQuery" ou "gQuery'.
    GWT peut appeler n'importe quelle méthode Javascript vous le souhaitez, il vous suffit d'écrire un petit wrapper méthode pour agir comme une passerelle pour d'arguments. Veuillez consulter la documentation pour les natifs de la méthode d'accès à la documentation de GWT. Cette méthode a été utilisée pour l'accès querySelector/querySelectorAll de GWT dans mon travail.
    J'ai écrit moi-même une ligne de GWT JSNI des wrappers pour doc/élément querySelector et querySelectorAll et suis maintenant en utilisant beaucoup avec d'excellents résultats. Facile, fiable et rapide.
    Bien sûr, vous et "ajouter" une propriété accesseur pour GWT via JNSI, mais qui ne respecte pas l'idée de GWT. Vous voulez être en mesure d'avoir GWT construire une permutation de travailler avec IE6,7,8, Safari, Gecko 1_8 et plus. Mauvaise réponse. La question demande comment faire avec une GWT fonction.
    Dépend des besoins. Le ciblage iOS et Android navigateurs par le développement de votre application avec PhoneGap? Seulement besoin de soutien WebKit, donc à utiliser querySelectorAll() . Le ciblage d'un simple navigateur interne d'une application d'entreprise comme mon ancien lieu de travail? Force tous vos vendeurs pour exécuter votre application sur google Chrome et l'utilisation querySelectorAll, ils ne remarquerez pas la différence entre une fenêtre de navigateur web et d'une application de bureau de la fenêtre. Facile avec l'attitude s'il vous plaît.

    OriginalL'auteur Asfand Qazi

  4. 3

    Inspirer par Asfand Yar Qazi répondre.

    Il suffit de définir cette méthode et d'en profiter lorsque vous web app est en cours d'exécution dans les navigateurs modernes.

    public final native NodeList<Element> querySelectorAll(String selectors) /*-{
 return $doc.querySelectorAll(selectors);
 }-*/;
    N'est-ce vraiment le travail? Avez-vous testé? Je serais très surpris si il y en a une conversion implicite vers NodeList<Element> d'un natif js retour.
    Veuillez vérifier: gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html
    Pouvez-vous vérifier ce qui a fonctionné pour vous?
    Je ne vois pas où votre documenté source prend en charge cette syntaxe. Merci de fournir un devis. Le plus proche que je peux trouver sur ce lien est dans la rubrique "en Passant JavaScript valeurs dans le code Java". Pour le type de retour: "tout autre Objet Java (y compris les tableaux) ", Il indique ce qui doit être transmis "Objet Java de type approprié qui doit avoir son origine dans le code Java; Java des objets ne peuvent pas être construits à partir de “thin air” dans le JavaScript". Je crois que c'est en opposition directe à l'idée que vous pouvez convertir implicitement le type de retour d'une NodeList<Element>.
    Wow! Eh bien, je suis surpris, mais heureux! Qui pourrait être très utile. Belle solution! Je vais essayer moi-même...

    OriginalL'auteur Daniel De León

  5. 1

    Voici un exemple d'utilisation de la GWT Élément et le Nœud classes de trouver un seul élément imbriqué avec un nom de classe. Ce n'est pas aussi ouvert et puissant comme un littéral sélecteur CSS, mais peut être modifié en fonction des besoins spécifiques à votre cas d'utilisation: 

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

    OriginalL'auteur BuvinJ