Apache Royale Jewel TabBar / SectionContent onShow or valueCommit Event like in sdk 0.9.8?

Question

I have something similar to this :

<j:states>
    <js:State name="login"/>
    <js:State name="loggued"/>
</j:states>
...

<j:Group includeIn="loggued" width="100%" height="100%">

   <j:TabBar localId="tabbar" width="100%"  change="ev_tab_change(event)">
        <j:beads>
            <js:ConstantBinding sourcePropertyName="tabBarDataSample" destinationPropertyName="dataProvider"/>
            <j:AssignTabContent selectedContentProperty="content">
                <j:content>
                    <j:TabBarContent width="100%" y="80" >
                        <royale:TB_One/>
                        <royale:TB_Two/>
                    </j:TabBarContent>
                </j:content>
            </j:AssignTabContent>

        </j:beads>
    </j:TabBar>

</j:Group>

<royale:TB_One/> and <royale:TB_Two/> are <j:SectionContent>

I need to trigger an event when TB_One or TB_Two is showing or tabbar selectedIndex was programmatically changed. I have tried change event on TabBar, but this is not triggered when changing with selectedIndex

Is there an onShow event or valueCommit ?

(for now tabbar.dispatchEvent(new Event("change")); do the trick when programmatically change selectedIndex)

Used sdk is 0.9.8

Regards

score 0 · Answer 1 · answered Aug 18 '20 at 18:52

you can do the following:

<!-- The TabBar -->
<j:TabBar initComplete="tabbarInitialized(event)"/>

...

<!-- Buttons to change the content programatically -->
<j:Button click="selectContentByIndex(0)" text="0"/>
<j:Button click="selectContentByIndex(1)" text="1"/>

...

<!-- as3 code in script -->
<fx:Script>
    <![CDATA[
        import org.apache.royale.events.Event;

        // when tabbar is initialized make tabbar listen for internal event "selectionChanged"
        // this is the event to use for programmatic changes
        public function tabbarInitialized(event:Event):void
        {
            event.target.addEventListener("selectionChanged", contentChanged);
        }

        // The button change the selection programmatically
        public function selectContentByIndex(index:int):void
        {
            tabbar.selectedIndex = index;
        }
        
        // Here run the code you want. I simply trace the new tabbat selected index and the item
        // but you can calculate the content and operate over tha visual component
        public function contentChanged(event:Event):void
        {
            trace("index:", tabbar.selectedIndex, "content:", tabbar.selectedItem);
        }
    ]]>
</fx:Script>

Hi thanks Carlos, unfortunally doesn't seem to work in my context in 0.9.8. Maybe I need a specific bead ? — Fred, Aug 19 '20 at 08:18
Hi Fred, I tried that code in this example: https://royale.apache.org/using-jewel-tilehorizontallayout, and all worked right. — Carlos Rovira, Aug 20 '20 at 12:06

Apache Royale Jewel TabBar / SectionContent onShow or valueCommit Event like in sdk 0.9.8?

1 Answers1