Pull screen down to refresh data in qml - qml

Question

On my Application I need to apply a feature like when I pull the screen down then the current page get refresh. For that I have done this
Sample Code
Page {
height: 460
width: 300
id: app
property var refreshFlik: ""
Flickable {
id:flick
anchors.fill: parent
contentHeight : rect.height
Rectangle{
id:rect
color: "#fffff1"
height: 540
width: 300
Text{
id:text
anchors.centerIn: parent
text:"Hello World"
}
}
onFlickStarted: {
refreshFlik = atYBeginning
busy.running=true
}
onFlickEnded: {
if ( atYBeginning && refreshFlik )
{
// updateDataFromServer(); // it's a function to update the data from server
console.log("After getting the updated data refresh the page");
// here after getting the data from server I need to refresh the whole page
busy.running=false
}
}
}
BusyIndicator{
id:busy
anchors.centerIn: parent
running: false
}
}
So This code is working fine, but one thing which i'm lacking at is not able to refresh the data on the screen. Suppose on Screen It shows "Hello world", but after I pull down the screen after getting the data from my server that text changes to something else according to the data i get from server.

Answer 1

If you want to reload the whole thing I think its better you use a Component and loader as below
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Component{
id:toLoad
Page {
height: 460
width: 300
id: app
signal reloadComponent()
property var refreshFlik: ""
Flickable {
id:flick
anchors.fill: parent
contentHeight : rect.height
Rectangle{
id:rect
color: "#55ff00ff"
height: 540
width: 300
Text{
id:text
anchors.centerIn: parent
text:"Hello World"
}
}
onFlickStarted: {
refreshFlik = atYBeginning
busy.running=true
}
onFlickEnded: {
if ( atYBeginning && refreshFlik )
{
// updateDataFromServer(); // it's a function to update the data from server
console.log("After getting the updated data refresh the page");
// here after getting the data from server I need to refresh the whole page
busy.running=false
}
reloadComponent()
}
}
BusyIndicator{
id:busy
anchors.centerIn: parent
running: false
}
Component.onCompleted:{
console.log("loaded")
}
}
}
Loader{
id:ldr
sourceComponent: toLoad
Connections{
target:ldr.item
onReloadComponent:{
console.log("reloading")
ldr.sourceComponent=undefined
ldr.sourceComponent=toLoad
}
}
}
}