Creating connections to QML and javascript



  • Im creating a qml project that uses javascript but im having a hard time using functions in javascript,

    @import QtQuick 1.0
    import "add.js"

    Rectangle {
    width: 360
    height: 490

    Text {
        id: display
        x: 73
        y: 121
        width: 80
        height: 20
        text: ""
        font.pixelSize: 25
    }
    
    MouseArea {
        id: add_button
        x: 43
        y: 288
        width: 100
        height: 100
    }
    
    Rectangle {
        id: rectangle1
        x: 44
        y: 288
        width: 100
        height: 100
        color: "#519748"
    
        Text {
            id: text2
            x: 33
            y: 38
            width: 80
            height: 20
            text: "Add"
            font.pixelSize: 20
        }
    }
    

    }
    @

    Here is my QML file, what im trying to do is when i click add_button mousearea the number in shown in my display.text will add 25,
    The deafault number in my diplay.text is 50,

    @
    //add.js

    var defaultvalue = 50

    function addFunction() {
    //the defaultvalue will be read in this js file which is 50 and will 25 if my mousearea is clicked on my QML
    }
    @

    Can you please help me in creating connections in javascript with this code in my sample QML,
    Please please, im trying to apply this in my Qtproject,

    Thank you very much!!



  • If I understand you correctly, this should work. I didn`t test it.
    @
    import QtQuick 1.0
    import "add.js" as JScript

    Rectangle {
    width: 360
    height: 490

    Text {
        id: display
        x: 73
        y: 121
        width: 80
        height: 20
        text: ""
        font.pixelSize: 25
    }
    
    MouseArea {
        id: add_button
        x: 43
        y: 288
        width: 100
        height: 100
    
        onClicked: JScript.addFunction()
    }
    
    Rectangle {
        id: rectangle1
        x: 44
        y: 288
        width: 100
        height: 100
        color: "#519748"
    
        Text {
            id: text2
            x: 33
            y: 38
            width: 80
            height: 20
            text: "Add"
            font.pixelSize: 20
        }
    }
    

    }
    @

    and

    @
    //add.js

    var defaultvalue = 50
    var currentValue = defaultvalue;

    function addFunction() {
    currentValue += 25;
    display.text = currentValue;
    }
    @

    currentValue is used to store current value, because in display it will be stored as text and you will need to conver it back to int before usage.



  • Thank you sir!!!!! Ive figure out that code but its a little different but same output, but thank you, now my problem is loading it again in another QML by saving it on an offline storage, should i use Component.onCompleted??
    is that how you load things from a js file?



  • how do i store the current value of my display.text to offline storage?

    @Component.onCompleted: {

           Storage.initialize();
       
           Storage.setSetting("mySetting",display.text);
       }@
    

    Is this how i store the value on my offline storage? Am i doing the right thing?



  • There are a lot of possible ways to do that.
    You can save currentValue in addFunction(), or @ onClicked: {
    JScript.addFunction()
    Storage.initialize()
    Storage.setSetting("mySetting",display.text)
    }
    @

    or onTextChanged in
    @
    Text {
    id: display
    x: 73
    y: 121
    width: 80
    height: 20
    text: ""
    font.pixelSize: 25

        onTextChanged: {
          
           Storage.initialize()
        
           Storage.setSetting("mySetting",display.text)
       }
    }
    

    @

    It`s up to you.



  • Thanks but what if im gonna call the current value to another QML?
    Ill state the name of the current value to another text?



  • If you want to have another QML file that imports same javascript you can read "this thread":http://developer.qt.nokia.com/forums/viewthread/8051/ .



  • so .pragma will develop a global js, ok thank you sir



  • @
    Text {
    id: preview
    x: 193
    y: 130
    width: 90
    height: 80
    text: ""
    font.pixelSize: 12

    }@
    This text element is in another QML how do i call the value of the display.text that i save from my offline storage?



  • im thinking of using SQL statements like the select statement to load the saved text, am i right or there are other ways to load items from an offline storage?


Log in to reply
 

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