QML Plugin w/ QML resources

[doulos]

Hello all,

new to this form, and getting started with Qt/Quick. I am currently trying to factor out generic parts of our UI code into a plugin which would then provide new UI components usable in multiple projects. I chose the plugin path (over QML module), because deployment is a *little* less complicated (why in the world do I need to maintain the qmldir file? Why can't the plugin shared lib provide all info when loaded?), and since the code is fairly dynamic I prefer the typed environment of a C++ implementation over Javascript. However, I did not want to lose the advantages of the dedicated QML syntax. I therefore decided to include QML files as resources inside the plugin lib, load the components at runtime and create and parameterize items as required. In particular, I have a navigation panel which can show an arbitrary number of navigation tiles which will navigate to a configurable target.

Now, here comes issue 1: I am able to load the QML component inside the componentComplete() method of my contributed type (call it NavigationPanel). I then try to find the GridLayout which is defined inside the resource file by id (findChild<QQuickItem *>(name)) - which fails.

issue 2: I then try to get at the GridLayout using childItems().at(2), assuming that is the right one (theres only 2 nested items). I then go on to find nested NavigationTile objects (another contributed type) and use them to parameterize items created from another loaded QML component, and add the items to the GridLayout. When I start the application, nothing displays

Heres my questions: is my approach even feasible? Why am I not able to retrieve the GridLayout child by id? What do I need to do to make everything display correctly? Do I need to implement updatePaintNode (and set QQuickItem::ItemHasContents), and if so, how?

heres an example of the app code that uses my contributed types:

Rectangle {
   NavigationPanel {
      NavigationTile {
         target: "nextpage1.qml"
      }
      NavigationTile {
         target: "nextpage2.qml"
      }
   }
}

Rectangle {
   NavigationPanel {
      NavigationTile {
         target: "nextpage1.qml"
      }
      NavigationTile {
         target: "nextpage2.qml"
      }
   }
}

To copy to clipboard, switch view to plain text mode 

and heres the QML that gets loaded from within the NavigationPanel implementation:

Rectangle {
   Rectangle {
      GridLayout {
         id: tilesGrid
      }
   }
}

Rectangle {
   Rectangle {
      GridLayout {
         id: tilesGrid
      }
   }
}

To copy to clipboard, switch view to plain text mode 

I hope this makes sense to someone out there

thanks,
Christian

[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..