GWT panel for HTML UL/LI lists

[Markus Kramer]

Hi, for my current GWT project I wanted to make more use of HTML UL/LI
elements than the table based layouts that you normally use in GWT
applications.
Biggest advantages for me is that other people can make changes to the
layout/design of the page without having to touch the code itself.

I couldn't find a class in GWT or anywhere else that helps with that,
so I wrote my own. I can now create HTML like this:

<ul class="sampleList">
<li>Widget A</li>
<li>Widget B</li>
</ul>

with this code:

UlListPanel ulList = new UlListPanel();
ulList.addStyleName("sampleList");
ulList.add(widgetA);
ulList.add(widgetB);

For the code go here:
http://markusbraindump.blogspot.com/2010/09/gwt-panel-for-html-ulli-lists.html

Or did I reinvent the wheel?

Markus

[lalit]

Cannot this be done with UIBinder in an easy way? Just write the
layout in ui.xml and insert the widget in the li tags.

> For the code go here:http://markusbraindump.blogspot.com/2010/09/gwt-panel-for-html-ulli-l...

[Markus Kramer]

Yes that's true.
But I don't like the UIBinder stuff that much. There is a lot which I
found difficult to do with UIBinder, so I'll stay with the "old" way.
Just a personal taste.

[opn]

I'm not sure if it works for you, but you can set the tag that a
HTMLPanel represents. It's set to div when you don't specify something
else. I only created a HTMLPanel as an <em> element one time as a test
and it worked fine.
I'm thinking about creating an <ul> HTMLPanel and insert <li>
HTMLPanels into that. Don't know if it works and if it's good to do
that : ) just an idea!

regards
opn

[Markus Kramer]

I guess you could do it like this. But using a special panel makes it
easier imo.
For instance, you could easily change from the good-old VerticalPanel
to UlListPanel.

[Falcon]

I'm in a situation where I'm having to use a custom UListPanel instead
of UIBinder since I have dynamic content (I won't know how many I need
beforehand). I definitely agree that you should use UIBinder whenever
possible, but in my case I'm making my own version of TabPanel with a
<ul><li> structure for the tabs. If the GWT team ever gets custom
UIBinder parsing sorted out, I could probably move all of the code to
UIBinder, but as I'm unwilling to go through the mess to get custom
parsing working currently, my only option is to do portions in code.

[Adam Mark]

Just extend FlowPanel and override setElement:

public class MyList extends FlowPanel {

...

@Override
protected void setElement(com.google.gwt.user.client.Element elem)
{
super.setElement(DOM.createElement("ul"));
}

...

[Andy]

I took a similar approach but made it more generic and didn't add
special Widget wrapping methods (I just add ElementPanel("LI") to an
ElementPanel("UL") or ElementPanel("OL"). I like your approach which
enforces usage.

/**
* A generic element panel for Hx, UL, LI, etc.
*/
public class ElementPanel extends ComplexPanel implements HasText,
HasHTML {

public ElementPanel(String tagname) {
setElement(DOM.createElement(tagname));
}

// more stuff in here .....

}

I'm not sure I understand the need for the special clear() method
implementation in your code.

-Andy

> For the code go here:http://markusbraindump.blogspot.com/2010/09/gwt-panel-for-html-ulli-l...

[Markus Kramer]

You could do it with DOM.createElement("ul"). But you would be using
some "lower level" API directly. I believe it's good to have a clear
encapsulation of a HTML construct that at least I use quite frequently
now.

@Andy:
I no longer understand the purpose of that clear method as well. Have
to check if it can be removed...

Never used the H1, H2,... tags in GWT until now. Just Labels with CSS
classes instead.

/Markus