QML Plugin w/ QML resources

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

[wysota]

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?

There is a number of approaches you can take.

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.

Well... one way or the other you will have to deploy them to each machine or make the machines fetch it over network each time the application is executed. I really hate having to deploy my application to every machine that is to launch this application too, but that's how computers are organized.

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.

Qt Quick UI project seems a good choice.

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.

That would make you "copy them to each appplication project and add them to the local resources".

But as it stands, this looks like all manual work.. or did I again overlook something?

Suggestions?

As I said, there is a number of approaches you can take depending on what you want to achieve and what tools you have at hand. You might for instance create a qml-bundle from those files and deploy that. However I'd suggest deploying the library as a set of files in a location where your applications will be able to find them. Just like with QML extensions bundled with Qt.

[doulos]

That would make you "copy them to each appplication project and add them to the local resources".

well, not me - the build system would do it for me. My issue is not with redundant resources, but with development and deployment convenience.

What about putting all reusable QML files in one place, calling

rcc -binary myresource.qrc -o navigationlibrary.rcc

rcc -binary myresource.qrc -o navigationlibrary.rcc

To copy to clipboard, switch view to plain text mode 

on them and then putting that file int the application project, together with a

QResource::registerResource("navigationlibrary.rcc");

QResource::registerResource("navigationlibrary.rcc");

To copy to clipboard, switch view to plain text mode 

in main.cpp ? Would those QML files be found? I suppose not, because the qmldir file would be missing..

However I'd suggest deploying the library as a set of files in a location where your applications will be able to find them. Just like with QML extensions bundled with Qt.

I was actually wondering how the Qt-bundled QML files are found at runtime. How exactly is it?

My goal is a fully automated development process for library and application, and a deployment that consists of as few files as possible

[wysota]

well, not me - the build system would do it for me.

If that's ok with you then it is easy to achieve with qmake.

What about putting all reusable QML files in one place, calling

rcc -binary myresource.qrc -o navigationlibrary.rcc

rcc -binary myresource.qrc -o navigationlibrary.rcc

To copy to clipboard, switch view to plain text mode 

on them and then putting that file int the application project, together with a

QResource::registerResource("navigationlibrary.rcc");

QResource::registerResource("navigationlibrary.rcc");

To copy to clipboard, switch view to plain text mode 

in main.cpp ? Would those QML files be found? I suppose not, because the qmldir file would be missing..

qmldir should be in that qrc file as well. And I already suggested doing that a couple of posts ago

I was actually wondering how the Qt-bundled QML files are found at runtime. How exactly is it?

Have a look into your $QTDIR/qml/ and $QTDIR/imports (where QTDIR is the directory where Qt is installed).

My goal is a fully automated development process for library and application, and a deployment that consists of as few files as possible

Usually these two requirements are contradictive. If you want as few files as possible, then go for static linking and embedding everything in the main application binary. If you are after easy development then dump all the files you need in a predefined set of directories and copy them everywhere you need.

[doulos]

If that's ok with you then it is easy to achieve with qmake.

manually, that is. I happen to be a big fan of IDE automation.

Have a look into your $QTDIR/qml/ and $QTDIR/imports (where QTDIR is the directory where Qt is installed).

I know where the files are. What I dont understand is how they are found at runtime from within my app on a system with no Qt installation. I found a post describing a deployment that consisted of basically the complete Qt install bundled together with the app, consisting of hundreds of files. Yuck!

If you want as few files as possible, then go for static linking and embedding everything in the main application binary.

how would this be done? Where is this described? Will this really do away with lots of QML files flying around? What about QML plugins?

If you are after easy development then dump all the files you need in a predefined set of directories and copy them everywhere you need.

what I want is an IDE project setup that will allow all flexibility during development, AND a "deploy" button that will generate an installable package according to my liking (static, shared libs, whatever). Following your suggestion, I would maintain the QML files in a Qt Quick UI project and manually create (and invoke) a makefile that would deploy the files during development to some central location where the other projects can find them (HOW again do they find them??) . For deployment the same makefile would then generate a resource file. All this seems completely non-automated by the IDE, and therefore a lot of hacking, testing, failing and retrying (been through that for a few days already. Hated it!). Or maybe I go back to the QML plugin project type, because that will at least allow me to trigger the build from within the IDE

bottom line: if I am not mistaken, IDE automation leaves a lot to be desired (stuff that is a matter of course in other systems). If I am mistaken, please fill me in..