MarkoSan
17th December 2015, 10:43
Hi to all!
I have QML GUI element which shows some product information - basicly QML GridView with delegate:
import QtQuick 2.5
import QtQuick.Layouts 1.2
import "../delegates"
Item
{
antialiasing: true
clip: true
Rectangle
{
id: ueProductSelectorWrapper
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
border.color: "#4682b4"
border.width: 1
antialiasing: true
anchors.centerIn: parent
anchors.fill: parent
ColumnLayout
{
anchors.margins: parent.radius/2
spacing: 0
antialiasing: true
anchors.fill: parent
anchors.centerIn: parent
GridView
{
id: ueProductGridView
antialiasing: true
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
cellWidth: ueProductGridView.width/5//144
cellHeight: ueProductGridView.height/3//144
delegate: UeProductSelectorDelegate
{
id: ueProductSelectorDelegate
ueParamProductImage: "image://ueProductsModel/"+model.ueRoleProductImage
ueParamProductName: model.ueRoleProductName
ueParamProductPriceSell: model.ueRoleProductPriceSell
ueParamProductCurrentStock: ueCurrentStockModel.ueProductCurrentStockCumulativ e(model.ueRoleProductId)
} // delegate
Component.onCompleted:
{
model=ueProductsModel;
model.ueFetchAllProducts();
ueProductSelectorOpacityAnimator.running=true;
} // Component.onCompleted
} // GridView
} // ColumnLayot
} // Rectangle
Connections
{
target: ueCategorySelector
onUeSignalStartProductSelectorAnimation:
{
ueProductSelectorOpacityAnimator.running=true;
}
} // Connections
Connections
{
target: ueProductSearcher
onUeSignalFilterProducts:
{
ueProductGridView.model.ueFilterProducts(pattern);
} // onUeSignalFilterProducts
onUeSignalReloadAllProducts:
{
ueProductGridView.model.ueFetchAllProducts();
} // onUeSignalReloadAllProducts
} // Connections
} // Item
And here is its GridView's delegate:
import QtQuick 2.5
import QtQuick.Layouts 1.2
Rectangle
{
//RESOLVED: current stock always 0
//RESOLVED: show price
//BUG: change product's background according to current stock (red: currenstock<=20, disabled/greyed: currenstock<=0)
//TODO: handle service prodcuts (i.e., products which have not connection to stock)
property string ueParamProductImage: ""
property string ueParamProductName: ""
property string ueParamProductPriceSell: ""
property string ueParamProductCurrentStock: ""
radius: 16
clip: true
width: ueProductGridView.cellWidth-8
height: ueProductGridView.cellHeight-8
border.color: "#4682b4"
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#000000"
ParallelAnimation on color
{
id: ueProductSelectorDelegateMouseAreaAnimation
loops: 1
running: false
ColorAnimation
{
from: "#4682b4"
to: "#000000"
duration: 100
} // ColorAnimation
} // ParallelAnimation
} // GradientStop
GradientStop
{
position: 1
color: "#ffffff"
} // GradientStop
} // Gradient
MouseArea
{
id: ueDelegateMouseArea
anchors.fill: parent
onClicked:
{
var selectedIndex=ueProductGridView.currentIndex=index ;
ueProductSelectorDelegateMouseAreaAnimation.runnin g=true;
ueProductGridView.currentIndex=index;
ueOrdersModel.ueAddOrder(ueProductGridView.model.g et(selectedIndex).ueRoleProductId,
1);
} // onClicked
} // MouseArea
ColumnLayout
{
anchors.fill: parent
antialiasing: true
spacing: 8
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
spacing: 8
Image
{
Layout.fillWidth: false
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignTop
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
antialiasing: true
source: ueParamProductImage
} // Image
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignTop
Layout.margins: 8
color: "steelblue"
text: ueParamProductName
wrapMode: Text.WordWrap
textFormat: Text.RichText
font.pointSize: 10
font.bold: true
style: Text.Normal
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignTop
} // Text
} // RowLayout
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
spacing: 8
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
text: ueParamProductPriceSell
wrapMode: Text.NoWrap
textFormat: Text.RichText
font.pointSize: 10
font.bold: true
style: Text.Normal
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
} // Text
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignRight|Qt.AlignVCenter
text: ueParamProductCurrentStock
wrapMode: Text.NoWrap
textFormat: Text.RichText
font.pointSize: 10
font.bold: true
style: Text.Normal
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
} // Text
} // RowLayout
} // ColumnLayout
transform:
[
Rotation
{
id: plateRotation
angle: -90
axis { x: 0; y: 1; z: 0 }
origin.x: -200
origin.y: 0
}
] // transform
SequentialAnimation
{
id: addAnimation
PauseAnimation
{
duration: Math.random()*2000
}
NumberAnimation
{
target: plateRotation
property: "angle"
to: 0
duration: 1000
//easing.type: Easing.InOutQuad
}
}
SequentialAnimation
{
id: removeAnimation
PropertyAction
{
target: ueProductSelectorDelegate
property: "GridView.delayRemove"
value: true
}
NumberAnimation
{
target: ueProductSelectorDelegate
property: "scale"
to: 0
duration: 1000
//easing.type: Easing.InOutQuad
}
PropertyAction
{
target: ueProductSelectorDelegate
property: "GridView.delayRemove"
value: false
}
}
GridView.onAdd:
{
print("onAdd");
addAnimation.start();
}
GridView.onRemove:
{
print("onRemove");
removeAnimation.start();
}
} // Rectangle
Now, animations inside delegate were taken from https://www.youtube.com/watch?v=VAhLnJc5iEY because I am still learning effects and I wanted to be sure effects work. Now, GridView has model, based on QSqlQueryModel and fetching data from database works like a charm! Now, if I comment QML code regarding animations/effect, products are placed into GridView perfectly - I can select them, scroll up and down, search inside them, ... But, I if apply effects/animations, the GridView is NOT empty, because I get debug messages from QSqlQueryModel while scrolling, but I think they are simply not visible. Why?!
I have QML GUI element which shows some product information - basicly QML GridView with delegate:
import QtQuick 2.5
import QtQuick.Layouts 1.2
import "../delegates"
Item
{
antialiasing: true
clip: true
Rectangle
{
id: ueProductSelectorWrapper
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
border.color: "#4682b4"
border.width: 1
antialiasing: true
anchors.centerIn: parent
anchors.fill: parent
ColumnLayout
{
anchors.margins: parent.radius/2
spacing: 0
antialiasing: true
anchors.fill: parent
anchors.centerIn: parent
GridView
{
id: ueProductGridView
antialiasing: true
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
cellWidth: ueProductGridView.width/5//144
cellHeight: ueProductGridView.height/3//144
delegate: UeProductSelectorDelegate
{
id: ueProductSelectorDelegate
ueParamProductImage: "image://ueProductsModel/"+model.ueRoleProductImage
ueParamProductName: model.ueRoleProductName
ueParamProductPriceSell: model.ueRoleProductPriceSell
ueParamProductCurrentStock: ueCurrentStockModel.ueProductCurrentStockCumulativ e(model.ueRoleProductId)
} // delegate
Component.onCompleted:
{
model=ueProductsModel;
model.ueFetchAllProducts();
ueProductSelectorOpacityAnimator.running=true;
} // Component.onCompleted
} // GridView
} // ColumnLayot
} // Rectangle
Connections
{
target: ueCategorySelector
onUeSignalStartProductSelectorAnimation:
{
ueProductSelectorOpacityAnimator.running=true;
}
} // Connections
Connections
{
target: ueProductSearcher
onUeSignalFilterProducts:
{
ueProductGridView.model.ueFilterProducts(pattern);
} // onUeSignalFilterProducts
onUeSignalReloadAllProducts:
{
ueProductGridView.model.ueFetchAllProducts();
} // onUeSignalReloadAllProducts
} // Connections
} // Item
And here is its GridView's delegate:
import QtQuick 2.5
import QtQuick.Layouts 1.2
Rectangle
{
//RESOLVED: current stock always 0
//RESOLVED: show price
//BUG: change product's background according to current stock (red: currenstock<=20, disabled/greyed: currenstock<=0)
//TODO: handle service prodcuts (i.e., products which have not connection to stock)
property string ueParamProductImage: ""
property string ueParamProductName: ""
property string ueParamProductPriceSell: ""
property string ueParamProductCurrentStock: ""
radius: 16
clip: true
width: ueProductGridView.cellWidth-8
height: ueProductGridView.cellHeight-8
border.color: "#4682b4"
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#000000"
ParallelAnimation on color
{
id: ueProductSelectorDelegateMouseAreaAnimation
loops: 1
running: false
ColorAnimation
{
from: "#4682b4"
to: "#000000"
duration: 100
} // ColorAnimation
} // ParallelAnimation
} // GradientStop
GradientStop
{
position: 1
color: "#ffffff"
} // GradientStop
} // Gradient
MouseArea
{
id: ueDelegateMouseArea
anchors.fill: parent
onClicked:
{
var selectedIndex=ueProductGridView.currentIndex=index ;
ueProductSelectorDelegateMouseAreaAnimation.runnin g=true;
ueProductGridView.currentIndex=index;
ueOrdersModel.ueAddOrder(ueProductGridView.model.g et(selectedIndex).ueRoleProductId,
1);
} // onClicked
} // MouseArea
ColumnLayout
{
anchors.fill: parent
antialiasing: true
spacing: 8
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
spacing: 8
Image
{
Layout.fillWidth: false
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignTop
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
antialiasing: true
source: ueParamProductImage
} // Image
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignTop
Layout.margins: 8
color: "steelblue"
text: ueParamProductName
wrapMode: Text.WordWrap
textFormat: Text.RichText
font.pointSize: 10
font.bold: true
style: Text.Normal
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignTop
} // Text
} // RowLayout
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
antialiasing: true
spacing: 8
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
text: ueParamProductPriceSell
wrapMode: Text.NoWrap
textFormat: Text.RichText
font.pointSize: 10
font.bold: true
style: Text.Normal
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
} // Text
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignRight|Qt.AlignVCenter
text: ueParamProductCurrentStock
wrapMode: Text.NoWrap
textFormat: Text.RichText
font.pointSize: 10
font.bold: true
style: Text.Normal
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
} // Text
} // RowLayout
} // ColumnLayout
transform:
[
Rotation
{
id: plateRotation
angle: -90
axis { x: 0; y: 1; z: 0 }
origin.x: -200
origin.y: 0
}
] // transform
SequentialAnimation
{
id: addAnimation
PauseAnimation
{
duration: Math.random()*2000
}
NumberAnimation
{
target: plateRotation
property: "angle"
to: 0
duration: 1000
//easing.type: Easing.InOutQuad
}
}
SequentialAnimation
{
id: removeAnimation
PropertyAction
{
target: ueProductSelectorDelegate
property: "GridView.delayRemove"
value: true
}
NumberAnimation
{
target: ueProductSelectorDelegate
property: "scale"
to: 0
duration: 1000
//easing.type: Easing.InOutQuad
}
PropertyAction
{
target: ueProductSelectorDelegate
property: "GridView.delayRemove"
value: false
}
}
GridView.onAdd:
{
print("onAdd");
addAnimation.start();
}
GridView.onRemove:
{
print("onRemove");
removeAnimation.start();
}
} // Rectangle
Now, animations inside delegate were taken from https://www.youtube.com/watch?v=VAhLnJc5iEY because I am still learning effects and I wanted to be sure effects work. Now, GridView has model, based on QSqlQueryModel and fetching data from database works like a charm! Now, if I comment QML code regarding animations/effect, products are placed into GridView perfectly - I can select them, scroll up and down, search inside them, ... But, I if apply effects/animations, the GridView is NOT empty, because I get debug messages from QSqlQueryModel while scrolling, but I think they are simply not visible. Why?!