Question

I have been trying many "solutions" the last 5 days to try and "turn on" clicking in a QML webview object, and I can still not seem to click on any link, on any page.

I am embedding paypal checkout page, and probably it is something very simple I have missed. I tried an empty page with only webview and no options at all but width + height + javascripts (and without js), and I tried below code (and plenty of other stuff), still no clicks. Tried asking on IRC and got response back that "it should always be possible to click, even with the most basic webview setup". I have in the below code changed url from the one containing a real ap-key to just the dev login page, but the problem is the same, regardless if its google.com of paypal or any other site.

Please, anyone know how I can click on anything? I can not click forms either, get a keyboard to popup to fill out forms, or any click.

I am running QML + PySide on Meego platform. I load the below page/rectangle in a Loader object from my main.qml.

Any help would be extremely appreciated.

Note: I did ask same Q on qt-developer network but got no response yet. Trying here, this forums is more populated, so hoping that someone with experience about this problem will read (I noticed I am not the only one with these problems that just "should work").

import QtQuick 1.1
import QtWebKit 1.1
import com.nokia.meego 1.1

Rectangle {
 Image {
  id: background
  source: "./images/bg.png"
  anchors.fill: parent
  Text {
   id: logo
   text: "My Fancy Logo"
   x: 2
   y: 2
   font.pixelSize: 24
   font.bold: true
   font.italic: true
   color: "white"
   style: Text.Raised
   styleColor: "black"
   smooth: true
  }
  Rectangle {
  id: rect
   x: 0
   y: 60
   width: background.width
   height: background.height - 70
   Flickable {
    id: flickable
    width: parent.width
    height: parent.height
    contentWidth: Math.max(parent.width,webView.width)
    contentHeight: Math.max(parent.height,webView.height)
    flickableDirection: Flickable.HorizontalAndVerticalFlick
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    boundsBehavior: Flickable.DragOverBounds
    clip:true
    pressDelay: 200

    WebView {
     id: webView
     settings.javascriptEnabled: true
     settings.pluginsEnabled: true
     url: "https://developer.paypal.com/"
     anchors.top: parent.top
     anchors.bottom: parent.bottom
     anchors.left: parent.left
     anchors.right: parent.right
     transformOrigin: Item.Top
     smooth: false
     focus: true

     preferredWidth: flickable.width
     preferredHeight: flickable.height
     PinchArea {
   id: pinchArea
   property real minScale:  1.0
   anchors.fill: parent
   property real lastScale: 1.0
   pinch.target: webView
   pinch.minimumScale: minScale
   pinch.maximumScale: 3.0

   onPinchFinished: {
    flickable.returnToBounds();
    flickable.contentWidth = (flickable.width + flickable.width) * webView.scale;
       flickable.contentHeight = (flickable.height + flickable.height) * webView.scale;
      }
     }
    }
   }
  }
 }
}
Was it helpful?

Solution

In your QML markup the PinchArea element is a child of the WebView and thus gets the mouse/touch press events before the WebView. If you move the PinchArea "behind" the WebView in the element hierarchy the links will become clickable (except the three below the login box, because they try to open new browser windows).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top