As a GWT newbie, I struggled with placing images on TabLayoutPanel (or
DecoratedTabPanel?) tabs in place of text labels. The solution is
elegant and VERY simple.
TabLayoutPanel tabPanel = new TabLayoutPanel( 8.5,
com.google.gwt.dom.client.Style.Unit.EM );
VerticalPanel p1= new VerticalPanel();
p1.add( someContent ); // This is the content of the stuff
(view)
that a tab control selects.
tabPanel.add( p1, new Image( "images/firstTagImg.png" ) ); //
The
second argument centers a image on the tab control.
// Do NOT use RootPanel.get() with LayoutPanels.
RootLayoutPanel.get().add( tabPanel );
Note about file locations:
References like "images/firstTagImg.png" point to a GWT application's
war/images folder. I don't know if the GWT Eclipse plugin will copy
such resources from (say) the application's src or src/client folder
(hosted server), so I manually copy them or explicitly make ant do so.
To identify the selected tab by its background, use styles like these:
.gwt-TabLayoutPanelTabs .gwt-TabLayoutPanelTab {
background-color: blue;
}
.gwt-TabLayoutPanelTabs .gwt-TabLayoutPanelTab-selected {
background-color: green;
}
I put those definitions in war/WEB-INF/<the project name>.css .
Some other posts about images on tabs (also hover images):
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/a55b69cbc178435b/24e0457b777c2171?lnk=gst&q=image+tabs#24e0457b777c2171
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/f57cb42276170ee1/557657e2e739d891?lnk=gst&q=image+tabs#557657e2e739d891
Hope this post is helpful.
[seach tags: image tabs, tab images]
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
