What kind of GWT Panel that make Html widgets in it flow like a sentence in a paragraph?

Question

I want to make each sentence in a paragraph stored inside a html widget. For instance, "I go to school. School is in city. My mom cooks for me. She is one I love"

There are 4 sentences in this paragraph and I want to store each of these sentence inside a html.

    HTMLPanel testHTMLPanel=new HTMLPanel("<p></p>");
    HTML html1=new HTML("<b>I go to school.</b>");
    HTML html2=new HTML("<i>School is in city</i>");
    HTML html3=new HTML("<b>My mom cooks for me.</b>");
    HTML html4=new HTML("<i>She is one I love</i>");        
    testHTMLPanel.add(html1);
    testHTMLPanel.add(html2);
    testHTMLPanel.add(html3);
    testHTMLPanel.add(html4);

But it showed one new line for each sentence. The sentences didn't go one after another like in a normal paragraph.

PRINT OUT:

I go to school.

School is in city

My mom cooks for me.

She is one I love

But I want it like this:

I go to school. School is in city. My mom cooks for me. She is one I love.

Note: if the sentence is very long, then some part of the sentence will be showed in the next line. For example, If we show this long sentence "This is very very long sentence ...... ......
some part of it will be on the next line". "some part of it will be on the next line" will be flowed to next line naturally like a sentence in a paragraph. Thus, we can't use label because the whole label will take the whole sentence.

I used HTMLPanel("<p></p>"), but it didn't work. How to modify this HTMLPanel or any other kind of panel that can solve the problem?

Answer 1

FlowPanel and HTMLPanel will both work, but it depends on the widget you feed into them. HTML is a block level widget (root element is a <div>); use an InlineHTML instead (root element is a <span>).

But for assembling pieces of HTML, better use a SafeHtmlBuilder as Dvd Prd suggests; unless the pieces have to be dynamically updated later, but you can mix and match (use HTMLPanel.createUniqueId() to create placeholders for the widgets).

Answer 2

Try the following :

SafeHtmlBuilder builder = new SafeHtmlBuilder();
builder.appendHtmlConstant("<b>I go to school.</b>");
builder.appendHtmlConstant("<i>School is in city</i>");
builder.appendHtmlConstant("<b>My mom cooks for me.</b>");
builder.appendHtmlConstant("<i>She is one I love</i>");

HTMLPanel panel = new HTMLPanel(builder.toSafeHtml());
RootPanel.get().add(panel);

Answer 3

Have a look at gwt flow panel

A panel that formats its child widgets using the default HTML layout behavior.

It just creates a html div which you need.

And when ever adding any html content use safehtml interface to covert your content.

http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/FlowPanel.html