The problem is simple: window doesn't rendering and refresh, until the program is finished. It just doesn't show anything.
And I want to see the window even if the long cycle is not finished yet.
I will be very grateful for any help!
#include <QtGui>
#include <QtQml>
int main(int _nArgCount, char * _pArgValues[]) {
QApplication app(_nArgCount, _pArgValues);
//QMLblock
QString strQmlPath = "../main.qml";
QQmlApplicationEngine engine;
QQmlComponent pComponent(&engine, strQmlPath);
if( pComponent.status()==QQmlComponent::Error )
{ qDebug()<<"Error:"<<pComponent.errorString();
return app.exec();
}
QObject * pQmlObject = pComponent.create();
QObject * pWindow = pQmlObject->findChild<QObject*>("initStateGui");
QObject * pWindowNext = pQmlObject->findChild<QObject*>("searchRemovableGui");
pWindow->setProperty("visible","false");
pWindowNext->setProperty("visible","true");
QObject * pList = pQmlObject->findChild<QObject*>("devicesList");
QStringList s;
QString str;
s.append("3");
pList->setProperty("model",s);
for (int i=0; i<5; i++){
s.append(str.number(i));
pList->setProperty("model",s);
}
return app.exec();
}
And my QML (I don't think it's needed, but anyway):
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2
QtObject {
property real defaultSpacing: 10
property SystemPalette palette: SystemPalette { }
property var controlWindow: Window {
width: 500
height: 500
color: palette.window
title: "Updater"
visible: true
//init state
Column {
id: initStateGui
objectName: "initStateGui"
anchors.fill: parent
anchors.margins: defaultSpacing
spacing: defaultSpacing
property real cellWidth: initStateGui.width / 3 - spacing
visible: true
Text { text: "Init state" }
Grid {
id: grid
columns: 3
spacing: defaultSpacing
width: parent.width
Button {
id: showButton
width: initStateGui.cellWidth
text: "Cancel"
onClicked: Qt.quit()
}
Button {
id: initStateContinue
objectName: "initStateContinue"
width: initStateGui.cellWidth
text: "Continue"
signal sigInitStateContinue()
onClicked: initStateContinue.sigInitStateContinue()
}
}
Text {
id: textLabel
text: "Welcome to the updater!"
}
Rectangle {
id: horizontalRule
color: "black"
width: parent.width
height: 1
}
}
//updater update state
Column {
id: updaterUpdateGui
objectName: "updaterUpdateGui"
anchors.fill: parent
anchors.margins: defaultSpacing
spacing: defaultSpacing
visible: false
property real cellWidth: initStateGui.width / 3 - spacing
Text { text: "UpdaterUpdate State" }
Grid {
id: grid1
columns: 3
spacing: defaultSpacing
width: parent.width
Button {
id: showButton1
width: initStateGui.cellWidth
text: "Cancel"
onClicked: Qt.quit()
}
Button {
id: updaterUpdateContinue
objectName: "updaterUpdateContinue"
width: initStateGui.cellWidth
text: "Continue"
signal sigUpdaterUpdateContinue()
onClicked: updaterUpdateContinue.sigUpdaterUpdateContinue()
}
}
Text {
text: "Update is started!"
}
Rectangle {
id: horizontalRule1
color: "black"
width: parent.width
height: 1
}
}
//removable Search gui
Column {
id:searchRemovableGui
objectName: "searchRemovableGui"
anchors.fill: parent
anchors.margins: defaultSpacing
spacing: defaultSpacing
visible: false
property real cellWidth: initStateGui.width / 3 - spacing
Text { text: "Removable search State" }
Grid {
id: grid2
columns: 3
spacing: defaultSpacing
width: parent.width
Button {
id: showButton2
width: initStateGui.cellWidth
text: "Cancel"
onClicked: Qt.quit()
}
}
Text {
text: "Searching for removable, please wait...!"
}
ListView {
id:devicesList
objectName:"devicesList"
width: 100; height: 500
model: myModel
delegate: Rectangle {
height: 15
width: 100
Text { text: modelData }
}
}
}
}
}
Addition: i don't need threads, i need to see the freezed window with the caption.
I see it if i add the button, and begin cycle after the button is pressed.
Without the button the window doesn't rendering, and i can't find how to do it.
It's impossible to realize in one thread.
Only moving long process to another thread allows to render GUI.
Related
I have below stack of components and I want to read and set value of the TextFiled:
-Rectangle
-----TabView
---------Tab
-----------Rectangle
--------------GridLayout
------------------Rectangle
--------------------TextField <--- I want to access this TextField
I have also a case where I need to access Repeater inside the Tab:
-Rectangle
-----TabView
---------Tab
-----------Rectangle
--------------GridLayout
------------------Repeater
--------------------TextField <--- I want to access this TextField also
I have tried to access it using:
var tab0 = myTabView.getTab(0);
tab0.children[0].text = "Some Text"; // I get Undefined Error
I have tried to access the component using a function inside the Tab:
import QtQuick 2.0
import QtQuick.Controls 2.14 as QQC2
import QtQuick.Layouts 1.14
import QtQuick.Controls 1.4 as QQC1
QQC2.Item {
QQC1.TabView {
QQC1.Tab {
title: "tab1"
function printValue () {
console.log("myTextFld.txt: "+myTextFld.txt); // <-- Getting Error myTextFld undefined.
}
Rectangle {
id: tabHolderRext
color: "blue"
GridLayout {
id: myGrid
model: 7
Repeater {
id: herderRepeater
model: header
delegate: Rectangle {
TextField {
// I want to Access This TextField also
}
}
}
Rectangle {
id: row0Rect
Layout.row: 0
Layout.column: index
TextFiled {
id: myTextFld
text: modelData
}
}
// Rest of the rows
}
}
}
}
}
Item id can be used to access the values from TextField if you have all items in same qml file. If you have different qml files then make use of alias types link to access the values.
Repeater case: The Textfield has to update the underlying modelview --> model first then we can make use of the model's data.
Here is a sample code. I have stacked all item's in the same qml file so that access by id works here.
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
Item {
anchors.fill: parent
anchors.margins: 10
TabView {
anchors.fill: parent
Tab {
title: "TextField"
Item {
anchors.fill: parent
Grid {
spacing: 20
anchors.fill: parent
anchors.margins: 10
Rectangle {
height: 40
width: 150
TextField {
id: inputId
anchors.fill: parent
placeholderText: "enter text"
}
}
Button {
height: 40
width: 150
text: "show txt"
onClicked: labelId.text = inputId.text
}
Rectangle {
height: 40
width: 150
Label {
id: labelId
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}
}
}
Tab {
title: "Repeater"
Item {
anchors.fill: parent
Grid {
spacing: 20
anchors.fill: parent
anchors.margins: 10
columns: 3
ListModel {
id: fruitModel
ListElement { name: "Apple" }
ListElement { name: "Orange" }
ListElement { name: "Banana" }
}
Repeater {
width: parent.width
height: parent.height / 2
model: fruitModel
delegate: Rectangle {
height: 40
width: 150
TextField {
anchors.fill: parent
text: name
onTextChanged: fruitModel.setProperty(index, "name", text) // update model data
}
}
}
Repeater {
width: parent.width
height: parent.height / 2
model: fruitModel
delegate: Rectangle {
height: 40
width: 150
Label {
text: name
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}
}
}
}
}
}
}
I want to perform the expansion action in the ToolBar when the user taps on the title of it, as in the pictures that I attach.
When the user touches the title of the toolbar then you should see a list of the filters that you can apply.
You have any ideas on how to implement this action in QML?
Pretty easy. Copy the following in the awesome QML web editor:
import QtQuick 2.0
Column {
width: 500
Rectangle {
id: toolbar
width: parent.width
height: 50
Text {
text: "Elenco"
anchors.centerIn: parent
font.pointSize: 24; font.bold: true
}
MouseArea {
anchors.fill: parent
onClicked: listBox.visible = !listBox.visible
}
}
Rectangle {
id: listBox
color: "gray"
width: parent.width
visible: false
height: 200
Column {
width: parent.width
Repeater {
model: 4
delegate:
Rectangle {
width: parent.width
color: index % 2 ? "#C9D6DE" : "#E7F6FF"
height: 50
Text { anchors.centerIn: parent; text: "Persona " + (index + 1) }
}
}
}
}
}
I am developing a QML application which basically contains two ListView. I would like to copy a QML item from one ListView to another. I tried to handle this by setting Drag property in the delegate but the item cannot go outside the view when I drag the item, I think the Flickable container handles mouse events.
So, I want to try the following:
create a mousearea which overlaps the to ListView
create a new object by calling **createComponent() / createObject()**
reparent this object to the mousearea
handle mouse events in the mousearea till drop
This solution seems to me a little complicated, so do you have a better way to achieve this ?
This was a bad idea and too much complicated. I think I got a way to achieve this:
each delegate of the ListView has a hidden Item which can be dragged,
as my ListView are in a reusable component, I use a property to pass a higher item (a Rectangle here and NOT a **MouseArea**) which can be used as parent for dragged items,
the higher item contains the two ListView (and maybe more in the future),
when the drag begins, the item is set to visible and reparented using a **State**
So, I missed the point that set the parent should solve my problem.
Next code is just an idea, but the key is to have a MouseArea inside a delegate for the first ListView so the user can drag the items and drop them into a DropArea which belongs to the second ListView.
In this example, model is very simple, just a number. And when the item is dropped, it is removed from the first ListView:
listView.model.remove(listView.dragItemIndex)
Just remove that line of code to copy the item instead of removing.
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 600
height: 600
Rectangle {
id: root
width: 400
height: 400
ListView {
id: listView
width: parent.width / 2
height: parent.height
property int dragItemIndex: -1
model: ListModel {
Component.onCompleted: {
for (var i = 0; i < 10; ++i) {
append({value: i});
}
}
}
delegate: Item {
id: delegateItem
width: listView.width
height: 50
Rectangle {
id: dragRect
width: listView.width
height: 50
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "salmon"
border.color: Qt.darker(color)
Text {
anchors.centerIn: parent
text: modelData
}
MouseArea {
id: mouseArea
anchors.fill: parent
drag.target: dragRect
drag.onActiveChanged: {
if (mouseArea.drag.active) {
listView.dragItemIndex = index;
}
dragRect.Drag.drop();
}
}
states: [
State {
when: dragRect.Drag.active
ParentChange {
target: dragRect
parent: root
}
AnchorChanges {
target: dragRect
anchors.horizontalCenter: undefined
anchors.verticalCenter: undefined
}
}
]
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: dragRect.width / 2
Drag.hotSpot.y: dragRect.height / 2
}
}
}
ListView {
id: listView2
width: parent.width / 2
height: parent.height
anchors.right: parent.right
property int dragItemIndex: -1
DropArea {
id: dropArea
anchors.fill: parent
onDropped: {
listView2.model.append(listView.model.get(listView.dragItemIndex))
listView.model.remove(listView.dragItemIndex)
listView.dragItemIndex = -1;
}
}
model: ListModel {
Component.onCompleted: {
for (var i = 0; i < 1; ++i) {
append({value: i});
}
}
}
delegate: Item {
id: delegateItem2
width: listView2.width
height: 50
Rectangle {
id: dragRect2
width: listView2.width
height: 50
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "salmon"
border.color: Qt.darker(color)
Text {
anchors.centerIn: parent
text: modelData
}
}
}
}
}
}
I have Rectangle filled with MouseArea which on onPressAndHold() handler reveals second Rectangle and transfers drag action to that Rectangle. The problem is that when I move that second Rectangle over DropArea it doesn't notify about any actions (onEntered, onExited, onDropped). I tried to do this in many combinations but it has never worked. Here is an example, am I missing something?
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: appDrawerRoot
visible: true
width: 360; height: 360
property bool isRectVisible: false
Rectangle{
id:rect
color: "blue"
x:50; y:50
width: 50; height: 50
MouseArea{
anchors.fill: parent
onPressed: {
cloneRect.x = rect.x
cloneRect.y = rect.y
}
onPressAndHold: {
isRectVisible = true
drag.target = cloneRect
}
onReleased: {
drag.target = undefined
isRectVisible = false
cloneRect.x = rect.x
cloneRect.y = rect.y +100
}
}
}
Item{
id: cloneRect
width: 50; height:50
visible: isRectVisible
MouseArea{
id: mouseArea
width:50; height:50
anchors.centerIn: parent
Rectangle{
id:tile
width: 50; height:50
color:"black"
opacity: 0.5
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Drag.hotSpot.x: 25
Drag.hotSpot.y: 25
}
}
}
DropArea {
id:dropArea
x:153
y:158
z:-1
width:100; height: 100
Rectangle{
anchors.fill: parent
color: "Green"
}
onEntered: {
drag.source.opacity = 1
console.log("ENTERED")
}
onExited: {
drag.source.opacity = 0.5
console.log("EXITED")
}
onDropped:
{
console.log("DROPPED")
}
}
}
The main problem with your code is that you don't set the active property of the drag. Modify you code like this:
//..........................
Item{
id: cloneRect
width: 50; height:50
visible: isRectVisible
Drag.active: visible // Add this line of code
//.....................
For more information please refer to Qt examples. At Qt Creator's "Welcome" screen hit "Examples" button and search for "drag and drop qml".
I want connect one signal from QObject to various pages, loaded by the "Loader" qml element. My problem similar Dead QML elements receiving signals? but loaded items destroyed before calling the "onDestruction" method.
For example below, if switch from page1 to page2 in console writed:
"QML: Loading status: 1 Item: QDeclarativeRectangle(0x8dcd408, "page2")
QML Item: Loaded QDeclarativeRectangle(0x8dcd408, "page2") 1
qrc:/page1.qml:12: TypeError: Result of expression 'parent' [null] is not an object.
qrc:/page1.qml:15: ReferenceError: Can't find variable: page1text"
every second. So there can't disconnect from signal because parent object is destroyed.
How to handle signals from QObject (root) in loaded items? or How to disconnect signal from unloaded page?
main.qml
import QtQuick 1.1
Rectangle {
id: root
objectName: "root"
width: 360
height: 360
state: "page1"
color: "white"
Item {
width: parent.width
height: parent.height/2
anchors.top: parent.top
Loader {
id: pageLoader
objectName: "pageLoader"
anchors.fill: parent
anchors.centerIn: parent
signal textMsg(variant params)
onStatusChanged: console.log("QML: Loading status: ", status, " Item: ", item)
onLoaded: { console.log("QML Item: Loaded",item,status); }
}
}
states: [
State {
name: "page1"
PropertyChanges { target: pageLoader; source: "qrc:/page1.qml"}
}
,State {
name: "page2"
PropertyChanges { target: pageLoader; source: "qrc:/page2.qml"}
}
]
Timer {
// simulate signals from QObject
interval: 1000; running: true; repeat: true
onTriggered: pageLoader.textMsg({"msg2page1":"test","msg2page2":"test"})
}
Rectangle {
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "yellow"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 1"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page1";
}
}
}
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "red"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 2"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page2";
}
}
}
}
page1.qml
import QtQuick 1.1
Rectangle {
id: page1
objectName: "page1"
color: "yellow"
Component.onCompleted: {
parent.textMsg.connect(msgHandler);
}
Component.onDestruction: {
parent.textMsg.disconnect(msgHandler);
}
function msgHandler(params) {
page1text.text += " "+params.msg2page1;
}
Text {
id: page1text
anchors.fill: parent
wrapMode: Text.WordWrap
text: "page1"
}
}
page2.qml
import QtQuick 1.1
Rectangle {
id: page2
objectName: "page2"
color: "red"
}
That's nicely described in Loader documenation. It reads:
Any signals emitted from the loaded item can be received using the Connections element.
There is also an example, I copy it below for the sake of clarity:
// Application.qml
import QtQuick 1.0
Item {
width: 100; height: 100
Loader {
id: myLoader
source: "MyItem.qml"
}
Connections {
target: myLoader.item
onMessage: console.log(msg)
}
}
// MyItem.qml
import QtQuick 1.0
Rectangle {
id: myItem
signal message(string msg)
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: myItem.message("clicked!")
}
}
Clearly, if item is destroyed, any signal handlers are ignored until the target is recreated again.
My answer is: Don't use the "Loader", create child object by JS and destroy it as no needed, for example:
main.qml
import QtQuick 1.1
import "qrc:/pageloader.js" as Pageloader
Rectangle {
id: root
objectName: "root"
width: 360
height: 360
state: "page1"
color: "white"
signal textMsg (variant params)
states: [
State {
name: "page1"
StateChangeScript{ script: Pageloader.createPageObject("qrc:/page1.qml");}
}
,State {
name: "page2"
StateChangeScript{ script: Pageloader.createPageObject("qrc:/page2.qml");}
}
]
Timer {
// simulate signals from QObject
interval: 1000; running: true; repeat: true
onTriggered: textMsg({"msg2page1":"test","msg2page2":"test"})
}
Rectangle {
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "yellow"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 1"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page1";
}
}
}
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width/2
height: parent.height/2
border {
color: "black"
width: 1
}
color: "red"
Text{
anchors.fill: parent
anchors.centerIn: parent
text: "Set Page 2"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.state = "page2";
}
}
}
}
pageloader.js
var component;
var sprite;
function createPageObject(path) {
if(sprite){
console.log("sprite.destroy() ",typeof sprite);
sprite.destroy();
console.log("component.destroy() ",typeof component);
component.destroy();
}
component = Qt.createComponent(path);
if (component.status === Component.Ready)
finishCreation();
else
component.statusChanged.connect(finishCreation);
}
function finishCreation() {
if (component.status == Component.Ready) {
sprite = component.createObject(root);
if (sprite == null) {
// Error Handling
console.log("Error creating object");
}
} else{
if (component.status === Component.Error) {
// Error Handling
console.log("Error loading component:", component.errorString());
}else{
console.log("Component status changed:", component.status);
}
}
}
page1.qml and page2.qml not changed.
I got it. My setup:
qml file to display ListViews
Several qml files defining Listviews, each takes a different column of different SQL tables. The model comes from C++
So here is the shortened code:
Dialog {
id: dialog
width: 1000; height: 400
property Component listViewItem
signal newDatabaseEntry( string text ) [1]
contentItem: Rectangle {
[...]
TextInputWithButton { [3]
id: newRecords
onInputAccepted: { newDatabaseEntry( text ) } [1]
}
}
[...]
Loader {
id: listViewPlaceholder
anchors.fill: parent
sourceComponent: dialog.listViewItem
onLoaded: {
if( typeof listViewPlaceholder.item.insertRecord === "function" )
// newRecords.inputAccepted.connect( listViewPlaceholder.item.insertRecord ) [1]
dialog.newDatabaseEntry.connect( listViewPlaceholder.item.insertRecord ) [2]
}
The above code is the general view of ListViews. The signal roundtrip [1] is necessary, otherwise no data is passed. How to chain signals is described here:
http://doc.qt.io/qt-5/qtqml-syntax-signals.html#connecting-signals-to-methods-and-signals
The input button [3] delivers the confirmed data to be inserted into the db.
A ListView passed to the above function looks like this:
DialogSqlSingleColumnEdit {
listViewItem: ListView {
function insertRecord( text ) {
console.log( "done:" + text )
sqlModel.insertRecord( text )
}
[...]
The insertRecord is called forwards the text to the sql-C++ model.