Ćwiczenia 4 - programowanie aplikacji mobilnych

Table of Contents

1. Zadanie - refaktor What The Hex (10pkt)

Przepisz aplikację What The Hex, dodająco do niej opisane poniżej funkcje. Aplikacja powinna korzystać z StackView i mieć następujące widoki:

2. Jak obsługiwać HTTP w QML?

Szerzej jest to wytłumaczone w dokumentacji QML: https://www.qt.io/product/qt6/qml-book/ch12-networking-http-requests

Poniżej krótki poglądowy snippet:

var xhr = new XMLHttpRequest();
msg.text = "";
xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            text = xhr.responseText;
            // tutaj można coś zrobić z odpowiedzią, która jest przechowywana w zmiennej text
        }
    }
}

xhr.open("GET", "data.xml");
xhr.send();

3. Jak obsługiwać StackView w QML?

w main.qml:

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    StackView {
        id: stack
        anchors.fill: parent
        initialItem: Qt.createComponent("MainView.qml")
    }
}

w MainView.qml:

import QtQuick 2.0
import QtQuick.Controls 2.0

Item {
    anchors.fill: parent

    Text {
        x: 281
        y: 155
        text: "hello, world"
    }

    Button {
        x: 238
        y: 227
        text: "Go to secondary view"

        onClicked: {
            stack.push("SecondaryView.qml")
        }
    }
}

w SecondaryView.qml:

import QtQuick 2.0
import QtQuick.Controls 2.15

Item {
    Text {
        x: 268
        y: 166
        text: "Secondary view"
    }

    Button {
        x: 280
        y: 227
        text: "go back"
        onClicked: {
            stack.pop()
        }
    }
}

Jeżeli korzystasz z QT 6.0, to dodatkowe pliki .qml należy dodać w pliku <nazwaProjektu>.pro, w pozycji resources.files:

resources.files = main.qml MainView.qml SecondaryView.qml

Author: Jan Orlik

Created: 2022-06-08 Wed 11:29

Validate