title: Qt 5 QML app with lots of Windows or complex UIs
body: <p>In QtQuick 2 using the QtQuick Controls you can create complex desktop apps. However it seems to me that the entire UI must be declared and create all at once at the start of the app. Any parts that you don't want to use yet (for example the File->Open dialog) must still be created but they are hidden, like this:</p>
  
  <pre><code>ApplicationWindow {
  
    FileDialog {
      id: fileOpenDialog
      visible: false
      // ...
    }
    FileDialog {
      id: fileSaveDialog
      visible: false
      // ...
    }
    // And so on for every window in your app and every piece of UI.
  </code></pre>
  
  <p>Now, this may be fine for simple apps, but for complex ones or apps with many dialogs surely this is a crazy thing to do? In the traditional QtWidgets model you would dynamically create your dialog when needed.</p>
  
  <p>I know there are some workarounds for this, e.g. you can use a <code>Loader</code> or even create QML objects dynamically directly in javascript, but they are very ugly and you lose all the benefits of the nice QML syntax. Also you can't really "unload" the components. Well <code>Loader</code> claims you can but I tried it and my app crashed.</p>
  
  <p>Is there an elegant solution to this problem? Or do I simply have to bite the bullet and create all the potential UI for my app at once and then hide most of it?</p>
  
  <p>Note: <a href="http://qt-project.org/wiki/QML-Application-Structuring-Approaches" rel="nofollow">this page</a> has information about using <code>Loader</code>s to get around this, but as you can see it is not a very nice solution.</p>
  
  <h1>Edit 1 - Why is Loader suboptimal?</h1>
  
  <p>Ok, to show you why <code>Loader</code> is not really that pleasant, consider this example which starts some complex task and waits for a result. Suppose that - unlike all the trivial examples people usually give - the task has many inputs and several outputs.</p>
  
  <p>This is the <code>Loader</code> solution:</p>
  
  <pre><code>Window {
      Loader {
          id: task
          source: "ComplexTask.qml"
          active: false
      }
      TextField {
          id: input1
      }
      TextField {
          id: output1
      }
      Button {
          text: "Begin complex task"
          onClicked: {
                  // Show the task.
                  if (task.active === false)
                  {
                      task.active = true;
                      // Connect completed signal if it hasn't been already.
                      task.item.taskCompleted.connect(onTaskCompleted)
                  }
  
                  view.item.input1 = input1.text;
                  // And several more lines of that...
              }
          }
      }
  
      function onTaskCompleted()
      {
          output1.text = view.item.output1
          // And several more lines...
  
          // This actually causes a crash in my code:
  //      view.active = false;
      }
  }
  </code></pre>
  
  <p>If I was doing it without <code>Loader</code>, I could have something like this:</p>
  
  <pre><code>Window {
      ComplexTask {
          id: task
          taskInput1: input1.text
          componentLoaded: false
          onCompleted: componentLoaded = false
      }
  
      TextField {
          id: input1
      }
      TextField {
          id: output1
          text: task.taskOutput1
      }
  
      Button {
          text: "Begin complex task"
          onClicked: task.componentLoaded = true
      }
  }
  </code></pre>
  
  <p>That is obviously <em>way</em> simpler. What I clearly want is some way for the <code>ComplexTask</code> to be loaded and have all its declarative relationships activated when <code>componentLoaded</code> is set to true, and then have the relationships disconnected and unload the component when <code>componentLoaded</code> is set to false. I'm pretty sure there is no way to make something like this in Qt currently.</p>