How can I add custome attribute to vaadin components ??

In our application we integrate Dragon Speach Recognition. In API it called as SAS.
We designed GUI by using TabSheet. Tabsheet basicaly makes one tab (in html div) visible and apply css property visibility:hidden to other tabs.
SAS is a speech api which basicaly inspects all Input fields like textfield when onLoad() event occurs of Page. and it makes it speach enabled mean when user speeks through SAS Microphone SAS catch the Input Voice SIGnal and translate it to English and paste it over foocus speech enabled field automaticaly.

SAS clearly States " Hidden or disabled controls, i.e. controls with the visiblility : Hidden attribute of CSS or display:none, are excluded from speech recognition by default. This can be overridden by setting the ‘data-nusa-enabled’ attribute on these controls to “true” .​

Now My Question is how can I add this custome attribute to vaadin components ?? We are using vaadin 6.8 … please help me.

Hi Mubasher,

you can’t add HTML attributes to the DOM so easily. You have to create your own GWT component (
https://vaadin.com/book/vaadin6/-/page/gwt.integration.html
). Maybe you can extend SingleComponentContainer and wrap the contents you want into it.

But do you really want to let read the text not being visible?

I didn’t get the point. I am Using tabsheet and tabsheet has 6 tabs. one tab as you know visible but all other tabs are has visibility: Hidden attribute setted. so my sas ignore the div having visibility:Hidden css property. to overcome this i need to add one custume attribute to all the Tabs.

Could any way I can extends the functionality of Vaadin Buitin TabSheet … in client Side Widget