[solved] Accessing QML Component properties

kevinsharp

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?

fcrochik

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

}@

kevinsharp

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.

fcrochik

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

mohsen

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.

fcrochik

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

mbrasser

[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

kevinsharp

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