Ćwiczenia 4 - programowanie aplikacji mobilnych

1. Zadanie - refaktor What The Hex
2. Jak obsługiwać HTTP w QML?
3. Jak obsługiwać StackView w QML?

1. Zadanie - refaktor What The Hex

Aplikacja powinna korzystać z StackView i mieć następujące widoki:

Ekran powitalny
Ekran gry
Ekran „Wygrałeś”
Dostępny z ekranu powitalnego ekran z informacją o najnowszej wersji wczytywanej po HTTP z https://up.kuba-orlik.name/informatyka-stosowana-3/programowanie-aplikacji-mobilnych/wersja.txt

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

Ćwiczenia 4 - programowanie aplikacji mobilnych

Table of Contents

1. Zadanie - refaktor What The Hex

2. Jak obsługiwać HTTP w QML?

3. Jak obsługiwać StackView w QML?