Tabpane: I need an event to fire on select or click

[tspratt]

But I can't get anything to fire.

I have tried onselected, onclick, onvisible, but they don't seem to be ocurring.

One issue is that the TABS are created by the tabpanes. Do I need to extend tabpane if I want an onselected event?

I also would like to add disable functionality to the tab, so it is grayed out and non selectable.

Is this a job for extending tabpane as well?

Tracy

[antun]

I believe tht in order to get the customization you're talking about you would need to extend basetabpane and basetab. Have a look here:

http://www.laszlosystems.com/lps-2.0/docs/lzx-reference/index.html?basetabpane.html

-Antun

[yoDon]

Just thought I'd bump this thread in case anyone from laszlo is tracking forum issues... I'm trying to deal with this issue, too.

-Don

[vik001]

Bump

[redcoat]

Hi,

Did you ever get this to work? We need to do it too!

cheers,

David

[antun]

This rings a bell:

You should be able to overwrite the setSelected() method in tab (and then call super.setSelected() to ensure it does what it's supposed to do). In that method, you can send off an event (this.onselected.sendEvent()).

Was there no onselected event in the tab already?

-Antun

[redcoat]

Hi,

I actually found some code from Pablo that achieves this.

However, I'm trying to figure out how to throw a "selected" event so that in each tab pane I can specify what to be done when the pane is selected.

I keep getting this frustrating "call to undefined method 'sendEvent'" message.

Any ideas, anyone? Can anyone explain how to send an event clearly?

cheers,

David

<?xml version="1.0" encoding="UTF-8" ?>
<canvas debug="true">

<debug x="220" y="20" width="250" height="200" />

<class name="mytabpane" extends="tabpane" >
<method event="oninit">
if (this.tab.selected) Debug.write(this.text + ' selected');
this.selected.sendEvent();
</method>
<method event="onselect" reference="this.tab">
if (this.tab.selected) Debug.write(this.text + ' selected');
this.selected.sendEvent();
</method>
<method event="selected">
Debug.write("in selected event method");
</method>
</class>

<tabs x="20" y="20">
<mytabpane text="one">
<method event="selected">
Debug.write("in selected for tabpane 1");
</method>
<view>
<button>tab1</button>
</view>
</mytabpane>
<mytabpane text="two">
<method event="selected">
Debug.write("in selected for tabpane 2");
</method>
<view>
<button>tab2</button>
</view>
</mytabpane>
<mytabpane text="three">
<method event="selected">
Debug.write("in selected for tabpane 3");
</method>
<view>
<button>tab3</button>
</view>
</mytabpane>
</tabs>
</canvas>

[bbarkley]

Don't know if you've figured this out already or moved on.

You're pretty close. I think that Laszlo events have to start with 'on'. If you change your 'this.selected.sendEvent()' to 'this.onselected.sendEvent()' and change all <method event="selected"> definitions to <method event="onselected"> things should work.

If you take a look at basegridrow it also sets up an attribute for the event it broadcasts (also 'onselected') with an initial value of null. Before the event is fired there's a check to see if anything has registered for the event:
if (this.onselected) this.onselected.sendEvent(this);


An easier solution might be to define your tabpanes as follows:
<tabpane text="one">
<method event="onselected" reference="this.tab">
Debug.write("in selected for tabpane 1");
</method>
</tabpane>

where you don't have to subclass tabpane, but you do have to remember to reference the tab correctly.

[tpatsch66]

Originally posted by bbarkley
An easier solution might be to define your tabpanes as follows:
<tabpane text="one">
<method event="onselected" reference="this.tab">
Debug.write("in selected for tabpane 1");
</method>
</tabpane>



Just a question here. This code does work. It gives one a place to run custom actions when a specific tab is selected. The problem is that there seems to be no distinction between "coming to" and "leaving" a tab. The "onselected" event is fired both coming and going.

Is there a way to have it only fire when coming to a tab?

I'm trying like hell to figure out how to get some code to execute only when the user visits a particular tab but no dice so far.

[bbarkley]

That's annoying. It looks like you can test to see if it's actually been selected:

<tabpane text="one">
<method event="onselected" reference="this.tab">
if (this.tab.selected) {
Debug.write("in selected for tabpane 1");
}
</method>
</tabpane>


Which you could rollup into a custom event if you subclassed tabpane.