How to display the scrollbar of WebView element?

qiezi

I have write a browser view:

@WebView {
width: 300
height: 200
url: "http://www.msn.com/"
}@

It didn't display the scrollbar of WebView, how to display it?

Chuck Gao

Try QML Flickable Element :-)

DenisKormalev

Yep, WebView inside Flickable will help you. Also read about adding scrollbars to Flickable in Assistant (somewhere in Flickable element reference afair).

qiezi

Thanks Chuck and Denis.

I found a demo:
http://code.google.com/p/aranduka/source/browse/src/FlickableWebView.qml?spec=svnbd01e07f1a737235ad73a7283f6a3418dd219d4b&r=bd01e07f1a737235ad73a7283f6a3418dd219d4b

It can scrolled with dragging, but can't scrolled with mouse wheel, and I didn't find some mouse wheel. Any help?

matrixx

At the moment, QML MouseArea cannot handle mouse wheel events (http://bugreports.qt.nokia.com/browse/QTBUG-7369), but it could be implemented in C++ side if it's absolutely necessary to apply scrolling by mouse wheel :)

Chuck Gao

Hi Andri,
I'm not sure, but maybe there is something wrong or incomplete in your demo code. The wheel is supported in Flickable area.

Here is some snip code, and it works well with wheel.
@
Item {
id: nurtrationView
width: parent.width
height: 500
anchors.top: btnGroup.bottom
anchors.left: parent.left
Flickable {
anchors.fill: parent
contentWidth: parent.width
contentHeight: fact.height
interactive: true
clip: true

        NurtritionFacts {
            id: fact
            anchors.centerIn: parent
            width: nurtrationView.width - contextMargin
        }
    }
}

@

qiezi

Hi Chuck, I have tested Image inside Flickable. The code is:

@import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
width: 1024
height: 600

Flickable {
id: flickable
width: parent.width
height: parent.height / 2
contentWidth: webView.width
contentHeight: webView.height
interactive: true
clip: true

WebView {
id: webView
url: "http://www.msn.com/"
preferredWidth: flickable.width
preferredHeight: flickable.height
}
}

Flickable {
y: parent.height / 2
width: parent.width
height: parent.height / 2
contentWidth: image.width
contentHeight: image.height
interactive: true
clip: true

Image {
id: image
source: "http://annoytheleft.files.wordpress.com/2009/12/white-house.jpg"
}
}
}@

The WebView can scroll with dragging, but can't scroll with wheel.
The Image can scroll with dragging and wheel.

How can I fix it?

Jens

You can try out the desktop components. It has both a scroll area with scrollbars as well as scrollwheel support implemented through a c++ plugin item.

http://qt.gitorious.org/qt-components/desktop

Chuck Gao

Have a try of QML ScrollDecorator Element with Qt Quick components. Updating your SDK :-)

And,
@
WebView {
id: webView
url: "http://www.msn.com/"
preferredWidth: flickable.width
preferredHeight: flickable.height
}
}
@

I don't think we need use preferredWidth/Height here. Comment them and try scroll with wheel.