View GWT HTML source?

Question

Is there a way to VIEW the HTML source code that GWT produces? Currently I just give my flex table the DIV id and that DIV is all HTML I can see in ViewSource.

Is there a way to structure my table in HTML (say using div's and lists) and than create a something like FlexTable around that?

Answer 1

Well well it seems the answer is in the documentation. In particular Organizing Projects outlines how we can bind different widgets to different id's on the page. So I can effectively do something like:

# html
<div id="id_table"></div>
<div id="id_next_button"></div>

# java
t = new FlexTable()
RootPanel.get("id_table").add(t);
nextbtn = new Button("next");
RootPanel.get("id_next_button").add(nextbtn);

Wohoo!

Answer 2

To answer the original question, you can view the HTML GWT has rendered via 'Inspect Element' in Firefox, with Firebug is installed. Alternatively the Web Inspector in Safari/Chrome will do the trick, as will the Developer tools in both IE8 and Opera.

Answer 3

Regarding the second part of your quetion. It is possible to create a HTML component in GWT. The recomended way to do this is extending ComplexPanel and create the elements using Document.get().createXXXElement(). But it is a little laborius.

Check out this dicussion and I am sure there are other articles about this around the internet. You can also study the code of other components the extend ComplexPanel.