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

Naufal

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!!!

task_struct

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.

Naufal

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!

Naufal

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"

task_struct

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

@
property ListModel model
@

Naufal

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*

task_struct

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

@
{ model = yourModelId, currIndex = index }
@

Naufal

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.

task_struct

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++
    }
}

}
@

Naufal

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

Naufal

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...

task_struct

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.