Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
oleg_derevenetz
Posts: 25
Registered: ‎06-28-2012
My Device: Z10, Q10
Accepted Solution

Cascades - how to get actual size of element?

[ Edited ]

Hi all,

 

Is there any way to get actual width/height of visual element in Cascades? I developed Qt Quick apps before, and in Qt Quick solution was simple - there was width and height properties that was always updated to actual element size, and you could use them when necessary. Even in Silverlight, there are ActualHeight() and ActualWidth() for all visible elements. However, in Cascades, as I see, there are only minHeight, maxHeight and preferredHeight, and the same for width, but there is no property that references actual element width or height.

 

I need this, for example, to assign proper size to ListView elements - I want to create horizontal ListView that shows only one element (namely image) at a time, properly resizes this image to fit, and works for any screen resolution and orientation. In Qt Quick, I solved this by binding ListView's width and height to list item's container element width and height (Rectangle) and by using proper snapMode (namely SnapOneItem). This works flawlessly for any screen size & resolution. How can I do something like this in Cascades without hard-coding any "magic numbers" in preferredWidth and preferredHeight?

 

Thanks in advance for your answer.

 

Developer
Zmey
Posts: 1,514
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Cascades - how to get actual size of element?

[ Edited ]

You can get element's width and height using LayoutUpdateHandler:

 

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

 

LayoutUpdateHandler::create(scrollView)
    .onLayoutFrameChanged(this, SLOT(handleLayoutFrameUpdated(QRectF)));

 


Andrey Fidrya, @zmeyc on twitter
Contributor
oleg_derevenetz
Posts: 25
Registered: ‎06-28-2012
My Device: Z10, Q10

Re: Cascades - how to get actual size of element?

Yes, it seems to work fine. Here is a sample code for future reference:

 

import bb.cascades 1.0

NavigationPane {
    id: navigationPane

    Page {
        Container {
            background: Color.Black

            layout: DockLayout {
            }

            ListView {
                id:                  modeSelectionListView
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment:   VerticalAlignment.Center
                snapMode:            SnapMode.LeadingEdge
                flickMode:           FlickMode.SingleItem
                rootIndexPath:       [0]

                property int actualWidth:  0
                property int actualHeight: 0

                layout: StackListLayout {
                    orientation: LayoutOrientation.LeftToRight                            
                }

                dataModel: XmlDataModel {
                    source: "modeSelectionListViewModel.xml"                               
                }

                listItemComponents: [
                    ListItemComponent {
                        type: "item"

                        Container {
                            id:         itemRoot
                            background: Color.Transparent

                            layout: DockLayout {
                            }

                            ImageView {
                                preferredWidth:      itemRoot.ListItem.view.actualWidth
                                preferredHeight:     itemRoot.ListItem.view.actualHeight
                                horizontalAlignment: HorizontalAlignment.Center
                                verticalAlignment:   VerticalAlignment.Center
                                imageSource:         ListItemData.image
                                scalingMethod:       ScalingMethod.AspectFit
                            }
                        } 
                    }
                ]

                attachedObjects: [
                    LayoutUpdateHandler {
                        onLayoutFrameChanged: {
                            modeSelectionListView.actualWidth  = layoutFrame.width;
                            modeSelectionListView.actualHeight = layoutFrame.height;
                        }
                    }
                ]
            }
        }
    }
}