QML "plugin" with custom view

[bibbinator]

Hi,

* I have an data processing app where a list of "filters" are applied successively
* I have a fixed set of classes that are Q_INVOKABLE/Q_PROPERTY to retrieve the data, size, etc. and put the data back
* I would like the filters to be written 100% in QML
* The filters are loaded from a directory
* The user clicks a button to add a filter, the list populated by the filters found in the directory

So far so good, I know how to basically do all this and it let's users write custom data manipulators and add them to the app on their own.

* But when you select a filter in the list, it has it's own settings/properties that reside completely in JS/QML.

This is where I'm not sure what to do.

How can I add/set a variety of custom qml "views" to a list or an area in a window? What are the best practices to do it? Any examples or tutorials anybody knows of?

Thanks,
Brett

[anda_skoa]

Can you given an example on how such a filter looks?

Cheers,
_

[bibbinator]

Hi,
Users would write their own and I haven't figured out how to do this yet so I don't have screenshots to show you. Primarily though it's basically like property sheets with floats, sliders, colors, etc.

I had considered just making an API for simple types that could be registered and then I generate the property sheet, but since QML is so flexible I would like to enable users to make declarative UIs and then show them in a list. I can publish or enforce a standard minimum width and default width to help make them consistent.

It feels like I need a list of containers that I can put QML views into somehow but no idea if this is the right approach or not.

Thanks,
Brett

[anda_skoa]

Hi,
Users would write their own and I haven't figured out how to do this yet so I don't have screenshots to show you.

Sorry, the work "looks" was ambiguous.
I meant, how would that look like in QML code.

Do you have a filter element type with a defined filter function, etc?

Cheers,
_

[bibbinator]

@anda_skota

Yes, I would require an element of a specific name, with defined method. Hoping something like this would work:

MyDataFilter.qml that contains

import QtQuick 2.0
 
MyDataFilter {
     CheckBox {
        id: normalizeData
        text: qsTr("Normalize Data?")
        checked: true
    }
 
     TextField {
         id: prefix
         placeholderText: qsTr("Enter Prefix")
     }
 
     Apply(dataArray) {
          // read dataArray and using my QML settings and modify data...
     }
 
}

import QtQuick 2.0

MyDataFilter {
     CheckBox {
        id: normalizeData
        text: qsTr("Normalize Data?")
        checked: true
    }

     TextField {
         id: prefix
         placeholderText: qsTr("Enter Prefix")
     }

     Apply(dataArray) {
          // read dataArray and using my QML settings and modify data...
     }

}

To copy to clipboard, switch view to plain text mode 

So I would read the filters from disk, use their filenames to populate a list of filters that can be added, then each place a given filter was added show it's settings and invoke the Apply method on it.

So I preload the component and then each time a user adds it to a dataset I do something like:

QObject *object = component.create();

I'm not sure how to add this "object" into a scrollable list of QML defined filter objects like this? Do I need some sort of view container? Can they be put into a ListModel even though each item in the list has a different QML defined UI?

Thanks for the help!

[anda_skoa]

If you have a list of QObject instances in C++, you can export a property of type QList<QObject*> and use that as a model for a ListView.
Or you implement a QAbstractListModel subclass on top of the list.

I am afraid I don't really understand your example. E.g. why would there be any UI children in the filter element?

Cheers,
_

[bibbinator]

Thanks for offering help.

You don't understand because I don't understand myself :-)

I thought I needed a root element to hold the UI child elements? If I had 23 user scripts, I expect a scrolling list of 23 UI "widgets" where each script defines the unique controls and layout within it's widget. The example I gave is a single QML out of the 23, and I want to load all 23 and add them to a list view.

Is that clearer?

[anda_skoa]

I thought I needed a root element to hold the UI child elements?

Yes, but the example looked like the root element being the filter.
I would have expected that the filter is not a UI type itself.

Cheers,
_

[bibbinator]

Ah I see. So you mean I should do something like Item { } for the root?

I created the filter name as an element thinking there would be a naming collision and inability to find the element, so I guess what I want is:

Item {
     id: MyDataFilter
     ...
}

Item {
     id: MyDataFilter
     ...
}

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

Ah I see. So you mean I should do something like Item { } for the root?

Yes, or any other element that makes sense for the respective filter's U

I created the filter name as an element thinking there would be a naming collision and inability to find the element

Id values only need to be unique within one file, they are not visible outside that file, i.e. in the context the element is instantiated in.

Cheers,
_

[bibbinator]

I see, that's really helpful. Thanks!