Serving UI via HTTP

通过HTTP为用户界面提供服务

To load a simple user interface via HTTP we need to have a web-server, which serves the UI documents. We start off with our own simple web-server using a python one-liner. But first, we need to have our demo user interface. For this, we create a small RemoteComponent.qml file in our project folder and create a red rectangle inside.

为了通过HTTP加载一个简单的用户界面，我们需要一个提供UI文档的web服务器。我们从使用python one-liner的简单web服务器开始。但首先，我们需要有我们的演示用户界面。为此，我们创建了一个小的RemoteComponent.qml文件，并在其中创建一个红色矩形。

// RemoteComponent.qml
import QtQuick

Rectangle {
    width: 320
    height: 320
    color: '#ff0000'
}

To serve this file we can start a small python script:

为了提供这个文件，我们可以启动一个小的python脚本：

cd <PROJECT>
python -m http.server 8080

Now our file should be reachable via http://localhost:8080/RemoteComponent.qml. You can test it with:

现在我们的文件应该可以通过http://localhost:8080/RemoteComponent.qml.您可以通过以下方式进行测试：

curl http://localhost:8080/RemoteComponent.qml

Or just point your browser to the location. Your browser does not understand QML and will not be able to render the document through.

或者只需将浏览器指向该位置。您的浏览器不理解QML，将无法通过呈现文档。

Hopefully, Qt 6 provides such a browser in the form of the qml binary. You can directly load a remote QML document by using the following command:

Qt6有望以qml二进制文件的形式提供这样的浏览器。您可以使用以下命令直接加载远程QML文档：

qml http://localhost:8080/RemoteComponent.qml

Sweet and simple.

完美而简洁。

Another way of importing a remote QML document is to dynamically load it using QML ! For this, we use a Loader element to retrieve for us the remote document.

导入远程QML文档的另一种方法是使用QML动态加载它！为此，我们使用Loader元素类型为我们检索远程文档。

// LocalHostExample.qml
import QtQuick

Loader {
    id: root
    source: 'http://localhost:8080/RemoteComponent.qml'
    onLoaded: {
        root.width = root.item.width  // qmllint disable
        root.height = root.item.height  // qmllint disable
    }
}

Now we can ask the qml executable to load the local LocalHostExample.qml loader document.

现在我们可以要求qml可执行文件加载本地LocalHostExample.qml加载器文档。

qml LocalHostExample.qml

// GistExample.qml
import QtQuick

Loader {
    id: root
    source: 'https://gist.github.com/jryannel/7983492/raw'
    onLoaded: {
        root.width = root.item.width  // qmllint disable
        root.height = root.item.height  // qmllint disable
    }
}

To load another file over the network from RemoteComponent.qml, you will need to create a dedicated qmldir file in the same directory on the server. Once done, you will be able to reference the component by its name.

通过网络从RemoteComponent.qml加载另一个文件，您需要在服务器的同一目录中创建一个专用qmldir文件。完成后，您将能够通过其名称引用组件。

Networked Components

网络组件

Let us create a small experiment. We add to our remote side a small button as a reusable component.

让我们做一个小实验。我们在远程添加了一个小按钮作为可重用组件。

Here's the directory structure that we will use:

下面是我们将使用的目录结构：

./src/SimpleExample.qml
./src/remote/qmldir
./src/remote/Button.qml
./src/remote/RemoteComponent.qml

Our SimpleExample.qml is the same as our previous main.qml example:

我们的SimpleExample.qml与我们之前的main.qml示例相同：

import QtQuick

Loader {
    id: root
    anchors.fill: parent
    source: 'http://localhost:8080/RemoteComponent.qml'
    onLoaded: {
        root.width = root.item.width  // qmllint disable
        root.height = root.item.height  // qmllint disable
    }
}

In the remote directory, we will update the RemoteComponent.qml file so that it uses a custom Button component:

在远程目录remote中，我们将更新RemoteComponent.qml文件，以便使用自定义按钮组件Button：

// remote/RemoteComponent.qml
import QtQuick

Rectangle {
    width: 320
    height: 320
    color: '#ff0000'

    Button {
        anchors.centerIn: parent
        text: qsTr('Click Me')
        onClicked: Qt.quit()
    }
}

As our components are hosted remotely, the QML engine needs to know what other components are available remotely. To do so, we define the content of our remote directory within a qmldir file:

由于我们的组件是远程托管的，所以QML引擎需要知道哪些其他组件是远程可用的。为此，我们在qmldir文件中定义远程目录的内容：

# qmldir
Button 1.0 Button.qml

And finally we will create our dummy Button.qml file:

最后，我们将创建虚拟Button.qml文件：

// remote/Button.qml
import QtQuick.Controls

Button {
    
}

We can now launch our web-server (keep in mind that we now have a remote subdirectory):

我们现在可以启动web服务器（请记住，我们现在有一个远程子目录remote）：

cd src/serve-qml-networked-components/
python -m http.server --directory ./remote 8080

And remote QML loader:

远程QML加载程序：

qml SimpleExample.qml

Importing a QML components directory

导入QML组件目录

By defining a qmldir file, it's also possible to directly import a library of components from a remote repository. To do so, a classical import works:

通过定义qmldir文件，还可以直接从远程存储库导入组件库。要做到这一点，一个经典的导入是有效的：

import QtQuick
import "http://localhost:8080" as Remote

Rectangle {
    width: 320
    height: 320
    color: 'blue'

    Remote.Button {
        anchors.centerIn: parent
        text: qsTr('Quit')
        onClicked: Qt.quit()
    }
}

 示例源码下载