[SOLVED] How do I retrieve image from XmlListModel for Splash Screen?

honeyhong

Hey I have these codes and tested it manually by placing the link into the Image Source area and it worked successfully. But instead of putting it manually, I want call it from a XmlListModel. I have these codes and all that is left is retrieving the 'image'. I tried calling it by splash1.name and several other attempts but I failed. How do I retrieve it? What did I do wrong?

@
import QtQuick 1.1
import com.nokia.symbian 1.1

Page
{
id:root
//---------------------------------------XML----------------------------
XmlListModel {
id: splash1
property string feedUrl: ""
property bool loading: status == XmlListModel.Loading

        source: "http://appsfactory.my/client/canonmsia2/android/startup.php"
        query: "/plist/dict"

        XmlRole { name: "image"; query: "string[2]/string()" }
    }

//---------------------------------------splash----------------------------
Item {
id: splashScreenContainer2
signal splashScreenCompleted()

Image {
    id: splashImage2
    source: splash1.name //i'm trying to call the image from the XmlListModel here.
    anchors{top:parent.top;}
}

SequentialAnimation {
    id:splashanimation2
    PauseAnimation { duration: 8200 }
    PropertyAnimation {
        target: splashImage2
        duration: 700
        properties: "opacity"
        to:0
    }
    onCompleted: {
       splashScreenContainer2.splashScreenCompleted()
       root.pageStack.push(window.homePage)
    }
}
//starts the splashScreen
 Component.onCompleted: splashanimation2.start()

}

}
@

Ices_Eyes

It should be enough for you to change the source of the Image with the name you assign to the role on the model, i.e.:

@
import QtQuick 1.1
import com.nokia.symbian 1.1

Page
{
id:root
//---------------------------------------XML----------------------------
XmlListModel {
id: splash1
property string feedUrl: ""
property bool loading: status == XmlListModel.Loading

        source: "http://appsfactory.my/client/canonmsia2/android/startup.php"
        query: "/plist/dict"

        XmlRole { name: "splashImage"; query: "string[2]/string()" }
    }

//---------------------------------------splash----------------------------
Item {
id: splashScreenContainer2
signal splashScreenCompleted()

Image {
    id: splashImage2
    source: splashImage
    anchors{top:parent.top;}
}

SequentialAnimation {
    id:splashanimation2
    PauseAnimation { duration: 8200 }
    PropertyAnimation {
        target: splashImage2
        duration: 700
        properties: "opacity"
        to:0
    }
    onCompleted: {
       splashScreenContainer2.splashScreenCompleted()
       root.pageStack.push(window.homePage)
    }
}
//starts the splashScreen
 Component.onCompleted: splashanimation2.start()

}

}
@

another solution is to assign the image source when the xmlmodel is read, like this:

@
onStatusChanged: {
if(status == XmlListModel.Ready) {
splashImage2.source = imageThumb;
}
@

honeyhong

I've tried assigning the source of the Image with the name assigned to the role on the model before this but it didn't work. I get this error "ReferenceError: Can't find variable: splashImage"

Ices_Eyes

Hmmm.. :)
I'm not good with xpath, but is "string[2]/string()" a valid xparh expression?

honeyhong

i am not good too :) yeah it is. if u check the xml link, string[2]/string() links to this -->
http://www.appsfactory.my/client/canonmsia2/images/splashBanners/010.jpg

i tried your 2nd method, but i can't get it to work as well. i will keep trying though. :)

Ices_Eyes

Sorry, my bad :D
Your xmllistmodel is not used as a model, so you cannot use it in that way :P

You can simply solve by using this for the model:
@
onStatusChanged: {
if(status == XmlListModel.Ready) {
splashImage2.source = splash1.get(0).splashImage;
}
}@

But as of now, I'm not completely sure you will still be able to see your splash screen (i.e. the item that contain the image should be properly sized, or it will have a size of 0x0px). But the image will be correctly loaded as the image source :)

honeyhong

It worked! It managed to load the image correctly and the splash screen appeared as well. Thank you very much for your help. You just made my day! :D

For future reference, here is my final code.
@
import QtQuick 1.1
import com.nokia.symbian 1.1

Page
{
id:root
orientationLock: PageOrientation.LockPortrait
//---------------------------------------XML----------------------------
XmlListModel {
id: splash1
property string feedUrl: ""
property bool loading: status == XmlListModel.Loading

        source: "http://appsfactory.my/client/canonmsia2/android/startup.php"
        query: "/plist/dict"

        XmlRole { name: "splashImage"; query: "string[2]/string()" }

    onStatusChanged: {
            if(status == XmlListModel.Ready) {
            splashImage2.source = splash1.get(0).splashImage;
            }
        }
    }

//---------------------------------------splash----------------------------
Item {
id: splashScreenContainer2
signal splashScreenCompleted()

Image {
id: splashImage2
anchors{top:parent.top}
}

SequentialAnimation {
id:splashanimation2
PauseAnimation { duration: 8200 }
PropertyAnimation {
target: splashImage2
duration: 700
properties: "opacity"
to:0
}

    onCompleted: {
       splashScreenContainer2.splashScreenCompleted()
       root.pageStack.push(window.homePage)
    }
  }

//starts the splashScreen
Component.onCompleted: splashanimation2.start()
}
}
@