I am working on a multi-page Qt/QML/C++ app.

The structure is as follows:

In root folder:
main.cpp ====> contains the 'main' startup code
fileio.cpp ====> contains all my file I/O routines
gpsio.cpp ====> contains my GPS on/off/update routines

main.qml ====> 'main' window, contains the HeaderRow & FooterRow, with an empty Rectangle ('winRect') filling the available space between the two... includes a 'property alias' for itself as 'appWin'
HeaderRow.qml ====> contains app title, version, etc... static data
FooterRow.qml ====> contains navigation buttons: Home, Settings, Upload, Status, Quit
functions.js ====> contains 'common' javascript functions utilized in all QML files

"SubPages" folder under the root:
SubPages/MainWin.qml ====> contains the 'main' interface with GPS start/stop button, various feedback text fields
SubPages/InfoWin.qml ====> contains 'status' text fields
SubPages/SettingsWin.qml====> contains application 'settings'
SubPages/UploadWin.qml ====> contains file list for uploading to server

How it works:
main.qml uses 'import' on the functions.js and the SubPages folder to get access to all functions and all 'child' windows.
FooterRow buttons 'load' the required 'page' into the 'winRect' on pressed using a javascript 'loadPage' function:

Qt Code: 
  1. function loadPage(page){
  2.     appWin.currentPage = "%1".arg(page);
  3. }
To copy to clipboard, switch view to plain text mode 

and in main.qml:

Qt Code: 
  1. // Set this property to another file name to change page
  2.     property string  currentPage : "SubPages/MainWin";
  3.  
  4.     // Put the name of the QML files containing your pages (without the '.qml')
  5.     property variant pagesList  : [
  6.         "SubPages/MainWin",
  7.         "SubPages/InfoWin",
  8.         "SubPages/SettingsWin",
  9.         "SubPages/UploadWin"
  10.     ];
  11.     Rectangle {
  12.         id: winRect
  13.         visible: true
  14.         anchors.right: parent.right
  15.         anchors.left: parent.left
  16.         anchors.top: header.bottom
  17.         anchors.bottom: footer.top
  18.         color: "black"
  19.  
  20.         Repeater {
  21.             model: pagesList;
  22.             delegate: Loader {
  23.                 active: false;
  24.                 asynchronous: true;
  25.                 anchors.fill: parent;
  26.                 visible: (currentPage === modelData);
  27.                 source: "%1.qml".arg(modelData)
  28.                 onVisibleChanged:      { loadIfNotLoaded(); }
  29.                 Component.onCompleted: { loadIfNotLoaded(); }
  30.  
  31.                 function loadIfNotLoaded () {
  32.                     // to load the file at first show
  33.                     if (visible && !active) {
  34.                         active = true;
  35.                     }
  36.                 }
  37.             }
  38.         }
  39.     }
To copy to clipboard, switch view to plain text mode 

The issues I am having...

1. Each child page is set up with all its components spaced according to the overall size of the 'parent', which is 'winRect'. However, on loading a child page, I get warnings about not being able to anchor to winRect, as it's not really the parent of the child. So, how can I make winRect the parent of each child page?

2. In main.qml, I use "import 'SubPages'" to get access to the child pages. But, if I try to do anything in main.qml with a page by name (ie. MainWin), I get an error: 'SubPages not defined'... Why?

3. My javascript functions modify objects on my QML child pages. Or at least, they are supposed to... I get errors about each page not being defined within the javascript function. To get around this, I tried to pass the child page into the function as an argument, but then I get #2 above.

4. Am I crazy? Is there a better way to create such an application? Do I need to have ALL my child pages defined in the main.qml somehow?

5. HELP!

--Sam