Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Posts: 669
Registered: ‎02-19-2011
My Device: BlackBerry PlayBook 32GB
My Carrier: Sprint

Making tab switching within a TabbedPane animate?

Is it possible to animate switching tabs in a TabbedPane? By default there's no transition at all. I'd love it if it was possible to have an effect such as a crossfade between screens.

 

Is this possible through QML?

Staff UI Prototyper (read: full-time hacker)


My BB10 apps: Screamager | Scientific RPN Calculator | The Last Weather App

Highlighted
Developer
Posts: 75
Registered: ‎09-12-2012
My Device: Looking for a BB10 testing device
My Carrier: Developper

Re: Making tab switching within a TabbedPane animate?

[ Edited ]

Hi,

did you try to start an animation from the tabbedPane with the signal : onActiveTabChanged ?

Maybe there is a better option, but it is an idea.

 

// Tabbed Pane project template
import bb.cascades 1.0

TabbedPane {
    id: tabbedPane
    
    showTabsOnActionBar: true
    
    onActiveTabChanged: {
        
     
        
        if(activeTab.value == "tab1")
        {
fade1.play()
}
        
        if(activeTab.value == "tab2")
        {
fade2.play()
}
    } 
    
    Tab {
        property string value : "tab1"
        title: qsTr("Tab1")
   
        
        Page {
            
            id: tab1
            
            Container {
                id: containerTab1
                
                 animations: [
                        FadeTransition {
                            id: fade1
                            duration: 3000
                            easingCurve: StockCurve.CubicOut
                            fromOpacity: 0.2
                            toOpacity: 1
                        }
                    ]
                // define tab content here
                Label {
                    text: qsTr("Tab 1 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }

            }
        }
    }
    Tab {
        
          property string value : "tab2"
        title: qsTr("Tab 2")
        Page {
            id: tab2
            actions: [
                // define the actions for tab here
                ActionItem {
                    title: qsTr("Raise")
                    onTriggered: {
                        // run the image animation
                        raiseAnimation.play();
                    }
                }
            ]
            Container {
                 animations: [
                                        FadeTransition {
                                            id: fade2
                                            duration: 3000
                                            easingCurve: StockCurve.CubicOut
                                            fromOpacity: 0.2
                                            toOpacity: 1
                                        }
                                    ]
                id : containerTab2
                // define tab content here
                Label {
                    text: qsTr("Tab 2 title")
                    horizontalAlignment: HorizontalAlignment.Center
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                    }
                }
          
            }
        }
    }
    

}

 

---------
Mobile developer freelance - QtQuick - Cascades - WP7 - Android
My works : http://fdelgado.fr
Regular Contributor
Posts: 54
Registered: ‎04-05-2013
My Device: Q10
My Carrier: T-Mobile

Re: Making tab switching within a TabbedPane animate?

[ Edited ]

I wanted to add a left-right "slide" effect between tabs.

And I wanted to avoid hardcoding the ids of what I am animating so that i could write a general-purpose "SlidingTabPane" component.

The problem I am running into is, I want to save the previous pane as a property.

I can get a reference to the current pane: it's just "activePane". I try to save it to

my previousPane property

But I tried to define a property of that type in my own class

 

property AbstractPane previousPane

 

and when I tried to run the app, I got this error:

 

Jun 06 10:26:51.094 com.example.z10player.testDev_e_z10player6fdd8189.542691537..0              default   9000  bb::cascades::QmlDocument: error when loading QML from:   QUrl( "file:///apps/com.example.z10player.testDev_e_z10player6fdd8189/native/assets//main.qml" )  
Jun 06 10:26:51.094 com.example.z10player.testDev_e_z10player6fdd8189.542691537..0              default   9000    --- errors:  (file:///apps/com.example.z10player.testDev_e_z10player6fdd8189/native/assets//main.qml:6:1: Abstract class

And the rest of the error is cut off, but I know it is complaining about the AbstractPane class because that's the only line that is different.

 

What property type should I use to save the activePane?

Does anyone already have a SlidingTabbedPane component they would like to share?