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
Developer
Posts: 68
Registered: ‎08-16-2012
My Device: BB10 Dev Alpha
My Carrier: NA
Accepted Solution

How to show leadingVisual of a ListView programmatically?

Dear All,

 

Is there a way to show the leadingVisual programmatically? I checked the ListView, it can only scroll inside the list, but can not find out how to show the leadingVisual. Anyone has an idea?

 

Thanks,

Dong

Developer
Posts: 135
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: How to show leadingVisual of a ListView programmatically?

I would also like to know. Right now I am trying to use the scroll() method. It will scroll to a specfied pixel amount either forward or backward.

It doesnt quite work though; it scrolls up but then quickly scrolls back down to starting position.

 

Please let me know if you find a solution!

Developer
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: How to show leadingVisual of a ListView programmatically?

I also tried and didn't found a way ro scroll to the leadingvisual from QML

 

I can requestFocus() to a TextField inside leadingvisual and keyboard comes up,

but field isn't visible

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner
Developer
Posts: 135
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: How to show leadingVisual of a ListView programmatically?

I found the solution! Depending on what you have in your leading visual, theres different ways to go about this.

 

Here is my working code:

 

ListView {
                property int leadingHeight: 0
                id: myList
                leadingVisual: Container {
                    id: leadingContainer

                    preferredWidth: 768
                    Label {
                        id: leadingInfoLabel
                        text: "This is some sample text"
                    }
                    Divider {
                        id: leadingDivider
                        preferredWidth: 768
                    }
                    DropDown {
                        preferredWidth: 768
                        title: "sample dropdown
                        options: [
                            Option {
                                text: "first option"
                                selected: true
                            }
                        ]
                    }
                    attachedObjects: [
                        LayoutUpdateHandler {
                            id: handler
                            onLayoutFrameChanged: {
                                myList.leadingHeight = layoutFrame.height;
                            }
                        }
                    ]

                }
                listItemComponents: [
                    ListItemComponent {
                        StandardListItem {
                        }
                    }
                ]
                onDataModelChanged: {
                        commentList.scroll(-1);
                }
                onLeadingHeightChanged: {
                    commentList.scroll(- (leadingHeight));
                }

 

 

To explain, the LayoutUpdateHandler onLayoutFrameChanged() signal allows us to get the actualy width or height of a component. However, in order for this signal to be triggered, the component has to transform (be moved) in some way. In other words, to get the height of the leading visual, we must first move it programmatically ourselves.

I did this in the onDataModelChanged signal, and i just scroll the list up by 1 pixel. This is all it takes to trigger the LayoutUpdateHandler.

 

Now that the LayoutUpdateHandler is triggered, we can acquire the exact height of our leading visual. And we assign the height of the leadingVisual container to a property we defined in the ListView component, a variable I named leadingHeight.

 

Once the value has been assigned to leadingHeight, onLeadingHeightChanged() is triggered and we can now scroll our list upwards by the exact pixel amount needed to show the top of the leadingVisual.

 

FYI: Depending on if the components within your leading visual are subject to change height, this process will have to occur every time. For example, in my application (not the code above) my leadingVisual contains a label whose text is different every time and therefore the height of my leadingVisual will always change.

 If your know that your leadingVisual's height will never change, then you could technically go through the process of acquiring the exact pixel height only once, and then remove that code. You now can scroll the list when onDataModelChanged() occurs using this pixel value that you know will be constant. Hope this makes sense....

 

 

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: How to show leadingVisual of a ListView programmatically?

Thanks for sharing the solution! Btw, LayoutUpdateHandler has layoutFrame property. Have you tried using it? I think it should contain the final dimensions even before any movement happens.

http://developer.blackberry.com/cascades/reference/bb__cascades__layoutupdatehandler.html#property-l...


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 135
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: How to show leadingVisual of a ListView programmatically?

Yes my code above is using the layoutFrame property, however, until LayoutUpdateHandler is triggered by the leadingVisual moving, layoutFrame.height is 0.

Developer
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: How to show leadingVisual of a ListView programmatically?

thanks sharing this

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner
Developer
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: How to show leadingVisual of a ListView programmatically?

what are you doing if the user has scrolled down the list

and you want to scroll to top and then to leading visual

 

myList.scrollToItem([0])

scrolls to the top

 

myList.scroll(- (leadingHeight));

scrolls to the leading visual

 

but you cannot call both sequentially

 

myList.scrollToItem([0])

myList.scroll(- (leadingHeight))

 

will only scroll up - leadingHeight

 

thx

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner
Developer
Posts: 135
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: How to show leadingVisual of a ListView programmatically?

That's a good question.
The only thing I can think of is finding how many pixels the user has scrolled down the list, and then doing

myList.scroll(- (leadingHeight + scrollPositionInPixels);

Not sure if finding this value is possible though.
Developer
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: How to show leadingVisual of a ListView programmatically?


Paratheo wrote:
That's a good question.
The only thing I can think of is finding how many pixels the user has scrolled down the list, and then doing

myList.scroll(- (leadingHeight + scrollPositionInPixels);

Not sure if finding this value is possible though.

I didn't found this value yet

 

inserting a QTimer delay also doesn't work well - you don't know how long scroll to first item

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner