Building a Tree Widget in GWT - gwt

Question

I am trying to build a Tree Structure in GWT which gets to be scrollable when the number of items are large, the Tree structure will permanently reside on the WestRegion of my Application DockLayout Panel.
The Main code:
<!-- The west side has a panel with complex dynamic tree list to be implemented -->
<g:west size='14'>
<app:Mainlist ui:field='mainlist'/>
</g:west>
The Mainlist:
<g:VerticalPanel>
<g:ScrollPanel>
<g:HTMLPanel width='100%' >
<div class='{style.contentColumn}'>
<g:Tree ui:field='citytree'>
<g:TreeItem text='Delhi/NCR'/>
</g:Tree>
</div>
</g:HTMLPanel>
</g:ScrollPanel>
</g:VerticalPanel>
</ui:UiBinder>
However I dont see anything in the west region. Can anyone point out what am I doing wrong?
Moreover:
In the corresponding "Mainlist.java" file I cannot say #UiField Tree citytree(Gives Exception) . This seems to be because of the nesting involved. How do I access my Tree instance?
The GWT showcase has Tree built without using UiBinder. Moreover I could not find any sample code to build a Tree structure with UiBinder. Any resources?

Answer 1

After searching and exploring more. I did it. I think theere is no example code online so this post might be helpfull for learners like me.
<ui:with field='res' type='myth.social.zomato.client.Mainlist.Images' />
<ui:style src="resources/GlobalStyles.css">
</ui:style>
<g:Tree ui:field='tree' resources='{res}'>
<g:TreeItem text='Cities' >
<g:TreeItem text='Ahemadabad'/>
<g:TreeItem text='Banglore'/>
<g:TreeItem text='Chennai' />
<g:TreeItem text='Delhi/NCR' />
<g:TreeItem text='Hyderabad' />
<g:TreeItem text='Jaipur' />
<g:TreeItem text='Kolkata'/>
<g:TreeItem text='Mumbai'/>
<g:TreeItem text='Pune' />
</g:TreeItem>
<g:TreeItem text='SalesPerson'>
<g:TreeItem text='Sales1' />
<g:TreeItem text='Sales2' />
</g:TreeItem>
</g:Tree>