Cascades Development

[citrinetiger]

Hey All!

I cant get this action to trigger the animation I want. 

if you could tell me what I am doing wrong Id highly appreciate it.

I have a main navigation page(holds my actionbar actions) and a container page with my animations.

my animation page can manipulate items on my Nav page but not vice versa. 

thanks

-Ali

here are my 2 qmls:

//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: {
        console.log("NavigationPane - onCreationCompleted()");
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 animation page:

// animationPage.qml
import bb.cascades 1.0

Container {
    id: animPageContainer
    background: Color.Black
    Container {
        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
            }
        }
    }
}

[jasoncheung]

Just by the code you posted, you are calling animation1.play(), but there is no such thing as animation1.

Since your animation is in a separate QML, the way I did it for my apps was that I would have function in my animation QML that would call the play() function, therefore I would be able to call it in my main.qml using the id of that particular object.

For example if I had an Arrow.qml that has some sort of animated arrow when my page first starts, in my main.qml I would have a section

Page {
...
  Arrow {
    id: Arrow1
  }
onPageCreated:
{
  Arrow1.myPlayAnimationFunction()
}

[citrinetiger]

Thanks for the response!

On my animationPage code the animation is called "animation1".

I see what you did on yours, and that would work but not in my case unfortunately. On my apps launch I do trigger animations BUT i really am trying to use an action item on the actionbar to trigger another animation without leaving the current page.

so if I were to have a qml with a arrow animation that loops infintely to trigger oncreated, Id like an action button to trigger a second arrow. I am really just trying to avoid putting a button within my animation page, think it'll look better on the actionbar. 

what I find interesting is that I can have the end of an animation(on animationPage) trigger to disable an action item that is within the mainPage code, but for whatever reason, I cant send commands the other way...

[jasoncheung]

Doh, quick eyes, but didn't catch the animation1 in the code above.....

Although my example used onPageCreated, I was thinking it would still apply to onTrigger for the actionitem.

Are you sure main.qml has the right or knowledge to call animation1?....hence my original idea of creating a function in AnimationPage that would expose that functionality to main.qml.....

I'm not an expert by any means though, and I'm just throwing ideas out!

[citrinetiger]

oooh I see what you mean. I definitely dont think my main has the right, as you put it, to call that. so in my case would it be this:

Page {
...
  ControlDelegate {
    id: ControlD
    source: "animationPage.qml"
  }
onPageCreated:
{
  ControlD.animation1Function()
}

 ???

[Ebscer]

Looks to be a scoping issue.

You may want to try putting an intermediate function in your animationContainer

[citrinetiger]

please forgive my ignorance, but what do you mean by intermediate function? tried searching the api reference for it but no dice...

thanks

-Ali

[bcs925]

To have the animation in a separate QML page, you need to expose the id to to the main page by attaching the qml file to the main page and creating a property alias for the animation1 element.  Which would be a lot extra work for such a short "custom qml page" (what you have as animationPage.qml). Plus you need to tie the animation to whatever element it is that is going to animate, right?

Why not define the animation within the main.qml and it should work.  Something like:

//main.qml
import bb.cascades 1.0

NavigationPane {
    id: navPane
    Page {
        id: mainPage
        Container {
            ControlDelegate {
                id: controlD
                source: "animationPage.qml"
            }
            Label {
                text: "HelloWorld"
                opacity: 0.0
                animations: FadeTransition {
                    id: animation1
                    fromOpacity: 0
                    toOpacity: 1
                    duration: 300
                    onEnded: {
                        playAction.enabled = false
                    }
                }
            }
        }
        actions: [
            ActionItem {
                id: playAction
                title: "Play"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    animation1.play()
                }
            }
        ]
    }
    onCreationCompleted: {
        console.log("NavigationPane - onCreationCompleted()");
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

[citrinetiger]

thanks for the response bcs925!

Unfortunately the ControlDelegate ends up being the page so it wont allow another item like a label, container, imageview, etc... there has to be a way to target an item on that page though, right? 

[jasoncheung]

What you posted in response to me should work. Did you try that yet? The function in animationPage should call animation1.play()