Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Creating connections to QML and javascript
Forum Updated to NodeBB v4.3 + New Features

Creating connections to QML and javascript

Scheduled Pinned Locked Moved QML and Qt Quick
10 Posts 2 Posters 5.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jr_jags
    wrote on 27 Jul 2011, 13:03 last edited by
    #1

    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!!

    1 Reply Last reply
    0
    • T Offline
      T Offline
      task_struct
      wrote on 27 Jul 2011, 13:59 last edited by
      #2

      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.

      "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

      • Linu...
      1 Reply Last reply
      0
      • J Offline
        J Offline
        jr_jags
        wrote on 27 Jul 2011, 15:26 last edited by
        #3

        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?

        1 Reply Last reply
        0
        • J Offline
          J Offline
          jr_jags
          wrote on 27 Jul 2011, 15:43 last edited by
          #4

          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?

          1 Reply Last reply
          0
          • T Offline
            T Offline
            task_struct
            wrote on 27 Jul 2011, 19:16 last edited by
            #5

            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.

            "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

            • Linu...
            1 Reply Last reply
            0
            • J Offline
              J Offline
              jr_jags
              wrote on 28 Jul 2011, 09:35 last edited by
              #6

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

              1 Reply Last reply
              0
              • T Offline
                T Offline
                task_struct
                wrote on 28 Jul 2011, 10:20 last edited by
                #7

                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/ .

                "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

                • Linu...
                1 Reply Last reply
                0
                • J Offline
                  J Offline
                  jr_jags
                  wrote on 28 Jul 2011, 14:39 last edited by
                  #8

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

                  1 Reply Last reply
                  0
                  • J Offline
                    J Offline
                    jr_jags
                    wrote on 28 Jul 2011, 17:55 last edited by
                    #9

                    @
                    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?

                    1 Reply Last reply
                    0
                    • J Offline
                      J Offline
                      jr_jags
                      wrote on 29 Jul 2011, 04:04 last edited by
                      #10

                      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?

                      1 Reply Last reply
                      0

                      1/10

                      27 Jul 2011, 13:03

                      • Login

                      • Login or register to search.
                      1 out of 10
                      • First post
                        1/10
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved