[solved] Accessing QML Component properties



  • I think there's something about scope in QML that I don't understand: when I embed a QML component in a view, how can I "see" properties of elements of the component?

    For example, the Qt SDK includes the search box example where three SearchBox.qml components are used in main.qml. Each SearchBox component includes a TextInput element. I want to use TextInput.text in some JavaScript that I'll execute from within main.qml. I can't figure out how to access the element or its properties. Here's the full setup:

    SearchBox.qml includes:

    @TextInput {
    id: textInput
    anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
    focus: true
    selectByMouse: true
    }@

    and main.qml includes:

    @SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true }
    SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1 }
    SearchBox { id: search3; KeyNavigation.tab: search1; KeyNavigation.backtab: search2 }
    @

    but when I try (in main.qml) something simple like:

    @Text {
    id: text1
    x: 56
    y: 78
    width: 80
    height: 20
    text: "contents of search box 1" + search1.textInput.text
    font.pixelSize: 12
    }
    @

    in my main.qml file I get an undefined error. Qt Creator doesn't offer any code completion options (for search1) that seem to indicate how to do this. I tried manually forcing search1.textInput (undefined), search1.textInput.text (my initial guess, still undefined) search1.text (undefined). I even tried search1.data and search1.data.text (gives me object placeholder and undefined respectively) because code completion told me search1.data at least was a valid option.

    How do I get at the contents of the search box from my main.qml?



  • The following main.qml works w/o issues using your SearchBox.qml:

    @Rectangle {

    width: 200
    height: 200
    Text {
        x: 66
        y: 93
        text: search1.text
    }
    
    Rectangle {
        x: 10
        y: 10
        color: "red";
        width: 100
        height: search1.height
        
        SearchBox {
            id: search1;
        }
    }
    

    }@



  • tks. I've got something working now. Turns out there's something about the way the rest of the SearchBox component was built that's hiding the text from main.qml. When I use your code with the component that ships with the SDK, I still get an undefined error. But since it worked for you I stripped down the SearchBox component to just the TextInput element and it works. Not pretty yet, but it works. I can start adding back elements till I see what breaks it.

    Thanks.



  • I used the version of SearchBox that you posted:

    @TextInput {
    id: textInput
    anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
    focus: true
    selectByMouse: true
    }@



  • also it's better to write like @TextInput {@ instead of @TextInput
    {@

    sometimes it wont display properties for that object if you write like second one.



  • [quote author="mohsen" date="1295785184"]also it's better to write like @TextInput {@ instead of @TextInput
    {@

    sometimes it wont display properties for that object if you write like second one.[/quote]

    If this is the case I would have to suggest that it is a bug and should be reported.



  • [quote author="kevinSharp" date="1295718328"]I think there's something about scope in QML that I don't understand: when I embed a QML component in a view, how can I "see" properties of elements of the component? ...
    How do I get at the contents of the search box from my main.qml?
    [/quote]

    The sub-elements within a component are considered private, so you'll need to define your own "public API" that exposes the properties you want to manipulate. http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html gives a good overview of how you can go about this.

    Regards,
    Michael



  • [quote author="mbrasser" date="1295830345"]
    The sub-elements within a component are considered private, so you'll need to define your own "public API" that exposes the properties you want to manipulate. http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html gives a good overview of how you can go about this.[/quote]

    Perfect. I knew I had seen documentation about this but I couldn't find it. This explains everything.


Log in to reply
 

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