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. How to reduce code size in qml documents?

How to reduce code size in qml documents?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 3 Posters 1.5k 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.
  • AlienA Offline
    AlienA Offline
    Alien
    wrote on last edited by Alien
    #1

    Hey,
    There is some situations that you have to copy and paste some snippet code in QML document and these situations make your code bigger, as you know the larger the code the harder to read, maintain and so fourth.
    In C++ we can use macros, functions ,etc to handle this stuff please look at the below code:

    import QtQuick 2.0
    
    Item {
    
        Rectangle
        {
            id:rectOneID
            property bool running: false
            property int durationTime: 500
            color: "black"
            width: 200
            height: 200
            border.width: 2
            border.color: "blue"
            Text
            {
                id: rectNameID
                text: qsTr("Rect")
                color: "blue"
                font.pixelSize: 20
                font.bold: true
                anchors
                {
                    centerIn: parent
                }
            }
    
            x:200
            y:200
    
            /***********************REPEATABLE PART****************************/
            ParallelAnimation
            {
    
            SequentialAnimation
            {
    
                ColorAnimation{
                    target: rectOneID
                    property: "color"
                    from:"black"
                    to: "lime"
                    duration: rectOneID.durationTime
    
                }
                ColorAnimation{
                    target: rectOneID
                    property: "color"
                    from:"lime"
                    to: "black"
                    duration: rectOneID.durationTime
    
                }
    
            }
    
            SequentialAnimation
            {
    
                ColorAnimation{
                    target: rectNameID
                    property: "color"
                    from:"lime"
                    to: "black"
                    duration: rectOneID.durationTime
    
                }
                ColorAnimation{
                    target: rectNameID
                    property: "color"
                    from:"black"
                    to: "lime"
                    duration: rectOneID.durationTime
    
                }
    
            }
            running: rectOneID.running
            loops: -1
            }
    
    
            MouseArea
            {
                anchors.fill: parent
                onClicked:
                {
                    if(rectOneID.running == true)
                    {
                        rectOneID.running = false;
                        rectOneID.color = "black"
                        rectNameID.color = "blue"
    
                    }
                    else
                        rectOneID.running = true;
                }
            }
            /***************************************************/
    
        }
    }
    
    

    Imagine I have 10 other rectangles and I want to have ParallelAnimation in all of them, is there any solution to write this part once and use it multiple times in qml for other rectangles or not?

    Yours,
    Ali

    J.HilkJ 1 Reply Last reply
    0
    • AlienA Alien

      Hey,
      There is some situations that you have to copy and paste some snippet code in QML document and these situations make your code bigger, as you know the larger the code the harder to read, maintain and so fourth.
      In C++ we can use macros, functions ,etc to handle this stuff please look at the below code:

      import QtQuick 2.0
      
      Item {
      
          Rectangle
          {
              id:rectOneID
              property bool running: false
              property int durationTime: 500
              color: "black"
              width: 200
              height: 200
              border.width: 2
              border.color: "blue"
              Text
              {
                  id: rectNameID
                  text: qsTr("Rect")
                  color: "blue"
                  font.pixelSize: 20
                  font.bold: true
                  anchors
                  {
                      centerIn: parent
                  }
              }
      
              x:200
              y:200
      
              /***********************REPEATABLE PART****************************/
              ParallelAnimation
              {
      
              SequentialAnimation
              {
      
                  ColorAnimation{
                      target: rectOneID
                      property: "color"
                      from:"black"
                      to: "lime"
                      duration: rectOneID.durationTime
      
                  }
                  ColorAnimation{
                      target: rectOneID
                      property: "color"
                      from:"lime"
                      to: "black"
                      duration: rectOneID.durationTime
      
                  }
      
              }
      
              SequentialAnimation
              {
      
                  ColorAnimation{
                      target: rectNameID
                      property: "color"
                      from:"lime"
                      to: "black"
                      duration: rectOneID.durationTime
      
                  }
                  ColorAnimation{
                      target: rectNameID
                      property: "color"
                      from:"black"
                      to: "lime"
                      duration: rectOneID.durationTime
      
                  }
      
              }
              running: rectOneID.running
              loops: -1
              }
      
      
              MouseArea
              {
                  anchors.fill: parent
                  onClicked:
                  {
                      if(rectOneID.running == true)
                      {
                          rectOneID.running = false;
                          rectOneID.color = "black"
                          rectNameID.color = "blue"
      
                      }
                      else
                          rectOneID.running = true;
                  }
              }
              /***************************************************/
      
          }
      }
      
      

      Imagine I have 10 other rectangles and I want to have ParallelAnimation in all of them, is there any solution to write this part once and use it multiple times in qml for other rectangles or not?

      Yours,
      Ali

      J.HilkJ Online
      J.HilkJ Online
      J.Hilk
      Moderators
      wrote on last edited by J.Hilk
      #2

      @Alien
      Just to make sure,
      You do know that you could put the whole rectangle in its own qml file and import that as a „template „?


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      AlienA 1 Reply Last reply
      2
      • Pablo J. RoginaP Offline
        Pablo J. RoginaP Offline
        Pablo J. Rogina
        wrote on last edited by
        #3

        @Alien in addition to previous answer, you may also take a look at the Repeater type, "used to create a large number of similar items"

        Upvote the answer(s) that helped you solve the issue
        Use "Topic Tools" button to mark your post as Solved
        Add screenshots via postimage.org
        Don't ask support requests via chat/PM. Please use the forum so others can benefit from the solution in the future

        AlienA 1 Reply Last reply
        2
        • J.HilkJ J.Hilk

          @Alien
          Just to make sure,
          You do know that you could put the whole rectangle in its own qml file and import that as a „template „?

          AlienA Offline
          AlienA Offline
          Alien
          wrote on last edited by
          #4

          Dear @J.Hilk ,
          Yes I know but it coudn't help

          1 Reply Last reply
          0
          • Pablo J. RoginaP Pablo J. Rogina

            @Alien in addition to previous answer, you may also take a look at the Repeater type, "used to create a large number of similar items"

            AlienA Offline
            AlienA Offline
            Alien
            wrote on last edited by
            #5

            Dear @Pablo-J.-Rogina,
            Repeater it can be a solution but I'm looking for something like function in c++ or it's better to say inline function which can replace snippet code where ever they invoked or even macros

            1 Reply Last reply
            0

            • Login

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