QML ProgressBar and Slider elements in Meego Qt Quick Components

Comments

(no comments yet)

Log in or Join to leave comments.

This article explains how to use the QML ProgressBar and Slider elements in the MeeGo Qt Quick Components.

ProgressBar and Slider Elements

Article Metadata

---

Article

Created: chintandave_er (26 Sep 2011)

Last edited: hamishwillee (13 Jun 2012)

Main Page

The code below shows a page with the MeeGo ProgressBar and Slider elements. The QML updates the value of the ProgressBar to match the Slider's value (in the Slider onValueChanged event handler.

import QtQuick 1.1  
import com.nokia.meego 1.0
Page {  
    tools: commonTools  
    ProgressBar {  
        id: progressBar  
        width: 300  
        minimumValue: 0  
        maximumValue: 100  
        value: 50  
        anchors.centerIn: parent  
    }
    Slider {  
        id:mySlider  
        stepSize:1  
        valueIndicatorVisible: true  
        minimumValue:0  
        maximumValue:100  
        width:200  
        value: 50  
        anchors {  
                horizontalCenter: parent.horizontalCenter  
                top: progressBar.bottom  
                topMargin: 10  
            }  
        onValueChanged: {  
            progressBar.value = mySlider.value  
        }  
    }  
}

Main.qml (PageStackWindow)

import QtQuick 1.1
import com.nokia.meego 1.0
 
PageStackWindow {
    id: appWindow
    initialPage: mainPage
    MainPage {
        id: mainPage
    }
    ToolBarLayout {
        id: commonTools
        visible: true
        ToolIcon {
            platformIconId: "toolbar-view-menu"
            anchors.right: (parent === undefined) ? undefined : parent.right
            onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close()
        }
    }
    Menu {
        id: myMenu
        visualParent: pageStack
        MenuLayout {
            MenuItem { text: qsTr("Sample menu item") }
        }
    }
}