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: 65
Registered: ‎03-20-2013
My Device: Z10(Red Limited Edition)
My Carrier: MY COMPANY

how can we provide alphabetical lists in project just like used in contacts.

Hello All,

             I want to provide alphabetical lists in my project for better UI , but still i haven't got any reference about that.

 

Any suggestions/ideas on how I can implements this?

 

 

alphabetical list of contacts in blackberry 10

 

 

 

 

Thanks in advance

Ankur  

 

Developer
Posts: 660
Registered: ‎10-08-2009
My Device: Bold 9900
My Carrier: Telus

Re: how can we provide alphabetical lists in project just like used in contacts.

AFAIK, we don't have access to that control. If you really need, you'll have to create a custom control. Though I can imagine how to build it, it'll be extremely tedious to do so.

----------------------------------------------------------
Twitter: @gyubok
Developer
Posts: 65
Registered: ‎03-20-2013
My Device: Z10(Red Limited Edition)
My Carrier: MY COMPANY

Re: how can we provide alphabetical lists in project just like used in contacts.

Thanks for reply,

                      But I need to implement alphabetical lists in my project.

            so can you give me link or reference.

Developer
Posts: 1,008
Registered: ‎12-12-2010
My Device: Passport (Red Limited Edition)
My Carrier: Mobile Vikings

Re: how can we provide alphabetical lists in project just like used in contacts.

If you want an alphabetically sorted list you just need to sort the data in your DataModel. You can even use headers per letter using a GroupDataModel (see this page). If you want the "quickscroll" list on the right you will have to build a custom component.

-------------------------------------------
BlackBerry Certified Builder for Native Application Development -- Proud member of the Belgian BlackBerry Developer group
Samples: Park in Ghent
Feeling generous? Nominate me for BB Elite member!
Developer
Posts: 17,019
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: how can we provide alphabetical lists in project just like used in contacts.

maybe you can create a feature request in jira and link it there so everybody can vote on it.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Posts: 1,008
Registered: ‎12-12-2010
My Device: Passport (Red Limited Edition)
My Carrier: Mobile Vikings

Re: how can we provide alphabetical lists in project just like used in contacts.

Good suggestion, I could use that component as well in an app I am working on.

-------------------------------------------
BlackBerry Certified Builder for Native Application Development -- Proud member of the Belgian BlackBerry Developer group
Samples: Park in Ghent
Feeling generous? Nominate me for BB Elite member!
Developer
Posts: 251
Registered: ‎11-22-2011
My Device: Blackberry Playbook
My Carrier: vodafone

Re: how can we provide alphabetical lists in project just like used in contacts.

Hi folks,

 

I just want to provide a few lines of QML to get demanded behavior.

The code is not polished for different devices, but it's a good starting point.

Put it inside a Container which contains the ListView and set the container to DockLayout.

 

Hope it helps someone.

 

    Container {

            id: abcScroller

            horizontalAlignment: HorizontalAlignment.Right
            verticalAlignment: VerticalAlignment.Fill
            
            layout: DockLayout {
            }


            property variant charArray: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","Z"]
            property string currentChar: "A"
            
            onCreationCompleted: {
                chars.text = getCharString();
            }
            
            onCurrentCharChanged: {
                resultListView.scrollToItem(dataModel.lowerBound([currentChar]),  ScrollAnimation.None);                
            }
            
            
            function getCharString() {
                var out = ""
                for (var i=0; i<charArray.length-1; i++) {
                    out += charArray[i] + "\n"
                }
                out += charArray[charArray.length-1]
                return out
            }

            onTouch: {

                if (event.isDown()) {
                    console.log("onTouch - DOWN");
                    flag.visible = true 
                    flag.translationY = event.localY - 60;                    
                    charsBackground.opacity = 0.5
                    chars.opacity = 1.0
                    updateSelectedChar(event.localY)
                } else if (event.isUp()) {
                    flag.visible = false 
                    charsBackground.opacity = 0.0
                    chars.opacity = 0.5
                } else if (event.isMove()) {
                    flag.translationY = event.localY - 60;
                    updateSelectedChar(event.localY)
                } else if (event.isCancel()) {
                    flag.visible = false
                    charsBackground.opacity = 0.0
                    chars.opacity = 0.5
                }
            
            }


            
            function updateSelectedChar(y) {
                var index = Math.floor( (y-charContainer.controlY) / (chars.controlHeight / charArray.length) )
                var c = charArray[index]
                if (c) {
                	flagLabel.text = c
                	currentChar = c
                }
            }
            
            Container {
            	
            	id: charContainer
                verticalAlignment: VerticalAlignment.Center
                minWidth: 70.0
                horizontalAlignment: HorizontalAlignment.Right
                
                layout: DockLayout { }
                
                property int controlY

                attachedObjects: [     
                                   
                    LayoutUpdateHandler {
                        onLayoutFrameChanged:  charContainer.controlY = layoutFrame.y;
                    }
                    
                ]
                
                
                Container {
                    id: charsBackground
                    verticalAlignment: VerticalAlignment.Fill
                    horizontalAlignment: HorizontalAlignment.Fill
                    opacity: 0.0
                    background: Color.White
                }
                
                
                Label {
                    id: chars
                    multiline: true
                    textStyle.fontSize: FontSize.XSmall
                    horizontalAlignment: HorizontalAlignment.Fill
                    textStyle.textAlign: TextAlign.Center
                    textStyle.fontWeight: FontWeight.W500

					property int controlHeight
					
                    attachedObjects: [
                        
                        LayoutUpdateHandler {
                            id: charsHeight
                            onLayoutFrameChanged:  chars.controlHeight = layoutFrame.height;
                        }
                    ]
                }
                
                

            }
            
            Container {
                id: flag
                preferredWidth: 320.0
                preferredHeight: 110.0
                leftPadding: 20.0
                background: Color.Black
                visible: false
                layout: DockLayout {}
                
                attachedObjects: [
                    ImplicitAnimationController {
                        propertyName: "translationY"
                        enabled: false
                    }
                ]
                
                Label {
                    id: flagLabel
                 	text: "A"
                    textStyle.color: Color.White
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Left
                    textStyle.fontSize: FontSize.XXLarge
                }
                

            
             
            }

        }