Adobe AIR Development

[ukracer1]

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:

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

many thanks

Bob

[HaTaX]

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 bghape = new Sprite();

Hopefully that sorts your issues!

[ChernyshovYuriy · Accepted solution]

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.