QML Plugin w/ QML resources

[wysota]

findChild returns objects by name based on objectName property, not their id. However using findChild to access some object like that seems really weird to me. I don't know what your elements do so it is hard for me to determine what you are trying to achieve. I just have an impression that you are overcomplicating things How does "NavigationTile" differ from Loader? What is its relation to NavigationPanel?

[doulos]

findChild returns objects by name based on objectName property, not their id

huh? Never heard of that property. I am also not able to find any reference to it in the docs.

How does "NavigationTile" differ from Loader? What is its relation to NavigationPanel?

NavigationTile (and NavigationPanel, for that matter) behaves like Loader, in that it loads a QML component and creates an item from it. However, they reside in C++ code because I want to deploy a plugin (and dont want to use Javascript - tried to, didnt seem to work). Essentially, both types are wrappers that instatiate items from QML and parameterize them. NavigationTile describes the tiles nested inside the panel, corresponding to Rectangles inside the GridLayout

[wysota]

huh? Never heard of that property. I am also not able to find any reference to it in the docs.

QObject::objectName

NavigationTile (and NavigationPanel, for that matter) behaves like Loader, in that it loads a QML component and creates an item from it. However, they reside in C++ code because I want to deploy a plugin (and dont want to use Javascript - tried to, didnt seem to work). Essentially, both types are wrappers that instatiate items from QML and parameterize them. NavigationTile describes the tiles nested inside the panel, corresponding to Rectangles inside the GridLayout

It seems an overkill to me to do it from within C++. If you have to have a C++ plugin then why not implement the code in QML, embed it into the C++ plugin using the resource system and then expose the types from within the plugin?

[doulos]

It seems an overkill to me to do it from within C++.

it sure isn't totally convenient, but still better IMO than Javascript. And additionally, I get better deployability (one shared lib vs. multiple QML files)

If you have to have a C++ plugin then why not implement the code in QML, embed it into the C++ plugin using the resource system and then expose the types from within the plugin?

but that is exactly what I am trying to to! Now just tell me how, and I am done . Maybe you have an example I can look at?

regards,
Chris

[wysota]

it sure isn't totally convenient, but still better IMO than Javascript.

If you extrapolate that then you will end up saying there is no sense in using QML at all.

And additionally, I get better deployability (one shared lib vs. multiple QML files)

As I said, those QML files can be embedded in the plugin library.

but that is exactly what I am trying to to! Now just tell me how, and I am done . Maybe you have an example I can look at?

I'd need to look for an example, but the general idea is to expose qml types with paths pointing to the resource system using a qmldir file.

[doulos]

If you extrapolate that then you will end up saying there is no sense in using QML at all.

I dont agree. Right now I have the overall design nicely kept in QML, and I like it. Setting that up in C++ would be a nightmare. However, I am keeping the dymamic code in C++

the general idea is to expose qml types with paths pointing to the resource system using a qmldir file.

sorry to say, but that is way too general to be useful. I have already spent a couple of days working/investigation on this. I am also not sure that you have caught on to my problem: I am loading the QML file as a resource embedd within the shared lib, no qmldir involved. What I am looking for is an example of a C++ plugin which loads an embedded QML component and somehow exposes that as a custom type.

thanks

[wysota]

The easiest way to do it is to have a regular directory structure containing qml files, put that all into qrc file and use QQmlEngine::addImportPath() where you will point to the qrc file. In my opinion having a C++ component whose only task is to expose a QML type that is already in a QML file makes no sense. If you already have a QML file and you want to expose it to QML then do that directly.

[anda_skoa]

Just saying: if you are using findChild() to get access to an object defined in a QML scene, you are almost certainly doing something less than ideal.

It creates a dependency of the C++ code toward the QML code, something one usually wants to avoid (goal being that the UI depends on the compiled code, not the other way around).

Cheers,
_

[doulos]

In my opinion having a C++ component whose only task is to expose a QML type that is already in a QML file makes no sense

agreed. My plugin does a lot more, this is just the reduction of one problem.

I'll try again. Heres the QML interface I want to offer to my client:

NavigationPanel {
   rows: 2
   columns: 2
   cellSpacing: 5
   cellPadding: 2
 
   NavigationTile {
      color: "read"
      image: "some.png"
      columnSpan: 1
      rowSpan: 2
      target: "someother.qml"
   }
 
   NavigationTile {
      color: "read"
      image: "some.png"
      target: "someother.qml"
   }
}

