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
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: App specific system menu

hey,

 

im not too familiar with flex but by any chance are you running your application on the desktop air debugger? if so that'll be ur problem. some QNX classes and objects can only be used and tested on the simulator debugger on a native platform. they wont work on the desktop debugger. 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
austin85251
Posts: 16
Registered: ‎01-11-2011
My Device: Not Specified

Re: App specific system menu

Hi-

I've got the swipe_down event working in Flex. First, follow renaun's instructions for adding QNX UI in MXML (http://renaun.com/blog/2010/12/using-mxml-with-qnx-ui-components-for-the-playbook/). This will get you the necessary libraries. I added the following code to my main mxml application file (the one in the src -> default package folder). Remember to import the QNXApplicationEvent and QNXApplication.

 

 

<?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" 					 xmlns:r="http://ns.renaun.com/mxml/2010"					 creationComplete="mobileapplication1_creationCompleteHandler(event)">
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			import qnx.events.QNXApplicationEvent;
			import qnx.system.QNXApplication;
			
			

			protected function mobileapplication1_creationCompleteHandler(event:FlexEvent):void
			{
				QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN,openAddMenu);
			}
			
			private function openAddMenu(event:QNXApplicationEvent):void
			{
				trace("swipe worked");
			}

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

 

 

 

New Developer
mseth
Posts: 24
Registered: ‎10-25-2010
My Device: Not Specified

Re: App specific system menu

Has anyone been able to get this working in the framework of a Flex Mobile Application? What I mean by that is while using the implicit ViewNavigator to manage views. I've got the listener for the SWIPE_DOWN Event firing, I've tested it by creating a QNX AlertDialog but I don't know how to get a Sprite or MXML Component to overlay all the contents of the stage (including the ViewNavigator)

 

Any help on this would be apprciated.

Developer
JohnPinkerton
Posts: 350
Registered: ‎01-21-2011
My Device: Curve 8900 (Personal) / Bold 9650 (Work)

Re: App specific system menu

@mseth/@austin - did either of you happen to figure out a clean way to do this?  I've been reading up on the Flex 4 tween events, but would appreciate any insight you have.  Thanks!

New Developer
austin85251
Posts: 16
Registered: ‎01-11-2011
My Device: Not Specified

Re: App specific system menu

I've been meaning to get around to implementing this. I a really rough version working. I created an actionscript class called UI.as just like JRab, except it extends UIComponent instead of Sprite.

 

 

package components
{
	import flash.display.Shape;
	import mx.core.UIComponent;
	
	public class UI extends UIComponent
	{
		private var navBar:Shape;

 

 

Then in my view I have the following event/handler.

 

public function viewActivateHandler(event:FlexEvent):void
{
	QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN,showNavigation);
}
			
private function showNavigation(event:QNXApplicationEvent):void
{
	this.setElementIndex(ui,numChildren-1);
	Tweener.addTween(ui,{y: 0, time: .3, transition: "linear"});
}

 And finally I have the ui component in my UI elements like this.

 

<components:UI id="ui"/>

 

This is based off the first code JRab posted. Pretty basic, seems to work.

 

 

New Developer
mseth
Posts: 24
Registered: ‎10-25-2010
My Device: Not Specified

Re: App specific system menu

Hi John,

 

I did actually manage to build one the way I wanted. I'll post the findings either today or tomorrow. I think it's easier to understand for people who are new to Flex and don't have extensive AS3 experience.

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

Re: App specific system menu

Is there anyone who can go over the process of adding it to an existing mxml project from the beginning? I'm really confused by all the different methods people have posted, and I don't really see any one way that explains it fully to work in mxml.

---------------------------------
My PlayBook Apps: Pocket Portrait Lighting, Pocket Food Photography, Allergen Free Cooking, Easy Agenda
New Developer
austin85251
Posts: 16
Registered: ‎01-11-2011
My Device: Not Specified

Re: App specific system menu

Hi Alex-

All the pieces are in this thread.

 

  1. You need to create a custom component or class for the actual menu. As I said in my second post, I created a class and followed JRab's example but extended the UIComponent instead of Sprite. 
  2. Use Renaun's blog post to add his QMXML.swc file to your Flex project.
  3. Add the event handler to the appropriate part of your application. I used a single View, so the code is in that view component file. As I mention in my first post, make sure to import the necessary QNX classes.
As you dig through the code in JRab and Peter's posts, you can see a lot of additional functionality. Much of the Actionscript can be used as a starting point for your Flex project.
Hope this helps.

 

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

Re: App specific system menu

Thanks austin, maybe I just need a break. It's been a long day. I'll give it a try in the morning.

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

Re: App specific system menu

[ Edited ]

hey alex,

 

what austin said was accurate. here is a code that's a slight variation of what he said. its a simplified code in MXML that you can translate to your needs:

 

 

<?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" actionBarVisible="false" creationComplete="init()">
    <fx:Script>
        <![CDATA[
            import caurina.transitions.Tweener;
            
            import qnx.events.QNXApplicationEvent;
            import qnx.system.QNXApplication;
            
            private function init():void
            {
                /** draw out the menu with a simple color */
                slideMenu.graphics.clear();
                slideMenu.graphics.beginFill(0xFF0000);
                slideMenu.graphics.drawRect(0,0,slideMenu.width,slideMenu.height);
                slideMenu.graphics.endFill();
                
                /** add the event listener for the swipe down action */
                
                QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN, onSwipeDown);
            }
            
            private function onSwipeDown(e:QNXApplicationEvent):void
            {
                /** add the tween when the swipe down method is invoked */
                
                Tweener.addTween(slideMenu, {y: 0, time: .3, transition: "linear"});
                
                /**
                 * add the mouse listener to hide the menu when the user clicks
                 * outside of the menu area
                 */
                
                stage.addEventListener(MouseEvent.CLICK, onStageMouseClick);
            }
            
            private function onStageMouseClick(e:MouseEvent):void
            {
                /** if the user clicks outside of the menu area, hide the menu */
                
                if (mouseY > 130)
                {
                    Tweener.addTween(slideMenu, {y: -130, time: .3, transition: "linear"});
                    
                    stage.removeEventListener(MouseEvent.CLICK, onStageMouseClick);
                }
            }
            
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:SpriteVisualElement id="slideMenu" width="1024" height="130" y="-130" />
</s:View>

 

I added a few comments throughout to walk you through it. i also hid the actionbar because it through off the y values and i didnt know off hand how to put an element above it. it seems to have the highest "z order". hope that can help. 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