Using MGWT TabPanel with UIBinder

On February 21, 2013, in GWT, by terencejackson

If you want to create an application with GWT which has the focus on mobile devices you can either use JQueryMobile and GWT or MGWT. With both libraries you get mobile feeling like touch support, scrolling without scrollbars, …

Sice I am trying to implement some demo applications with MGWT I tried to use the TabPanel feature. It is a really nice out of the box control which is pretty easy to use if you create it in “code behind”.

MGWT - TabPanel

 

Since I am not a big fan of implementing a view I decided to use the GWT UiBinder which is delivered in the GWT SDK and allows you to describe your UI. To use th tab panel with the UIBinder you’ll get the following instruction as comment of the class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 So if you want to use TabPanel in UIBinder its a bit choppy:
 
 <pre>
 <mgwt:TabPanel>
      <mgwt:tabs>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab -->
                      </mgwt:widget>
              </mgwt:Tab>
      </mgwt:tabs>
 </mgwt:TabPanel>
 </pre>
 So if you want to use TabPanel in UIBinder its a bit choppy:

 <pre>
 <mgwt:TabPanel>
      <mgwt:tabs>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab -->
                      </mgwt:widget>
              </mgwt:Tab>
      </mgwt:tabs>
 </mgwt:TabPanel>
 </pre>

The mgwt namespace has to be defined in the package com.googlecode.mgwt.ui.client.widget.tabbar.

What you would suggest is if you want to add a new tab you simply add it to the <mgwt:tabs> tag  just like in the example below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <mgwt:TabPanel>
      <mgwt:tabs>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab -->
                      </mgwt:widget>
              </mgwt:Tab>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab 2-->
                      </mgwt:widget>
              </mgwt:Tab>
      </mgwt:tabs>
 </mgwt:TabPanel>
 <mgwt:TabPanel>
      <mgwt:tabs>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab -->
                      </mgwt:widget>
              </mgwt:Tab>
			  <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab 2-->
                      </mgwt:widget>
              </mgwt:Tab>
      </mgwt:tabs>
 </mgwt:TabPanel>

Unfortunaley this leads to the following exception: Can only have one element per @UiChild parser tag.

Which means, the tabs can only have one tab inside!

To solve this problem you just have to add multiple <mgwt:tabs> tags. Each for every tab you want. That’s it! A simple example is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <mgwt:TabPanel>
      <mgwt:tabs>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab -->
                      </mgwt:widget>
              </mgwt:Tab>
      </mgwt:tabs>
      <mgwt:tabs>
                  <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab 2-->
                      </mgwt:widget>
              </mgwt:Tab>
        </mgwt:tabs>
 </mgwt:TabPanel>
 <mgwt:TabPanel>
      <mgwt:tabs>
              <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab -->
                      </mgwt:widget>
              </mgwt:Tab>
      </mgwt:tabs>
	  <mgwt:tabs>
	  			  <mgwt:Tab>
                      <mgwt:button>
                              <mgwt:DownloadsTabBarButton></mgwt:DownloadsTabBarButton>
                      </mgwt:button>
                      <mgwt:widget>
                              <!-- content for that tab 2-->
                      </mgwt:widget>
              </mgwt:Tab>
		</mgwt:tabs>
 </mgwt:TabPanel>

 

Tagged with:  

Leave a Reply

Your email address will not be published. Required fields are marked *