Windows {} COmponent.onCompleted is too late, how to trigger script as a first thing?

shokarta

Hello all,

toigh situation...

at the beginning i declare a variable variant: [] which is empty, and then i need to run a script which will populate this variable one by one (via array.push()).
Please note that this is must... for my reasons i can not use variable variant: function toPopulate()

so i have tried:

Window {
property variant gridValue: []
Component.onCompleted: JS.populateGrid()
....
}

which works fine... but i have a problem that under window, i have something like this:
```
GridLayout {

                    anchors.fill: parent

                    Repeater {
                        model: 9
                        delegate: Rectangle {

                            Label {
                                text: gridValue[index]['value']    // the problem is, that at this moment the JS.populateGrid did not happen yet
                            }
                        }
                    }
                }


so im looking for any idea how to force the JS.populateGrid() before the label texts are being printed...

I tried even some ugly solution like this (which obviously did not help):

Window {
property variant gridValue: []
property bool triggerPopulateGrid: false
onTriggerPopulateGridChanged: { console.log("trying to trigger, but does not work, wont even compile (ninja error)"); JS.populateGrid(); }
triggerPopulateGrid: true
....
}

GrecKo

@shokarta use your gridValue as a model of your Repeater:

Repeater {
    model: gridValue
    delegate: Rectangle {            
        Label {
            text: modelData.value
        }
    }
}

shokarta

@GrecKo sorry for misleading.

the model in repeater is something totaly different then what i fill to gridValue[].
This cant be used :(

EDIT:
thos i tried... it has a little relation,

the way i do is that I have one repeater for model of 9,
then inside that i have another repeater for another 9,
therefore my delegated Rectangle is being shoed 91 times (9 times inside first repeater 9 times).
And to my gridValue[] I do put 81 smaller arrays (so two-dim array).

I tried to the second repeater put:

model: gridValue.length / 9

to see if i iwll force to load that Component.onCompleted from the top... but didnt solve anything... because at this time its not populated yed (therefore gridValue.lengthis 0, then second repeater wont do anything actually)

so my problem persist even with you proposed solution

J.Hilk

@shokarta

text: gridValue ? gridValue[index]['value'] : ""

or better

text: gridValue.length > index ? gridValue[index]['value'] : ""

shokarta

@J-Hilk said in Windows {} COmponent.onCompleted is too late, how to trigger script as a first thing?:

gridValue.length > index

This also does not help...
it leaves every label inside repeater as "",
even when later the JS.populateGrid() is triggerd by Component.onCompleted, it wont change the labels, it does not update values from arrays :(

so I realy need a method to force JS.populateGrid() before repeater is assembling it children

J.Hilk

@shokarta move your repeater in a loader and only activate that one after the js function is executed

shokarta

@J-Hilk Yes!!!!
great solution, works fine...
thank you !!!!

this brought one more additional issue which is probably trivial, but i dont know this :(

so my scenario:

Window {
    property variant gridValue: []
    Component.onCompleted: JS.populateGrid()
    
    
    Rectangle {
        
        id: mainRect
        anchors.fill: parent
		
        GridLayout {
            
            anchors.fill: parent
                        
            Loader {
                id: gridLoader
                anchors.fill: parent
                sourceComponent: loaderComponent
                active: false
            }
            
            Component {
                id: loaderComponent

                Repeater {
                                        
                    model: 9
                    
					Rectangle {
                        
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                        
                        GridLayout {
                            
                            anchors.fill: parent
                                                        
                            Repeater {
                                
                                model: 9
                                delegate: Rectangle {
                                    
                                    Layout.fillHeight: true
                                    Layout.fillWidth: true
                                    
                                    Label {
                                        anchors.centerIn: parent
                                        text: gridValue.length > index ? gridValue[(rep2.rep2Index)*9+(index)]['value'] : ""
                                    }
                                    
                                }
                                
                            }
                        }
                        
                        
                    }
                    
                }
            }
        }
    }
    
}

works now priperly just fine...
inside the JS script i activate the loader once all script is done...

however anchoring issue:

QML Loader: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.

on line of Loader {}

can I kindly ask how this realy should be anchored?
basicaly the Component should be anchored to parent GridLayout {}

Thank you

mzimmers

@shokarta instead of anchors in your loader, use this:

Layout.fillHeight: true
Layout.fillWidth: true

Look at the QML Layout type for information on other options.

GrecKo

Use a proper TableView with a table model (TableModel or QAbstractTableModel)