Need help with button

[doforumda]

hi

here I am creating a simple gallery. I programmed next button, it is working fine but I don't know how to deal with back button.
here is my code
@
import Qt 4.7

Rectangle {
width: 500
height: 500

Rectangle {
    id: container
    width: 500; height: 100
    border.width: 1

    states: [
        State {
            name: "runningTrue"
            PropertyChanges { target: anim_right; running: true }
        },
        State {
            name: "runningFalse"
            PropertyChanges { target: anim_right; running: false }
        }
    ]
    state: "runningFalse"

    Rectangle {
        id: image1
        width: 100; height: 100
        color: "green"
    }
    Rectangle {
        id: image2
        width: 100; height: 100
        x: 105;
        color: "brown"
    }
    Rectangle {
        id: image3
        width: 100; height: 100
        x: 215
        color: "orange"
    }
    Rectangle {
        id: image4
        width: 100; height: 100
        x: 325
        color: "lightblue"
    }
    Rectangle {
        id: image5
        width: 100; height: 100
        x: 435
        color: "pink"
    }
    Rectangle {
        id: image6
        width: 100; height: 100
        x: 545
        color: "blue"
    }
}

Rectangle {
    id: nextButton
    width: 100; height: 25
    radius: 2; //border.width: 1
    //anchors.centerIn: parent
    x: 200; y: 200
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#006699" }
        GradientStop { position: 0.3; color: "#00ffff" }
        GradientStop { position: 0.6; color: "#00D6E4" }
        GradientStop { position: 1.0; color: "#006699" }
    }

    Text {
        anchors.centerIn: parent
        text: "Next"
        font.pixelSize: 15
    }

    MouseArea {
        anchors.fill: parent
        //onClicked: image1.state == "runningFalse" ? image1.state = "runningTrue" : image1.state = "runningFalse"
        onClicked: if(container.state == "runningFalse") {
                        container.state = "runningTrue"
                   }
                   else {
                        container.state = "runningFalse"
                   }
    }
}

Rectangle {
    id: previousButton
    width: 100; height: 25
    radius: 2; //border.width: 1
    //anchors.centerIn: parent
    x: 90; y: 200
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#006699" }
        GradientStop { position: 0.3; color: "#00ffff" }
        GradientStop { position: 0.6; color: "#00D6E4" }
        GradientStop { position: 1.0; color: "#006699" }
    }

    Text {
        anchors.centerIn: parent
        text: "Back"
        font.pixelSize: 15
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.state == "runningFalse" ? container.state = "runningTrue" : container.state = "runningLFalse"
    }
}

NumberAnimation {
    id: anim_right
    target: container
    properties: "x"
    from: container.x; to: container.x + 100
    duration: 1000
    easing.type: "OutExpo"
    //running: false
}

NumberAnimation {
    id: anim_left
    target: image1
    properties: "x"
    from: image1.x; to: image1.x - 100
    duration: 1000
    easing.type: "OutExpo"
    //running: false
}

}

@

[krishkn]

Many ways of doing this ... just onClicked() in previousbutton call anim_left.start() ... Take care of other conditons as well ;)