NavigationPanel {
   rows: 2
   columns: 2
   cellSpacing: 5
   cellPadding: 2
      
   NavigationTile {
      color: "read"
      image: "some.png"
      columnSpan: 1
      rowSpan: 2
      target: "someother.qml"
   }

   NavigationTile {
      color: "read"
      image: "some.png"
      target: "someother.qml"
   }
}

To copy to clipboard, switch view to plain text mode 

now, internally, the QML representation for NavigationPanel and NavigationTile will be much more complex. NavigationPanel will consist of 2 nested Rectangles (the outer one being the one the navigation target item is placed into when a tile is clicked), and a nested GridLayout. The NavigationTile contains, among other things, a Loader object that will load the target page. The internal representations should not be exposed to the clients of my component, they should only need to write the code shown above.

As I see it, implementing this will always involve a lot of imperative code, which I prefer to write in C++ (I actually tried Javascript, but got stuck)

[wysota]

I don't see a need for any complex imperative code here. I don't know what you have so far so let's try from scratch... BTW. I didn't test the code below, so it can contain minor errors but the general idea should be valid.

NavigationPanel -- contains two rectangles and a grid layout:

import QtQuick 2.2
import QtQuick.Layouts 1.0
 
Item {
  id: root
 
  property alias rows: grid.rows
  property alias columns: grid.columns
  property alias cellSpacing: grid.rowSpacing
  property int cellPadding: 0
 
  default property list<NavigationTile> tiles
 
  Rectangle {
    id: outer
 
    Rectangle {
      id: inner
    }
  }
 
  GridLayout {
    id: grid
    columnSpacing: rowSpacing
 
    Repeater {
      model: root.tiles
 
      Item {
        margins: root.cellPadding
        Image {
          anchors.fill: parent
          source: modelData.image
        }
        Rectangle {
          anchors.fill: parent
          color: modelData.color
        }
        Layout { rowSpan: modelData.rowSpan; columnSpan: modelData.columnSpan }
 
      }
    }
  }
}

import QtQuick 2.2
import QtQuick.Layouts 1.0

Item {
  id: root

  property alias rows: grid.rows
  property alias columns: grid.columns
  property alias cellSpacing: grid.rowSpacing
  property int cellPadding: 0

  default property list<NavigationTile> tiles

  Rectangle {
    id: outer
  
    Rectangle {
      id: inner
    }
  }
  
  GridLayout {
    id: grid
    columnSpacing: rowSpacing
    
    Repeater {
      model: root.tiles

      Item {
        margins: root.cellPadding
        Image {
          anchors.fill: parent
          source: modelData.image
        }
        Rectangle {
          anchors.fill: parent
          color: modelData.color
        }
        Layout { rowSpan: modelData.rowSpan; columnSpan: modelData.columnSpan }

      }
    }
  }
}

To copy to clipboard, switch view to plain text mode 

NavigationTile -- definition of a tile

import QtQuick 2.2
 
QtObject {
  id: tile
 
  property color color
  property string image
  property int columnSpan: 1
  property int rowSpan: 1
  property string target
}

import QtQuick 2.2

QtObject {
  id: tile

  property color color
  property string image
  property int columnSpan: 1
  property int rowSpan: 1
  property string target
}

To copy to clipboard, switch view to plain text mode 

What's next?

[doulos]

looks not bad, actually . At least at first sight I can see how this might fit my bill. It seems that wrapping ones head around this paradigm is not as easy as one would think. There are several things in your code which can understand when I read them, but don't see how I would have come up with them. I am not in my Qt office right now, so I will try it out tomorrow and report. Thanks much so far

What's next?

what if I insisted on doing this in C++? Just joking..

[wysota]

looks not bad, actually . At least at first sight I can see how this might fit my bill. It seems that wrapping ones head around this paradigm is not as easy as one would think. There are several things in your code which can understand when I read them, but don't see how I would have come up with them. I am not in my Qt office right now, so I will try it out tomorrow and report. Thanks much so far

Here is an actually working code:

import QtQuick 2.2
import QtQuick.Layouts 1.0
 
