Dynamic text using UiBinder

Question

I need to prepare UiBinder template for the following (simplified) case:

<div class="recipient">
    <strong>Recipient: </strong> Will Smith
</div>

Of course first and last name are dynamic.

I ended up with this in UiBinder xml:

<g:HTMLPanel addStyleNames="recipient">
    <strong>Recipient: </strong> <span ui:field='recipient'/>
</g:HTMLPanel>

As you see produced html will have additional span element. I want to achieve exactly the same html. Is there are any (simple) way / UI component to do it? Any help is appreciated.

EDIT. I do not want to extract <strong>Recipient: </strong> from UiBinder (we can imagine a case with a lot more html markup before and after dynamic text, and it looks natural to me that it must be a part of (some) UiBinder template)

Answer 1

You won't have other choices but to emit the whole <strong>Recipent: </strong> Will Smith string, and for that, SafeHtmlTemplates can help (or Messages if you want internationalization at the expense of HTML safety).

Let's use an HTML widget for your <div class="recipient"> (if you can, use a simple <div> though):

<g:HTML styleName="recipient" ui:field="recipient" />

and then in your Java code:

interface Templates extends SafeHtmlTemplates {
  @Template("<strong>Recipient: </strong> {0}")
  SafeHtml recipient(String recipient);
}

static final Templates TEMPLATES = GWT.create(Templates.class);

(use a SafeHtml as argument if you have HTML rather than text)

recipient.setHTML(TEMPLATES.recipent("Will Smith"));

---

That being said, let me question your initial goal: why do you want to remove the span?