Using qml in cpp

[chronoske]

Hello all, I’d like to ask about using qml in cpp. I'd like using qml, there are detailMap.qml and Scrollbar.qml. Let I tell u that in detailMap.qml, I wanna use item from Scrollbar.qml that have id named scrollBar. How could I call the detailMap.qml that use item in Scrollbar.qml? thanks for your helping...

[changsheng230]

As for Using QML in C++ Applications, please refer to the following very nice article:
http://doc.qt.nokia.com/4.7/qtbinding.html

[thisisbhaskar]

Hi, When you say you want to use an item from Scrollbar.qml in your detailMap.qml, do you want to access some functionality or do you want to display an item in Scrollbar.qml in your detailMap.qml??

Can you clarify and posting your code always help. Programmers only understand code :)

[thisisbhaskar]

[quote author="changsheng230" date="1310359295"]In Scrollball.qml
// use detailMap.qml like this
DetailMap {
....
}[/quote]

What I understand form the post is that @chronoske wants to use something that is already there ( which has an id : so its an element ) in Scrollbar.qml inside his detailMap.qml.

[changsheng230]

Could you please describe your problem clearer ,better with the codes?
[quote author="chronoske" date="1310358889"]Hello all, I’d like to ask about using qml in cpp. I'd like using qml, there are detailMap.qml and Scrollbar.qml. Let I tell u that in detailMap.qml, I wanna use item from Scrollbar.qml that have id named scrollBar. How could I call the detailMap.qml that use item in Scrollbar.qml? thanks for your helping...[/quote]

[chronoske]

I wanted to call the scrollbar.qml in my detailmap.qml, and the detailmap will be called through the cpp, this is my code:

@
//scrollbar, taken from the qt demo and example
Item {
id: scrollBar

// The properties that define the scrollbar's state.
// position and pageSize are in the range 0.0 - 1.0.  They are relative to the
// height of the page, i.e. a pageSize of 0.5 means that you can see 50%
// of the height of the view.
// orientation can be either Qt.Vertical or Qt.Horizontal
property real position
property real pageSize
property variant orientation : Qt.Vertical

// A light, semi-transparent background
Rectangle 
{
    id: background
    anchors.fill: parent
    radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
    color: "white"
    opacity: 0.3
}

// Size the bar to the required size, depending upon the orientation.
Rectangle {
    x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
    y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
    width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
    height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
    radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
    color: "black"
    opacity: 0.7
}

}
@

@//detailmap
...
QMLScrollBar
{
id: verticalScrollBar
width: 12; height: view.height-12
anchors.right: view.right
opacity: 0
orientation: Qt.Vertical
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
}
@

i tried it that way, but the scrollbar keeps underlined in red and doesnt appear.. What should i do next? I want to display an item in Scrollbar.qml in my detailMap.qml??

[thisisbhaskar]

@//detailmap
...
QMLScrollBar
{
id: verticalScrollBar
width: 12; height: view.height-12
anchors.right: view.right
opacity: 0
orientation: Qt.Vertical
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
}@

Why is opacity of QMLScrollBar is zero. This makes your scrollbar invisible. can you remove this statement and try. And set anchors of your QMLScrollbar to your parent. Don't set width or height of your QMLScrollBar.

Something like this

@QMLScrollBar
{
id: verticalScrollBar
anchors.fill: parent
orientation: Qt.Vertical
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
}@

[changsheng230]

If you use QMLScrollBar in detailMap.qml. The file name of your source code must be named as QMLScrollBar.qml. And your creator version is old, it is find even with some underlined in red warning for your customized element.

[chronoske]

I have tried it in DetailMap.qml and I have named .qml files as "QMLScrollBar" but it still doesn't work,
This is my code in DetailMap.qml
@import QtQuick 1.0

Rectangle
{
width: 640
height: 480

// Create a flickable to view a large image.
Flickable
{
    id: view
    anchors.fill: parent
    contentWidth: picture.width
    contentHeight: picture.height

    Image
    {
        id: picture
        source: "pics/niagara_falls.jpg"
        asynchronous: true
    }

    // Only show the scrollbars when the view is moving.
    states: State
    {
        name: "ShowBars"
        when: view.movingVertically || view.movingHorizontally
        PropertyChanges { target: verticalScrollBar; opacity: 1 }
        PropertyChanges { target: horizontalScrollBar; opacity: 1 }
    }

    transitions: Transition
    {
        NumberAnimation { properties: "opacity"; duration: 400 }
    }
}

QMLScrollBar
{
id: verticalScrollBar
anchors.fill: parent
orientation: Qt.Vertical
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
}

QMLScrollBar
{
    id: horizontalScrollBar
    anchors.fill: parent
    orientation: Qt.Horizontal
    position: view.visibleArea.xPosition
    pageSize: view.visibleArea.widthRatio    
}

}@
The QMLScrollBar is underlined with red...

and then this is in QMLScrollBar.qml
@Item {
id: scrollBar

// The properties that define the scrollbar's state.
// position and pageSize are in the range 0.0 - 1.0.  They are relative to the
// height of the page, i.e. a pageSize of 0.5 means that you can see 50%
// of the height of the view.
// orientation can be either Qt.Vertical or Qt.Horizontal
property real position
property real pageSize
property variant orientation : Qt.Vertical

// A light, semi-transparent background
Rectangle {
    id: background
    anchors.fill: parent
    radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
    color: "white"
    opacity: 0.3
}

// Size the bar to the required size, depending upon the orientation.
Rectangle {
    x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
    y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
    width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
    height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
    radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
    color: "black"
    opacity: 0.7
}

}@