Adobe AIR Development

[kmitchell]

I was reviewing the UI design guidelines and it mentioned a menubar:

"Use a menu bar to move UI components off the screen
The application menu can include primary or secondary
Display the menu when dragging from the top of the screen"

Is the menubar built in? Or it simply means, I can create one and show it when the event "swipe_start" is triggered?

What does primary and secondary mean? Does it mean main and submenus?

If there is a menu built in, how to I  add to it? If I am creating one, what would be the best design approach? I didnt see a QNX class for menus. How would the menu disappear? Would it be as simple as when something is clicked?

If the best way to get the menubar is to swipe down to activate it? Is it implying that the menubar is the Main Application Menu bar and any dialogs within the app actions is to be handled with popups, buttons etc  and to not use an always visible menubar  because it uses  valuable screen realestate.

I understand these are guidelines, are there are always exceptions to the rule. I just want to get a feel on best practices.

Keith

[JRab · Accepted solution]

Hey kmitchell,

you basically answered most of your questions but ill confirm them

The menu bar from what i've seen in the docs so far is not built in and you have to create one on your own using the SWIPE_START event. Primary and secondary does in fact seem to be what you described as main and submenus. What i took from it was it can be a menu that looks the same every time u swipe down and has basic functions or if something is going on in the application and u swipe down the menu reflects the events of what is occuring. in regards to how it should look, there is a video of a demo that was presented at the adobe max conference where it shows a demo of the camera app using the swipe down menu. here is the link. go to the last 13:45 of the video to see the demo:

http://2010.max.adobe.com/online/2010/MAX260_1288217641375UQJD

the menu's design could be that as soon as you click an option it'd disappear. its really what ever you want it to be. i dont think there are any specifics.

and from the webcast its been stated that they dont like seeing a title bar kind of menu. now i agree and disagree with that statement but maybe im just not used to the swipe down event type menu. so ill see where that goes.

also here is a code me and HarryDodgson were working on in regards to the SWIPE_START event and menu:

SwipeDownTest.as (Main Application File)

package
{
	import caurina.transitions.Tweener;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;
	
	import qnx.events.QNXApplicationEvent;
	import qnx.system.QNXApplication;
	
	
	// The following metadata specifies the size and properties of the canvas that
	// this application should occupy on the BlackBerry PlayBook screen.
	[SWF(width="1024", height="600", backgroundColor="#F4F4F4", frameRate="30")]
	public class SwipeDownTest extends Sprite
	{
		private var ui:UI;
		private var swiping:Boolean;
		
		public function SwipeDownTest()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			ui = new UI();
			
			addChild(ui);
			
			QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_START, onSwipeStart);
		}
		
		private function onSwipeStart( e:QNXApplicationEvent ):void
		{
			swiping = true;
			addEventListener( Event.ENTER_FRAME, trackMouse );
			stage.addEventListener( MouseEvent.MOUSE_UP, mouseUp );
		}
		
		private function trackMouse( e:Event ):void
		{
			var pos:int = stage.mouseY;
			
			if (pos > 123) pos = 123;
			if (pos < 0) pos = 0;
			
			ui.y = pos;
		}
		
		private function mouseUp( e:MouseEvent ):void
		{
			if (!swiping)
			{
				Tweener.addTween(ui, {y: 0, time: .3, transition: "linear"});
			}
			
			removeEventListener( Event.ENTER_FRAME, trackMouse );

			
			swiping = !swiping;
		}
	}
}

UI.as (menu file)

package
{
	import flash.display.Shape;
	import flash.display.Sprite;
	

	public class UI extends Sprite
	{
		private var sectionOne:Shape;
		private var sectionTwo:Shape;
		
		public function UI()
		{
			//set it up with two sections
			
			sectionOne = new Shape();
			sectionOne.graphics.beginFill(0x333333, 1);
			sectionOne.graphics.drawRect(0,-123,1024,123);
			sectionOne.graphics.endFill();
			
			sectionTwo = new Shape();
			sectionTwo.graphics.beginFill(0x666666, 1);
			sectionTwo.graphics.drawRect(0,0,1024,600);
			sectionTwo.graphics.endFill();
			
			addChild(sectionOne);
			addChild(sectionTwo);
			
			
			
			
		}
	}
}

hope that answered most of your questions. good luck!

[kmitchell]

Thanks JRAB.

I did review the video and I'll go ahead and implement this type of menu. I guess I'm use to menus and buttons to move around. This changes my design thinking somewhat. It might be for the better

[JRab]

Hah yeah. Change is great. Makes you see things differently and allows you to grow as a programmer by changing your perspective!

[samasrinivas]

Thanks for the code JRAB. After implementing the code seems like the menu bar would draw over the existing content. From based on the what the actual menu should be, seems like the existing content needs to be pushed down without the menu bar overlaying the contents. Actually this is my requirement for the application I am building.

Any way it is possible to do so?

[Harry_Dodgson]

Hi,

The menu bar draws from Y=0 to Y = -123 so it is normally hidden above the main screen.  So when it is shown, the whole screen moves down by 123 pixels to reveal it.

Harry

[JRab]

hey,

yes what harry said is correct. in order for you to have the effect of seeing the entire screen shift downwards with the menu instead of just an overlay, you must include an additional tween to push down the sprite or container holding your main screen objects. in th example above it has two shapes in the same class and the class itself is being tweened and not just the one shape.

[specific]

Hi

can anyone help me please about dropdown menu.

[jtegen]

QNX does not have a native menu or menu bar.  You will have to create your own or use icon buttons or other controls in the navigation/menu bar.