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
ukracer1
Posts: 56
Registered: ‎01-04-2012
My Device: 16GB Playbook, 64GB Playbook, Bold 9000 and 9900 Bold
My Carrier: Orange (UK)
Accepted Solution

Problems Implementing Swipe_Down

Hello All,

 

I am building an App with a Spilt Screen in FB4.6 as a Mobile Flex App.  The App's main file is stock.mxml as seen here:

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:utils="utils.*"
			   splashScreenImage="@Embed('assets/images/stock_splash.png')">
			   
	
	<fx:Style source="Styles.css" />
	
	<fx:Script>
		<![CDATA[
				
			import mx.events.FlexEvent;
			import mx.events.ResizeEvent;
			import spark.events.ViewNavigatorEvent;
			
						
		]]>
		
	</fx:Script>
	
	<s:states>
		<s:State name="portrait"/>
		<s:State name="landscape"/>
		</s:states>
	
	<s:SplitViewNavigator id="splitNavigator" autoHideFirstViewNavigator="true" 
						  width="100%" height="100%"
						  skinClass="stock.rsc.skins.TexturedApplicationSkin">
		
			
		<s:ViewNavigator width="300" height="100%" firstView="stock.rsc.views.StocksListView">
			<s:filters.landscape>
				<s:DropShadowFilter distance="2" blurX="10" blurY="10" angle="45" alpha="0.5" color="#000000" />
			</s:filters.landscape>
		</s:ViewNavigator>
		
		<s:ViewNavigator width.portrait="100%" width.landscape="{width - 300}" 
						 height="100%" firstView="stock.rsc.views.DetailsView">
		<s:navigationContent.portrait>
			<utils:Menu id="TopSwipeMenu"/>
				<s:Button id="navigatorButton" styleName="normalButton"
						  label="Stocks" click="splitNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />
		</s:navigationContent.portrait>
		</s:ViewNavigator>
	</s:SplitViewNavigator>
	
	<!--<s:Image width="100%" height="100%" source="assets/images/lines.png" fillMode="repeat"
	mouseChildren="false" mouseEnabled="false" alpha="0.2"/>
	-->
</s:Application>

 I want the swipe down menu to appear on the right side of the split screen in Portrait Mode.  The menu is handled by a .as file in the utils directory.  This is called in stock.mxml near the bottom of the code above <utils:Menu id="TopSlideMenu"/>

 

This is the .as file that is called:

 

