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
Visitor
Posts: 1
Registered: ‎09-17-2013
My Device: z10

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.

Developer
Posts: 824
Registered: ‎10-16-2012
My Device: Red Z10

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)

Containers

ImageViews

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