diff options
| author | Michal Klocek <michal.klocek@qt.io> | 2016-06-13 13:14:32 +0200 |
|---|---|---|
| committer | Michal Klocek <michal.klocek@qt.io> | 2016-11-01 11:00:04 +0000 |
| commit | e08cb960ada1ad4f800785754ac8ed313c4f5264 (patch) | |
| tree | f84e3c4d63cf8484fc78fac5f8a9b4c4b768e8c3 /examples | |
| parent | 2fe08ddf9388598003cb3a30f30a2d18ab044969 (diff) | |
Add qtquick customdialog example
The example shows how to create and use custom dialogs
instead of webengine's default dialogs.
Task-number: QTBUG-56063
Change-Id: I440305b2d4357d2b47c6b5a1a821b25c71221aa2
Reviewed-by: Peter Varga <pvarga@inf.u-szeged.hu>
Diffstat (limited to 'examples')
39 files changed, 2434 insertions, 0 deletions
diff --git a/examples/examples.pro b/examples/examples.pro index 0e222de73..5a09213e5 100644 --- a/examples/examples.pro +++ b/examples/examples.pro @@ -2,6 +2,7 @@ TEMPLATE=subdirs qtHaveModule(webengine) { SUBDIRS += \ + webengine/customdialogs \ webengine/minimal \ webengine/quicknanobrowser } diff --git a/examples/webengine/customdialogs/MessageRectangle.qml b/examples/webengine/customdialogs/MessageRectangle.qml new file mode 100644 index 000000000..e0ace7ca5 --- /dev/null +++ b/examples/webengine/customdialogs/MessageRectangle.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 + +Rectangle { + property alias text: messageText.text + width: parent.width + height: 30 + visible: false + color: "#80c342" + Text { + id: messageText + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.pointSize: 12 + } +} diff --git a/examples/webengine/customdialogs/SwitchButton.qml b/examples/webengine/customdialogs/SwitchButton.qml new file mode 100644 index 000000000..75a2c6452 --- /dev/null +++ b/examples/webengine/customdialogs/SwitchButton.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 1.4 as Controls +import QtQuick.Layouts 1.3 + +Item { + width: parent.width + height: 40 + property alias checked: switcher.checked + RowLayout { + anchors.centerIn: parent + Text { + text: qsTr("Use default dialogs") + font.pointSize: 12 + } + Controls.Switch { + id: switcher + checked: true + } + } +} diff --git a/examples/webengine/customdialogs/WebView.qml b/examples/webengine/customdialogs/WebView.qml new file mode 100644 index 000000000..133825a25 --- /dev/null +++ b/examples/webengine/customdialogs/WebView.qml @@ -0,0 +1,125 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 QtWebEngine 1.4 + +WebEngineView { + + url: "qrc:/index.html" + property bool useDefaultDialogs: true + signal openForm(var form) + + onContextMenuRequested: function(request) { + // we only show menu for links with #openMenu + if (!request.linkUrl.toString().endsWith("#openMenu")) { + request.accepted = true; + return; + } + // return early to show default menu + if (useDefaultDialogs) + return; + + request.accepted = true; + openForm({item: Qt.resolvedUrl("forms/Menu.qml"), + properties: {"request": request}}); + } + + onAuthenticationDialogRequested: function(request) { + if (useDefaultDialogs) + return; + + request.accepted = true; + openForm({item: Qt.resolvedUrl("forms/Authentication.qml"), + properties: {"request": request}}); + } + + onJavaScriptDialogRequested: function(request) { + if (useDefaultDialogs) + return; + + request.accepted = true; + openForm({item: Qt.resolvedUrl("forms/JavaScript.qml"), + properties: {"request": request}}); + } + + onColorDialogRequested: function(request) { + if (useDefaultDialogs) + return; + + request.accepted = true; + openForm({item: Qt.resolvedUrl("forms/ColorPicker.qml"), + properties: {"request": request}}); + } + + onFileDialogRequested: function(request) { + if (useDefaultDialogs) + return; + + request.accepted = true; + openForm({item: Qt.resolvedUrl("forms/FilePicker.qml"), + properties: {"request": request}}); + + } + + onFormValidationMessageRequested: function(request) { + switch (request.type) { + case FormValidationMessageRequest.RequestTypeShow: + if (useDefaultDialogs) + return; + + request.accepted = true; + validationMessage.text = request.text; + validationMessage.y = request.anchor.y + request.anchor.height + 10; + validationMessage.visible = true; + break; + case FormValidationMessageRequest.RequestTypeMove: + break; + case FormValidationMessageRequest.RequestTypeHide: + validationMessage.visible = false; + break; + } + } + + MessageRectangle { + id: validationMessage + z: 1 + } +} diff --git a/examples/webengine/customdialogs/customdialogs.pro b/examples/webengine/customdialogs/customdialogs.pro new file mode 100644 index 000000000..5861f3af7 --- /dev/null +++ b/examples/webengine/customdialogs/customdialogs.pro @@ -0,0 +1,18 @@ +QT += webengine + +HEADERS += \ + server.h + +SOURCES += \ + main.cpp \ + server.cpp + +RESOURCES += \ + customdialogs.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/webengine/customdialogs +INSTALLS += target + +qtHaveModule(widgets) { + QT += widgets # QApplication is required to get native styling with QtQuickControls +} diff --git a/examples/webengine/customdialogs/customdialogs.qrc b/examples/webengine/customdialogs/customdialogs.qrc new file mode 100644 index 000000000..5ab5b11cd --- /dev/null +++ b/examples/webengine/customdialogs/customdialogs.qrc @@ -0,0 +1,24 @@ +<RCC> + <qresource prefix="/"> + <file>forms/AuthenticationForm.ui.qml</file> + <file>forms/Authentication.qml</file> + <file>forms/Button.qml</file> + <file>forms/ColorCell.qml</file> + <file>forms/ColorPickerForm.ui.qml</file> + <file>forms/ColorPicker.qml</file> + <file>forms/FilePickerForm.ui.qml</file> + <file>forms/FilePicker.qml</file> + <file>forms/FileRow.qml</file> + <file>forms/JavaScriptForm.ui.qml</file> + <file>forms/JavaScript.qml</file> + <file>forms/MenuForm.ui.qml</file> + <file>forms/Menu.qml</file> + <file>icon.svg</file> + <file>index.html</file> + <file>main.qml</file> + <file>MessageRectangle.qml</file> + <file>style.css</file> + <file>SwitchButton.qml</file> + <file>WebView.qml</file> + </qresource> +</RCC> diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png Binary files differnew file mode 100644 index 000000000..2bde8bd8e --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png Binary files differnew file mode 100644 index 000000000..ce358fca0 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png Binary files differnew file mode 100644 index 000000000..a51d1bdd3 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color2.png b/examples/webengine/customdialogs/doc/images/customdialogs-color2.png Binary files differnew file mode 100644 index 000000000..3b0b2e986 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-color2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png Binary files differnew file mode 100644 index 000000000..0ff39bf38 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file2.png b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png Binary files differnew file mode 100644 index 000000000..e56078c44 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-menu.png b/examples/webengine/customdialogs/doc/images/customdialogs-menu.png Binary files differnew file mode 100644 index 000000000..3409c951c --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-menu.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png Binary files differnew file mode 100644 index 000000000..988b4deea --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png Binary files differnew file mode 100644 index 000000000..085339378 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-validation1.png b/examples/webengine/customdialogs/doc/images/customdialogs-validation1.png Binary files differnew file mode 100644 index 000000000..38fa86235 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-validation1.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-validation2.png b/examples/webengine/customdialogs/doc/images/customdialogs-validation2.png Binary files differnew file mode 100644 index 000000000..247d2711b --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-validation2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs.png b/examples/webengine/customdialogs/doc/images/customdialogs.png Binary files differnew file mode 100644 index 000000000..13322d2f6 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs.png diff --git a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc new file mode 100644 index 000000000..f5a18b591 --- /dev/null +++ b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc @@ -0,0 +1,337 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** 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 http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example webengine/customdialogs + \title WebEngine Qt Quick Custom Dialogs Example + \ingroup webengine-examples + \brief Customizes UI elements of Qt WebEngine's dialogs + + \image customdialogs.png + + A web page might request dialogs for various purposes, such as + authentication, picking colors, choosing files, and responding to JavaScript + alerts, confirmation requests, and prompts. + + \e {Custom Dialogs} demonstrates how to use WebEngine dialog request objects + to implement custom dialogs for use instead of the default dialogs. + + \include examples-run.qdocinc + + \section1 UI Elements of WebEngineView + + In this example, we create a simple \c index.html page that contains buttons + and text fields for triggering a context menu and the following dialogs: + + \list + \li HTTP Authentication Dialog + \li Proxy Authentication Dialog + \li JavaScript Alert, Confirm, and Prompt Dialogs + \li Color Picker Dialog + \li File Picker Dialog + \li Form Validation Message + \endlist + + \section1 Triggering Dialogs + + The technical details on how the dialogs are triggered are beyond the scope + of this example. The only thing worth mentioning is that we fire up the + localhost TCP server when the example starts up. The server is needed to + get proxy and HTTP authentication requests. + + \section1 Custom Dialogs + + The custom dialogs are just \e {Qt Quick Designer UI Forms} without any + business logic. The point here is to present the glue code that is required + to display the custom dialog for a particular web engine dialog or a menu + request. + + \section1 Creating the Main Window + + In \c main.cpp, we initialize the WebEngine the same way as in the + \l {WebEngine Qt Quick Minimal Example}: + + \quotefromfile webengine/customdialogs/main.cpp + \skipto main + \printuntil } + + In addition, we set up a proxy and a TCP server to be able to simulate proxy + and HTTP authetication requests. + + In \c main.qml, we create a top level window, which contains a StackView + with a SwitchButton and a WebView: + + \quotefromfile webengine/customdialogs/main.qml + \skipto Window + \printuntil Component + \printuntil } + \printline } + + \section1 Handling Web Engine Requests + + In this example, we implement the handling of the following web engine + requests: + + \list + \li ContextMenuRequest + \li AuthenticationDialogRequest + \li JavaScriptDialogRequest + \li ColorDialogRequest + \li FileDialogRequest + \li FormValidationMessageRequest + \endlist + + \section2 Context Menu Requests + + \l [QML]{ContextMenuRequest} is a request object that is passed as a + parameter of the WebEngineView::contextMenuRequested signal. We use the + \c onContextMenuRequested signal handler to handle requests for + \c #openMenu URL links: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onContextMenuRequested + \printuntil } + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFormValidationMessageRequested + \skipuntil } + \skipuntil } + \skipuntil } + \skipto } + \printline } + + The first text field from the top on our page triggers the request. Next, + we check whether we should use the default menu. If not, we accept the + request and switch the view to show the \c MenuForm: + + \image customdialogs-menu.png + + \quotefromfile webengine/customdialogs/forms/Menu.qml + \skipto MenuForm + \printuntil } + \printuntil } + + To keep things simple, we do not provide any logic on component completion, + and we simply close the form on any action. + + \section2 Authentication Dialog Requests + + \image customdialogs-auth1.png + + \l [QML]{AuthenticationDialogRequest} is a request object that is passed + as a parameter of the WebEngineView::authenticationDialogRequested signal: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onAuthenticationDialogRequested + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFormValidationMessageRequested + \skipuntil } + \skipuntil } + \skipuntil } + \skipto } + \printline } + + We use the \c onAuthenticationDialogRequested signal handler to check + whether we should use the default authentication dialog. If not, we accept + the request and switch the view to show the \c AuthenticationForm: + + \image customdialogs-auth2.png + + \quotefromfile webengine/customdialogs/forms/Authentication.qml + \skipto AuthenticationForm + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + + On component completion, we log the request type. The user can fill in the + credentials and click \uicontrol Login. We provide \c onClicked handlers to + accept or reject the authentication dialog. The TCP server on localhost does + not handle real authentication, and therefore we call \c rejectDialog() + instead of \c acceptDialog() also for the login button \c clicked signal. + + \section2 JavaScript Dialog Requests + + \image customdialogs-prompt1.png + + \l [QML]{JavaScriptDialogRequest} is a request object that is passed as a + parameter of the WebEngineView::javaScriptDialogRequested signal: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onJavaScriptDialogRequested + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFormValidationMessageRequested + \skipuntil } + \skipuntil } + \skipuntil } + \skipto } + \printline } + + We use the \c onJavaScriptDialogRequested signal handler to check + whether we should use the default JavaScript dialog. If not, we accept the + request and switch the view to show the \c JavaScriptForm: + + \image customdialogs-prompt2.png + + \quotefromfile webengine/customdialogs/forms/JavaScript.qml + \skipto JavaScriptForm + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + + On component completion, we customize the form based on the request type. + For a JavaScript prompt dialog we use \c dialogAccept() with the + \c prompt.text argument. + + \section2 Color Dialog Requests + + \image customdialogs-color1.png + + \l [QML]{ColorDialogRequest} is a request object that is passed as a + parameter of the WebEngineView::colorDialogRequested signal: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onColorDialogRequested + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFormValidationMessageRequested + \skipuntil } + \skipuntil } + \skipuntil } + \skipto } + \printline } + + We use the \c onColorDialogRequested signal handler to check whether + we should use the default color picker dialog. If not, we accept the request + and switch the view to show the \c ColorPickerForm: + + \image customdialogs-color2.png + + \quotefromfile webengine/customdialogs/forms/ColorPicker.qml + \skipto ColorPickerForm + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + + On component completion, we create callbacks for all the color cells. When + the user selects the color and clicks \c OK, we pass the selected color to + the \c dialogAccept() method. + + \section2 File Dialog Requests + + \image customdialogs-file1.png + + \l [QML]{FileDialogRequest} is a request object that is passed as a + parameter of the WebEngineView::fileDialogRequested signal: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onFileDialogRequested + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFormValidationMessageRequested + \skipuntil } + \skipuntil } + \skipuntil } + \skipto } + \printline } + + We use the \c onFileDialogRequested signal handler to check whether + we should use the default color picker dialog. If not, we accept the request + and switch the view to show the \c FilePickerForm: + + \image customdialogs-file2.png + + \quotefromfile webengine/customdialogs/forms/FilePicker.qml + \skipto FilePickerForm + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + \printuntil } + + On component completion, we create callbacks for selecting files. When the user selects a + file and clicks \c OK, we pass the selected file to the \c dialogAccept + method. + + \section2 Form Validation Message Requests + + \image customdialogs-validation1.png + + \l [QML]{FormValidationMessageRequest} is a request object that is passed as a + parameter of the WebEngineView::formValidationMessageRequested signal: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil url + \dots 4 + \skipto onFormValidationMessageRequested + \printuntil } + \printuntil } + \printuntil } + \skipto } + \printline } + + We use the \c onFormValidationMessageRequested signal handler to check + whether we should use the default message bubble. If not, we accept the + request and customize \c validationMessage. Depending on the type of the + request, we show, move, or hide the message. + + \image customdialogs-validation2.png +*/ diff --git a/examples/webengine/customdialogs/forms/Authentication.qml b/examples/webengine/customdialogs/forms/Authentication.qml new file mode 100644 index 000000000..8ee0a416f --- /dev/null +++ b/examples/webengine/customdialogs/forms/Authentication.qml @@ -0,0 +1,68 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 QtWebEngine 1.4 + +AuthenticationForm { + property QtObject request + signal closeForm() + + cancelButton.onClicked: { + request.dialogReject(); + closeForm(); + } + + loginButton.onClicked: { + request.dialogReject(); + closeForm(); + } + + Component.onCompleted: { + switch (request.type) { + case AuthenticationDialogRequest.AuthenticationTypeHTTP: + console.log("HTTP Authentication Required. Host says: " + request.realm); + break; + case AuthenticationDialogRequest.AuthenticationTypeProxy: + console.log("Proxy Authentication Required for: " + request.proxyHost); + break; + } + } +} diff --git a/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml b/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml new file mode 100644 index 000000000..0ba27acdb --- /dev/null +++ b/examples/webengine/customdialogs/forms/AuthenticationForm.ui.qml @@ -0,0 +1,161 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.Layouts 1.3 +import QtQuick.Controls 1.0 as Controls + +Item { + id: item1 + property alias cancelButton: cancelButton + property alias loginButton: loginButton + property alias userName: userName + property alias password: password + + ColumnLayout { + id: columnLayout + anchors.topMargin: 20 + anchors.top: parent.top + anchors.bottomMargin: 20 + anchors.bottom: parent.bottom + anchors.rightMargin: 20 + anchors.right: parent.right + anchors.leftMargin: 20 + anchors.left: parent.left + + Image { + id: image + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + source: "qrc:/icon.svg" + } + + Rectangle { + id: rectangle + height: 30 + anchors.rightMargin: 0 + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.left: parent.left + gradient: Gradient { + GradientStop { + position: 0 + color: "#25a6e2" + } + GradientStop { + color: "#188bd0" + } + } + + Text { + id: textArea + x: 54 + y: 5 + color: "#ffffff" + text: qsTr("Restricted Area") + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + } + + Item { + width: 40 + height: 40 + } + + Text { + id: userNameText + text: qsTr("Username:") + font.pointSize: 12 + } + + Controls.TextField { + id: userName + width: 300 + height: 22 + Layout.fillWidth: true + font.pointSize: 12 + } + + Text { + id: passwordText + text: qsTr("Password:") + font.pointSize: 12 + } + + Controls.TextField { + id: password + width: 300 + height: 26 + Layout.fillWidth: true + font.pointSize: 12 + } + + Item { + Layout.fillHeight: true + } + + RowLayout { + id: rowLayout + width: 100 + height: 100 + + Item { + Layout.fillWidth: true + } + + Button { + id: cancelButton + width: 90 + height: 30 + btnText: qsTr("Cancel") + btnBlue: false + } + + Button { + id: loginButton + width: 90 + height: 30 + btnText: qsTr("Login") + btnBlue: false + } + } + } +} diff --git a/examples/webengine/customdialogs/forms/Button.qml b/examples/webengine/customdialogs/forms/Button.qml new file mode 100644 index 000000000..8ae0865d1 --- /dev/null +++ b/examples/webengine/customdialogs/forms/Button.qml @@ -0,0 +1,98 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 + +Rectangle { + id: root + width: 200 + height: 30 + radius: 5 + property string btnText: "Name" + property bool btnEnable: true + property bool btnBlue: true + opacity: btnEnable ? 1.0 : 0.5 + signal clicked() + gradient: btnBlue ? blueButton : greenButton + Text { + id: textArea + x: 54 + y: 5 + color: "#ffffff" + text: parent.btnText + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.bold: false + } + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: { + if (btnEnable) + root.clicked(); + } + } + + Gradient { + id: blueButton + GradientStop { + position: 0 + color: "#25a6e2" + } + GradientStop { + position: mouseArea.pressed && root.btnEnable ? 0.7 :1 + color: "#188bd0" + } + } + + Gradient { + id: greenButton + GradientStop { + position: 0 + color: "#80c342" + } + GradientStop { + position: mouseArea.pressed && root.btnEnable ? 0.7 :1 + color: "#5fac18" + } + } +} diff --git a/examples/webengine/customdialogs/forms/ColorCell.qml b/examples/webengine/customdialogs/forms/ColorCell.qml new file mode 100644 index 000000000..197cca3d3 --- /dev/null +++ b/examples/webengine/customdialogs/forms/ColorCell.qml @@ -0,0 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 + +Rectangle { + id: rectangle + width: 50 + height: 50 + signal clicked() + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: rectangle.clicked(color) + } +} diff --git a/examples/webengine/customdialogs/forms/ColorPicker.qml b/examples/webengine/customdialogs/forms/ColorPicker.qml new file mode 100644 index 000000000..d4ab1abae --- /dev/null +++ b/examples/webengine/customdialogs/forms/ColorPicker.qml @@ -0,0 +1,68 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.[B" +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.4 + +ColorPickerForm { + property QtObject request + signal closeForm() + + okButton.onClicked: { + request.dialogAccept(colorPicker.color); + closeForm(); + } + + cancelButton.onClicked: { + request.dialogReject(); + closeForm(); + } + + function createCallback(color) { + return function() { colorPicker.color = color }; + } + + Component.onCompleted:{ + for (var i = 0; i < grid.children.length; i++) { + var cell = grid.children[i]; + cell.clicked.connect(createCallback(cell.color)); + } + colorPicker.color = request.color; + } +} diff --git a/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml b/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml new file mode 100644 index 000000000..d50f727f1 --- /dev/null +++ b/examples/webengine/customdialogs/forms/ColorPickerForm.ui.qml @@ -0,0 +1,225 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.Layouts 1.3 + +Item { + property alias cancelButton: cancelButton + property alias okButton: okButton + property string message: "Message" + property string title: "Title" + property alias blue1: blue1 + property alias grid: grid + property alias colorPicker: colorPicker + + ColumnLayout { + id: columnLayout + anchors.topMargin: 20 + anchors.top: parent.top + anchors.bottomMargin: 20 + anchors.bottom: parent.bottom + anchors.rightMargin: 20 + anchors.right: parent.right + anchors.leftMargin: 20 + anchors.left: parent.left + + Image { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + source: "qrc:/icon.svg" + } + + Rectangle { + height: 30 + anchors.rightMargin: 0 + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.left: parent.left + gradient: Gradient { + GradientStop { + position: 0 + color: "#25a6e2" + } + + GradientStop { + color: "#188bd0" + } + } + + Text { + id: title + x: 54 + y: 5 + color: "#ffffff" + text: qsTr("Select Color") + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + } + + Item { + width: 40 + height: 40 + } + + GridLayout { + id: grid + columns: 5 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + ColorCell { + id: blue1 + color: "#26d5f8" + } + ColorCell { + id: green1 + color: "#25f93d" + } + ColorCell { + id: red1 + color: "#f71111" + } + ColorCell { + id: yellow1 + color: "#faf23c" + } + ColorCell { + id: orange1 + color: "#ec8505" + } + ColorCell { + id: blue2 + color: "#037eaa" + } + ColorCell { + id: green2 + color: "#389a13" + } + ColorCell { + id: red2 + color: "#b2001b" + } + ColorCell { + id: yellow2 + color: "#caca03" + } + ColorCell { + id: orange2 + color: "#bb4900" + } + ColorCell { + id: blue3 + color: "#01506c" + } + ColorCell { + id: green3 + color: "#37592b" + } + ColorCell { + id: red3 + color: "#700113" + } + ColorCell { + id: yellow3 + color: "#848404" + } + + ColorCell { + id: orange3 + color: "#563100" + } + } + + Item { + width: 10 + height: 10 + } + + Rectangle { + width: 90 + height: 90 + color: "#000000" + radius: 4 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + Rectangle { + id: colorPicker + height: 80 + color: "#ffffff" + anchors.rightMargin: 5 + anchors.leftMargin: 5 + anchors.bottomMargin: 5 + anchors.topMargin: 5 + anchors.fill: parent + } + } + + Item { + Layout.fillHeight: true + } + + RowLayout { + id: rowLayout + width: 100 + height: 100 + + Item { + Layout.fillWidth: true + } + + Button { + id: cancelButton + width: 90 + height: 30 + btnText: qsTr("Cancel") + btnBlue: false + } + + Button { + id: okButton + width: 90 + height: 30 + btnText: qsTr("OK") + btnBlue: false + } + } + } +} diff --git a/examples/webengine/customdialogs/forms/FilePicker.qml b/examples/webengine/customdialogs/forms/FilePicker.qml new file mode 100644 index 000000000..e459a5ceb --- /dev/null +++ b/examples/webengine/customdialogs/forms/FilePicker.qml @@ -0,0 +1,81 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 + +FilePickerForm { + property QtObject request + property string selectedFile + signal closeForm() + + cancelButton.onClicked: { + request.dialogReject(); + closeForm(); + } + + okButton.onClicked: { + request.dialogAccept('/' + selectedFile); + closeForm(); + } + + function createCallback(fileIndex) { + return function() { + for (var i = 0; i < files.children.length; i++) { + var file = files.children[i]; + if (i === fileIndex) { + selectedFile = file.text; + file.selected = true; + } else { + file.selected = false; + } + } + } + } + + Component.onCompleted: { + selectedFile = request.defaultFileName; + for (var i = 0; i < files.children.length; i++) { + var file = files.children[i]; + file.clicked.connect(createCallback(i)); + if (file.text === selectedFile) + file.selected = true; + } + } +} diff --git a/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml b/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml new file mode 100644 index 000000000..67c9821b2 --- /dev/null +++ b/examples/webengine/customdialogs/forms/FilePickerForm.ui.qml @@ -0,0 +1,167 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.Layouts 1.3 + +Item { + property alias cancelButton: cancelButton + property alias okButton: okButton + property string message: "Message" + property string title: "Title" + property alias files: files + + ColumnLayout { + id: columnLayout + anchors.topMargin: 20 + anchors.top: parent.top + anchors.bottomMargin: 20 + anchors.bottom: parent.bottom + anchors.rightMargin: 20 + anchors.right: parent.right + anchors.leftMargin: 20 + anchors.left: parent.left + + Image { + id: image + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + source: "qrc:/icon.svg" + } + + Rectangle { + id: rectangle + height: 30 + anchors.rightMargin: 0 + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.left: parent.left + gradient: Gradient { + GradientStop { + position: 0 + color: "#25a6e2" + } + + GradientStop { + color: "#188bd0" + } + } + + Text { + id: title + x: 54 + y: 5 + color: "#ffffff" + text: qsTr("Select File") + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + } + + Item { + width: 40 + height: 40 + } + + ColumnLayout { + id: files + + FileRow { + id: filename1 + text: "example.qdoc" + } + + FileRow { + id: filename2 + text: "factory.cpp" + } + + FileRow { + id: filename3 + text: "index.html" + } + + FileRow { + id: filename4 + text: "main.qml" + } + + FileRow { + id: filename5 + text: "qt-logo.png" + } + + FileRow { + id: filename6 + text: "window.h" + } + } + + Item { + Layout.fillHeight: true + } + + RowLayout { + id: rowLayout + width: 20 + height: 100 + + Item { + Layout.fillWidth: true + } + + Button { + id: cancelButton + width: 90 + height: 30 + btnText: qsTr("Cancel") + btnBlue: false + } + + Button { + id: okButton + width: 90 + height: 30 + btnText: qsTr("OK") + btnBlue: false + } + } + } +} diff --git a/examples/webengine/customdialogs/forms/FileRow.qml b/examples/webengine/customdialogs/forms/FileRow.qml new file mode 100644 index 000000000..be0611323 --- /dev/null +++ b/examples/webengine/customdialogs/forms/FileRow.qml @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.Layouts 1.3 +import QtQuick.Controls 1.0 as Controls + +Item { + id: root + height: 30 + property string text: "Filename" + property bool selected: false + signal clicked() + + RowLayout { + id: fileRow + width: 100 + + Item { + id: item5 + width: 10 + height: 10 + } + + Rectangle { + id: rectangle2 + width: 10 + height: 10 + color: selected ? "#80c342" : "#25a6e2" + } + + Text { + id: filename + text: root.text + font.pointSize: 12 + } + } + + MouseArea { + id: mouseArea + width: 200 + height: 30 + onClicked: root.clicked() + } +} diff --git a/examples/webengine/customdialogs/forms/JavaScript.qml b/examples/webengine/customdialogs/forms/JavaScript.qml new file mode 100644 index 000000000..a97d8e0d4 --- /dev/null +++ b/examples/webengine/customdialogs/forms/JavaScript.qml @@ -0,0 +1,81 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 QtWebEngine 1.4 + +JavaScriptForm { + property QtObject request + signal closeForm() + + cancelButton.onClicked: { + request.dialogReject(); + closeForm(); + } + + okButton.onClicked: { + request.dialogAccept(prompt.text); + closeForm(); + } + + Component.onCompleted: { + switch (request.type) { + case JavaScriptDialogRequest.DialogTypeAlert: + cancelButton.visible = false; + title = qsTr("Alert"); + message = request.message; + prompt.text = ""; + prompt.visible = false; + break; + case JavaScriptDialogRequest.DialogTypeConfirm: + title = qsTr("Confirm"); + message = request.message; + prompt.text = ""; + prompt.visible = false; + break; + case JavaScriptDialogRequest.DialogTypePrompt: + title = qsTr("Prompt"); + message = request.message; + prompt.text = request.defaultText; + prompt.visible = true; + break; + } + } +} diff --git a/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml b/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml new file mode 100644 index 000000000..cc0c1908e --- /dev/null +++ b/examples/webengine/customdialogs/forms/JavaScriptForm.ui.qml @@ -0,0 +1,149 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.Layouts 1.3 +import QtQuick.Controls 1.0 as Controls + +Item { + id: item + property alias cancelButton: cancelButton + property alias okButton: okButton + property string message: "Message" + property string title: "Title" + property alias prompt: prompt + + ColumnLayout { + id: columnLayout + anchors.topMargin: 20 + anchors.top: parent.top + anchors.bottomMargin: 20 + anchors.bottom: parent.bottom + anchors.rightMargin: 20 + anchors.right: parent.right + anchors.leftMargin: 20 + anchors.left: parent.left + + Image { + id: image + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + source: "qrc:/icon.svg" + } + + Rectangle { + id: rectangle + height: 30 + anchors.rightMargin: 0 + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.left: parent.left + gradient: Gradient { + GradientStop { + position: 0 + color: "#25a6e2" + } + + GradientStop { + color: "#188bd0" + } + } + + Text { + id: title + x: 54 + y: 5 + color: "#ffffff" + text: qsTr("Title") + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + } + + Item { + width: 40 + height: 40 + } + + Text { + id: message + text: item.message + font.pointSize: 12 + } + + Controls.TextField { + id: prompt + width: 300 + height: 22 + Layout.fillWidth: true + font.pointSize: 12 + } + + Item { + Layout.fillHeight: true + } + + RowLayout { + id: rowLayout + width: 100 + height: 100 + + Item { + Layout.fillWidth: true + } + + Button { + id: cancelButton + width: 90 + height: 30 + btnText: qsTr("Cancel") + btnBlue: false + } + + Button { + id: okButton + width: 90 + height: 30 + btnText: qsTr("OK") + btnBlue: false + } + } + } +} diff --git a/examples/webengine/customdialogs/forms/Menu.qml b/examples/webengine/customdialogs/forms/Menu.qml new file mode 100644 index 000000000..1ba6a84b4 --- /dev/null +++ b/examples/webengine/customdialogs/forms/Menu.qml @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 + +MenuForm { + property QtObject request + signal closeForm() + + followLink.onClicked: closeForm() + back.onClicked: closeForm() + forward.onClicked: closeForm() + reload.onClicked: closeForm() + copyLinkUrl.onClicked: closeForm() + saveLink.onClicked: closeForm() + close.onClicked: closeForm() + + Component.onCompleted: { + back.btnEnable = false; + forward.btnEnable = false; + } +} diff --git a/examples/webengine/customdialogs/forms/MenuForm.ui.qml b/examples/webengine/customdialogs/forms/MenuForm.ui.qml new file mode 100644 index 000000000..696511cc7 --- /dev/null +++ b/examples/webengine/customdialogs/forms/MenuForm.ui.qml @@ -0,0 +1,103 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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.Layouts 1.3 + +Item { + property alias followLink: followLink + property alias back: back + property alias forward: forward + property alias reload: reload + property alias copyLinkUrl: copyLinkUrl + property alias saveLink: saveLink + property alias close: close + + ColumnLayout { + id: columnLayout + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + + Image { + id: image + width: 100 + height: 100 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + source: "qrc:/icon.svg" + } + + Button { + id: followLink + btnText: qsTr("Follow") + } + + Button { + id: back + btnText: qsTr("Back") + } + + Button { + id: forward + btnText: qsTr("Forward") + } + + Button { + id: reload + btnText: qsTr("Reload") + } + + Button { + id: copyLinkUrl + btnText: qsTr("Copy Link URL") + } + + Button { + id: saveLink + btnText: qsTr("Save Link") + } + + Button { + id: close + btnBlue: false + btnText: qsTr("Close") + } + + } +} diff --git a/examples/webengine/customdialogs/icon.svg b/examples/webengine/customdialogs/icon.svg new file mode 100644 index 000000000..48271180b --- /dev/null +++ b/examples/webengine/customdialogs/icon.svg @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="94px" height="94px" viewBox="0 0 94 94" enable-background="new 0 0 94 94" xml:space="preserve"> +<g> + <circle fill="none" cx="47" cy="47" r="47"/> + <g> + <path fill="#46A2DA" d="M47,92.979c-11.779,0-23.559-4.484-32.526-13.451C-3.461,61.591-3.461,32.409,14.472,14.474 + C32.41-3.463,61.592-3.461,79.526,14.473c17.935,17.936,17.935,47.119,0.002,65.054l-0.002,0.001 + C70.559,88.495,58.779,92.979,47,92.979z"/> + </g> + <path fill="#80C342" d="M93,47C93,21.595,72.405,1,47,1C34.297,1,22.797,6.149,14.473,14.473l65.054,65.054 + C87.851,71.203,93,59.703,93,47z"/> + <g> + <path fill="#46A2DA" d="M47,65c-4.808,0-9.328-1.873-12.728-5.272c-7.018-7.019-7.018-18.438,0-25.456 + C37.672,30.873,42.192,29,47,29s9.328,1.873,12.728,5.272c7.018,7.019,7.018,18.438,0,25.456C56.328,63.127,51.808,65,47,65z"/> + <path fill="#FFFFFF" d="M62.248,59.919c6.671-7.858,6.312-19.644-1.105-27.061C57.237,28.953,52.118,27,47,27 + c-5.118,0-10.237,1.953-14.142,5.858c-7.81,7.81-7.81,20.474,0,28.284C36.763,65.047,41.882,67,47,67 + c4.379,0,8.752-1.441,12.372-4.3L77.88,81.209c0.989-0.895,1.935-1.837,2.843-2.814L62.248,59.919z M35.686,58.314 + c-6.238-6.238-6.238-16.389,0-22.627C38.708,32.664,42.726,31,47,31c4.274,0,8.292,1.664,11.314,4.686 + c6.238,6.238,6.238,16.389,0,22.627C55.292,61.336,51.274,63,47,63C42.726,63,38.708,61.336,35.686,58.314z"/> + </g> +</g> +</svg> diff --git a/examples/webengine/customdialogs/index.html b/examples/webengine/customdialogs/index.html new file mode 100644 index 000000000..43a2dbb67 --- /dev/null +++ b/examples/webengine/customdialogs/index.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Custom UI</title> + <link rel="stylesheet" type="text/css" href="style.css"> + </head> + <body> + <table align="center"> + <tr> + <td><div class="div"><a href="#openMenu" class="link">Right click on text to see link context menu</a></div></td> + </tr> + <tr> + <td><button class="button" onclick="window.location = 'http://localhost.:5555/OPEN_AUTH'"> + Open Authentication Dialog</button></td> + </tr> + <tr> + <td><button class="button" onclick="window.location = 'http://localhost.:5555/OPEN_PROXY'"> + Open Proxy Dialog</button></td> + </tr> + <tr> + <td><button class="button" onclick="alert('This is the Alert Dialog !')"> + Open Alert Dialog</button></td> + </tr> + <tr> + <td><button class="button" onclick="confirm('This is the Confirm Dialog.')"> + Open Confirm Dialog</button></td> + </tr> + <tr> + <td><button class="button" onclick="prompt('Is this the Prompt Dialog ?', 'Yes')"> + Open Prompt Dialog</button></td> + </tr> + <tr> + <td><button class="button" onclick="document.getElementById('colorpicker').click()"> + Open Color Dialog</button></td> + </tr> + <tr> + <td><button class="button" onclick="document.getElementById('filepicker').click()"> + Open File Dialog</button></td> + </tr> + <tr> + <td> + <form><table> + <tr><td><button class="button" type="submit">Open Message Bubble</button></td></tr> + <tr><td><input class="input" placeholder="For this field we open message bubble..." required/></td></tr> + </table></form> + </td> + </tr> + </table> + <input type="color" id="colorpicker" value="#ff0000" style="visibility:hidden"/> + <input type="file" id="filepicker" accept=".cpp, .html, .h, .png, .qdoc, .qml" style="visibility:hidden"/> + </body> +</html> diff --git a/examples/webengine/customdialogs/main.cpp b/examples/webengine/customdialogs/main.cpp new file mode 100644 index 000000000..2f79a1e48 --- /dev/null +++ b/examples/webengine/customdialogs/main.cpp @@ -0,0 +1,75 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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$ +** +****************************************************************************/ + +#include "server.h" +#include <qtwebengineglobal.h> +#include <QNetworkProxy> +#include <QQmlApplicationEngine> +#include <QTimer> + +#ifndef QT_NO_WIDGETS +#include <QtWidgets/QApplication> +// QApplication is required to get native styling with QtQuickControls +typedef QApplication Application; +#else +#include <QtGui/QGuiApplication> +typedef QGuiApplication Application; +#endif + +int main(int argc, char *argv[]) +{ + Application app(argc, argv); + QtWebEngine::initialize(); + + QQmlApplicationEngine engine; + Server *server = new Server(&engine); + + engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); + QTimer::singleShot(0, server, &Server::run); + + QNetworkProxy proxy; + proxy.setType(QNetworkProxy::HttpProxy); + proxy.setHostName("localhost"); + proxy.setPort(5555); + QNetworkProxy::setApplicationProxy(proxy); + + return app.exec(); +} + diff --git a/examples/webengine/customdialogs/main.qml b/examples/webengine/customdialogs/main.qml new file mode 100644 index 000000000..4288137fc --- /dev/null +++ b/examples/webengine/customdialogs/main.qml @@ -0,0 +1,90 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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 1.4 as Controls +import QtQuick.Layouts 1.3 +import QtQuick.Window 2.0 + +Window { + width: 350 + height: 550 + visible: true + + Controls.StackView { + id: stackView + anchors.fill: parent + focus: true + initialItem: Item { + id: main + width: parent.width + height: parent.height + ColumnLayout { + anchors.fill: parent + SwitchButton { + id: switcher + Layout.fillWidth: true + } + WebView { + id: webView + useDefaultDialogs: switcher.checked + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + + function closeForm() + { + pop(main); + } + + function openForm(form) + { + push(form); + currentItem.closeForm.connect(closeForm); + } + + } + + Component.onCompleted: { + webView.openForm.connect(stackView.openForm); + } +} diff --git a/examples/webengine/customdialogs/server.cpp b/examples/webengine/customdialogs/server.cpp new file mode 100644 index 000000000..21a8ffe5a --- /dev/null +++ b/examples/webengine/customdialogs/server.cpp @@ -0,0 +1,75 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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$ +** +****************************************************************************/ + +#include "server.h" +#include <QDataStream> +#include <QTcpSocket> + +Server::Server(QObject *parent) : QObject(parent) +{ + connect(&m_server, &QTcpServer::newConnection, this, &Server::handleNewConnection); +} + +void Server::run() +{ + if (!m_server.listen(QHostAddress::LocalHost, 5555)) + qWarning() << "Could not start the server -> http/proxy authentication dialog" + " will not work. Error:" << m_server.errorString(); +} + +void Server::handleNewConnection() +{ + QTcpSocket *socket = m_server.nextPendingConnection(); + connect(socket, &QAbstractSocket::disconnected, socket, &QObject::deleteLater); + connect(socket, &QAbstractSocket::readyRead, this, &Server::handleReadReady); +} + +void Server::handleReadReady() +{ + QTcpSocket *socket = qobject_cast<QTcpSocket*>(sender()); + Q_ASSERT(socket); + QByteArray msg = socket->readAll(); + if (msg.contains(QByteArrayLiteral("OPEN_AUTH"))) + socket->write("HTTP/1.1 401 Unauthorized\nWWW-Authenticate: " + "Basic realm=\"Very Restricted Area\"\r\n\r\n"); + if (msg.contains(QByteArrayLiteral("OPEN_PROXY"))) + socket->write("HTTP/1.1 407 Proxy Auth Required\nProxy-Authenticate: " + "Basic realm=\"Proxy requires authentication\"\r\n\r\n"); +} diff --git a/examples/webengine/customdialogs/server.h b/examples/webengine/customdialogs/server.h new file mode 100644 index 000000000..dc96acb70 --- /dev/null +++ b/examples/webengine/customdialogs/server.h @@ -0,0 +1,65 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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$ +** +****************************************************************************/ + +#ifndef SERVER_H +#define SERVER_H + +#include <QObject> +#include <QTcpServer> + +class Server : public QObject +{ + Q_OBJECT + +public: + explicit Server(QObject *parent = nullptr); + +public slots: + void run(); + +private slots: + void handleNewConnection(); + void handleReadReady(); + +private: + QTcpServer m_server; +}; + +#endif // SERVER_H diff --git a/examples/webengine/customdialogs/style.css b/examples/webengine/customdialogs/style.css new file mode 100644 index 000000000..e4c25e7eb --- /dev/null +++ b/examples/webengine/customdialogs/style.css @@ -0,0 +1,37 @@ +.div { + padding:8px 4px; + border: 5px solid #188BD0; + width: 280px; + font-family: sans-serif; + font-size:10pt; +} +.link { + text-decoration: none; + color: #888888; +} +.button { + background: -webkit-linear-gradient(top,#25A6E2 0%,#188BD0 100%); + padding:8px 13px; + color:#fff; + font-family: sans-serif; + font-size:17px; + -webkit-border-radius:5px; + border:1px solid #1A87FF; + width: 300px; +} +.button:focus { + outline: none; +} +.button:active { + background: -webkit-linear-gradient(top,#25A6E2 0%,#188BD0 70%); +} +.input { + padding:8px 4px; + border: 5px solid #188BD0; + width: 280px; + font-family: sans-serif; + font-size:10pt; +} +.input:focus { + outline: none; +} |