package utils {
    import caurina.transitions.Tweener;

    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;

    import qnx.events.QNXApplicationEvent;
    import qnx.system.QNXApplication;
    import qnx.ui.text.Label;

    public class TopSwipeMenu extends Sprite {
        // minimize distance to swipe before menu slides open by itself
        public var swipe_region:int = 21;

        // duration in seconds for full slide (e.g. when closing)
        public var slide_time:Number = 0.3;

        public function TopSwipeMenu(width:int, height:int, bgcolor:int=0xcccccc) {
            var bg:Shape = new Shape();
            bg.graphics.beginFill(bgcolor, 1);
            bg.graphics.drawRect(0, 0, width, height);
            addChild(bg);

            this.y = -height;

            QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_START, onEvent);
        }

        private var state:int;
        private const ST_IDLE:int = 0;
        private const ST_SWIPE_START:int = 1;
        private const ST_FIRST_DOWN:int = 2;
        private const ST_SWIPING:int = 3;
        private const ST_OPENING:int = 4;
        private const ST_OPEN:int = 5;
        private const ST_CLOSING:int = 6;

        private var swipe_start_pos:Point;

        private function onEvent(event:Event):void {
            var prev_state:int = state;
            var p:Point = new Point(stage.mouseX, stage.mouseY);
            trace(state, event.type, "@", p);

            switch (state) {
                case ST_IDLE:
                    if (event.type == QNXApplicationEvent.SWIPE_START)
                        state = ST_SWIPE_START;
                    break;

                case ST_SWIPE_START:
                    if (event.type == MouseEvent.MOUSE_MOVE) {
                        swipe_start_pos = new Point(stage.mouseX, stage.mouseY);
                        state = ST_FIRST_DOWN;
                    }
                    // anything but mouseMove
                    else
                        state = ST_IDLE;
                    break;

                case ST_FIRST_DOWN:
                    if (event.type == MouseEvent.MOUSE_DOWN) {
                        // check whether pos is same as it was for first move
                        var pos:Point = new Point(stage.mouseX, stage.mouseY);
                        if (pos.equals(swipe_start_pos))
                            state = ST_SWIPING;
                        else // not a top-swipe if positions don't match
                            state = ST_IDLE;
                    }
                    else if (event.type == QNXApplicationEvent.SWIPE_START)
                        state = ST_SWIPE_START;
                    else
                        state = ST_IDLE;
                    break;

                case ST_SWIPING:
                    if (event.type == MouseEvent.MOUSE_UP) {
                        if (stage.mouseY > swipe_region)
                            state = ST_OPENING;
                        else
                            state = ST_CLOSING;
                    }
                    break;

                case ST_OPENING:
                    if (event.type == Event.COMPLETE)
                        state = ST_OPEN;
                    else if (event.type == Event.CLOSE)
                        state = ST_CLOSING;
                    break;

                case ST_OPEN:
                    if (event.type == Event.CLOSE)
                        state = ST_CLOSING;
                    else if (event.type == QNXApplicationEvent.SWIPE_START)
                        state = ST_SWIPE_START;
                    break;

                case ST_CLOSING:
                    if (event.type == Event.COMPLETE)
                        state = ST_IDLE;
                    else if (event.type == QNXApplicationEvent.SWIPE_START)
                        state = ST_SWIPE_START;
                    break;
            }

            // handle state change
            if (state != prev_state) {
                trace(prev_state, "-->", state);
                var duration:Number;
                var slide_closed:Boolean;

                // leaving state
                switch (prev_state) {
                    case ST_FIRST_DOWN:
                        stage.removeEventListener(MouseEvent.MOUSE_MOVE, onEvent);
                        stage.removeEventListener(MouseEvent.MOUSE_DOWN, onEvent);
                        break;

                    case ST_SWIPING:
                        stage.removeEventListener(MouseEvent.MOUSE_UP, onEvent);
                        stage.removeEventListener(Event.ENTER_FRAME, onSwiping);
                        break;

                    case ST_OPEN:
                        stage.removeEventListener(MouseEvent.MOUSE_DOWN, outsideClick, true);
                        slide_closed = true;
                        break;
                }

                // entering state
                switch (state) {
                    case ST_SWIPE_START:
                        stage.addEventListener(MouseEvent.MOUSE_MOVE, onEvent);
                        break;

                    case ST_FIRST_DOWN:
                        stage.addEventListener(MouseEvent.MOUSE_DOWN, onEvent);
                        break;

                    case ST_SWIPING:
                        stage.addEventListener(MouseEvent.MOUSE_UP, onEvent);
                        stage.addEventListener(Event.ENTER_FRAME, onSwiping);
                        break;

                    case ST_OPENING:
                        stage.addEventListener(MouseEvent.MOUSE_DOWN, outsideClick, true);
                        duration = slide_time * -this.y / height;
                        Tweener.addTween(this, {y: 0, time: duration, transition: "linear",
                            onComplete: onEvent,
                            onCompleteParams: [new Event(Event.COMPLETE)]
                            });
                        break;

                    case ST_CLOSING:
                        stage.removeEventListener(MouseEvent.MOUSE_DOWN, outsideClick, true);
                        slide_closed = true;
                        break;
                }

                if (slide_closed) {
                    duration = slide_time * (height + this.y) / height;
                    Tweener.addTween(this, {y: -height, time: duration, transition: "linear",
                        onComplete: onEvent,
                        onCompleteParams: [new Event(Event.COMPLETE)]
                        });
                }
            }
        }

        private function onSwiping(e:Event):void {
            var y:int = stage.mouseY;
            if (y >= height)
                y = height;

            this.y = y - height;
        }

        private function outsideClick(e:MouseEvent):void {
            if (stage.mouseY > this.y + this.height)
                onEvent(new Event(Event.CLOSE));
        }

        public function close():void {
            onEvent(new Event(Event.CLOSE));
        }
    }
}

 The problem is the menu is appearing constantly and does not swipe also, the colors are not what was expected as can be seen in the image below:TopSwipeDown.PNG

 

Can anybody advise me where I have gone wrong, I am not a professional programmer, just an aged enthusiatic amateur!

 

many thanks

 

Bob

 

https://twitter.com/bb_zealot
Please use plain text.
Developer
HaTaX
Posts: 95
Registered: ‎08-04-2008
My Device: Bold 9700

Re: Problems Implementing Swipe_Down

I think you're missing the swipe event because you're listening for the wrong event, you want to listen for SWIPE_DOWN instead of SWIPE_START.  Here's what that line should look like:

 

QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN, onSwipeDown);

 

And I think you're seeing a different result with your background because your background var is a shape and I'm pretty sure you want a sprite here.  That should look like:

 

 var bg:smileyfrustrated:hape = new Sprite();

 

Hopefully that sorts your issues!

Please use plain text.
Developer
ChernyshovYuriy
Posts: 116
Registered: ‎11-18-2010
My Device: BlackBerry PlayBook
My Carrier: null

Re: Problems Implementing Swipe_Down

I can confirm, You should use only:
QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN, application_SwipeDownHandler);
About color, it is a good practice to use Shape as You actually do not need to extend all sprite methods to draw a shape. But, please, try to use "uint" as a type for the variable "bgcolor", as I see now - it is an "int" type.
Please use plain text.