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
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

Hey Jason, the below code is where I am, but no luck so far

 

main qml:

//main.qml
import bb.cascades 1.0

NavigationPane {
    id: navPane
    Page {
        id: mainPage
        ControlDelegate {
            id: controlD
            source: "animationPage.qml"
            
        }
        
        actions: [
            ActionItem {
                id: playAction
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    animation1.play()
                }
            }
        ]
    }
        onCreationCompleted: {
            controlD.animation1();
            console.log("NavigationPane - onCreationCompleted()");
            OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
        }
    }

 animation page qml:

// animationPage.qml
import bb.cascades 1.0

Container {
    id: animPageContainer
    background: Color.Black
    Container {
        horizontalAlignment: HorizontalAlignment.Center
        id: animationContainer
        background: Color.White
        opacity: 0
        minHeight: 100
        maxHeight: 100
        minWidth: 100
        maxWidth: 100
        animations: FadeTransition {
            id: animation1
            fromOpacity: 0
            toOpacity: 1
            duration: 300
            onEnded: {
                playAction.enabled = false
            }
        }
    }
}

 

Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha

Re: Can an Action Item trigger an Animation?

Actually the way it's defined as a controldelegate might not work. I guess the question is, do you really need a controldelegate? If not can you just use animationPage as the object?
Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha

Re: Can an Action Item trigger an Animation?

Sorry, I'm typing on mobile right now, let me get back to a desktop before I talk more.
Please use plain text.
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

Thanks Jason!

I really appreciate it. In regards to the ControlDelegate, I will definitely need it. I should have figured it would complicate things :/

 

-Ali

Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha

Re: Can an Action Item trigger an Animation?

So first and foremost, to ensure that your delegateActive = true...(which should be by default), set the opacity = 1 in your animationPage.qml so that you can be sure that your content is actually being created.  Of course set it back to 0, when you've confirmed it.

 

So for you animationPage.qml, try adding a function like:

// animationPage.qml
import bb.cascades 1.0

Container {
    id: animPageContainer
    background: Color.Black
    Container {
        horizontalAlignment: HorizontalAlignment.Center
        id: animationContainer
        background: Color.White
        opacity: 0
        minHeight: 100
        maxHeight: 100
        minWidth: 100
        maxWidth: 100
        animations: FadeTransition {
            id: animation1
            fromOpacity: 0
            toOpacity: 1
            duration: 300
            onEnded: {
                playAction.enabled = false
            }
        }
    }
    function showAnimation1() {
        animation1.play()
    }
}

 

 Now in your main.qml, call the function via the id of the object you are using animationPage.qml to create.

//main.qml
import bb.cascades 1.0

NavigationPane {
    id: navPane
    Page {
        id: mainPage
        ControlDelegate {
            id: controlD
            source: "animationPage.qml"            
        }
        actions: [
            ActionItem {
                id: playAction
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    animation1.play()
                }
            }
        ]
    }
        onCreationCompleted: {
            controlD.control.showAnimation1();
            console.log("NavigationPane - onCreationCompleted()");
            OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
        }
    }

 

I don't think controlD.showAnimation1() itself would work, because it's only access the methods from the ControlDelegate class, hence controlD.control....should access the control that's created by the delegate.....

 

However, I haven't done this before, so again, if this doesn't work....hopefully it'll give the brain and kick start into some direction...:Yes:

Please use plain text.
Developer
citrinetiger
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Re: Can an Action Item trigger an Animation?

Thank you so much!!! :smileyhappy: 

 

The code you gave me triggers  the animation at start, but I just moved the "oncreated" bit to "ontriggered" and it worked like a charm! phew! your the best!

 

below is the working code:

 

main.qml:

//main.qml
import bb.cascades 1.0

NavigationPane {
    id: navPane
    Page {
        id: mainPage
        ControlDelegate {
            id: controlD
            source: "animationPage.qml"
        }
        actions: [
            ActionItem {
                id: playAction
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    controlD.control.showAnimation1();
                }
            }
        ]
    }
    onCreationCompleted: {
        console.log("NavigationPane - onCreationCompleted()");
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 

animationPage.qml:

// animationPage.qml
import bb.cascades 1.0

Container {
    id: animPageContainer
    background: Color.Black
    Container {
        horizontalAlignment: HorizontalAlignment.Center
        id: animationContainer
        background: Color.White
        opacity: 1
        minHeight: 100
        maxHeight: 100
        minWidth: 100
        maxWidth: 100
        animations: FadeTransition {
            id: animation1
            fromOpacity: 1
            toOpacity: 0
            duration: 300
            onEnded: {
                playAction.enabled = false
            }
        }
    }
    function showAnimation1() {
        animation1.play()
    }
}

 

 

Please use plain text.