Results 1 to 10 of 10

Thread: Access QML Object between QML & Javascript

  1. #1
    Join Date
    May 2011
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Question Access QML Object between QML & Javascript

    I have the following structure for my project:

    --rootFolder
    main.qml
    header.qml
    footer.qml
    functions.js
    ----subFolder
    page1.qml
    page2.qml

    main.qml imports functions.js and subFolder to get access to all my javascript functions and the objects in page1 and page2. main.qml uses a StackView to load the pages as necessary.

    page1 & page2 also import functions.js.

    My question is... How can I access objects in page1 & page2 from my javascript? I have tried using 'property alias page1: page1' in my pages, which appears to be seen from functions.js...but at runtime is undefined.

    So... How can I access objects in page1 and page2 from my javascript?

  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: Access QML Object between QML & Javascript

    If you load "page1.qml", for example, using a Loader, then you can access that item as the loader's "item".

    But in general it might be wiser to just pass the object to the function when it is being called, as this makes the caller responsible for the correct input/context data not the callee.

    This has the advantage of making the call more explicit, i.e. what it actually needs, and easier testable, i.e.no hidden dependencies that a test will also have to provide.

    Cheers,
    _

  3. #3
    Join Date
    May 2011
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: Access QML Object between QML & Javascript

    The issue with accessing it via the Loader is that the page may NOT be loaded when I want to update the data...

    I am leaning toward using a signal fired from JavaScript. Will update this post if it works.

  4. #4
    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: Access QML Object between QML & Javascript

    I don't see a problem there.

    If your data updates but some UI that would display the data is not loaded, then that UI doesn't need updating.
    It will get the current data when it has been loaded.

    In QML both cases are usually automatic anyway, as displayed values come from properties and elements will update themselves it they exist or get the current value when coming into existance.

    Cheers,
    _

  5. #5
    Join Date
    May 2011
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: Access QML Object between QML & Javascript

    Well, I tried using the signal/slot method... but without any luck.

    In my functions.js I have:

    Qt Code:
    1. var graphNotifier = Qt.createQmlObject('import QtQuick 2.0; QtObject { signal graphDataChanged }', Qt.application, 'GraphNotifier');
    To copy to clipboard, switch view to plain text mode 

    and in my GraphWin.qml (which imports functions.js), I have:

    Qt Code:
    1. Component.onCompleted: {
    2. loadGraphs();
    3. Funcs.graphNotifier.graphDataChanged.connect(loadGraphs);
    4. console.log("loaded: graphWin");
    5. }
    To copy to clipboard, switch view to plain text mode 

    Where "loadGraphs()" is a function in javascript that populates the QML XYSeries with the correct (live) data. Calling loadGraphs() works, I get my data... no issues there.

    I call/fire the signal in javascript like so:

    Qt Code:
    1. graphNotifier.graphDataChanged();
    To copy to clipboard, switch view to plain text mode 

    once I receive new data... However, the signal does not fire... loadGraphs() does not get called.

    Any idea why?

  6. #6
    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: Access QML Object between QML & Javascript

    Quote Originally Posted by scgrant327 View Post
    Well, I tried using the signal/slot method... but without any luck.
    Ah, yes, I remember you.
    Still trying to make it as complicated as possible just to avoid the native declarative way?

    Quote Originally Posted by scgrant327 View Post
    I call/fire the signal in javascript like so:

    Qt Code:
    1. graphNotifier.graphDataChanged();
    To copy to clipboard, switch view to plain text mode 
    Why the indirection? I.e. why not just call loadGraphs() right there?

    Cheers,
    _

  7. #7
    Join Date
    May 2011
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: Access QML Object between QML & Javascript

    Definitely NOT trying to make things complicated at all... Just trying to make things work!

    LoadGraphs is a function within my GraphWin.qml. GraphWin.qml is in a folder called SubPages. Functions.js is in the root project folder. Functions.js is imported into all my QML files, including GraphWin.qml.

    My root-level object in GraphWin.qml is a Rectangle with an id of 'graphWin'. I have it aliased out as: property alias graphWin: graphWin.

    Now, when I *try* to call loadGraphs() from functions.js (which was my very first option) as such: graphWin.loadGraphs()... I get the autocomplete within QTCreator that appears to indicate that everything is ok... However, at runtime, I get an error indicating that 'graphWin' is undefined when called from within functions.js.

    So... HOW do I make that work? I could not figure it out, so I decided to ask this question... NOT trying to complicate anything.

  8. #8
    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: Access QML Object between QML & Javascript

    How about posting a minimal example reproducing the problem? Maybe it will be easier to resolve the issue while looking at real code.
    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.


  9. #9
    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: Access QML Object between QML & Javascript

    Quote Originally Posted by scgrant327 View Post
    Definitely NOT trying to make things complicated at all...
    Yes you do.
    Maybe not conciously but there have now been at least two other threads where you insist on doing things in a very complicated way.
    E.g. calling JavaScript functions for "updating the UI" instead of letting the UI update itself, even calling such a function from C++, etc.

    Quote Originally Posted by scgrant327 View Post
    Just trying to make things work!
    Yes, and it seems with as much work arounds as possible.

    Quote Originally Posted by scgrant327 View Post
    My root-level object in GraphWin.qml is a Rectangle with an id of 'graphWin'. I have it aliased out as: property alias graphWin: graphWin.
    What does that mean, "aliased out"?
    The root level element is accessible in the using context without any alias and its id inside the file doesn't matter.

    Quote Originally Posted by scgrant327 View Post
    Now, when I *try* to call loadGraphs() from functions.js (which was my very first option) as such: graphWin.loadGraphs()... I get the autocomplete within QTCreator that appears to indicate that everything is ok... However, at runtime, I get an error indicating that 'graphWin' is undefined when called from within functions.js.
    So you are calling the function from a context that knows an object with id "graphWin"?
    Earlier you wrote something about a loader.

    Does your "aliased out" mean that you have an alias property "graphWin" that is aliased to the "item" property of the loader?

    Quote Originally Posted by scgrant327 View Post
    So... HOW do I make that work? I could not figure it out, so I decided to ask this question... NOT trying to complicate anything.
    In comment #5 you create a dummy object with a signal, connect a single function to that signal and then call a function on the dummy object to emit the signal, instead of calling the single target function directly.

    So instead of
    Qt Code:
    1. someObject.someFunction()
    To copy to clipboard, switch view to plain text mode 
    you want to do
    Qt Code:
    1. dummy.someFunction() -> dummy.signal -> someObject.someFunction()
    To copy to clipboard, switch view to plain text mode 
    And you don't think the second one is more complicated than the first one?

    Cheers,
    _

  10. #10
    Join Date
    May 2011
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: Access QML Object between QML & Javascript

    Ugh... Gee Thanks.

    What I did in the end was push through the headache of figuring out a prior solution Anda had recommended... using removeSeries and createSeries. That works pretty well.

    However, I have a new issue that has popped up on iOS. When calling createSeries, I get errors on iOS about AbstractSeries not existing..

Similar Threads

  1. Access Object Created by javascript in qml
    By alizadeh91 in forum Qt Quick
    Replies: 6
    Last Post: 23rd February 2012, 16:06
  2. Replies: 1
    Last Post: 18th October 2011, 08:32
  3. Replies: 9
    Last Post: 29th November 2010, 13:12
  4. Replies: 5
    Last Post: 23rd October 2010, 01:52
  5. QtWebKit access HTML manipulated by javascript
    By rbp in forum Qt Programming
    Replies: 1
    Last Post: 19th September 2009, 03:29

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.