Создание виджета дерева в GWT

Question

Я пытаюсь построить в GWT древовидную структуру, которую можно прокручивать при большом количестве элементов; древовидная структура будет постоянно находиться в WestRegion моей панели DockLayout приложения.

Основной код:

<!-- 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>

Основной список:

  <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> 

Однако в западном регионе я ничего не вижу.Кто-нибудь может указать, что я делаю неправильно?

Более того: В соответствующем файле "Mainlist.java" я не могу сказать @UiField Tree citytree (Дает исключение).Это, кажется, из-за вложенности.Как получить доступ к моему экземпляру Tree?

В витрине GWT Tree построено без использования UiBinder.Более того, я не смог найти пример кода для построения древовидной структуры с помощью UiBinder.Любые ресурсы?

Answer 1

После поиска и изучения больше. Я это сделал. Я думаю, что нет примера кода онлайн, поэтому этот пост может быть полезен для таких учеников, как я.

<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>