i have an application which sets properties of Qml from C++, so far i was able to set property of any type. I am able to create QQmlComponent in C++ and set it to property.
But first i need to initialize component with its properties. I can do that with create/beginCreate and set properties. But i cant change created QObject back to QQmlComponent, therefor i cant set it to givent Component type property.
Is there some way how to conver QObject to QQmlComponent ? Or is there any other way to initialize QQmlComponent properties ?
Example, of what i want to achiev in C++, how it looks in qml
import QtQuick 2.3
Loader {
// property of type Component
sourceComponent: Text {
text: "property i want to intialize, this component can be in file"
}
}
Edit: I will clarify what im after. Suppose i have something like JSON given by user.
e.g:
{
"type":"Loader",
"sourceComponent":{
"type":"Text",
"text":"some property of property of type QQmlComponentProperty"
}
}
Then from C++ i create given items, problem is how to create QQmlComponent with user given properties.
Related
I am trying to create ListModels dynamically, and insert these ListModels into a Container.
I get a variable number of ListModels, each with variable content, from a backend system. Based on the user's interaction with the GUI, one of those ListModels needs to be loaded into a known ListView. The client wants to avoid Qt/C++, so I am looking to solve this via QML.
How do I get a dynamically created object (in my case, a ListModel) into a Container? This code does not work:
property string strID;
property string strName;
Container {
id: functionListContainer;
}
// create ListModel
var newObject = Qt.createQmlObject("import QtQml.Models 2.14; ListModel { }", mainWindow);
...
// dynamically append elements into the ListModel
newObject.append({ deviceID: strID, deviceName: strName })
...
// add ListModel to Container
functionListContainer.addItem(newObject);
createQmlObject and append seem to work as intended. I get this error when running addItem code above:
"Could not convert argument 0 at"
...
"Passing incompatible arguments to C++ functions from JavaScript is dangerous and deprecated."
"This will throw a JavaScript TypeError in future releases of Qt!"
Any idea regarding how to get this to work? I know that addItem is expecting an Item, not an Object, but I do not know how to get this to work. I have tried replacing var with property Item newItem and property QtObject newObject [combined with addItem(newObject.item)], and all give (seemingly identical) errors. Is it a simple issue of casting the object into an Item? If so, what is the syntax that needs to be used?
Lastly, assuming I do have a Container with N ListModels, is it possible to refer to the container directly in the ListView? i.e.:
property int idx;
Container {
id: functionListContainer;
}
// add ListModels to container...
// use ListModel inside container
ListView {
...
model: functionListContainer.itemAt(idx);
...
}
I know that ListView is expecting a ListModel or something equivalent. But I am not sure how to connect the ListView with a Container containing ListModels, or if it is even possible.
If I were to summarize my problem, I am trying to have a ListView display different ListModels based on context, and I am trying to do this within a pure-QML framework as much as possible. Both of my questions above related to this. It would be helpful even only to clarify that this is not an option and that it is necessary to use another method like clearing and populating the ListModel (suggestions welcome).
You are trying to add a QObject (since ListModel is inherited from QAbstractListModel, which is in turn inherited from QObject) as a visual item using the addItem function. However, in QML a QObject (or QtObject) is regarded as an "storage element".
What you want to do it add the contentData of the Container:
Container {
id: functionListContainer
}
// create ListModel
var newObject = Qt.createQmlObject("import QtQml.Models 2.14; ListModel { }", mainWindow);
...
// dynamically append elements into the ListModel
newObject.append({ deviceID: strID, deviceName: strName })
...
// add ListModel to Container
functionListContainer.contentData.push(newObject)
The contentData property is the place where all children reside in the Container; QObject and QQuickItem (note that QQuickItem is inherited from QObject).
About referencing the lists, this also becomes easy when using the contentData property:
// create ListModel
var newObject = Qt.createQmlObject("import QtQml.Models 2.14; ListModel { objectName: \"the_list\" }", mainWindow);
...
// add ListModel to Container
functionListContainer.contentData.push(newObject)
console.log(functionListContainer.contentData[0])
will yield:
qml: QQmlListModel(0x55bcb7119720, "the_list")
Note that this is almost the same as using a Javascript array, the documentation of QQmlListProperty (which is what contentData is) states it is transparent.
Are there any signals I can bind to that allow me to execute functions directly before and directly after a property changes?
For example something like this:
Canvas {
id: canvas
anchors.fill: parent
property real lastX
property real lastY
property var lastContext
function cacheImage(){
lastContext = canvas.context
}
function loadImageFromCache(){
canvas.context = lastContext
canvas.requestPaint()
}
}
I want to call the cacheImage() function right before the canvas's size changes and the loadImageFromCache() right after the resize is completed.
If I understand correctly the onWidthChanged and onHeightChanged do the latter, but I need to save the image before it does that. Is there a simple way to do this?
But cacheImage() doesn't have to be called right before the size changes! It needs to be called any time after the most recent canvas contents change, and before the new canvas size takes effect. The window to cache the canvas is very long and extends between changes. The event "before n-th property change" is simply "after (n-1)-th property change" :)
This kind of functionality is not part of the "core design intent" of QML, so you are not getting it out of the box.
It is quite easy to do for C++ objects when you get to implement your own setter function.
But even in QML you can simply use an auxiliary setter function rather than using the property directly:
function setSomeProp(newValue) {
if (newValue === oldValue) return
stuffBeforeChange()
oldValue = newValue
stuffAfterChange() // optional, you can use the default provided signal too
}
If you insist on using a property based syntax, you can use an additional auxiliary property:
property type auxProp
onAuxPropChanged: setSomeProp(auxProp)
Which will allow you to use the = operator as well as do bindings.
I'm editing a component in Qt Creator. It suggested me to split the component in UI and not UI parts. My components exposes 2 custom properties.
ComponentViewForm {
property string step: '0'
property string setStep: '0'
}
A TextInput inside the UI-Part is bound to step
It should set the property setStep in onAccepted handler.
First one is easy. The binding can be edited in UI-Editor directly
But how do I implement the signal-handler of the child?
I've implemented it directly in the UI.
TextInput {
id: step
text: parent.step
onAccepted:
{
parent.setStep = text
}
}
It works, but Qt-Creator rejects to open it in UI-mode any more.
You can export the TextInput from your ComponentViewForm. There's a small Export button in the Navigator tab in Qt Quick UI forms editor. Assume that the id of TextInput is stepInput, ComponentViewForm.ui.qml should have an alias property property alias stepInput: stepInput in source code after you click the Export button.
You can implement property binding and signal handlers in ComponentView.qml like this:
ComponentViewForm {
property string step: '0'
property string setStep: '0'
stepInput.text: step
stepInput.onAccepted:
{
setStep = stepInput.text;
}
}
what is the best way to pass any model (for example a ListModel in main.qml) through loader into an other .qml file?
If the model only needs to be set once, then you can simply do that in the onLoaded signal handler
Loader {
id: loader
source: "myelement.qml"
onLoaded: item.modelProperty = yourModelId;
}
If it needs to be a binding, e.g. if the model is stored in a property which will change during runtime to a different model instance, then a Binding element should work
Binding {
target: loader.item
property: "modelProperty"
value: theModelStoreProperty
}
There is really only one way to use a loader. Pass the url of the qml file to the source property.
From http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-loader.html#details
Loader {
id: myLoader
source: "MyItem.qml"
}
It sounds like this is not quite what you are asking though. If you can provide more details on what you are doing we may be able to provide more help.
I'm using a tree control that I want to customize. The data items in the tree's dataProvider have a property name that should be used for labeling the node, and a property type that should be used to select one of several embedded images for use as an icon. The simplest way to do this is by using the labelField and iconFunction properties.
However, I wanted to get started with item renderers and open the door for adding more complex customization later, so I tried making my own item renderer. I extended the TreeItemRenderer class as follows and used it in my tree control:
class DirectoryItemRenderer extends TreeItemRenderer
{
[Embed("assets/directory/DefaultIcon.png")]
private static var _DEFAULT_ICON:Class;
// ... some more icons ...
override public function set data(value:Object):void
{
super.data = value; // let the base class take care of everything I didn't think of
if (value is Node) { // only handle the data if it's our own node class
switch ((value as Node).type) {
// ... some case clauses ...
default:
this._vSetIcon(_DEFAULT_ICON);
}
this.label.text = (value as Node).name;
}
}
private function _vSetIcon(icon:Class):void
{
if (null != this.icon && this.contains(this.icon)) {
this.removeChild(this.icon);
}
this.icon = new icon();
this.addChild(this.icon);
this.invalidateDisplayList();
}
}
This code has no effect whatsoever, icon and label in the tree control remain at their defaults. Using trace(), I verified that my code is actually executed. What did I do wrong?
Looking at the base mx.controls.treeClasses.TreeItemRenderer class, I see that in the updateDisplayList function the renderer gets it's icon and disclosureIcon classes from _listData:TeeListData. Instead of overriding the updateDisplayList function, try modifying the icon and disclosureIcon classes of the renderer's private _listData instance in your _vSetIcon method using the public accessors, like so:
private function _vSetIcon(icon:Class, disclosureIcon:Class = null):void
{
var tmpListData:TreeListData;
if (disclosureIcon == null) disclosureIcon = icon;
tmpListData = this.listData;
tmpListData.icon = icon;
tmpListData.disclosureIcon = disclosureIcon;
this.listData = tmpListData;
}
EDIT
Here is some clarification on the difference between data and listData. You'll have to excuse my omission of package names but I'm editing from my phone so its tough to look them up and I don't know the package names off the top of my head. data is defined in the context of a TreeItemRenderer in the IDataRenderer interface. You create a data renderer by implementing this interface and defining a public property data, which in this case is set by the parent control and contains some data and meta-data from the dataProvider to be rendered by the data renderer class.
listData is defined in the IDropInListItemRenderer interface as a property of type BaseListData and is realized in the TreeItemRenderer class as a property TreeListData. It differs from the data property in that it contains meta-data that describes the TreeListRenderer itself (icon, indent, open) as well as (I believe, I'll have to double check this later) a reference to the data item being rendered. I gather that It's used by the the TreeItemRenderer and I would imagine the parent list control for display update and sizing purposes. Someone is free to correct or add onto that if I'm incorrect or missed something, I'm going of what I remember drom the code.
In this case, you wanted to use meta-data from the data set from the data provider to modify data that determines the display of the renderer, so you would need to modify both.
I think the real confusion here however came from the fact that you extended the TreeItemRenderer class then tried to override functionality on the component in a manner the original developer didn't intend for someone to do, hence the unexpected results. If your goal is education and not ease of implementation you would probably be better served by extending the UIComponent class and using the TreeItemRenderer code as a reference to create a class that implements the same interfaces. That would be a real dive into the pool of custom component development.
I'd probably try something simple, as in this example from the Adobe Cookbooks. I notice that they override updateDisplayList, which may have something to do with your problems.
There's another example (for Flex 2, but looks applicable to Flex 3) that shows how to manage the default icons. It looks like you'll want to manage the icon yourself, setting the default icon styles to null, instead of trying to manipulate the superclass's icon property.
Update -- Looking at the source for TreeItemRenderer, commitProperties has the following before checking the data and setting up the icon and label:
if (icon)
{
removeChild(DisplayObject(icon));
icon = null;
}
Also, it looks like the setter for data calls invalidateProperties. Hence, your icon is wiped out when the framework gets around to calling commitProperties.