Disabling Tabs

[apmlaszloacct]

I have a tabbed pane, but I want to disable one of the tabs - it should still be visible, but clicking on it should not display it's contents.
I have tried:

<tabpane text="Species" enabled="false">

but that just disables the contents of the pane - where am I going wrong?

Thanks

Andrew

[pablo]

Hi Andrew,

The following code demonstrates how a tabpane can disable a tab:


<canvas>

<tabs>
<tabpane text="one" >
<view bgcolor="red" height="50" width="50" />
</tabpane>
<tabpane text="two">
<method event="oninit">
this.tab.setAttribute('enabled', false);
this.tab.setAttribute('clickable', false);
</method>
<view bgcolor="green" height="50" width="50" />
</tabpane>
<tabpane text="three" enabled="false">
<view bgcolor="blue" height="50" width="50" />
</tabpane>
</tabs>

</canvas>


Let me know if this works for you.

Cheers,
pablo

[apmlaszloacct]

Yes that works - Thank you very much.

Andrew

[arina]

Originally posted by pablo
The following code demonstrates how a tabpane can disable a tab:

<canvas>...
<tabpane text="two">
<method event="oninit">
this.tab.setAttribute('enabled', false);
this.tab.setAttribute('clickable', false);
</method>
</tabpane>
...</canvas>


Hi, Pablo! Would you please help me to make some tab non-visible while it's tabpane is selected? I've learned the reference but coudn't find any method like 'onselect'. Thank you in advance.

[pablo]

Hi Arina,

In the following examples, I assumed you wanted to keep the spacing of the original tab when it's selected. There are several ways to do what you want. Here are two.

The first method is to extend the tabpane class and checking for the onselected event by referring to a tabpane's tab.<canvas>

<class name="mytabpane" extends="tabpane">
<!-- Check onselected event referring tab. A tab or basetab is a
baselistitem. A baselistitem sends an onselect and onselected event
whenever it is selected (see setSelected() in
lps/components/base/baselistitem.lzx). -->
<method event="onselected" args="item" reference="this.tab">
// if item (which should be the tab) is selected, make it invisible,
// else make it visible.
if (item.selected) {

// Saying opacity=0 and visible=false are equivalent. Because we
// want to save the original space of the tab, we set opacity of
// tab to be not totally invisible.
item.setOpacity(.001);

// A tab's tabview (see tab class in lz/tabs.lzx) contains the
// text.
item.tabview.setVisible(false);

// As an exercise, try setting item.setVisible(false/true)
// instead of setting opacity to see what happens.

} else {
item.setOpacity(1);
item.tabview.setVisible(true);
}
</method>
</class>

<tabs>
<mytabpane text="one">
<method event="oninit">
// Due to instantiation order and when the tabs class
// decides when a tab is selected (see basetabsbar.init() in
// base/basetabs.lzx), we have to explicitly send the onselected
// event just to make sure the first tab is invisible.
this.tab.onselected.sendEvent(this.tab);
</method>
<view bgcolor="red" height="50" width="50" />
</mytabpane>
<mytabpane text="two">
<view bgcolor="green" height="50" width="50" />
</mytabpane>
<mytabpane text="three" enabled="false">
<view bgcolor="blue" height="50" width="50" />
</mytabpane>
</tabs>

</canvas>The second method is to extend the tab class and pass that to tabs as the default tab to use.<canvas>

<class name="mytab" extends="tab">
<method name="setSelected" args="s">
super.setSelected(s);
if (s) {
this.setAttribute('opacity', .001);
this.tabview.setVisible(false);
} else {
this.setAttribute('opacity', 1);
this.tabview.setVisible(true);
}
</method>
</class>

<tabs tabclass="mytab">
<tabpane text="one">
<view bgcolor="red" height="50" width="50" />
</tabpane>
<tabpane text="two">
<view bgcolor="green" height="50" width="50" />
</tabpane>
<tabpane text="three" enabled="false">
<view bgcolor="blue" height="50" width="50" />
</tabpane>
</tabs>

</canvas>Good luck!

pablo