Access QML properties from JavaScript



  • hi:)

    i have a Harmattan project with:
    main.qml - containing PageStackWindow containing several pages, InitialPage.qml, ... and Storage.js file
    @
    import QtQuick 1.0
    import com.nokia.meego 1.0
    import "Storage.js" as Storage

    PageStackWindow {
    id: appWindow

    InitialPage {
        id: initialPage;
    }
    

    @

    InitialPage.qml - wants to call a function from Storage.js like this

    @
    ...
    Component.onCompleted: {
    newTripButton.visible = checkStartTrip()===0?true:false;
    }
    ...
    @

    where checkStartTrip is a JS function.

    However Runtime says:

    ReferenceError: Can't find variable: checkStartTrip

    If i code it like this:
    @newTripButton.visible = Storage.checkStartTrip()===0?true:false;@

    it does not work either. Storage is obviously not accessible from InitialPage.qml file, although InitialPage.qml is declared in main.qml

    So, i have read in google (cannot find the thread anymore), that if i import JS file once in the main.qml, i would be able to access the QML properties from this JS file, and in fact from all those QML files, where a particular JS function is called.
    I do not want to import JS file in every QML file, because the other QML files' properties will not be visible.

    So any hints why I would get this error. Unless my assumption, that I would work like this, is wrong.

    cheers
    simon:)



  • BTW, i found the thread with the statement, that it sould work:
    "Troubles setting js global variables from QML file":http://www.developer.nokia.com/Community/Discussion/showthread.php?223175-Troubles-setting-js-global-variables-from-QML-file



  • At each qml file you want to use functions from a JavaScript file then you need to import it to each file. There are a couple of things you could try if this doesn't fits you.

    1. create functions in the qml file that will wrap the functions from the Javascript file. Thus you will import the JS file only once and you only need to make that QML item accessible to others for the to call any function needed.

    2. Targeting your example: Move the code that needs the JS functions from the definition of the item in InitialPage.qml file to the instantiation of the item in main.qml. This will lead you to the following which will work:

    @
    import QtQuick 1.0
    import com.nokia.meego 1.0
    import "Storage.js" as Storage

    PageStackWindow {
        id: appWindow
     
        InitialPage {
            id: initialPage;
    
            Component.onCompleted: {
                   newTripButton.visible = Storage.checkStartTrip()===0?true:false;
            }
        }
    

    @

    In any case, in my opinion the correct way of handling such cases it to import the JS files in each QML that needs those functions and minimize the interconnections between the qml files.



  • Thanks, yes importing JS file in every Qml file would mean initialising this JS file every time Qml is instantiated. If that would be the only option, it makes it impossible to access properties of different QML files from one JF function. I can understand this, there might be a problem with same property names in several different files, but you cann still access them via id of the different QMl files, which have to be different.
    @
    ...
    firstPageId.foo
    secondPageId.foo
    ...
    @

    So I still have hope, it is possible to import JS only once and access Qml properties of all QMLs from one function :-)

    Another option is .pragma library which would NOT access ANY Qml properties.

    cheers
    simon


Log in to reply
 

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