How do I mix HTMLPanel and VerticalPanel using GWT 2.4? - gwt

Question

I'm trying to add in a verticalPanel to an HTMLPanel I'm getting errors trying to add this into the html code.
What I'm trying to do is create a panel that has a border around my widgets and as it's more of a vertical alignment pattern, I chose to use verticalPanel.
I get compile errors when I try to add in outside of my html table, tr, or td tags, but that is what I thought I wanted to do in order to show a border.
Here is a code snippet:
<g:HTMLPanel ui:field="mainPanel" >
//Putting verticalPanel here causes a compile error
<table width="100%">
//Putting verticalPanel here causes a compile error
<tr>
//Putting verticalPanel here causes a compile error
<td>
<g:Label ui:field="title"></g:Label>
</td>
</tr>
Is this a good approach and if so, how do I do this, or is there a better way?

Answer 1

You need to read the javadoc of a widget.
if a widget implements HasText, you can place text between its tags
if it implements HasHTML, you can place HTML between its tags
otherwise (since all widgets implements HasWidgets), you can only place widgets between its tags.
some widgets have configurative subtags, where the subtag names start in lowercase.
some widgets allow only one child widget. These are extensions of SimplePanel.
So, if you try to put HTML tags in between a VerticalPanel, you will encounter errors because VerticalPanel does not implement hasText or hasHtml.
HTMLPanel does not implement HasHTML, BUT you are allowed to place a mix of widgets and HTML, because its content parser is specially designed to recognise HTML placed inside its tags. That is why it is called HTMLPanel.
The following is not acceptable and results in compilation error:
<g:HTMLPanel>
<g:VerticalPanel>
<TABLE><TR><TD>Hello</TD></TR></TABLE>
</g:VerticalPanel>
</g:HTMLPanel>
because the HTML sits inside the VerticalPanel tags.