Cascades Development

[urbanglowcam]

Someone fill me in on the nature of each QML Page Component.

I assumed stacking components (ImageView, Label, TextArea, etc.) with a top-down direction will eventually cause the page to scroll vertically.

However, in my case, I created a page with a Page, then Container, then ImageView component with an image that takes about half the screen. I then added TextArea component with several paragraphs of text. But it seemed to squish my image vertically so it's not proportional and distorted. I think it did this to fit everything on the screen as now the TextArea cuts off right before my tab bar at the bottom.

But shouldn't the TextArea extend down to where the text ends, and the whole page should scroll for the user? Coincidentally, my goal is to keep the TextArea how that is and have it independently scroll with a smaller space taken. But the point is, I don't know why the image at the top was squished to do this. I fixed the issue with adjusting the image scaling, but shouldn't everything have an overflow and allow vertical scrolling by default?

Sorry if this is an obvious answer, but I'm still getting used to Cascades. Thank you.

[bobdodd · Accepted solution]

Actually I wouldn't expect a Page to scroll unless I had told it to scroll. Just different ways of looking at things I guess.

There is a separate ScrollView element, so you could add that to the page and insert your content into the ScrollView. Perhaps you could try that?

[urbanglowcam]

Great. I will try this. The reason I ask this is because in another QML Page, using the ListView had everything scroll automatically. I guess it's a difference of what ListView allows by default Vs. ImageView / TextArea.

[peter9477 · Accepted solution]

As bobdodd said, and also note this property which may have some role to play: https://developer.blackberry.com/cascades/reference/bb__cascades__page.html#resizebehavior

[urbanglowcam]

Thanks you two. ScrollView definitely gave me what I was originally looking for. The only thing is, now that I have it, it appears to give me too much elasticity to the point where the whole page feels like a webpage, more than a stationary app. It could come in handy in the future though.

Peter, I took your suggestion and tried including

Page {

resizeBehavior: PageResizeBehavior.None

*

*

*

But it didn't seem to do anything for me. There wasn't an error or anything though. But using it still gave me the squished image when too many components are listed. I think my best bet is applying the image scale/height adjustments.

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

Thanks again!

[bobdodd]

You could try wrapping your ScrollView inside a Container

https://developer.blackberry.com/cascades/reference/bb__cascades__container.html

It's possible to set preferred, minimum, and maximum sizes for a container, so that may give you the control you want.

So something like:

Page {

   Container {

       ScrollView {

           content....

      }

}

You can also wrap your content in Containers to help define their sizes also.

[urbanglowcam]

Yeah, that's what I did. Though I just wanted the TextArea component to show scrollin text at the bottom, so I wrapped it in a ScrollView.

Now everything is looking closer to how I want it.