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
New Developer
Posts: 24
Registered: ‎10-25-2010
My Device: Not Specified

Re: App specific system menu

Hi Alex,

 

Sorry, I've been really busy and completely forgot to post the method I used.

 

I hope this is of help to you.. I think this is what you're looking for.

 

1) First you need to create a new MXML Component which will define the App Menu. Below is what I used. 

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" borderVisible="false"
		  xmlns:s="library://ns.adobe.com/flex/spark" width="1024" height="75" xmlns:mx="library://ns.adobe.com/flex/mx" >

	<fx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;

			protected function btn_clickHandler(event:MouseEvent):void
			{
			   // Figure out which button was pressed, and load appropriate view.
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:backgroundFill>
		<s:SolidColor alpha="0.9" color="#000000" />
	</s:backgroundFill>
	<s:layout>
		<s:HorizontalLayout horizontalAlign="right" verticalAlign="middle" paddingTop="5" paddingBottom="5" paddingRight="5" paddingLeft="5" gap="5"/>
	</s:layout>
	<s:Button id="btn_refresh" label="Refresh" height="60" fontSize="18" click="btn_clickHandler(event)"/>
	<s:Label text="APPLICATION NAME" fontSize="32" styleName="FeedItemTitle" textAlign="center" width="100%" height="100%" verticalAlign="middle" />
	<s:Button id="btn_about" label="About" height="60" fontSize="18" click="btn_clickHandler(event)"/>
</s:BorderContainer>

As you can see, it's got a fixed width/height of 1024px/75px. you can use percent values if you wish.

 

2) Now, you need to add an event listener for the SWIPE_DOWN Event on your Flex Mobile Application, and use the Flex PopUpManager class to show/hide the AppMenu and apply some Effects to it. (Sample below) PS: Ignore the AppModel references, that's a singleton class I'm using for my app. (It's not required) --

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.RSSReaderHome" creationComplete="creationCompleteHandler(event)">
	<fx:Style source="/styles/default.css" />
	<fx:Script>
		<![CDATA[
			import mx.effects.Fade;
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.events.ResizeEvent;
			import mx.managers.PopUpManager;
			
			import qnx.display.Display;
			import qnx.events.QNXApplicationEvent;
			import qnx.system.Device;
			import qnx.system.QNXApplication;
			
			import rssreader.header.HeaderMenu;
			import rssreader.model.AppModel;
			
			private var headerTimer:Timer = new Timer(5000,1);
			
			[Bindable] private var headerMenu:HeaderMenu;
			[Bindable] private var headerMenuDisplayed:Boolean = false;
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN, onApplicationSwipeDown);
				
				this.addEventListener(ResizeEvent.RESIZE, onApplicationResize);
				
				AppModel.getInstance().screenHeight = this.height;
				AppModel.getInstance().screenWidth = this.width;
				
				AppModel.getInstance().viewNavigator = this.navigator;
				
				headerMenu = new HeaderMenu();
				headerMenu.addEventListener(MouseEvent.CLICK, onHeaderMenuClick);
				headerMenu = headerMenu;
				
				headerTimer.addEventListener(TimerEvent.TIMER, onHeaderMenuTimerEvent);
			}
			
			private function onApplicationResize(event:ResizeEvent) : void
			{
				AppModel.getInstance().screenHeight = this.height;
				AppModel.getInstance().screenWidth = this.width;
			}
			
			protected function onApplicationSwipeDown(event:QNXApplicationEvent) : void
			{	
				showHeaderMenuPopup();
			}
			
			private function showHeaderMenuPopup() : void
			{
				if (!headerMenuDisplayed)
				{
					headerMenu.x = 0;
					headerMenu.y = 0;
					
					PopUpManager.addPopUp(headerMenu,this, false);
					
					headerPopupEffectIn.end();
					headerPopupEffectIn.play();
					
					headerMenuDisplayed = true;
				}
				
				headerTimer.reset();
				headerTimer.start();
			}
			
			private function onHeaderMenuTimerEvent(event:TimerEvent) : void
			{	
				hideHeaderMenuPopup();
				
				headerTimer.stop();
			}
			
			private function onHeaderMenuClick(event:MouseEvent) : void
			{
				hideHeaderMenuPopup();
			}
			
			private function hideHeaderMenuPopup() : void
			{
				headerPopupEffectOut.end();
				headerPopupEffectOut.play();
				headerPopupEffectOut.addEventListener(EffectEvent.EFFECT_END, headerMenuHidden);
			}
			
			private function headerMenuHidden(event:EffectEvent) : void
			{
				PopUpManager.removePopUp(headerMenu);
				headerPopupEffectIn.removeEventListener(EffectEvent.EFFECT_END, headerMenuHidden);
				headerMenuDisplayed = false;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:Parallel id="headerPopupEffectIn" target="{headerMenu}">
			<s:Move duration="250" yFrom="-75" xTo="0" yTo="0" easer="{sineEaser}" />
		</s:Parallel>
		<s:Parallel id="headerPopupEffectOut" target="{headerMenu}">
			<s:Move duration="250" yFrom="0" xTo="0" yTo="-75" easer="{sineEaser}" />
		</s:Parallel>
		<s:Sine id="sineEaser" easeInFraction="0.2" />
	</fx:Declarations>
</s:MobileApplication>

 I use a timer to automatically hide the menu if the user doesn't interact with it for 5 seconds.

 

Notice that I'm not using Tweeners, but instead I'm using Effects with MXML declarations. I find this easier to read.. It's just a matter of preference.

 

Hope that helps.

 

Cheers,

 

 

 

New Developer
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: App specific system menu

Thanks everyone for the replies.

 

@JRab and @mseth,

 

I tried both of your methods but I get this as an error for both:


1046: Type was not found or was not a compile-time constant: QNXApplicationEvent

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: App specific system menu

hey alex,

 

make sure to add the qnx-screen.swc and blackberry.swc (this one i just add for good measure). you can add the swcs by right clicking on your project and go to Properties > Flex Build Path and add the swc by browsing to the blackberry sdk folder. the two folders are qnx-screen and the other one called blackberry. hope that clears things up. good luck!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Developer
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: App specific system menu

Thanks JRab,

 

That cleared up the issue, but now I have more issues. This is my next error:


1172: Definition qnx.displaySmiley Very Happyisplay could not be found.

 

as well as having a few warnings:

 

Design mode could not load blackberry.swc. It may be incompatible with this SDK, or invalid.
Design mode could not load QMXML.swc. It may be incompatible with this SDK, or invalid.

Design mode could not load qnx-screen.swc. It may be incompatible with this SDK, or invalid.

 

I've completed two apps already with none of these issues. I don't know what's going wrong now.

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: App specific system menu

hey alex,

 

are you running mseth's code or are you running my code posted as is?

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Developer
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: App specific system menu

hey JRab,

 

I'm currently running mseth's code. I deleted the line with the error in it, and there are no more errors but the warnings are all still there and when I run it in the simulator nothing happens when I swipe down.

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: App specific system menu

hey alex,

 

mseth's code is a little more advanced and there might be more to it. for now to see the swipe down in action and to see if everything in the foundation is in place, run my code as is and see if your simulator responds to it.

 

as for the warnings, from what ive read the qnx components are not compiled to work with the design view for flex. that explains those errors. i think you can just ignore them for now.

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Developer
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: App specific system menu

Thanks for all the help JRab.

 

It currently isn't working. I don't know if I'm just missing something or what. I'm going to go to bed now since I have to get up in a few hours to get ready for school, but I will try again when I'm done school (I only have a three hour class). Thanks again!

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
Highlighted
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: App specific system menu

ahh three hour class. i remember those. the trade off was they were just once a week haha

 

and dont sweat it. with some sleep and a fresh pair of eyes im sure you'll get this working. for now here is mseth's code modified with the parts that may be causing erros for you stripped out (hope u dont mind mseth Smiley Happy):

 

FlexTest.mxml (Main application file):

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.FlexTestHome" creationComplete="creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.effects.Fade;
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.events.ResizeEvent;
			import mx.managers.PopUpManager;
			
			import qnx.events.QNXApplicationEvent;
			import qnx.system.QNXApplication;
			
			private var headerTimer:Timer = new Timer(5000,1);
			
			[Bindable] private var headerMenu:HeaderMenu;
			[Bindable] private var headerMenuDisplayed:Boolean = false;
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN, onApplicationSwipeDown);
				
				headerMenu = new HeaderMenu();
				headerMenu.addEventListener(MouseEvent.CLICK, onHeaderMenuClick);
				
				headerTimer.addEventListener(TimerEvent.TIMER, onHeaderMenuTimerEvent);
			}
			
			protected function onApplicationSwipeDown(event:QNXApplicationEvent) : void
			{	
				showHeaderMenuPopup();
			}
			
			private function showHeaderMenuPopup() : void
			{
				if (!headerMenuDisplayed)
				{
					headerMenu.x = 0;
					headerMenu.y = 0;
					
					PopUpManager.addPopUp(headerMenu,this, false);
					
					headerPopupEffectIn.end();
					headerPopupEffectIn.play();
					
					headerMenuDisplayed = true;
				}
				
				headerTimer.reset();
				headerTimer.start();
			}
			
			private function onHeaderMenuTimerEvent(event:TimerEvent) : void
			{	
				hideHeaderMenuPopup();
				
				headerTimer.stop();
			}
			
			private function onHeaderMenuClick(event:MouseEvent) : void
			{
				hideHeaderMenuPopup();
			}
			
			private function hideHeaderMenuPopup() : void
			{
				headerPopupEffectOut.end();
				headerPopupEffectOut.play();
				headerPopupEffectOut.addEventListener(EffectEvent.EFFECT_END, headerMenuHidden);
			}
			
			private function headerMenuHidden(event:EffectEvent) : void
			{
				PopUpManager.removePopUp(headerMenu);
				headerPopupEffectIn.removeEventListener(EffectEvent.EFFECT_END, headerMenuHidden);
				headerMenuDisplayed = false;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:Parallel id="headerPopupEffectIn" target="{headerMenu}">
			<s:Move duration="250" yFrom="-75" xTo="0" yTo="0" easer="{sineEaser}" />
		</s:Parallel>
		<s:Parallel id="headerPopupEffectOut" target="{headerMenu}">
			<s:Move duration="250" yFrom="0" xTo="0" yTo="-75" easer="{sineEaser}" />
		</s:Parallel>
		<s:Sine id="sineEaser" easeInFraction="0.2" />
	</fx:Declarations>
</s:MobileApplication>

 

 

 

HeaderMenu.mxml (MXML Component based on spark.components.BorderContainer):

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" borderVisible="false"
				   xmlns:s="library://ns.adobe.com/flex/spark" width="1024" height="75" xmlns:mx="library://ns.adobe.com/flex/mx" >
	
	<fx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			
			protected function btn_clickHandler(event:MouseEvent):void
			{
				// Figure out which button was pressed, and load appropriate view.
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:backgroundFill>
		<s:SolidColor alpha="0.9" color="#000000" />
	</s:backgroundFill>
	<s:layout>
		<s:HorizontalLayout horizontalAlign="right" verticalAlign="middle" paddingTop="5" paddingBottom="5" paddingRight="5" paddingLeft="5" gap="5"/>
	</s:layout>
	<s:Button id="btn_refresh" label="Refresh" height="60" fontSize="18" click="btn_clickHandler(event)"/>
	<s:Label text="APPLICATION NAME" fontSize="32" styleName="FeedItemTitle" textAlign="center" width="100%" height="100%" verticalAlign="middle" />
	<s:Button id="btn_about" label="About" height="60" fontSize="18" click="btn_clickHandler(event)"/>
</s:BorderContainer>

 

 

FlexTestHome.mxml:

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark"
		title="Home">
	<fx:Script>
		<![CDATA[

			
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

 

everything except the FlexTestHome.mxml is in the default package. tested and it ran without a problem. also on a another note, i did this on burrito. if you are using fb 4 it may be causing problems. good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Developer
Posts: 325
Registered: ‎10-28-2010
My Device: Blackberry Bold 9900
My Carrier: Telus

Re: App specific system menu

Hey JRab,

 

Yup, 3 hour class sucks but luckily it is only once a week haha.

 

Anyway, I decided to give it a quick try right now before I get ready for school and everything worked. Thank you so much for all the help. You truly are awesome!

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda