Cascades Development

[urbanglowcam]

Hi all,

I'm trying to get a segmentedControl to toggle between the visiblity of two separate containers driverBioText and driverStatsList. I'll paste my code, and maybe someone can point out what I am doing wrong? I'm still a programming noob.

------

SegmentedControl {
id: segmentedDrivers
Option {
id: biography
text: "Biography"
value: "biography"
selected: true
}
Option {
id: statistics
text: "Statistics"
value: "statistics"
}
onSelectedIndexChanged: {
var value = segmentedDrivers.selectedValue()
console.debug("Selected value: " + value);
if(value = "biography") driverBioText.visible = true()
else driverStatsList.visible = true()
}
}

Container {
ScrollView {
TextArea {
id: driverBioText
rightPadding: 30.0
leftPadding: 30.0
visible: false
editable: false
topMargin: 10.0
}

}
}

Container {

ScrollView {
TextArea {
id: driverStatsList
rightPadding: 30.0
leftPadding: 30.0
visible: false
editable: false
topMargin: 10.0
text: "driver stats"
}
}
}

-----

Thanks!

[kylefowler]

true is just a value not a function, so it should be true and not true()

[urbanglowcam]

Thank you.

You're referring to where I have

if(value = "biography") driverBioText.visible = true()
else driverStatsList.visible = true()

right?

I removed the ()'s after true on both and it didn't seem to fix it though.

[kylefowler]

that i was. Even if it might not have worked, thats still the right way to do that. One other thing to try is put an ID on the containers instead of the text fields since thats what you are trying to hide. Or put both textareas in the same scrollview. Theres no need for duplicating things if only one will be visible at a time

[urbanglowcam]

I see. I have tried different variations like you mentioned. I even tried attaching ids to the individual Containers and referring to them instead of the TextArea ids themselves under onSelectedIndexChanged.

The other method you mentioned didn't work because I can't list two separate TextArea components under one ScrollView. I get the error

The default property for the component 'ScrollView' does not accept several objects.

[kylefowler]

If you do it that way you have to put both textfields inside a single container in the scrollview

[urbanglowcam]

Yeah, that won't work unless I also use two different ScrollViews. I can't do one Container, then one ScrollView, with two separate TextAreas. I get an error.

So instead I did one Container, then two ScrollViews inside of that, each with the corresponding TextAreas.

Does that make sense?

Edit: Unless you meant do one single ScrollView with the Container nested in it, containing both TextAreas. That works. But again my problem isn't solved.

[kylefowler]

Yeah, i did mean your edit. Id keep it that way. Are you sure the on selectedchanged is getting called?

In there you also need to have if(value == "biography") and not a single =

[urbanglowcam]

It still didn't seem to do the trick.

----

// Tabbed Pane project template
import bb.cascades 1.0

Page {
property alias driverPhoto : driverPhotoURL.imageSource
property alias driverBio : driverBioText.text
property alias driverName : driverListInfo.title
property alias driverTeam : driverListInfo.description
property alias driverNumber : driverListInfo.status
property alias driverFlag : driverListInfo.imageSource

Container {

ImageView {
id: driverPhotoURL
scalingMethod: ScalingMethod.AspectFill
minHeight: 481.0
}

StandardListItem {
id: driverListInfo
}

SegmentedControl {
id: segmentedDrivers
Option {
id: biography
text: "Biography"
value: "biography"
selected: true
}
Option {
id: statistics
text: "Statistics"
value: "statistics"
}
onSelectedIndexChanged: {
var value = segmentedDrivers.selectedValue()
console.debug("Selected value: " + value);
if(value == "biography") driverBioText.visible = true
else driverStatsList.visible = true
}
}

ScrollView {
Container {
id: textContainer

TextArea {
id: driverBioText
rightPadding: 30.0
leftPadding: 30.0
editable: false
topMargin: 10.0
visible: false
}

TextArea {
id: driverStatsList
rightPadding: 30.0
leftPadding: 30.0
editable: false
topMargin: 10.0
text: "Driver Stats"
visible: false
}

}
}

}
}

--

That's the whole code for this QML. Neither of the text boxes seem to show. Maybe the whole code will give you a better idea? I appreciate the help.

[kylefowler · Accepted solution]

So theres no errors in the console? And does it print out "Selected value: biography"? I also just saw in the docs that selectedValue is a property and not a method, so take the () off .selectedProperty too

Im not 100% familiar with javascript so I dont know what the exact syntax is but id write that if block like this for readability
if(value == "biography") {
driverBioText.visible = true;
driverStatsList.visible = false;
} else {
driverBioText.visible = false;
driverStatsList.visible = true;
}