From 680d9abb106278a831fea81d85780821b18e3db8 Mon Sep 17 00:00:00 2001 From: Kai Koehne Date: Thu, 31 Aug 2017 13:40:21 +0200 Subject: Make chatclient-qml designer-friendly Change-Id: Ibebe78a8bf2ec0147ece31c5895a78415f12c855 Reviewed-by: Milian Wolff --- .../webchannel/chatclient-qml/LoginForm.ui.qml | 83 ++++++++++++++++ examples/webchannel/chatclient-qml/MainForm.ui.qml | 85 ++++++++++++++++ .../webchannel/chatclient-qml/chatclient-qml.pro | 2 + .../webchannel/chatclient-qml/qmlchatclient.qml | 108 ++++++++------------- 4 files changed, 209 insertions(+), 69 deletions(-) create mode 100644 examples/webchannel/chatclient-qml/LoginForm.ui.qml create mode 100644 examples/webchannel/chatclient-qml/MainForm.ui.qml diff --git a/examples/webchannel/chatclient-qml/LoginForm.ui.qml b/examples/webchannel/chatclient-qml/LoginForm.ui.qml new file mode 100644 index 0000000..c8045e5 --- /dev/null +++ b/examples/webchannel/chatclient-qml/LoginForm.ui.qml @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Copyright (C) 2016 basysKom GmbH, author Bernd Lamecker +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebChannel module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.4 +import QtQuick.Controls 2.2 +import QtQuick.Layouts 1.0 + +Item { + property alias userName: userName + property alias loginButton: loginButton + property alias nameInUseError: nameInUseError + + ColumnLayout { + anchors.right: parent.right + anchors.left: parent.left + anchors.top: parent.top + + TextField { + id: userName + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + + Button { + id: loginButton + text: "Login" + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + + Label { + id: nameInUseError + text: "Name already in use" + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + } +} diff --git a/examples/webchannel/chatclient-qml/MainForm.ui.qml b/examples/webchannel/chatclient-qml/MainForm.ui.qml new file mode 100644 index 0000000..ff881df --- /dev/null +++ b/examples/webchannel/chatclient-qml/MainForm.ui.qml @@ -0,0 +1,85 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Copyright (C) 2016 basysKom GmbH, author Bernd Lamecker +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtWebChannel module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtQuick.Controls 2.2 +import QtQuick.Layouts 1.3 + +Item { + property alias chat: chat + property alias userlist: userlist + property alias message: message + + GridLayout { + anchors.fill: parent + rows: 2 + columns: 2 + + Text { + id: chat + Layout.fillWidth: true + Layout.fillHeight: true + } + + Text { + id: userlist + width: 150 + Layout.fillHeight: true + } + + TextField { + id: message + height: 50 + Layout.fillWidth: true + Layout.columnSpan: 2 + } + } +} diff --git a/examples/webchannel/chatclient-qml/chatclient-qml.pro b/examples/webchannel/chatclient-qml/chatclient-qml.pro index 185ffde..34fc08a 100644 --- a/examples/webchannel/chatclient-qml/chatclient-qml.pro +++ b/examples/webchannel/chatclient-qml/chatclient-qml.pro @@ -1,6 +1,8 @@ TEMPLATE = aux exampleassets.files += \ + LoginForm.ui.qml \ + MainForm.ui.qml \ qmlchatclient.qml exampleassets.path = $$[QT_INSTALL_EXAMPLES]/webchannel/chatclient-qml diff --git a/examples/webchannel/chatclient-qml/qmlchatclient.qml b/examples/webchannel/chatclient-qml/qmlchatclient.qml index 1bc67ec..47f5f59 100644 --- a/examples/webchannel/chatclient-qml/qmlchatclient.qml +++ b/examples/webchannel/chatclient-qml/qmlchatclient.qml @@ -61,6 +61,7 @@ ApplicationWindow { id: root property var channel + property string loginName: loginUi.userName.text title: "Chat client" width: 640 @@ -101,22 +102,23 @@ ApplicationWindow { //connect to the changed signal of the userList property ch.objects.chatserver.userListChanged.connect(function(args) { - userlist.text = ''; + mainUi.userlist.text = ''; ch.objects.chatserver.userList.forEach(function(user) { - userlist.text += user + '\n'; + mainUi.userlist.text += user + '\n'; }); }); //connect to the newMessage signal ch.objects.chatserver.newMessage.connect(function(time, user, message) { - chat.text = chat.text + "[" + time + "] " + user + ": " + message + '\n'; + var line = "[" + time + "] " + user + ": " + message + '\n'; + mainUi.chat.text = mainUi.chat.text + line; }); //connect to the keep alive signal ch.objects.chatserver.keepAlive.connect(function(args) { - if (loginName.text !== '') + if (loginName !== '') //and call the keep alive response method as an answer - ch.objects.chatserver.keepAliveResponse(loginName.text); + ch.objects.chatserver.keepAliveResponse(loginName); }); }); @@ -126,86 +128,54 @@ ApplicationWindow { } } - GridLayout { - id: grid - columns: 2 + MainForm { + id: mainUi anchors.fill: parent - Text { - id: chat - - text: "" - Layout.fillHeight: true - Layout.fillWidth: true - } - - Text { - id: userlist - - text: "" - width: 150 - Layout.fillHeight: true - } - TextField { - id: message - - height: 50 - Layout.columnSpan: 2 - Layout.fillWidth: true - + Connections { + target: mainUi.message onEditingFinished: { - if (message.text.length) { + if (mainUi.message.text.length) { //call the sendMessage method to send the message - root.channel.objects.chatserver.sendMessage(loginName.text, message.text); + root.channel.objects.chatserver.sendMessage(loginName, + mainUi.message.text); } - message.text = ''; + mainUi.message.text = ''; } } } - Window { id: loginWindow title: "Login" modality: Qt.ApplicationModal - - TextField { - id: loginName - - anchors.top: parent.top - anchors.horizontalCenter: parent.horizontalCenter - } - - Button { - id: loginButton - - anchors.top: loginName.bottom - anchors.horizontalCenter: parent.horizontalCenter - text: "Login" - - onClicked: { - //call the login method - root.channel.objects.chatserver.login(loginName.text, function(arg) { - //check the return value for success - if (arg === true) { - loginError.visible = false; - loginWindow.close(); - } else { - loginError.visible = true; - } - }); + width: 300 + height: 200 + + LoginForm { + id: loginUi + anchors.fill: parent + + nameInUseError.visible: false + + Connections { + target: loginUi.loginButton + + onClicked: { + //call the login method + root.channel.objects.chatserver.login(loginName, function(arg) { + //check the return value for success + if (arg === true) { + loginUi.nameInUseError.visible = false; + loginWindow.close(); + } else { + loginUi.nameInUseError.visible = true; + } + }); + } } } - - Text { - id: loginError - - anchors.top: loginButton.bottom - anchors.horizontalCenter: parent.horizontalCenter - text: "Name already in use" - visible: false - } } MessageDialog { -- cgit v1.2.1