Item {
  id: root
 
  property alias rows: grid.rows
  property alias columns: grid.columns
  property alias cellSpacing: grid.rowSpacing
  property int cellPadding: 0
 
  //default property list<NavigationTile> tiles
  property list<NavigationTile> tiles
 
  default property alias __tiles: root.tiles
 
  Rectangle {
    id: outer
 
    Rectangle {
      id: inner
    }
  }
 
  GridLayout {
    id: grid
    columnSpacing: rowSpacing
    anchors.fill: parent
 
    Repeater {
      model: root.tiles
 
      Item {
        anchors.margins: root.cellPadding
        implicitWidth: 100
        implicitHeight: 100
        Image {
          anchors.fill: parent
          source: modelData.image
          z: 1
        }
        Rectangle {
          anchors.fill: parent
          color: modelData.color
        }
        Layout.rowSpan: modelData.rowSpan
        Layout.columnSpan: modelData.columnSpan
 
 
      }
    }
  }
 
}

import QtQuick 2.2
import QtQuick.Layouts 1.0

Item {
  id: root

  property alias rows: grid.rows
  property alias columns: grid.columns
  property alias cellSpacing: grid.rowSpacing
  property int cellPadding: 0

  //default property list<NavigationTile> tiles
  property list<NavigationTile> tiles
  
  default property alias __tiles: root.tiles

  Rectangle {
    id: outer
  
    Rectangle {
      id: inner
    }
  }
  
  GridLayout {
    id: grid
    columnSpacing: rowSpacing
    anchors.fill: parent
    
    Repeater {
      model: root.tiles

      Item {
        anchors.margins: root.cellPadding
        implicitWidth: 100
        implicitHeight: 100
        Image {
          anchors.fill: parent
          source: modelData.image
          z: 1
        }
        Rectangle {
          anchors.fill: parent
          color: modelData.color
        }
        Layout.rowSpan: modelData.rowSpan
        Layout.columnSpan: modelData.columnSpan
        

      }
    }
  }
  
}

To copy to clipboard, switch view to plain text mode 

import QtQuick 2.2
 
QtObject {
  id: tile
 
  property color color
  property string image
  property int columnSpan: 1
  property int rowSpan: 1
  property string target
}

import QtQuick 2.2

QtObject {
  id: tile

  property color color
  property string image
  property int columnSpan: 1
  property int rowSpan: 1
  property string target
}

To copy to clipboard, switch view to plain text mode 

And main qml file:

import QtQuick 2.2
 
NavigationPanel {
  width: 600
  height: 400
  columns: 2
  rows: 2
 
  NavigationTile {
    color: "red"
    image: "/usr/share/icons/default.kde4/64x64/apps/kde.png"
    rowSpan: 2
  }
  NavigationTile {
    color: "yellow"
    image: "/usr/share/icons/default.kde4/64x64/apps/kontact.png"
  }
    NavigationTile {
    color: "orange"
    image: "/usr/share/icons/default.kde4/64x64/apps/ktip.png"
  }
}

import QtQuick 2.2

NavigationPanel {
  width: 600
  height: 400
  columns: 2
  rows: 2

  NavigationTile {
    color: "red"
    image: "/usr/share/icons/default.kde4/64x64/apps/kde.png"
    rowSpan: 2
  }
  NavigationTile {
    color: "yellow"
    image: "/usr/share/icons/default.kde4/64x64/apps/kontact.png"
  }
    NavigationTile {
    color: "orange"
    image: "/usr/share/icons/default.kde4/64x64/apps/ktip.png"
  }
}

To copy to clipboard, switch view to plain text mode 

what if I insisted on doing this in C++? Just joking..

Then I would continue to say it was an overkill and a waste of effort. I don't know which part you'd want to do in C++.

At this pace we'll have implemented a complete Metro UI by the end of next week...

[doulos]

one more related question: now that I have these pretty QML files that are usable from all my Metro-UI-like applications, how do I deploy them? I don't like the idea of having to copy them over to each deployment machine, and set the QML_IMPORT_PATH environment variable so they are found. I also dont like the idea of having to copy them to each application project and add them to the local resources.

Also, I wonder how I would maintain these files from within QtCreator. AFAIK there is not project type "QML library" that would only contain QML files and a qmldir file. My ideal solution would be to be able to setup such a project, then define a dependency from the application project to this one, and have the build system automatically package the QML files from the "library" within the application resources. But as it stands, this looks like all manual work.. or did I again overlook something?

Suggestions?