Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › AppFlickable, Repeater, Model, Delegate. Can anyone explain to me step by step?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18821

    Niyazi

    Hi,

    I use AppFlickable, Repeater, Model, Delegate. I found few examples and trying to learn something from all. So I made a single project using AppFlickable, Repeater, Model, Delegate as something with my understanding. To me it is a good example. But I need someone to explain to me step by step looking me example. If I can get better way do things I will be glad to learn.

    Here is my live weather code:

     

    
    import Felgo 3.0
    import QtQuick 2.9
    import QtQuick.Layouts 1.3
    
    import "../singletons"
    
    Item {
        id: myWeatherItem
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: CbStyle.appWidth - 25
        height:  CbStyle.appHeight * 0.27
        anchors.leftMargin: dp(5)
        anchors.rightMargin: dp(5)
    
        Text {
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: sp(30)
            font.bold: true
            color: "white"
            text: "....."
        }
    
        Rectangle {
            anchors.fill: parent
            color: "white"
            opacity: 0.1
        }
    
        AppFlickable {
            id: myFlickable
            anchors.fill: parent
            flickableDirection: Flickable.HorizontalFlick
    
            Column {
                Repeater {
                    model: ["1"]
                    Row {
                        onHeightChanged: myFlickable.contentHeight = height
                        onWidthChanged: myFlickable.contentWidth = width
                        spacing: 10
                        anchors.horizontalCenter: parent.horizontalCenter
                        Repeater {
                            model: ListModel { id: modelData }
                            delegate: Item {
                                id: myDelegate
                                width: myWeatherItem.width / 5 
                                height: myWeatherItem.height
    
                                // Content
                                ColumnLayout {
                                    anchors.fill: parent
                                    anchors.topMargin: 10
                                    anchors.bottomMargin: 10
    
                                    // day
                                    Text {
                                        id: mDay
                                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                                        anchors.top: parent.top
                                        anchors.topMargin: 100
                                        font.pixelSize: sp(14)
                                        color: "#ffffff"
                                        text:  model.day
                                    }
    
                                    Text {
                                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                                        anchors.top: mDay.bottom
                                        anchors.topMargin: 10
                                        font.pixelSize: sp(8)
                                        color: "#ffffff"
                                        text:  model.date
                                    }
    
                                    // icon
                                    Image {
                                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                                        anchors.centerIn: parent
                                        scale: 1.5
                                        source: model.iconText
                                        clip: true
                                    }
    
                                    // temperature
                                    Text {
                                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                                        anchors.bottom: parent.bottom
                                        anchors.bottomMargin: 100
                                        font.pixelSize: sp(14)
                                        font.bold: true
                                        color: "#ffffff"
                                        text: "%1ËšC".arg(model.temperature)
                                    }
    
                                    // seperator
                                    Rectangle {
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.right: parent.right
                                        width: 1
                                        height: (myWeatherItem.height * 0.75)
                                        color: "lightgrey"
                                    }
                                } // Contents
                            } // delegate: Item
    
                            Component.onCompleted: {
                                var request = new XMLHttpRequest();
                                request.open('GET', "https://query.yahooapis.com/v1/public/yql?qid=************************')&format=json", true);
                                request.onreadystatechange = function() {
                                    if (request.readyState === XMLHttpRequest.DONE) {
                                        if (request.status && request.status === 200) {
                                            var result = JSON.parse(request.responseText)
                                            var list = result.query.results.channel.item.forecast 
                                            result = ""
                                            modelData.clear()
                                            for(var i in list) {
                                                var getStatusIcon = list[i].code
                                                
                                                modelData.append({ "day": list[i].day,
                                                                   "date": list[i].date,
                                                                   "iconText": "../../assets/weather/" + getStatusIcon + ".png",
                                                                   "temperature": list[i].high
                                                                 });
                                                getStatusIcon = ""
                                            } // for
                                        }
                                        else {
                                            console.log("WeatherLog:", request.status, request.statusText)
                                        }
                                    } // if (request.readyState
                                } // function
                                request.send();
                            }
    
                        } // Repeater
                    } // Row
                } // Repeater
            } // Column
        } // AppFlickable
    }
    
    

     

    #18896

    Günther
    Felgo Team

    The code looks ok!

    You do not really need the top-level Repeater if you set the model to [“1“] (one element).
    Best,
    Günther

    #18898

    Niyazi

    Thanks Gunther 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded