Results 1 to 15 of 15

Thread: create link to another qml file

  1. #1
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default create link to another qml file

    Hi, this could be an easy problem only however I can't find any solution on previous threads or on the net.

    I was able to create a link using Loader

    Qt Code:
    1. //mainfile.qml
    2. Rectangle
    3. {
    4. ColumnLayout
    5. {
    6. Image {}
    7.  
    8. Mousearea
    9. {
    10. onClicked: { loader.source = "anotherfile.qml" }
    11.  
    12. }
    13.  
    14. }
    15. Loader
    16. {
    17. id: loader
    18. anchors.fill: parent
    19. }
    20. }
    To copy to clipboard, switch view to plain text mode 

    My problem now is I wanted to create a link on anotherfile.qml mousearea to go back to mainfile.qml.

    Please advise, i am still new to this.
    Last edited by joko; 20th October 2014 at 19:57. Reason: updated contents

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    For unloading the loaded item, set the Loader's active property to "false"

    Cheers,
    _

  3. #3
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: create link to another qml file

    Or source to an empty url.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  4. #4
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    Thank you for your response anda_skoa and wysota.

    After I changed either the active or source property only the header of anotherfile.qml being displayed, the same thing happened when loader unloaded the loaded item, only the header of mainfile.qml was displayed.

    Qt Code:
    1. //mainfile.qml
    2. ColumnLayout
    3. {
    4. Rectangle
    5. {
    6. id: header
    7. height: 90
    8. Layout.fillWidth: true
    9. color: "#000000"
    10. anchors.top: parent.top
    11.  
    12. Text {}
    13. }
    14.  
    15. //contents of the page
    16. ColumnLayout
    17. {
    18. id:body
    19. clip: true
    20.  
    21. Flickable
    22. {
    23. anchors.fill: parent
    24. interactive: false
    25.  
    26. Rectangle
    27. {
    28. id: background
    29. color: "#00000000"
    30. Layout.fillWidth: true
    31. anchors {
    32. fill: parent
    33. topMargin: 10
    34. }
    35. }
    36. }
    37. }
    38.  
    39. Loader
    40. {
    41. id: loader
    42. anchors.fill: parent
    43. }
    44. }
    To copy to clipboard, switch view to plain text mode 


    Qt Code:
    1. //anotherfile.qml
    2. ColumnLayout
    3. {
    4. Rectangle
    5. {
    6. id: header
    7. height: 90
    8. Layout.fillWidth: true
    9. color: "#000000"
    10. anchors.top: parent.top
    11.  
    12. Text{}
    13. }
    14.  
    15. //contents of the page
    16. ColumnLayout
    17. {
    18. id:body
    19. clip: true
    20.  
    21. Rectangle
    22. {
    23. id: background
    24. Layout.fillWidth: true
    25. color: "#00000000"
    26. anchors.fill: parent
    27. }
    28. }
    29.  
    30. MouseArea
    31. {
    32. id: mouseArea
    33. anchors.fill: parent
    34. onClicked: { loader.source = "" }
    35. }
    36. }
    To copy to clipboard, switch view to plain text mode 

    Am I missing something or am I doing it wrong?

    Please advise. Thanks!

  5. #5
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: create link to another qml file

    So what was displayed below the header?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  6. #6
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    Quote Originally Posted by wysota View Post
    So what was displayed below the header?
    Just blank.

    one thing I noticed that if I put the MouseArea (with loader) inside the main ColumnLayout in anotherfile.qml, the issue happened however if I removed it, everything is fine except that no method to unload the loaded source.
    Last edited by joko; 21st October 2014 at 10:50. Reason: updated contents

  7. #7
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    If you always have a flow like main -> other -> back to main, you might want to consider using a StackView

    Cheers,
    _

  8. #8
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    Quote Originally Posted by anda_skoa View Post
    If you always have a flow like main -> other -> back to main, you might want to consider using a StackView

    Cheers,
    _
    This behavior cannot be done with Loader only?
    I've tried using Stackview however my initial item changes its width when going back to main page.

  9. #9
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: create link to another qml file

    Quote Originally Posted by joko View Post
    This behavior cannot be done with Loader only?
    Works fine for me:

    Qt Code:
    1. // main.qml
    2. import QtQuick 2.2
    3.  
    4. Rectangle {
    5. width: 800
    6. height: 600
    7. color: "yellow"
    8.  
    9. Rectangle {
    10. id: header
    11. anchors.top: parent.top
    12. anchors.left: parent.left
    13. anchors.right: parent.right
    14. height: 200
    15. color: "red"
    16. }
    17. Loader {
    18. id: loader
    19.  
    20. anchors.bottom: parent.bottom
    21. anchors.top: header.bottom
    22. anchors.left: parent.left
    23. anchors.right: parent.right
    24. source: "other.qml"
    25. }
    26. }
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. //other.qml
    2. import QtQuick 2.2
    3.  
    4. Rectangle {
    5. color: "blue"
    6. Text {
    7. anchors.centerIn: parent
    8. text: "Click me"
    9. color: "green"
    10. }
    11. MouseArea {
    12. anchors.fill: parent
    13. onClicked: loader.source = ""
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  10. #10
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    Quote Originally Posted by wysota View Post
    Works fine for me:

    Qt Code:
    1. // main.qml
    2. import QtQuick 2.2
    3.  
    4. Rectangle {
    5. width: 800
    6. height: 600
    7. color: "yellow"
    8.  
    9. Rectangle {
    10. id: header
    11. anchors.top: parent.top
    12. anchors.left: parent.left
    13. anchors.right: parent.right
    14. height: 200
    15. color: "red"
    16. }
    17. Loader {
    18. id: loader
    19.  
    20. anchors.bottom: parent.bottom
    21. anchors.top: header.bottom
    22. anchors.left: parent.left
    23. anchors.right: parent.right
    24. // source: "other.qml"
    25. }
    26.  
    27. MouseArea {
    28. anchors.fill: parent
    29. onclicked: loader.source = "other.qml"
    30. }
    31. }
    To copy to clipboard, switch view to plain text mode 
    Thank you, your example is working. However i modified your main.qml file based on what i am trying to achieve.
    Once clicked, other.qml file will be loaded. Then I wanted to display again the main.qml after clicking in other.qml file.
    Am I understanding it correctly how Loader works?
    Thanks.

  11. #11
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: create link to another qml file

    In your example the MouseArea element is still there so if you click anywhere in the other element, it is the mouse area that will intercept the event. You must disable it or otherwise prevent it from getting events.

    Modify your mouse area to look like the following code and see for yourself in the console:
    javascript Code:
    1. MouseArea {
    2. anchors.fill: parent
    3. onClicked: {
    4. loader.source="other.qml"
    5. console.log("I ate the event!")
    6. }
    7. }
    To copy to clipboard, switch view to plain text mode 

    You might want to add a "enabled: !loader.item" to your MouseArea element.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  12. #12
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    Wysota, if you will use the modified main.qml and other.qml files, you will noticed that once you clicked on the blue rectangle, yellow rectangle won't appear.
    That is basically my problem. Seems that the mousearea on other.qml isn't responding.

  13. #13
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: create link to another qml file

    A yellow rectangle appears as expected when you disable the MouseArea as I explained in my last post.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  14. The following user says thank you to wysota for this useful post:

    joko (22nd October 2014)

  15. #14
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: create link to another qml file

    Quote Originally Posted by wysota View Post
    A yellow rectangle appears as expected when you disable the MouseArea as I explained in my last post.
    Sorry I forgot to include the enabled property. It is now working! Thank you very much!

    btw, is there a way to refresh the main file where the loader is instantiated once going back?
    Last edited by joko; 22nd October 2014 at 12:55.

  16. #15
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: create link to another qml file

    Quote Originally Posted by joko View Post
    btw, is there a way to refresh the main file where the loader is instantiated once going back?
    Once a component is loaded the engine will not try parsing it again unless you clear the component cache in QQuickEngine.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


Similar Threads

  1. How to get size file in a link?
    By tamnv110 in forum Newbie
    Replies: 2
    Last Post: 30th June 2011, 00:17
  2. Replies: 11
    Last Post: 5th May 2011, 15:05
  3. Replies: 3
    Last Post: 18th December 2010, 18:22
  4. How to link to a DLL in PRO file
    By richardander in forum Qt Programming
    Replies: 1
    Last Post: 23rd December 2008, 13:30
  5. create symbolic link with Qt4
    By alan in forum Qt Programming
    Replies: 2
    Last Post: 27th March 2008, 18:11

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.