How to select a item(ex.image) in listview and display it in a new page?



  • Hi All,
    I am trying to develop a code where i have a listview containing 4 images.. when i click on the first image it should display in a new window and when i flick it,the next images should be displayed.

    "I have tried this link but could not find any code for clicking on the list-view:"
    http://doc.qt.nokia.com/qt-components-symbian/qml-listitem.html
    Thanks if any one finds me a solution!!!



  • Hi,

    in your delegate you need something like this:

    @
    ListItem {
    onClicked: {
    pageId.pageStack.push( Qt.resolvedUrl( "NewWindow.qml" ), { "model" = yourModelId, "index" = index } )
    }
    }
    @

    This way you pass your model that contains images and current item index to new page. In new page you need to declare two properties:

    @
    property Item model: 0
    property int index: -1
    @

    Now on flick you can increment index and get next image from model. Fr more information see model documentation.



  • Hi,
    I had displayed my code which you have asked me to add!! But, I am getting errors.as
    Invalid property assignment: unsupported type "UserType"

    @ ListView {
    id: listview1
    x: 0
    y: 0
    width: 360
    height: 640
    clip: true
    header: ListHeading {
    ListItemText {
    text: "ListHeading"
    anchors.fill: parent.paddingItem
    role: "Heading"
    }
    }
    delegate: ListItem {
    id: listItem
    ListItem {
    onClicked: {
    mainPage.pageStack.push( Qt.resolvedUrl( "hi.qml" ), { "model" : mode , "index" : index } )
    }
    }

            Column {
                anchors.fill: parent.paddingItem
                ListItemText {
                    width: parent.width
                    Text {
                        x: 100
                        y: 5
                        color: blue
                        text: titleText
                    }
                    Image {
                        id:li
                        x: 0
                        y: 5
                        width: 50
                        height: 50
                        source: model.red
                    }
                }
            }
        }
        model:
             id:mode
            ListModel {
            ListElement {
                titleText: "jellyfish"
                blue: "white"
                red: "jellyfish.JPG"
    
    
            }
    
            ListElement {
                titleText: "Koala"
                blue: "white"
                red: "Koala.JPG"
            }
    
            ListElement {
                titleText: "Lighthouse"
                blue: "white"
                red: "Lighthouse.JPG"
            }
    
            ListElement {
                titleText: "Penguins"
                blue: "white"
                red: "Penguins.JPG"
            }
    
            ListElement {
                titleText: "Tulips"
                blue: "white"
                red: "Tulips.JPG"
            }
        }
    }
    

    } @

    Thanks if you find me a solution!



  • Hi,
    I can able to send the call to next page.. but i am having trouble in this part..

    { "model" = yourModelId, "index" = index } )

    where it says: Error: Cannot assign to non-existent property "model"



  • In hi.qml in main element you should define property model :

    @
    property ListModel model
    @



  • Hi,
    This is the code i tried in hi.qml

    @import QtQuick 1.0
    import com.nokia.symbian 1.0

    Rectangle {
    property ListModel model

    width: 360
    height: 640
    

    }@

    I am getting error as - Error: Cannot assign QString to QDeclarativeListModel*



  • I'm sorry. My mistake. Passing arguments is without ""

    @
    { model = yourModelId, currIndex = index }
    @



  • HI,
    It's Ok sir.But still i am getting error as: Cannot assign to non-existent property "model".. Even though i have removed the double quotes and tried it.. What should i give in hi.qml? I have simply declared what u have said earlier..
    I thought that index should be set for all the images and when clicked it should display in a new page and when flicked it should retrive all the images in a queue i guess..
    Do you get my point sir.



  • Hi,

    I can't unterstand what is the problem. But I can suggest you this solution:

    Store you model in separate file: Model.qml
    @
    import QtQuick 1.1

    ListModel {
    ListElement {
    titleText: "jellyfish"
    blue: "white"
    red: "jellyfish.JPG"
    }

    ListElement {
        titleText: "Koala"
        blue: "white"
        red: "Koala.JPG"
    }
    
    ListElement {
        titleText: "Lighthouse"
        blue: "white"
        red: "Lighthouse.JPG"
    }
    
    ListElement {
        titleText: "Penguins"
        blue: "white"
        red: "Penguins.JPG"
    }
    
    ListElement {
        titleText: "Tulips"
        blue: "white"
        red: "Tulips.JPG"
    }
    

    }
    @

    In fist page you've got:
    @
    import QtQuick 1.1
    import com.nokia.symbian 1.1

    Page {
    id: mainPage

    ListView {
        id: listview1
    
        anchors.fill: parent
    
        x: 0
        y: 0
        width: 360
        height: 640
        clip: true
        header: ListHeading {
            ListItemText {
                text: "ListHeading"
                anchors.fill: parent.paddingItem
                role: "Heading"
            }
        }
        delegate: ListItem {
            id: listItem
            ListItem {
                onClicked: {
                    mainPage.pageStack.push( Qt.resolvedUrl( "hi.qml" ), { "currIndex" : index } )
                }
            }
    
            Column {
                anchors.fill: parent.paddingItem
                ListItemText {
                    width: parent.width
                    Text {
                        x: 100
                        y: 5
                        color: blue
                        text: titleText
                    }
                    Image {
                        id:li
                        x: 0
                        y: 5
                        width: 50
                        height: 50
                        source: model.red
                    }
                }
            }
        }
        model: Model {}
    }
    

    }
    @

    And in hi.qml something like this:
    @
    Page {
    id: mainPage

    property int currIndex: 0
    property ListModel model:
    
    Model {
        id: model
    }
    
    Image {
        id: img
        anchors.fill: parent
    
        source: model.get( currIndex ).red
    
        MouseArea {
            anchors.fill: parent
    
            onClicked: mainPage.currIndex++
        }
    }
    

    }
    @



  • Hi Sir,
    Thank you very much!!! I got the required result
    Again a huge thanks...



  • Hi,
    one thing i could not do is, i am not able to move the picture back.I mean both sides.
    The picture is moving only on one direction.. I want to move it both left and right.
    Whether i have to assign index value for all the images or i should change the condition which you had given...



  • Hi,

    change the condition. currIndex is the index of current image in the model. You can modify this index whatever you want ( increase, decrease, set to some value ). Also you can get model "size":http://doc.qt.nokia.com/4.7-snapshot/qml-listmodel.html#count-prop and check if currIndex is bigger. In that case you can stop increasing currIndex or go back to 0.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.