diff options
author | Szabolcs David <davidsz@inf.u-szeged.hu> | 2019-09-27 17:43:04 +0200 |
---|---|---|
committer | Szabolcs David <davidsz@inf.u-szeged.hu> | 2019-10-10 15:19:32 +0200 |
commit | 320a7a8522ccff5155cbb9563428b26071266ebc (patch) | |
tree | 636f0722ee319727c4acedc068b005d11a31a270 /examples | |
parent | 22e88504ab61a622fb9bcf38cf54728286f33bce (diff) |
Add example for QQuickWebEngineTooltipRequest
Implement an example usage in customdialogs application and extend
the documentation.
Change-Id: Ibc240cf94ac939335455f4eac3d52ffec2ba7ff6
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>
Diffstat (limited to 'examples')
13 files changed, 78 insertions, 1 deletions
diff --git a/examples/webengine/customdialogs/WebView.qml b/examples/webengine/customdialogs/WebView.qml index 0715bc709..d754ea7dc 100644 --- a/examples/webengine/customdialogs/WebView.qml +++ b/examples/webengine/customdialogs/WebView.qml @@ -49,7 +49,7 @@ ****************************************************************************/ import QtQuick 2.0 -import QtWebEngine 1.4 +import QtWebEngine 1.10 WebEngineView { @@ -57,6 +57,32 @@ WebEngineView { property bool useDefaultDialogs: true signal openForm(var form) + Rectangle { + id: tooltip + width: 200 + height: 30 + z: 50 + visible: false + color: "gray" + border.color: "black" + border.width: 2 + radius: 3 + + property string text: "" + + Text { + x: 0 + y: 0 + color: "#ffffff" + text: parent.text + font.pointSize: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.bold: false + } + + } + onContextMenuRequested: function(request) { // we only show menu for links with #openMenu if (!request.linkUrl.toString().endsWith("#openMenu")) { @@ -72,6 +98,22 @@ WebEngineView { properties: {"request": request}}); } + onTooltipRequested: function(request) { + if (useDefaultDialogs) + return; + + if (request.type == TooltipRequest.Show) { + tooltip.visible = true; + tooltip.x = request.x; + tooltip.y = request.y; + tooltip.text = request.text; + } else { + tooltip.visible = false; + } + + request.accepted = true; + } + onAuthenticationDialogRequested: function(request) { if (useDefaultDialogs) return; diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png Binary files differindex 2bde8bd8e..5e8f8d6bd 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png +++ 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 differindex ce358fca0..41828d36d 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png +++ 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 differindex a51d1bdd3..9208045b2 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png +++ 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 differindex 3b0b2e986..9087fdf14 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-color2.png +++ 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 differindex 0ff39bf38..ba8bdf78c 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png +++ 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 differindex e56078c44..aa25579d7 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-file2.png +++ b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png Binary files differindex 988b4deea..e36ba4a13 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png +++ 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 differindex 085339378..2c8d92649 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png +++ b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png b/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png Binary files differnew file mode 100644 index 000000000..498de9595 --- /dev/null +++ b/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png diff --git a/examples/webengine/customdialogs/doc/images/customdialogs.png b/examples/webengine/customdialogs/doc/images/customdialogs.png Binary files differindex 13322d2f6..c42114a16 100644 --- a/examples/webengine/customdialogs/doc/images/customdialogs.png +++ 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 index 5c550ed5e..6319ce53b 100644 --- a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc +++ b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc @@ -140,6 +140,38 @@ To keep things simple, we do not provide any logic on component completion, and we simply close the form on any action. + \section2 Tooltip Requests + + \l [QML]{TooltipRequest} is a request object that is passed as a + parameter of the WebEngineView::tooltipRequested signal. We use the + \c onTooltipRequested signal handler to handle requests for + custom tooltip menus at specific positions: + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto WebEngineView + \printuntil { + \dots 4 + \skipto onTooltipRequested + \printuntil } + \printuntil } + \printuntil } + \dots 4 + \skipuntil onFileDialogRequested + \skipuntil }}); + \skipuntil } + \skipto } + \printline } + + The second 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 show a custom QML element as tooltip: + + \image customdialogs-tooltip.png + + \quotefromfile webengine/customdialogs/WebView.qml + \skipto Rectangle + \printuntil } + \section2 Authentication Dialog Requests \image customdialogs-auth1.png diff --git a/examples/webengine/customdialogs/index.html b/examples/webengine/customdialogs/index.html index 490dd79fd..69c0e6b21 100644 --- a/examples/webengine/customdialogs/index.html +++ b/examples/webengine/customdialogs/index.html @@ -11,6 +11,9 @@ <td><div class="div"><a href="#openMenu" class="link">Right click on text to see link context menu</a></div></td> </tr> <tr> + <td><div class="div"><p title="I am a tooltip.">Hover this text to display a tooltip</a></div></td> + </tr> + <tr> <td><button class="button" onclick="window.location = 'http://localhost.:5555/OPEN_AUTH'"> Open Authentication Dialog</button></td> </tr> |