[SOLVED] How can I link an image to a particular website in QML?



  • Hey. I'm new in Qt and I am currently developing a Symbian App by using Qt
    4.7. I am wondering how can i link an image in my app to a particular website.

    Look forward to some replies.
    Thanks. :)



  • Please use more descriptive titles for your posts. Almost everyone posting on these forums need help with Qt, so your title does not help anyone here understand what you need help with.

    There are many ways to do what you want. One way would be to put your image on a QPushButton, and use it's clicked() signal to connect to a slot that has the code to open your webpage.

    Opening a webpage with an URL can be done using the [[doc:QDesktopServices]] class.



  • I'm sorry. I'm new here and new in Qt as well. So what I know about the codes, are rather vague.
    I am using QML and these are my codes.

    @
    Image
    {
    id: image1
    anchors.fill:parent
    fillMode: Image.PreserveAspectFit
    z: -1
    source: "../images/buddy.jpg"
    }
    @

    I want this image to link to a website when I click on it.
    I searched online and found this:
    @
    onClicked:Qt.openUrlExternally("http://www.qt.nokia.com")
    @
    but it didn't work or maybe I applied it wrongly.

    So how do I link it? and is the "onClicked" function applicable to images?



  • Welcome to the Qt forum :-)

    I am moving your post to the relevant forum for QML. Also, please take care to wrap code sections between @ tags. That makes them much more readable.



  • Okay. Thank you. :)
    So how do I fix this problem?



  • the image itself is not a clickable element...use a MouseArea as a child in the image like this:

    @
    Image
    {
    id: image1
    anchors.fill:parent
    fillMode: Image.PreserveAspectFit
    z: -1
    source: "../images/buddy.jpg"
    MouseArea {
    anchors.fill: parent //...to cover the whole image
    onClicked: Qt.openUrlExternally("http://qt.nokia.com") //...handling the clicked signal of the MouseArea
    }
    }
    @



  • Hey raaghuu. Thanks for the help. :)

    I gave that a try before this, and tried again.
    I know it is supposed to work but nothing happened.
    Are there anything else that I must do in order to use MouseArea?


  • Moderators

    I suspect there might be some priority conflict. Why does z equal "-1"? Try making it a bit higher and see if it works.



  • Hi Honey,
    You can use QWebview and call the URl as below:

    @
    WebView {
    id:hg
    url: "http://qt.nokia.com"
    preferredHeight: 600
    preferredWidth : 360
    smooth: false

    }
    

    @

    and in the click event of the image(better use button and attach the image) write the coding to link the the QWebview in the same page or in a new page.

    You also need to include @import QtWebKit 1.0@ in the .qml page.

    Regards,
    Harish



  • Why is that better? I don't see how using an internal webview helps if you want to just link to a webpage. Using an external browser has advantages, like the user being able to work with a webpage in his familiar application, including the opportunity to bookmark sites.



  • [quote author="sierdzio" date="1341295789"]I suspect there might be some priority conflict. Why does z equal "-1"? Try making it a bit higher and see if it works.[/quote]

    Hey I tried to increase the z value like u said, but it didn't work either.
    I am using the default library com.nokia.symbian 1.1.
    Does that affect the usage of Qt.openUrlExternally("http://qt.nokia.com")?



  • No, but it might affect if the mouse area is active at all. Did you check that the onClicked method of the MouseArea is triggered? If not, please check, and report back.



  • [quote author="Andre" date="1341400959"]No, but it might affect if the mouse area is active at all. Did you check that the onClicked method of the MouseArea is triggered? If not, please check, and report back.[/quote]

    how do i check whether it is triggered? call another function and print out something when i click on the image?



  • [quote author="mkhpad" date="1341297064"]Hi Honey,
    You can use QWebview and call the URl as below:

    @
    WebView {
    id:hg
    url: "http://qt.nokia.com"
    preferredHeight: 600
    preferredWidth : 360
    smooth: false

    }
    

    @

    and in the click event of the image(better use button and attach the image) write the coding to link the the QWebview in the same page or in a new page.

    You also need to include @import QtWebKit 1.0@ in the .qml page.

    Regards,
    Harish[/quote]

    Thanks Harish. I will give this method a try as well. :)



  • [quote author="honeyhong" date="1341807975"][quote author="Andre" date="1341400959"]No, but it might affect if the mouse area is active at all. Did you check that the onClicked method of the MouseArea is triggered? If not, please check, and report back.[/quote]

    how do i check whether it is triggered? call another function and print out something when i click on the image?[/quote]
    Yes, exactly. That is how the "documentation":http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedebugging.html explains it also.



  • [quote author="Andre" date="1341840581"]
    [quote author="honeyhong" date="1341807975"][quote author="Andre" date="1341400959"]No, but it might affect if the mouse area is active at all. Did you check that the onClicked method of the MouseArea is triggered? If not, please check, and report back.[/quote]

    how do i check whether it is triggered? call another function and print out something when i click on the image?[/quote]
    Yes, exactly. That is how the "documentation":http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedebugging.html explains it also.

    [/quote]

    gave it a check and yeah it is definitely activated. i changed the path to another qml page that contain WebView and the url to the webpage instead, and it worked. the page loaded.
    thank you all for the help. :)

    but somehow, it just would not load with Qt.openUrlExternally(“http://qt.nokia.com”). any idea why?



  • Perhaps you do not have a default webbrowser registered on your system? Not sure at all about that though.



  • I do. I am using Firefox.
    Well, at least managed to get the page to load by combining both methods posted above.

    Anyway, thanks for your help! :)



  • Hey all. I just managed to get my hands on a Nokia phone to test my application out. Turned out, actually these codes worked perfectly fine. It didn't work in the simulator, but in the phone it could open the web externally. Finally! Thank you all. :)

    @onClicked:Qt.openUrlExternally("http://qt.nokia.com")
    @



  • Ah, thanks for reporting back on that!



  • [quote author="Andre" date="1343033414"]Ah, thanks for reporting back on that![/quote]
    Sure. Thank you again for your help :)


Log in to reply
 

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