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

Posts: 1
Registered: ‎09-17-2013
My Device: z10
My Carrier: *

How to Implement iphone UIscrollView component in Blackberry 10 Cascade

I am new in Blackberry 10 application development. I want to implement iphone UIscrollView component in Blackberry 10. I found an app named  PGA TOUR that using such type of component  and   here is the screen shot of the  component in that app.  please help me how  could i implement that in my app.

Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: How to Implement iphone UIscrollView component in Blackberry 10 Cascade

[ Edited ]

This was probably done with html5, it seems like a web element.


I don't belive there is a default QML component like that but making your own doesn't seem like it would be too challenging, depending on how you want it to function you'll need a timer to change 'pages' and the selected button every so often, then all that's left after that is a container paired with onTouch to detect a swipe


Things you'll need

QTimer (Here's a github sample for timer & swipe gesture)

page assets(images or component definitions of each 'page')

Button assets(1 white, 1 colored)



onTouch (Swipe gesture)

a few variables to keep track of things


Container {
  id: root
  property bool myControlSwipe
  Container {
    id: myControl
    layout: DockLayout {} //allows image asset to sit above content
    onTouch: {
       if (event.isDown()){
          //let user visually know touch initated
       } else if (event.isMove()){
           root.myControlSwipe = true
           //follow swipe gesture samples to detect
           //if a swipe was left or right then
           //change content image and selected button based on gesture
       } else if (event.isUp()){
           if (!root.myControlSwipe){
              //don't interact with content user is swiping
           } else {
              //interact with content from a click
root.myControlSwipe = false } else if (event.isCancel()){ //revert to content state before touch
root.myControlSwipe = false } } Container { id: myControlContent ImageView{ //assuming you're using an image to relay content imageSource: "asset:///images/currentContent.png" } } Container { id: myControlButtons layout: StackLayout{ orientation: LayoutOrientation.LeftToRight } Container { ImageView{ //use an image view for each button imageSource: "asset:///images/whiteButton.png" } } Container { ImageView { //use a colored image for the active button imagesource: "asset:///images/coloredButton.png" } } } } }

 *this is just an overview there may be some typo's I just typed this out in the code editor here