add a text or image to top right corner of tab pane

105 views
Skip to first unread message

pady...@gmail.com

unread,
Jan 13, 2007, 8:04:47 AM1/13/07
to Google Web Toolkit

How does one add text or image to the top right corner in a tab pane ?
I want to use that space to show some links or logos.

Thanks

-- pady

Adam T

unread,
Jan 13, 2007, 9:56:53 AM1/13/07
to Google Web Toolkit
I've done it using the following code:

// Set up a DockPanel to contain the text and an image
DockPanel tabContainer = new DockPanel();
tabContainer.add(new Label("ABC"),DockPanel.WEST);
tabContainer.add(new Image("yes.gif"), DockPanel.EAST);

// Place the contents in a simple panel (if I remember right, one of IE
or Opera has a problem if you don't do this
SimplePanel dummyContainer = new SimplePanel();
// Add the previous DockPanel to the SimplePanel
dummyContainer.add(tabContainer);
// Now get the actual HTML for this panel
String htmlTabValue = DOM.getInnerHTML(dummyContainer.getElement());

// Add the new panel to the TabPanel, using the htmlTabValue we just
got as the (html) label
addresses.add(addressesA2CPanel,htmlTabValue,true);

You might want to style the new tab, e.g. length, and maybe right
justify the 2nd component, but this all works nicely. This comes from
an approach used in the GWT In Action book (but there we use it for
some fancy menus).

There is another approach someone posted the other day which uses two
"real" tabs per visual tab and styling to try and hide the overlap
(http://groups-beta.google.com/group/Google-Web-Toolkit/browse_thread/thread/4cfbcadba7afdaf6/2091dcc523786262?lnk=gst&q=TabPanel&rnum=3#2091dcc523786262)

Hope that is of some use!

//Adam
Co-author of GWT In Action (http://www.manning.com/hanson)

pady...@gmail.com

unread,
Jan 18, 2007, 5:45:28 AM1/18/07
to Google Web Toolkit
Thanks for your response. I tried this but I dont get this panel on the
right side. It still shows up as a normal tab. I tried setting style on
the panels with the float as "right" but that didnt work. I looked up
the gwt generated code and it appears there is a div element around
this which has the "gwt-TabBarItem" style and I am not sure how to
reset this to my style block. For the example you say that works, is
there some working code you can send ?

Thanks

-- pady

pady...@gmail.com

unread,
Jan 18, 2007, 5:50:42 AM1/18/07
to Google Web Toolkit

Maybe my original question is misunderstood. I didnt mean to right
justify the text inside the tab. I mean the area after the tabs to the
right. For example, here is a css and html that shows what I am trying
to do:

body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 0px 0px;
margin:0px;
border: 1px solid #000000;

position: relative;
top: 0px;
}

.left{
float:left;
padding:0px 0px;
margin:0px;
}

.right{
float:right;
padding: 0px 0px;
margin:0;
}

.spacer {
clear: both;
}

.tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="tabs.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div class="tabContainer">
<div class="left">
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class="right"><span>Tab Right Very Very long sentence</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content - test
</div>
</div>

</body>
</html>

Copy the style code above as tabs.css and save the html and run the
html. You will see a tab on the right side of the browser area.

Thanks

-- pady

Ian Bambury

unread,
Jan 18, 2007, 7:39:21 AM1/18/07
to Google-We...@googlegroups.com
1) Subclass the tab panel
2) Set up your left-side tabs
3) Add a spacer tab
4) Add a right-hand tab
5) Set the spacer tab to match the background
6) Override beforeTabSelected() and ignore the spacer select
7) Override the resize() to set the width of the spacer to the unused space. You might get away with "100%" - haven't tried it. With a fixed width panel it's dead easy, of course.
 
I tested this with a fixed width panel in IE6 - works OK
 
Ian
 

pady...@gmail.com

unread,
Jan 19, 2007, 5:45:46 AM1/19/07
to Google Web Toolkit
I still cannot get this to work. I tried

AbsolutePanel absPanel = new AbsolutePanel();
absPanel.setWidth("100%");
String absHtmlValue = DOM.getInnerHTML(absPanel.getElement());

tabPanel.add(new Label(), absHtmlValue, true);

I also tried adding a label to the absolute panel. The only way I can
get it to work is to set the enclosing "TD" to align right.

Can you give me the example you tried for fixed width panel that worked
?

Thanks

-- pady

pady...@gmail.com

unread,
Jan 19, 2007, 6:34:06 AM1/19/07
to Google Web Toolkit

I got it to work in a very kludgy way. I changed your
"setTabStyleAttrib" utility from your examples and set the width
attribute to the parent element also.

public static TabPanel setTabStyleAttrib(
TabPanel tabPanel
, int tab
, String attr
, String value)
{
Element el = tabPanel.getElement();
for (int i = 0; i < 7; i++)
{
el = DOM.getFirstChild(el);
}
for (int i = 0; i < tab + 1; i++)
{
el = DOM.getNextSibling(el);
}
// Added the style attribute to the parent also
DOM.setStyleAttribute(el, attr, value);
el = DOM.getFirstChild(el);
DOM.setStyleAttribute(el, attr, value);
return tabPanel;
}

Reply all
Reply to author
Forward
0 new messages