Hi, i also suggest to use TabPanel, not TabLayoutPanel. Here is simple example of how to create customized one with tab bar = text + image. It also supports changing the image of the selected tab:
public class ImagedTabPanel extends DecoratedTabPanel {
public ImagedTabPanel() {
super();
this.addSelectionHandler(new SelectionHandler<Integer>() {
@Override
public void onSelection(SelectionEvent<Integer> event) {
if (event.getSelectedItem() == lastSelected) {
return;
}
((ImagedTab)
ImagedTabPanel.this.tabs.get(event.getSelectedItem())).select();
if (lastSelected != -1) {
((ImagedTab)
ImagedTabPanel.this.tabs.get(lastSelected)).unselect();
}
lastSelected = event.getSelectedItem();
}
});
}
@Override
public void add(Widget child, Widget tab) {
tabs.add(tab);
super.add(child, tab);
}
public void onTextChanged(String text, int index) {
if (index == -1) {
return;
}
((ImagedTab) ImagedTabPanel.this.tabs.get(index)).updateText(text);
}
}
public class ImagedTab extends Composite {
private Label textLabel;
private String inStyle =
ServiceUtils.getClaireClientResource().css().inTabArrowCss();
private String outStyle =
ServiceUtils.getClaireClientResource().css().outTabArrowCss();
private Label image = new Label();
private final HorizontalPanel main = new HorizontalPanel();
public ImagedTab(String text) {
initWidget(main);
textLabel = new Label(text);
textLabel.setWordWrap(true);
main.add(textLabel);
main.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
image.setStyleName(outStyle);
main.add(image);
}
public void select() {
image.setStyleName(inStyle);
}
public void unselect() {
image.setStyleName(outStyle);
}
public void updateText(String text) {
textLabel.setText(text);
}
}
Finally the css:
.gwt-TabBarItem-selected {
background: url() repeat-x scroll right bottom ! important;
}
.gwt-DecoratedTabBar .gwt-TabBarFirst {
width: 10px;
background: url(claireclient/content-separator-line.gif) repeat-x scroll
right bottom;
}
.gwt-DecoratedTabBar .gwt-TabBarRest {
background: url(claireclient/content-separator-line.gif) repeat-x scroll
right bottom;
width: 100%;
}
.gwt-DecoratedTabBar .gwt-TabBarItem {
border-collapse: collapse;
background: url(claireclient/content-separator-line.gif) repeat-x scroll
right bottom;
}
.gwt-TabBarItem .gwt-Label {
margin-left: 10px;
text-align: center;
font-size: 12px;
color: #003366;
font-family: Arial;
font-weight: bold;
text-decoration: underline;
padding-bottom: 5px;
white-space: nowrap ! important;
}
.gwt-DecoratedTabPanel {
margin-top: 15px;
-padding-top: 15px;
}
.gwt-DecoratedTabBar .tabTopLeftInner,.gwt-DecoratedTabBar .tabTopRightInner
{
width: 4px;
height: 4px;
}
* html .gwt-DecoratedTabBar .tabTopLeftInner,* html .gwt-DecoratedTabBar
.tabTopRightInner
{
width: 4px;
height: 4px;
overflow: hidden;
}
.gwt-DecoratedTabBar .tabMiddleLeft {
width: 6px;
padding: 0px;
}
.gwt-DecoratedTabBar .tabMiddleRight {
width: 6px;
padding: 0px;
}
.gwt-DecoratedTabBar .tabMiddleLeftInner,.gwt-DecoratedTabBar
.tabMiddleRightInner
{
width: 1px;
height: 1px;
}
.gwt-DecoratedTabBar .tabMiddleCenter {
padding: 0px 4px 2px 4px;
cursor: pointer;
cursor: hand;
font-weight: bold;
text-align: center;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
background: url(tab-bg.gif) repeat-x;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
background: url(tab-left-corner.gif) no-repeat;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {
background: url(tab-right-corner.gif) no-repeat;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft {
background: url(tab-left-border.gif) no-repeat;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight {
background: url(tab-right-border.gif) no-repeat;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter {
cursor: default;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
cursor: default;
}
This is css that is for my needs, but it will help you understand how things
work.
Hope this helps.
On Wed, Jan 13, 2010 at 11:15 PM, Stine <[email protected]> wrote:
> Hello :)
>
> I am still struggling with getting familiar with GWT ':]
>
> Right now I am trying to create a tab panel where each tab contains
> both an icon and a text describing what can be found at the attached
> page. Maybe it does not sound of much!! But to me it is not that clear
> how the tabs should be constructed! If I add horizontal panels as tabs
> I find it difficult to write the CSS making the whole TabLayoutPanel
> look nice... hmm...
>
> Anyone out there who has solved a similar small excercise which I
> could have a look at maybe? ;D Cannot find any examples on the
> Internet...
>
> Thanks,
> Stine
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected]<google-web-toolkit%[email protected]>
> .
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
>
>
>
>
-- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected].
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
