Widget GWT à partir de HTML

Question

J'ai un bloc de HTML que je voudrais utiliser comme base d'un widget GWT, mais je ne suis pas tout à fait sûr de la meilleure façon de le faire. A titre d'exemple, mon bloc HTML ressemble à quelque chose comme ceci :

<div class="my-widget">
    <div class="header">
        <span class="title">Title Text</span>
    </div>
    <div class="body">
        <span class="content">Content Text</span>
    </div>
</div>

Je peux bien sûr coller cette chaîne statique dans un widget HTML, mais dans ce cas, je dois pouvoir définir le texte des éléments "title" et "content" à la volée. Cela tue (ou du moins rend nettement plus difficile) l'option du texte statique.

La première chose qui vient à l'esprit dans ce cas est de construire manuellement les éléments dans GWT et de maintenir des références à ceux que je dois modifier, comme ceci :

DivElement container = document.createDivElement();
setStyleName(container, "my-widget");
setElement(container);

DivElement header = document.createDivElement();
setStyleName(header, "header");
container.appendChild(header);

// Hold onto this element for later manipulation
DivElement title = document.createDivElement();
setStyleName(title, "title");
header.appendChild(title);

Mais cela devient vite ingérable, sauf pour les mises en page les plus simples (ce qui n'est pas le cas de la mienne).

Ce que j'aimerais, c'est pouvoir envoyer le HTML sous forme de texte statique, puis utiliser une sorte de sélecteur, comme jQuery, pour interroger les éléments que je veux manipuler. Je connais GWT-Query mais je n'ai pas réussi à le faire fonctionner sans erreur, et il me semble qu'il est un peu trop tôt dans sa vie pour que je sois à l'aise pour l'intégrer dans un produit professionnel.

Je suis également conscient que Google UiBinder ce qui ressemble exactement à ce que je veux. Le problème est que, pour autant que je puisse dire, cette fonctionnalité n'est disponible que dans GWT 2.0, qui est toujours dans un état de candidat à la libération et donc inutilisable pour moi.

Compte tenu de tout cela (désolé pour cette longue question !), avez-vous des suggestions sur la meilleure façon de réaliser un tel projet ?

Answer 1

GWT 2.0 sortira avant la fin de l'année. Donc, à moins que vous ayez besoin de livrer dans quelques jours, je commencerais à travailler avec la RC2 et à essayer la nouvelle approche UIBinder.

Answer 2

Pourquoi ne pas utiliser HTML.wrap(). Par exemple, si vous ajoutez un id de "my-widget" à votre div le plus externe, vous pouvez alors faire quelque chose comme.. :

HTML myWidget = HTML.wrap(RootPanel.get("my-widget").getElement());

Answer 3

Vous pouvez utiliser le widget InlineHTML pour produire un span et contrôler son contenu.

Answer 4

Comme vous le savez probablement, GWT ne fournit pas un widget intégré qui correspond directement à un élément span. Si vous pouvez utiliser un div pour le titre et le contenu, alors ce bout de code devrait (pas de GWT sur cette machine, en se basant un peu sur la mémoire) générer la structure DOM que vous avez.

FlowPanel myWidget = new FlowPanel();
myWidget.setStyleName("my-widget");

SimplePanel header = new SimplePanel();
header.setStyleName("header");

Label title = new Label(titleText);
title.setStyleName("title");
header.add(title);
myWidget.add(header);

SimplePanel body = new SimplePanel();
body.setStyleName("body");

Label content = new Label(contentText);
content.setStyleName("content");
body.add(content);
myWidget.add(body);

À partir de là, vous pouvez fournir des accesseurs aux étiquettes de contenu et de titre et les mettre à jour si nécessaire.

title.setText(newTitle);
content.setText(newContent);

Answer 5

La même chose que ci-dessus, mais obtenir un panneau GWT (être capable d'ajouter des enfants). Ceci est également utile lorsque vous avez besoin d'envelopper un objet GUI de la boîte à outils d'une tierce partie comme un widget GWT :

Panel gwtPanel = HTMLPanel.wrap(anElement) ;