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
Innovatology
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone
Accepted Solution

BB10 Beta4 ActionBar issues

[ Edited ]

There seem to be a lot of problems with the ActionBar in BB10 AIR SDK beta 4. I have the following test code to create a simple ActionBar:

 

package
{
import flash.display.DisplayObjectContainer;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import qnx.fuse.ui.actionbar.ActionBar;
import qnx.fuse.ui.actionbar.ActionPlacement;
import qnx.fuse.ui.core.Action;
import qnx.fuse.ui.core.TabAction;
	
[SWF(backgroundColor="#777777", frameRate="60")]
public class ActionBarTest extends Sprite
{
  
  private var actionBar:ActionBar;
  private var actionBarOverflow:Sprite;
  
  public function ActionBarTest()
  {
    super();
// set up stage stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.addEventListener( Event.RESIZE, function(e:Event):void { actionBar.y = stage.stageHeight-actionBar.height; }); // set up overflow actionBarOverflow = new Sprite(); addChild(actionBarOverflow); // set up actionbar actionBar = new ActionBar(); actionBar.backButton = null; if(true) // test: turn tabOverflowParent on/off actionBar.tabOverflowParent = actionBarOverflow; if(false) { // test: switch between actions and tabs actionBar.showTabsFirstOnBar(false); actionBar.reserveActionSpace(true); actionBar.backButton = null; actionBar.addAction(new Action("A1", "star.png", null, ActionPlacement.ON_BAR)); actionBar.addAction(new Action("A2", "star.png", null, ActionPlacement.ON_BAR)); actionBar.addAction(new Action("A3", "star.png", null, ActionPlacement.ON_BAR)); actionBar.addAction(new Action("A4", "star.png", null, ActionPlacement.ON_BAR)); actionBar.addAction(new Action("A5", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A6", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A7", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A8", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A9", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A10", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A11", "star.png", null, ActionPlacement.IN_OVERFLOW)); actionBar.addAction(new Action("A12", "star.png", null, ActionPlacement.IN_OVERFLOW)); } else { actionBar.showTabsFirstOnBar(true); actionBar.reserveActionSpace(false); actionBar.addAction(new TabAction("T1", "star.png")); actionBar.addAction(new TabAction("T2", "star.png")); actionBar.addAction(new TabAction("T3", "star.png")); actionBar.addAction(new TabAction("T4", "star.png")); actionBar.addAction(new TabAction("T5", "star.png")); actionBar.addAction(new TabAction("T6", "star.png")); actionBar.addAction(new TabAction("T7", "star.png")); actionBar.addAction(new TabAction("T8", "star.png")); actionBar.addAction(new TabAction("T9", "star.png")); actionBar.addAction(new TabAction("T10", "star.png")); actionBar.addAction(new TabAction("T11", "star.png")); actionBar.addAction(new TabAction("T12", "star.png"));
} addChild(actionBar); } // constructor } // class } // package

 It has a couple of if(true/false) conditions to test various scenarios.

 

With actions A1..A12:

 

  • Back button space is always reserved, even if there is no back button
  • Only 3 actions are displayed, even if there is space for a 4th
  • Actions order on ActionBar is incorrect: A4 A1 A2
  • Action overflow menu appears in "expanded" form, i.e. not with just icons like Cascades/Webworks
  • Action overflow menu is never displayed on desktop AIR
  • Action labels aren't displayed in action bar on 720x720 device

With tabs T1..T12:

 

  • When tab overflow is redisplayed, any tabs selected before have blue border
  • Tab buttons in ActionBar are sometimes greyed out (but still selectable)
  • If actionBar.tabOverflowParent is set, overflow menu is never hidden on selection of item or tapping elsewhere
  • If actionBar.tabOverflowParent is not set, tab overflow is not displayed on desktop AIR
  • Tab overflow menu incorrectly sized, making last tab unreachable if z-order of overflow is behind actionbar and there are more tabs than will fit on the screen
  • Tab labels aren't displayed in action bar on 720x720 device

 

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: BB10 Beta4 ActionBar issues

Not certain if some of these are issues.  I already asked them about the 3-4 button limit.  This even occurs when the device is in landscape mode and there is plenty of room for more buttons.

 

The overflow wont work on the desktop because it is a separate window on the device (vs. in app panel).  I discovered this when I had an app the invoke another app "in view" and the zOrder of the overflow panel worked properly over the in view service app.

 

The expanded view, I believe is correct for overflow of actions.  The icon only bar occurs when the side bar is from context sensitive menu, and that works fine under AIR.

 

For 720x720 device, it was mentioned that labels are removed to save space on the smaller screen.

 

I will try your sample later to see what you are seeing.  Attaching screen shots might help if RIM sees this.

 

Some of the features in your test, I have not played with.

 

Good work.

Please use plain text.
Developer
Innovatology
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: BB10 Beta4 ActionBar issues

[ Edited ]

Thanks for replying John


The overflow wont work on the desktop because it is a separate window on the device (vs. in app panel). 


The tab overflow does work (sort of) on the desktop, so there is no reason why the action overflow shouldn't too. If necessary it should use a configurable z-order,like the tab overflow does. Debugging with the desktop AIR is much faster than on the device or simulator. Of course we can't expect the invoke framework to work on the desktop, but basic features like this should be no problem.


The expanded view, I believe is correct for overflow of actions.  The icon only bar occurs when the side bar is from context sensitive menu, and that works fine under AIR.


Understood. Not very consistent from a UX perspective, but oh well...


For 720x720 device, it was mentioned that labels are removed to save space on the smaller screen.


If so, that should be configurable via a property on the control or skin.


Attaching screen shots might help if RIM sees this.


I'll attach some screen shots to JIRA entries once I'm sure I'm not overlooking something basic. The docs of ActionBar are rather terse, and the only sample provided (WeatherGuesser) is overcomplicated and still doesn't cover half the bases, so a lot of this was guesswork on my part.

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: BB10 Beta4 ActionBar issues

I agree on the docs. A lot of trial an error to figure out what some of the methods mean and actually do. I know RIM is working on improving the docs.
Please use plain text.
BlackBerry Development Advisor
jdolce
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: BB10 Beta4 ActionBar issues

 

Hey Jon,

 

Here is the answers to all your questions below, or in some cases explanations as to why it happens. John, with an "h", did reply and is correct on some of these, but figured I would confirm them as well.

 

 

 

With actions A1..A12:

Back button space is always reserved, even if there is no back button

[JD] - This is correct based on UX Guidelines


Only 3 actions are displayed, even if there is space for a 4th
[JD] - ActionBar will only show a maximum of 3 actions.

 

Actions order on ActionBar is incorrect: A4 A1 A2
[JD] - Need to double check the rules on this one.

 

Action overflow menu appears in "expanded" form, i.e. not with just icons like Cascades/Webworks
[JD] - Action overflow menu always appears expanded. I think you are confused with the Context Menu, which looks similar but has different behaviour.
You can see this is the same as Cascades if you add a contact and then select that contact. The 3 dots button in the actionbar shows the action overflow.
If you long press on the contact in the list you will see the context menu, which is different.

 

Action overflow menu is never displayed on desktop AIR
[JD] - The reason this happens is because we have no way of knowing which depth we should show the menu at. So we use NativeWindows to display the menu above your application window. Because NativeWindows is not supported on any other AIR mobile platform besides BlackBerry, Flash Builder will not allow these to be displayed on the desktop. FDT will allow you to show this on the desktop if you add the following to your app descriptor, <supportedProfiles>extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles>.

 

Action labels aren't displayed in action bar on 720x720 device
[JD] - This is expected. This is the same behaviour when you use the ActionBar in landscape on the 768x1280 device as well. This is to give the content more room.


With tabs T1..T12:

When tab overflow is redisplayed, any tabs selected before have blue border
[JD] - fixed in final version of the sdk.

 

Tab buttons in ActionBar are sometimes greyed out (but still selectable)
[JD] - In this example it looks like a bug, but it is actually correct. When the tab overflow menu is fully expanded the actions are disabled. In most cases they are not visible because the action bar has animated to the right. Here things look like it gets in a weird state, but if set up correctly things work as expected.

 

If actionBar.tabOverflowParent is set, overflow menu is never hidden on selection of item or tapping elsewhere
[JD] - This is because it is expected that you cover the tabOverflowParent with your content. This property is here so that you can manage the depth of the menu. Based on UX guidelines the menu should be underneath your content and the content animates to the right to reveal it.


If actionBar.tabOverflowParent is not set, tab overflow is not displayed on desktop AIR
[JD] - We use NativeWindow in this case. Same as above.


Tab overflow menu incorrectly sized, making last tab unreachable if z-order of overflow is behind actionbar and there are more tabs than will fit on the screen
[JD] - When the tab overflow menu is visible the actionbar should animate out of the way showing the correct size of the tab overflow menu.


Tab labels aren't displayed in action bar on 720x720 device
[JD] - Same as Actions

 

Here is an updated sample based on yours that will help show how you really want to set this up.

 

package
{
	import qnx.fuse.ui.actionbar.ActionBar;
	import qnx.fuse.ui.actionbar.ActionPlacement;
	import qnx.fuse.ui.core.Action;
	import qnx.fuse.ui.core.TabAction;
	import qnx.fuse.ui.events.DragEvent;

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;

	[SWF(backgroundColor="#777777", frameRate="60", width=768, height=1280)]
	public class actionbarsample extends Sprite
	{
		private var actionBar:ActionBar;
		private var actionBarOverflow:Sprite;
		private var __slideX:Number = 0;
		private var content:Sprite = new Sprite();

		public function actionbarsample()
		{
			super();

			// set up stage
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.addEventListener( Event.RESIZE, function( e:Event ):void
			{
				actionBar.y = stage.stageHeight - actionBar.height;
			} );

			// set up overflow
			actionBarOverflow = new Sprite();
			addChild( actionBarOverflow );
			
			
			content.addChild( new Bitmap( new BitmapData( stage.stageWidth, stage.stageHeight, false, 0xFFFFFFFF ) ) );
			
			addChild( content );
			
			
			// set up actionbar
			actionBar = new ActionBar();
			actionBar.backButton = null;

			actionBar.addEventListener( DragEvent.DRAG_MOVE, onDragMove );

			if (true) // test: turn tabOverflowParent on/off
				actionBar.tabOverflowParent = actionBarOverflow;

			if (true)
			{
				// test: switch between actions and tabs
				actionBar.showTabsFirstOnBar( false );
				actionBar.reserveActionSpace( true );
				actionBar.backButton = null;
				actionBar.addAction( new Action( "A1", "star.png", null, ActionPlacement.ON_BAR ) );
				actionBar.addAction( new Action( "A2", "star.png", null, ActionPlacement.ON_BAR ) );
				actionBar.addAction( new Action( "A3", "star.png", null, ActionPlacement.ON_BAR ) );
				actionBar.addAction( new Action( "A4", "star.png", null, ActionPlacement.ON_BAR ) );
				actionBar.addAction( new Action( "A5", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A6", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A7", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A8", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A9", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A10", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A11", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
				actionBar.addAction( new Action( "A12", "star.png", null, ActionPlacement.IN_OVERFLOW ) );
			}
			else
			{
				actionBar.showTabsFirstOnBar( true );
				actionBar.reserveActionSpace( false );
				actionBar.addAction( new TabAction( "T1", "star.png" ) );
				actionBar.addAction( new TabAction( "T2", "star.png" ) );
				actionBar.addAction( new TabAction( "T3", "star.png" ) );
				actionBar.addAction( new TabAction( "T4", "star.png" ) );
				actionBar.addAction( new TabAction( "T5", "star.png" ) );
				actionBar.addAction( new TabAction( "T6", "star.png" ) );
				actionBar.addAction( new TabAction( "T7", "star.png" ) );
				actionBar.addAction( new TabAction( "T8", "star.png" ) );
				actionBar.addAction( new TabAction( "T9", "star.png" ) );
				actionBar.addAction( new TabAction( "T10", "star.png" ) );
				actionBar.addAction( new TabAction( "T11", "star.png" ) );
				actionBar.addAction( new TabAction( "T12", "star.png" ) );
			}

			content.addChild( actionBar );
		}

		private function onDragMove( event:DragEvent ):void
		{
			__slideX += event.deltaX;
			content.x = Math.round( __slideX + stage.stageWidth );
		}
		// constructor
	}
	// class
} // package 

 

Please use plain text.
Developer
Innovatology
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: BB10 Beta4 ActionBar issues

Thanks for the reply Julian! My comments marked with [JW]... 

 

 

With actions A1..A12:

Back button space is always reserved, even if there is no back button

[JD] - This is correct based on UX Guidelines

[JW] - OK. I looked through the guidelines but couldn't find that. Still, bit of a waste of valuable screen space IMO.

 

Only 3 actions are displayed, even if there is space for a 4th
[JD] - ActionBar will only show a maximum of 3 actions.

[JW] - Even in landscape, where there is enough space for more?

 

Action overflow menu appears in "expanded" form, i.e. not with just icons like Cascades/Webworks

[JD] - Action overflow menu always appears expanded. I think you are confused with the Context Menu, which looks similar but has different behaviour.

[JW] - OK. Confusing for the user though.

 

Action overflow menu is never displayed on desktop AIR
[JD] - The reason this happens is because we have no way of knowing which depth we should show the menu at

[JW] - Wouldn't an actionOverflowParent property be a better solution?

 

Action labels aren't displayed in action bar on 720x720 device
[JD] - This is expected. This is the same behaviour when you use the ActionBar in landscape on the 768x1280 device as well. This is to give the content more room.

[JW] - Needs to be configurable. Some apps have plenty of room.


With tabs T1..T12:

When tab overflow is redisplayed, any tabs selected before have blue border
[JD] - fixed in final version of the sdk.

 

Tab buttons in ActionBar are sometimes greyed out (but still selectable)
[JD] - In this example it looks like a bug, but it is actually correct. When the tab overflow menu is fully expanded the actions are disabled. In most cases they are not visible because the action bar has animated to the right. Here things look like it gets in a weird state, but if set up correctly things work as expected.

[JW] - Ah OK, I didn't realize that the content was supposed to move right. Needs documentation.

 

If actionBar.tabOverflowParent is set, overflow menu is never hidden on selection of item or tapping elsewhere
[JD] - This is because it is expected that you cover the tabOverflowParent with your content. This property is here so that you can manage the depth of the menu. Based on UX guidelines the menu should be underneath your content and the content animates to the right to reveal it.

[JW] - Understood. Needs documentation.


If actionBar.tabOverflowParent is not set, tab overflow is not displayed on desktop AIR
[JD] - We use NativeWindow in this case. Same as above.

[JW] - Will need to experiment.


Tab overflow menu incorrectly sized, making last tab unreachable if z-order of overflow is behind actionbar and there are more tabs than will fit on the screen
[JD] - When the tab overflow menu is visible the actionbar should animate out of the way showing the correct size of the tab overflow menu.

[JW] - OK, needs to default to that behaviour or have documentation.


Tab labels aren't displayed in action bar on 720x720 device
[JD] - Same as Actions

 

 

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Please use plain text.
Developer
apman
Posts: 193
Registered: ‎11-12-2010
My Device: Not Specified

Re: BB10 Beta4 ActionBar issues


Only 3 actions are displayed, even if there is space for a 4th

[JD] - ActionBar will only show a maximum of 3 actions.

[JW] - Even in landscape, where there is enough space for more?


I know RIM wants to enforce certain usability principles by not allowing people to cram too much into the ActionBar, but the way it's done it seems a little bit too limiting.

 

I spent ages trying to get 2 tabs and 2 actions next to each other. Seeing that there are 5 slots (even in portrait mode I can have 4 tabs and 1action, or 1 tab, 3 actions + the 3-dot button for the overflow) it didn't seem such an unreasonable idea ... but I can't get it to work.  I don't want my users having to open a menu just to access a single action (or tab), that by common sense judgement could have easily gone directly into the ActionBar. So I might end up using actions for what would clearly be better represented as tabs - but I think for most users convenience goes over architectural purity.

 

Anna

 


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

Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: BB10 Beta4 ActionBar issues

I had the same issue. Got to the point, I dont deal with tabs at all. Everything is an action. You shold be able to use the back button position if it is not there.
Please use plain text.
BlackBerry Development Advisor
jdolce
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: BB10 Beta4 ActionBar issues

In regards to the number of tabs/actions available shown in the Action Bar I will forward the feedback to the UX team. The AIR SDK wants to make sure it remains consistent with the other runtimes and SDK's on the platform so they all behave the same.

Please use plain text.