TabPane heading could not be set dynamically

[Deepak Kumar]

I just tried setting the heading fileld of a TabPane dynamically as follows 

TestTabpanel.ui.xml

<b:TabPanel tabPosition="left">

<b:TabPane ui:field="myFirstTab" active="true">

</b:TabPane>

 </b:TabPanel>

TestTabpanel.java

myFirstTab.setHeading("First TAB");

I have been thrown with the error 

<b:TabPane active='true' ui:field='myFirstTab'> missing required attribute(s): heading Element <b:TabPane active='true' ui:field='myFirstTab'> (:6)

I also tried with setting an empty string for heading attribute in ui.xml but the tab heading appeared empty and the value 'First TAB' was not set

Am i missing something or is there a bug?

[Ohashi, Keisuke]

Hi Deepak

Right now,we don't support it if use TabPane.

If you need set Tab text in dynamically , you can use <b:TabLink>.
The TabLink class has getTabPane method and setText method.

but TabLink has some diffurent from TabPane.
TabLink can't inculde widget like a TabPanel in ui xml.

You should add TabPane child yourown in java code .

for example:

in ui.xml

<b:TabPanel>
<b:TabLink ui:field="tabLink" active="true"/>
<b:TabLink ui:field="tabLink2" >Second Tab</b:TabLink>
<b:TabPane ui:field="tabPane" heading="Third
Tab"><g:Label>foo</g:Label></b:TabPane>
</b:TabPanel>

in java code

@UiField TabLink tabLink;

public void foo() {
//after call initWidget
tabLink.setText("First Tab");
TabPane firstTabPane = tabLink.getTabPane();

// .. add any widget to firstTabPane
//ex
firstTabPane.add(new Label("test"));
}

[Ohashi, Keisuke]

Sorry, I don't test my code. It may not work fine...
if so, let me know

[Deepak Kumar]

When i run that i got this.

No class matching "TabLink" in urn:import:com.github.gwtbootstrap.client.ui Element <b:TabLink active='true' ui:field='myFirstTab'> (:6)

[Deepak Kumar]

Also is there any way i can add the custom icons for the tabpanel as show in the image?

[Ohashi, Keisuke]

Do you use latest gwt-bootstrap?
It's added recently to gwt-bootstrap.

https://github.com/gwtbootstrap/gwt-bootstrap/blob/master/src/main/java/com/github/gwtbootstrap/client/ui/TabLink.java

[Ohashi, Keisuke]

>Also is there any way i can add the custom icons for the tabpanel as show in the image?

Does it meens you need add icon to Tab?
If so,right now it is not supported.
If you use TabLink, you can use our icons. but custom images as a
<g:Image> can't do it.

[Deepak Kumar]

Thanks SoundTricker, It works with Tablink but it seems i can use only text inside the Tablink and my problem is as below 

 <b:TabLink ui:field="myTab" heading="MyTablink" active="true">

<b:Hero ui:field="HeroElements">

</b:Hero>

</b:TabLink>

I got an error as 

 Illegal child <b:Hero ui:field=' HeroElements'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget? Element  <b:TabLink ui:field="myTab" heading="MyTablink" active="true"> 

Thanks,

Deepak

[Ohashi, Keisuke]

Right now so.
TabLink can add only text.

I'm thinking how to add any widgets.

I may change TabLink parent to NavWidget from NavLink.
If so, I guess can add any widgets.

[Deepak Kumar]

Yes. That would be right. Adding only text would not be a typical use case.

[Ohashi, Keisuke]

OK
I l implement it.
But it may be not included our first release.

[Ohashi, Keisuke]

Hi Deepak and All

I'm soundTricker (sorry another account)

I pushed new Tab class.

It's easy syntax. (maybe :P)

like below

----

<b:TabPanel tabPosition="left">

  <b:Tab heading="Typically"> <!-- tab text is set by Tab's heading attribute -->

  <b:Paragraph> <!-- Tab's children add to TabPane -->

    huhuhu hahha

  </b:Paragraph>

 </b:Tab>

</b:TabPanel>

---

and I provide "The manually tabpanel setting".

"The manually tabpanel setting" is most freedom.

User can do customize tab.

It's like below.

----

<b:TabPanel tabPosition="left">

  <b:TabLink dataTarget="testTab" createTabPane="false">

    <g:Label>Huhu</g:Label><!-- can add any widget -->

  </b:TabLink>

  <b:TabPane href="testTab" createTabLink="false">

    <g:Label>Huhu</g:Label>

  </b:TabPane>

</b:TabPanel>

---

But jar file is not created now yet.

If you want to use it now, Please use carrent gwt-bootstrap or Please wait few days. :)

If all needs more sample code, Please see this

Thanks.

[Dhamu]

Hi,

i have used latest gwt-bootstrap Tab code. 

Issue i am facing is, i have set first tab as active but it shows empty until i click another Tab and come to the this tab?

Its like click handler not fired when we are setting 'active'? is it so? i am not sure about this? can you help me.

Ui-binder code:

<b:TabPanel tabPosition="left" ui:field="myFilesHome">

<b:Tab heading="Home" ui:field="tabMyHome" active="true">

<b:Hero ui:field="fileElements">

</b:Hero>

</b:Tab>

<b:Tab heading="Files" ui:field="tabSharedFiles">

<b:Hero ui:field="sharedElements">

</b:Hero>

</b:Tab>

<b:TabPane heading="Links" ><g:Label>Huhu</g:Label></b:TabPane>

</b:TabPanel>

java code:

@UiField Hero fileElements, sharedElements;

@UiField Tab tabSharedFiles, tabMyHome;

public example(){

initWidget(uiBinder.createAndBindUi(this));

fileElements.clear();

fileElements.add(new addProfile());

}

Thanks

[Ohashi, Keisuke]

Hi Dhamu.

Thanks for your report.
I'll check it.

Could you post issue to github issues?

[Ohashi, Keisuke]

It's maybe bug.

[Dhamu]

Hi,

I have posted the above issue in github issues.

Currently we are using gwt-bootstrap in our product.

We will update you, if we face any any further issues.

Thanks for your active development on gwt-bootstrap.

Another question, Is it possible to customize Icon class?

For Example,

Java code:

@UiField Tab tabSharedFiles;

tabSharedFiles.setIcon(IconType.SHARE);

tabSharedFiles.setIcon("want to set my own icon");

Thanks,

[Ohashi, Keisuke]

Another question, Is it possible to customize Icon class?

If you use the Tab class and Icon class,you can't do it.

Please use TabLink and TabPane and gwt Image class on manually mode.

If you want more detail, Please see TabPanel explain on our showcase.

The showcase is updated just a little time ago. ;-) .

If My explain wors are not clear, let me know :D

[Ohashi, Keisuke]

I add custom image tab showcase.

Please see it. :)