Repository: flex-examples Updated Branches: refs/heads/develop 0cd6ec753 -> 44ddf534e
added a slide to open and mouse drag to close Signed-off-by: OmPrakash Muppirala <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/7a933e28 Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/7a933e28 Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/7a933e28 Branch: refs/heads/develop Commit: 7a933e28389b6fb9741892b9a856babe415ea5a5 Parents: 0cd6ec7 Author: nasha001 <[email protected]> Authored: Tue Jan 7 12:56:52 2014 -0500 Committer: OmPrakash Muppirala <[email protected]> Committed: Tue Nov 4 11:07:23 2014 -0800 ---------------------------------------------------------------------- .project | 11 ++ tourdeflexmobile/src/TourDeFlexMobile.mxml | 203 ++++++++++++++++++------ 2 files changed, 168 insertions(+), 46 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-examples/blob/7a933e28/.project ---------------------------------------------------------------------- diff --git a/.project b/.project new file mode 100644 index 0000000..d160bcb --- /dev/null +++ b/.project @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<projectDescription> + <name>tourdeflexmobile</name> + <comment></comment> + <projects> + </projects> + <buildSpec> + </buildSpec> + <natures> + </natures> +</projectDescription> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/7a933e28/tourdeflexmobile/src/TourDeFlexMobile.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/TourDeFlexMobile.mxml b/tourdeflexmobile/src/TourDeFlexMobile.mxml index 6a9dc94..e49714c 100644 --- a/tourdeflexmobile/src/TourDeFlexMobile.mxml +++ b/tourdeflexmobile/src/TourDeFlexMobile.mxml @@ -19,14 +19,20 @@ limitations under the License. --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="init(event)"> + xmlns:s="library://ns.adobe.com/flex/spark" + applicationDPI="160" + applicationComplete="init(event)"> <fx:Style source="styles.css"/> <fx:Script> <![CDATA[ + import mx.core.FlexGlobals; import mx.events.FlexEvent; - + import flash.utils.Timer; + import flash.events.MouseEvent; + import flash.events.TimerEvent; + import flash.events.Event; import spark.events.IndexChangeEvent; import AIRViews.AccelerometerView; @@ -58,52 +64,89 @@ limitations under the License. [Bindable] private var currentStageWidth:Number; - + [Bindable] private var currentStageHeight:Number; + public static var SLIDE_INTERVAL:int = 40; + public static var STEPS:int = 6; + + protected var _slideTimer:Timer = new Timer(SLIDE_INTERVAL, STEPS); + public static const CLICKED:String = "slideOutClicked"; + protected var _buttonEnabled:Boolean = true; + protected function init(event:FlexEvent):void { - stage.addEventListener(Event.RESIZE, orientationHandler); + btn.addEventListener(MouseEvent.CLICK, slideButtonHandler); + //btn.addEventListener(UIButton.CLICKED, slideButtonHandler); + _slideTimer.addEventListener(TimerEvent.TIMER, doSlide); + _slideTimer.addEventListener(TimerEvent.TIMER_COMPLETE, slideComplete); - currentStageWidth = stage.stageWidth*-1; - lateralMenu.x = currentStageWidth; - currentStageHeight = navigator.height-45; - lateralMenu.height = currentStageHeight; - lateralMenu.x = currentStageWidth; - isOpen = false; } - private function orientationHandler(event:Event):void{ - currentStageWidth = stage.stageWidth*-1; - - if(isOpen == false){ - lateralMenu.x = currentStageWidth; - } - - currentStageHeight = navigator.height-45; - lateralMenu.height = currentStageHeight; - - trace(lateralMenu.height); + + + public function open(animated:Boolean = true):void + { + if (!navigators.mouseEnabled) + return; + navigators.mouseEnabled = navigators.mouseChildren = false; + if (animated) + { + _slideTimer.repeatCount = Math.max(Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1); + _slideTimer.reset(); + _slideTimer.start(); + //moveIn.play(); + //moveOut.play(); + } + else + { + navigators.x = lateralMenu.width; + !navigators.mouseEnabled; + } } - protected function menuHandler(event:MouseEvent):void + public function close(animated:Boolean = true):void + { + navigators.mouseEnabled = navigators.mouseChildren = true; + if (animated) + { + _slideTimer.repeatCount = Math.max(Math.floor(STEPS * navigators.x / lateralMenu.width), 1); + _slideTimer.reset(); + _slideTimer.start(); + } + else { + navigators.x = 0; + } + } + + + + /* protected function menuHandler(event:MouseEvent):void { - - if(isOpen == true){ - moveOut.play(); - isOpen = false; - } else if(isOpen == false){ - moveIn.play(); - isOpen = true; - } + if(isOpen == true) + { + moveOut.play(); + stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); + //navigators.mouseEnabled = navigators.mouseChildren = false; + navigators.includeInLayout = false; + isOpen = false; + } + else if(isOpen == false) + { + moveIn.play(); + stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown); + //navigators.mouseEnabled = navigators.mouseChildren = true; + isOpen = true; } + }*/ protected function changeHandler(event:IndexChangeEvent):void { - isOpen = false; - moveOut.play(); - + //isOpen = false; + //moveIn.play(); + close(); + stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown); navigator.pushView(componentsList.selectedItem.view); } @@ -113,26 +156,88 @@ limitations under the License. moveOut.play(); } + protected var _startX:Number; + + protected function slideButtonHandler(event:Event):void + { + dispatchEvent(new Event(CLICKED)); + navigators.mouseEnabled = navigators.mouseChildren = !navigators.mouseEnabled; + if (_buttonEnabled) + { + _slideTimer.repeatCount = STEPS; + _slideTimer.reset(); + _slideTimer.start(); + } + + } + + + protected function mouseDown(event:MouseEvent):void + { + if (!navigators.mouseEnabled && mouseX > lateralMenu.width && mouseY > 45) + { + _startX = mouseX; + stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); + stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove); + } + } + + + protected function doSlide(event:TimerEvent):void + { + + var slideTimer:Timer = Timer(event.currentTarget); + var t:Number = slideTimer.currentCount/slideTimer.repeatCount; + navigators.x = (navigators.mouseEnabled ? (1-t) : t) * lateralMenu.width; + + } + + protected function slideComplete(event:TimerEvent):void + { + removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown); + navigators.mouseEnabled; + if (!navigators.mouseEnabled) + { + addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); + } + } + + protected function mouseMove(event:MouseEvent):void + { + navigators.x = Math.max(Math.min(mouseX - _startX + lateralMenu.width, lateralMenu.width), 0); + } + + protected function mouseUp(event:MouseEvent):void + { + + stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp); + stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove); + navigators.mouseEnabled = navigators.mouseChildren = mouseX < lateralMenu.width / 2; + _slideTimer.repeatCount = Math.max(navigators.mouseEnabled ? Math.floor(STEPS * navigators.x / lateralMenu.width) : Math.floor(STEPS * (1 - navigators.x / lateralMenu.width)), 1); + _slideTimer.reset(); + _slideTimer.start(); + + } + + + ]]> </fx:Script> <fx:Declarations> - <s:Move id="moveIn" duration="200" target="{lateralMenu}" xTo="0"/> - <s:Move id="moveOut" duration="200" target="{lateralMenu}" xTo="{currentStageWidth}"/> + <s:Move id="moveIn" duration="200" target="{navigators}" xTo="0"/> + <s:Move id="moveOut" duration="200" target="{navigators}" xTo="200"/> </fx:Declarations> - <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%"> - <s:navigationContent> - <s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" click="menuHandler(event)"/> - </s:navigationContent> - </s:ViewNavigator> - <s:Group id="lateralMenu" width="100%" y="45"> - <s:Graphic width="100%" height="100%" click="menuBackgroundHandler(event)"> - <s:BitmapImage width="100%" height="100%" scaleMode="zoom" source="@Embed('assets/images/bg.png')"/> - </s:Graphic> + + <s:Group id="lateralMenu" width="225" y="0" height="100%"> + <!--s:Graphic width="100%" height="100%" click="menuBackgroundHandler(event)"> + <s:BitmapImage width="100%" height="100%" scaleMode="zoom" source="@Embed('assets/images/bg.png')"/> + </s:Graphic--> - <s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="200" height="100%" change="changeHandler(event)" contentBackgroundColor="#000000"> + <s:List id="componentsList" itemRenderer="renderers.MenuRenderer" width="225" height="100%" + change="changeHandler(event)" contentBackgroundColor="#000000"> <s:ArrayList> <fx:Object label="UI Components" type="separator"/> <fx:Object label="ButtonBar" type="view" view="{ButtonBarView}"/> @@ -167,5 +272,11 @@ limitations under the License. </s:List> </s:Group> - + <s:Group id="navigators" width="{FlexGlobals.topLevelApplication.width}" height="{FlexGlobals.topLevelApplication.height}"> + <s:ViewNavigator id="navigator" firstView="views.BlogView" width="100%" height="100%"> + <s:navigationContent> + <s:Button icon="@Embed('assets/images/logo.png')" height="35" width="77" label="Menu" id="btn"/> + </s:navigationContent> + </s:ViewNavigator> + </s:Group> </s:Application>
