[Niyazi]

Hi,

As shown below. In my MainWeatherLayout { } I am calling some yahoo weather json data. When my app starts everything loads very fast but the weather json takes some time to load. The Weather panels starts empty and when I complete the json data it loads data into my main weather panel.

I am thinking to get these data via Main.qml onInitTheme. Am I doing right, or should I load xml and json data via C++ and then load the main.qml.

I don’t know what is the best way to do it.

So, what is the best way to load heavy json or xml data before App starts?

 

Main.qml

import Felgo 3.0
import QtQuick 2.0

App {
    id: app

    onInitTheme: {
        Theme.platform = "ios"
        uiScale: 1  // 1 for Mobiles 2 for Desktops
        screenWidth: 0
        Theme.colors.statusBarStyle = Theme.colors.statusBarStyleHidden
    }

    FontLoader {
        id: normalFont;
        source: "../assets/fonts/Lato-Light.ttf"
    }


    Page {
        id: mainPage

        // (1): Layout: Photo Slide
        MainPhotoSlideLayout {
            id: myPhtoSlide
            anchors.fill: parent
        }

        // (2): Layout: Star Background
        MainBackgroundLayout {
            id: myStarBackground
            anchors.fill: parent
        }

        // (3): Layout: Top Bar
        MainTopLayout {
            id: myTop
            anchors.top: parent.top
            //anchors.topMargin: dp(5)
        }

        // (4): Layout: Logo
        MainLogoLayout {
            id: myLogo
            anchors.top: myTop.bottom
            anchors.topMargin: dp(10)
        }

        // (5): Layout: User Photo
        MainUserPhotoLayout {
            id: myUserPhoto
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: myLogo.bottom
            anchors.topMargin: dp(50)
            width: parent.width
        }

        // (6) Layout: Login
        MainLoginLayout {
            id: myLogin
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: myUserPhoto.bottom
            anchors.topMargin: dp(120)
            width: parent.width
        }

        // (7) Layout: Currency
        MainDailyExcganeRateLayout {
            id: myExcgange
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: myLogin.bottom
            anchors.topMargin: dp(80)
            width: parent.width - dp(40)
        }

        // (8) Layout: Weather
        MainWeatherLayout {
            id: myWeather
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: myExcgange.bottom
            anchors.topMargin: dp(10)
            width: parent.width - dp(40)
        }

    } // PAGE
} // APP

 

[GüntherFelgo Team]

Hi,

It doesn’t matter if you load the JSON data before or after the app start. If the request to load the data takes some time, the only difference will be:

• Either your application takes long during startup (while data is loaded in e.g. c++), then the UI is shown.
• Or your application starts fast, the UI is shown, but it takes some to show the data then. (while it loads).

From a user perspective, it is best to keep startup time fast and show your app UI immediately. You should then display a loading page in QML or any other form of indicator so the user knows that data is being fetched at the moment.

It would also be best to keep loaded data light-weight if possible to keep loading time to a minimum. Another option would be to provide an offline version of your data with your app, which is shown initially, or to e.g. cache the loaded data after loading it once to speed up further app starts after the first one.

As an example, the Qt World Summit demo comes with a Loading Screen at startup and also uses a DataModel singleton for data handling, loading and caching.

Best,
Günther

[Niyazi]

Thanks Günther,

Its a yah*o weather api. It takes some time to load (today and next 5 days). The Page and all the items load very fast expect weather. After the page loads it takes 3-4 second to load the weather items (picture, text etc). So Weather panel shows empty and 3-4 seconds later it shoes the data.  I will try to check Qt World Summit demo.

[Niyazi]

Wowwwwwwww 🙂 Hi Günther, Thy demo very extensive. I am afraid, I will be lost.

I have too many question to ask. But let me study a bit.

For Short Questions:

1. In QtWSMain.qml the onBackButtonPressedGlobally has red underline with error (invalid property name (M16)… I am not sure why I get it.
2. qml has a loader with comment  // check for available app updates.  In future should I use this for my app update?
3. qml and DataModel.qml has pragma Singleton. Also, I can see there is a #include “diskcachefactory.h” and some cpp file. I am getting very confuse between Felgo and QML jump for basic data integration between QML and CPP. I will check the demo to learn. Do Felgo has some basic tutorial or example C++ and QML integration? Or is the demo covers it all?
4. An last, my main question is that if I get some confusion on the demo to ask a question should I use this post or should I open new questions?

 

 

[AlexFelgo Team]

I would just show a loading animation/spinner/hint in the place where the weather data is loaded. If your other items are loaded instantly, this will be the best experience for the user. You can control the visibility of the loading animation just like I showed you in the other thread, regarding the AppActivityIndicator, just hide it as soon as the data is loaded.

The Qt World Summit app is too extensive for your use-case, don’t worry too much about the detailed implementation there.

Cheers,
Alex

[Niyazi]

Thanks Alex