title: Qt / QML - Grouping and Reusing Elements
body: <p>Could anyone point me in the right direction on how to best organise my QML?</p>
  
  <p>Currently for common single components I make a new QML file and add it to a <code>Common</code> directory under my resources.</p>
  
  <p>E.g. My <code>Label.qml</code></p>
  
  <pre><code>Text{
      width: parent.width * 0.5
      height: parent.height * 0.1
      color: "#ffffff"
      font.underline: true
      font.pointSize: 16
      verticalAlignment: Text.AlignBottom
      horizontalAlignment: Text.AlignLeft
  }
  </code></pre>
  
  <p>And then in my <code>Form.qml</code> I can import and use it like this:</p>
  
  <pre><code>   import "Common"
  
      Page {
  
          Label{
              id: username_lbl
              text: "Username"
              anchors.topMargin: parent.height * 0.1
          }
  
      ...
      }
  </code></pre>
  
  <p>But how would I do the above if I want to group together multiple components and reference them for use with connections? </p>
  
  <p>For example I'd like a pair of buttons that sit at the bottom of a page (<strong>below is just an example and doesn't work</strong>):</p>
  
  <p>So I'd like to have a <code>ButtonPair.qml</code> which would like a bit like this:</p>
  
  <pre><code>    Button {
          id: left_btn
          width: parent.width * 0.5
          height: parent.height * 0.1
  
          anchors.bottom: parent.bottom
          anchors.right: parent.right
  
      }
  
      Button {
          id: right_btn
          width: parent.width * 0.5
          height: parent.height * 0.1
  
          anchors.bottom: parent.bottom
          anchors.left: parent.left
      }
  </code></pre>
  
  <p>And then in my <code>Form.qml</code> I'd like to use these buttons and add an event handler to each:</p>
  
  <pre><code>import "Common"
  
  Page {
  
      ButtonPair{id: back_forward_buttons}
  
      Connections {
          target: back_forward_buttons.left_btn
          onClicked: {
              stackView.pop();
      }
  
      Connections {
          target: back_forward_buttons.right_btn
          onClicked: {
              stackView.push("AnotherPage.qml");
      }
  
  }
  </code></pre>
  
  <p>Do I need to wrap my <code>ButtonPair</code> in a <code>Component</code> and use a <code>Loader</code> on my page and if so how do I then get to the individual left/right buttons in order to bind to <code>onClicked</code>?</p>