controling the tabs of the tabs bar in gwt

Question

hi, sorry for stupid question i am new to UI in general and gwt specifically

1. how can i control the tabs width when using tabs panel in gwt? how
2. how can i know what css attributes each widget has? i would like to control the tabs color (selected and not selected) and remove the tabs frame

thanks

Answer 1

The javadoc for DecoratedTabBar lists style names you can use for both the selected and unselected tabs.

* .gwt-DecoratedTabBar { the tab bar itself }
* .gwt-DecoratedTabBar .gwt-TabBarFirst { the left edge of the bar }
* .gwt-DecoratedTabBar .gwt-TabBarRest { the right edge of the bar }
* .gwt-DecoratedTabBar .gwt-TabBarItem { unselected tabs }
* .gwt-DecoratedTabBar .gwt-TabBarItem-wrapper { table cell around tab }
* .gwt-DecoratedTabBar .gwt-TabBarItem-selected { additional style for selected tabs }
* .gwt-DecoratedTabBar .gwt-TabBarItem-wrapper-selected { table cell around selected tab }
* .gwt-DecoratedTabBar .tabTopLeft { top left corner of the tab}
* .gwt-DecoratedTabBar .tabTopLeftInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabTopCenter { top center of the tab}
* .gwt-DecoratedTabBar .tabTopCenterInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabTopRight { top right corner of the tab}
* .gwt-DecoratedTabBar .tabTopRightInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabMiddleLeft { left side of the tab }
* .gwt-DecoratedTabBar .tabMiddleLeftInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabMiddleCenter { center of the tab, where the tab text or widget resides }
* .gwt-DecoratedTabBar .tabMiddleCenterInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabMiddleRight { right side of the tab }
* .gwt-DecoratedTabBar .tabMiddleRightInner { the inner element of the cell}

Answer 2

If you are new to UI in general, maybe you don't know [Firebug]. It is a Firefox plugin that allows you (among other things) to inspect every element in a page and know how the styles are beeing applied and even change them in real-time. It is vital for GWT development.

Besides that, in order to control each tab style separatelly, I think you will need to insert Labels on the tabs, using TabBar.addTab(Widget widget), and set their styles.