Creating a tree widget in GWT

Question

I am trying to build a tree structure in GWT that becomes scrollable when the number of elements is large, the Tree structure will always be on the WestRegion of my DockLayout application panel.

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> 

Main list:

  <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 do not see anything in the western region. Can someone point out what I'm doing wrong?

At the same time: In the corresponding file "Mainlist.java" I can not say @UiField Tree citytree (Gives Exception). This seems to be related to involving nesting. How to access my Tree instance?

There is a tree in the GWT showcase that does not use UiBinder. Moreover, I could not find a sample code for building a tree structure using UiBinder. Any resources?

Answer 1

After searching and exploring more. I have done it. I think theere is not an example of code online, so this post may be useful for students 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>