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

Adobe AIR Development

Reply
Developer
Posts: 133
Registered: ‎12-02-2010
My Device: Z10 & Dev Alpha C
My Carrier: T
Accepted Solution

enableBackButtonDrag - Action Bar Back Button Dragging Need help!

All,


Can anyone please share a working example on how to implmenet the back button dragging in adobe air. I would like  to implement this into my application. And I could not get it working properly. 

 

There is an api for it: enableBackButtonDrag = true;  https://developer.blackberry.com/air/apis/bb10/qnx/fuse/ui/actionbar/ActionBar.html#enableBackButton...

 

 

Thanks!

---------------------------------------------------------------------
Developer of Stocks for Blackberry 10
Highlighted
Developer
Posts: 194
Registered: ‎11-12-2010
My Device: Not Specified

Re: enableBackButtonDrag - Action Bar Back Button Dragging Need help!

Here is how I solved it. It's a little complicated, because when you drag the Back button you also get an ACTION_SELECTED event, which presumably you've hooked up to close the current page (go back), so that needs to be disabled during dragging.

 

So if anyone has a cleaner way of doing this, please let us know!

 

private function initActionBar():void
{
	actionBar = new ActionBar();
	
	actionBar.backButton = new Action(Strings.BACK[lang], null, "back");
	actionBar.enableBackButtonDrag = true;
	
	actionBar.y = display.stage.stageHeight - actionBar.height;		
	
	actionBar.addEventListener(ActionEvent.ACTION_SELECTED, onActionSelected);
	actionBar.addEventListener(DragEvent.DRAG_BEGIN, onDragBegin);
	
	display.addChild(actionBar);
}		

protected function onDragBegin(event:DragEvent):void
{
	actionBar.addEventListener(DragEvent.DRAG_MOVE, onDragMove);
	actionBar.addEventListener(DragEvent.DRAG_END, onDragEnd);
	
	firstMove = true;
}

protected function onDragMove(event:DragEvent):void
{
	// move the ctrlPanel with the dragged button
	display.x += event.deltaX;
	
	if (firstMove) {
		// start intercepting ACTION_SELECTED events to prevent Back-button 'tap' to register during drag
		actionBar.addEventListener(ActionEvent.ACTION_SELECTED, ignoreBackButton, false, 100);
		firstMove = false;
	}
}

protected function ignoreBackButton(event:ActionEvent):void
{
	// do nothing and stop the event to get to trigger the onActionSelected handler			
	event.stopImmediatePropagation();
}


protected function onDragEnd(event:DragEvent):void
{
	actionBar.removeEventListener(DragEvent.DRAG_MOVE, onDragMove);
	actionBar.removeEventListener(DragEvent.DRAG_END, onDragEnd);
	
	// depending on how far the user has dragged, close the current page or snap back
	if (display.x > display.stage.stageWidth/2) {
		close();
		restoreBackButton();
	} else {
		Tweener.addTween(display, {x: 0, time: .3, transition: "EaseOutCubic", onComplete: restoreBackButton});
	}
}


protected function restoreBackButton():void
{
	// stop intercepting taps
	actionBar.removeEventListener(ActionEvent.ACTION_SELECTED, ignoreBackButton, false);
}


private function onActionSelected(actionEvent:ActionEvent):void
{    
// TODO: add other actions switch(actionEvent.action.data) { case "back": close(); break; default: } }

 


My app : Get set - Get up!   Get ready for the snooze revolution.

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: enableBackButtonDrag - Action Bar Back Button Dragging Need help!

Not that I have seen a lot of apps on BB10, but what is the purpose to drag the back button? Is is suppose to allow you to see hidden actions that would normally be accessible in the overflow list?
Developer
Posts: 194
Registered: ‎11-12-2010
My Device: Not Specified

Re: enableBackButtonDrag - Action Bar Back Button Dragging Need help!

I understood it to be a way of peaking ... like on pages where you have a lot of controls where you may not want to implement a side swipe just anywhere on the page.

 

I'll have a look if I can find where I got that idea from - maybe I'm wrong (?)

 


My app : Get set - Get up!   Get ready for the snooze revolution.

Developer
Posts: 194
Registered: ‎11-12-2010
My Device: Not Specified

Re: enableBackButtonDrag - Action Bar Back Button Dragging Need help!

hm, I guess I might have taken the comment below to mean that the back-button should not only be clickable but draggable too. I can't find anything more explicit ...

 

"The back and peek gestures don’t require the same degree of accuracy as targeting the Back button and provide a greater set of options to users. Users can quickly go back with a sloppy swipe or consciously peek to glance at new notifications."

 

from https://developer.blackberry.com/design/bringing_the_design_principles_together.html

 

 


My app : Get set - Get up!   Get ready for the snooze revolution.

 

Developer
Posts: 133
Registered: ‎12-02-2010
My Device: Z10 & Dev Alpha C
My Carrier: T

Re: enableBackButtonDrag - Action Bar Back Button Dragging Need help!

Thank you so much for that solution!! I modified it a bit and got it working with my app! Great job!!

 

As a small (I should be giving you a bigger one) thank you!! I will be purchasing your application (Get Set Get Up) on my playbook and doing an in depth review Smiley Happy

---------------------------------------------------------------------
Developer of Stocks for Blackberry 10
Developer
Posts: 194
Registered: ‎11-12-2010
My Device: Not Specified

Re: enableBackButtonDrag - Action Bar Back Button Dragging Need help!

Wow, thanks - that's a very thoughtful way of giving kudos!   :-)