Using qml in cpp



  • 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...



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



  • 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 :)



  • [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.



  • 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]



  • 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??



  • @//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
    }@



  • 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.



  • 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
    }
    

    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.