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>

13 files changed, 1395 insertions, 0 deletions

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")
+        }
+
+    }
+}