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
Telespielstube
Posts: 15
Registered: ‎07-09-2013
My Device: Z10
My Carrier: o2
Accepted Solution

How to move a box on screen

Hi ,

 

I just started to develop in Cascades and spent the afternoon by downloading samples and reading through the documentation. My question concerns the simple "Hello world" Cascades sample. Namely, I tried to combine it with a simple touch gesture but I cannot figure out how to get it to work properly. The idea is as follows: tap on the bubble  and drag it around, or tap on the screen an the bubble jumps to the tapped coordinate. I guess the "translationX, translationY" in the onTouch body is wrong, but I have no idea how to correct it. 

 

thanks in advance,

 

import bb.cascades 1.0

Page {
    // A container is used to gather visual items together.
    content:Container {

        attachedObjects: [
            // Non UI objects are specified as attached objects
            ImagePaintDefinition {
                id: backgroundPaint
                imageSource: "asset:///images/background.png"
            }
        ]
        layout: DockLayout {
        }

        background: backgroundPaint.imagePaint

        // The container containing the bubble image and text
        Container {
             id: movingBubble
             horizontalAlignment: HorizontalAlignment.Center
             verticalAlignment: VerticalAlignment.Center
             layout: DockLayout {
             } 

			// The bubble image
             ImageView {  
                  imageSource: "asset:///images/bubble.png"
             }

             // A text label with the comforting hello world text
             Label {
                text: qsTr("Hello World") + Retranslate.onLanguageChanged

                // The Label text style.
                textStyle.base: SystemDefaults.TextStyles.BigText
                textStyle.fontWeight: FontWeight.Bold
                textStyle.color: Color.create("#ff5D5D5D")
                
                // Center the text in the container.
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
            }// Label
           
        }// Container

        onTouch: {
            movingBubble.translationX = event.localX - (movingBubble.preferredWidth / 2);
            movingBubble.translationY = event.localY - (movingBubble.preferredHeight / 2);
        }
    }// Container
}// Page 

 

 

 

 

Please use plain text.
Developer
zezke
Posts: 1,004
Registered: ‎12-12-2010
My Device: Z10 (red Limited Edition)
My Carrier: Mobile Vikings

Re: How to move a box on screen

A little sample showing how to drag a Container on the screen.

 

import bb.cascades 1.0
  
Page {
    content: Container {
        // A container to represent a blue square.
        Container {
            id: movingContainer
            preferredWidth: 150
            preferredHeight: 150
            background: Color.Blue
        }
          
        onTouch: {
            // If the touch event is a move event, change the color of the 
            // square to green. If the touch event is an up event, change the 
            // color back to blue.
            if (event.touchType == TouchType.Move)
                movingContainer.background = Color.Green;
            else if (event.touchType == TouchType.Up)
                movingContainer.background = Color.Blue;
                  
            // Determine the location inside the container that was touched, 
            // and move the blue square to that location.
            movingContainer.translationX = event.localX -  
                                          (movingContainer.preferredWidth / 2);
            movingContainer.translationY = event.localY - 
                                          (movingContainer.preferredHeight / 2);
        }
    } // end of top-level Container.
} // end of Page.

 Source

-------------------------------------------
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!
Please use plain text.
BlackBerry Development Advisor (Retired)
robbieDubya
Posts: 418
Registered: ‎07-18-2012
My Device: Q10
My Carrier: Bell Canada

Re: How to move a box on screen

Alternate code, for when you don't have a preferred width/height;

 

       Container {
            id: movingBubble
            property int lastY;
            property int lastX;

 snip

 

        onTouch: {
            if (event.isDown()) {
                movingBubble.lastX = event.localX;
                movingBubble.lastY = event.localY;
            } else if (event.isMove()) {
	            movingBubble.translationX += event.localX - movingBubble.lastX;
	            movingBubble.translationY += event.localY - movingBubble.lastY;
	            movingBubble.lastX = event.localX;
	            movingBubble.lastY = event.localY;
	        }
        }

 

--
Rob is no longer associated with BlackBerry.
Please use plain text.
Contributor
Telespielstube
Posts: 15
Registered: ‎07-09-2013
My Device: Z10
My Carrier: o2

Re: How to move a box on screen

@robbieDubya great!! Thanks for the swift solution!!
Please use plain text.