Widget GWT à partir du HTML

Question

J'ai un bloc de HTML que j'aimerais utiliser comme base d'un widget GWT, mais je ne suis pas sûr de la meilleure façon de le faire. À titre d'exemple, mon bloc HTML ressemble à 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> 

Maintenant, je peux bien sûr coller cela comme une chaîne statique dans un widget HTML, mais dans ce cas j'ai besoin la possibilité de définir le texte de la éléments "title" et "content" à la volée. Cela tue (ou rend au moins beaucoup plus difficile) l'option de texte statique.

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

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 cette obtenir rapidement ingérable pour Ce que je voudrais est la possibilité d'envoyer le HTML en tant que texte statique, puis faire une sorte de sélecteur, comme jQuery, pour interroger les éléments que je veux manipuler. Je suis au courant de GWT-Query mais je n'ai pas pu le faire fonctionner sans erreur, et il me semble être un peu trop tôt dans sa vie pour être à l'aise de l'intégrer dans un produit professionnel pour le moment.

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

Donc, étant donné tout cela (désolé pour la longue question!) Avez-vous des suggestions sur la meilleure façon de réaliser quelque chose comme ça?

Answer 1

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

Answer 2

Comment utiliser HTML.wrap(). Par exemple, si vous avez ajouté un id de « my-widget » à votre plus externe div que vous pourriez faire quelque chose comme:

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

Answer 3

Comme vous le savez probablement, GWT ne fournit pas construit dans le widget cartes directement à un élément de portée. Si vous pouvez utiliser un div pour le titre et le contenu, alors ce bit de code devrait (pas de GWT sur cette machine, en allant un peu en mémoire) générer la structure DOM que vous avez. À 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 4

Vous pouvez utiliser le widget InlineHTML pour produire une plage et contrôler son contenu.

Answer 5

La même chose que ci-dessus, mais obtenir un panneau GWT (pouvoir ajouter des enfants). Cela est également utile lorsque vous devez enrober un objet GUI tiers de la boîte à outils en tant que widget GWT:

Panneau gwtPanel = HTMLPanel.wrap (anElement);

Answer 6

Les suites de code suivant pour moi:

HorizontalPanel divContainer = new HorizontalPanel(); 
Element div = DOM.createDiv(); 
div.appendChild(...); // whatever element it could fit inside 
divContainer.getElement().appendChild(div); 

Modifier

L'idée sous-jacente est manipulait les DOM avec les autres widgets que vous avez déjà programmés. PS: J'utilise GWT 2.4