Repository: flex-asjs Updated Branches: refs/heads/feature/mdl 35c462084 -> fa6ce36ce
Changes to MDL Slider to get valueChange working but maven build is failing Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/fa6ce36c Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/fa6ce36c Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/fa6ce36c Branch: refs/heads/feature/mdl Commit: fa6ce36cec94971eafebd4d4cccebde251906b2d Parents: 35c4620 Author: Carlos Rovira <[email protected]> Authored: Mon Dec 19 03:18:52 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Mon Dec 19 03:18:52 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Cards.mxml | 14 +- frameworks/projects/MaterialDesignLite/pom.xml | 21 ++ .../src/main/flex/org/apache/flex/mdl/Slider.as | 54 +--- .../apache/flex/mdl/beads/SliderThumbView.as | 121 ++++++++ .../apache/flex/mdl/beads/SliderTrackView.as | 121 ++++++++ .../beads/controllers/SliderMouseController.as | 287 +++++++++++++++++++ .../apache/flex/mdl/beads/views/SliderView.as | 188 ++++++++++++ .../src/main/resources/defaults.css | 12 +- .../src/main/resources/mdl-manifest.xml | 4 + 9 files changed, 773 insertions(+), 49 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/examples/flexjs/MDLExample/src/main/flex/Cards.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml index 6369d42..e81715d 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml @@ -22,9 +22,19 @@ limitations under the License. xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml";> + <fx:Script> + <![CDATA[ + private function onValueChange(event:Event):void + { + trace("value change:", slider.value); + mycard.shadow = slider.value + } + ]]> +</fx:Script> + <mdl:Grid className="center-items"> - <mdl:Card className="demo-card-wide" shadow="2"> + <mdl:Card id="mycard" className="demo-card-wide" shadow="2"> <mdl:CardTitle> <mdl:CardTitleText text="Welcome"/> </mdl:CardTitle> @@ -37,6 +47,8 @@ limitations under the License. </mdl:CardSupportingText> <mdl:CardActions border="true"> <mdl:Button text="Get Started" ripple="true" colored="true"/> + <mdl:Slider id="slider" minimum="0" maximum="16" value="2" stepSize="1" width="200" + valueChange="onValueChange(event)"/> </mdl:CardActions> <mdl:CardMenu> <mdl:Button icon="true" ripple="true"> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/pom.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/pom.xml b/frameworks/projects/MaterialDesignLite/pom.xml index d5fde11..ca2ca23 100644 --- a/frameworks/projects/MaterialDesignLite/pom.xml +++ b/frameworks/projects/MaterialDesignLite/pom.xml @@ -89,15 +89,36 @@ </dependency> <dependency> <groupId>org.apache.flex.flexjs.framework</groupId> + <artifactId>Binding</artifactId> + <version>0.8.0-SNAPSHOT</version> + <type>swc</type> + <classifier>typedefs</classifier> + </dependency> + <dependency> + <groupId>org.apache.flex.flexjs.framework</groupId> <artifactId>Graphics</artifactId> <version>0.8.0-SNAPSHOT</version> <type>swc</type> </dependency> <dependency> <groupId>org.apache.flex.flexjs.framework</groupId> + <artifactId>Graphics</artifactId> + <version>0.8.0-SNAPSHOT</version> + <type>swc</type> + <classifier>typedefs</classifier> + </dependency> + <dependency> + <groupId>org.apache.flex.flexjs.framework</groupId> + <artifactId>Collections</artifactId> + <version>0.8.0-SNAPSHOT</version> + <type>swc</type> + </dependency> + <dependency> + <groupId>org.apache.flex.flexjs.framework</groupId> <artifactId>Collections</artifactId> <version>0.8.0-SNAPSHOT</version> <type>swc</type> + <classifier>typedefs</classifier> </dependency> <dependency> <groupId>org.apache.flex.flexjs.framework</groupId> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as index 18a077b..bcbef9b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as @@ -24,6 +24,7 @@ package org.apache.flex.mdl COMPILE::JS { + import org.apache.flex.html.beads.controllers.SliderMouseController; import org.apache.flex.core.WrappedHTMLElement; } @@ -35,6 +36,8 @@ package org.apache.flex.mdl * The Slider uses the following bead types: * * org.apache.flex.core.IBeadModel: the data model, typically an IRangeModel, that holds the Slider values. + * org.apache.flex.core.IBeadView: the bead that constructs the visual parts of the Slider. + * org.apache.flex.core.IBeadController: the bead that handles input. * * @langversion 3.0 * @playerversion Flash 10.2 @@ -80,10 +83,10 @@ package org.apache.flex.mdl { IRangeModel(model).value = newValue; - COMPILE::JS + /*COMPILE::JS { (element as HTMLInputElement).value = IRangeModel(model).value.toString(); - } + }*/ } /** @@ -102,10 +105,10 @@ package org.apache.flex.mdl { IRangeModel(model).minimum = value; - COMPILE::JS + /*COMPILE::JS { (element as HTMLInputElement).min = IRangeModel(model).minimum.toString(); - } + }*/ } /** @@ -124,11 +127,10 @@ package org.apache.flex.mdl { IRangeModel(model).maximum = value; - COMPILE::JS + /*COMPILE::JS { (element as HTMLInputElement).max = IRangeModel(model).maximum.toString(); - } - + }*/ } /** @@ -166,20 +168,11 @@ package org.apache.flex.mdl { IRangeModel(model).stepSize = value; - COMPILE::JS + /*COMPILE::JS { (element as HTMLInputElement).step = IRangeModel(model).stepSize.toString(); - } + }*/ } - - //COMPILE::JS - //private var track:SliderTrackView; - - //COMPILE::JS - //private var thumb:SliderThumbView; - - //COMPILE::JS - //private var controller:SliderMouseController; COMPILE::JS private var input:HTMLInputElement; @@ -209,12 +202,6 @@ package org.apache.flex.mdl element = input as WrappedHTMLElement; - //track = new SliderTrackView(); - //addBead(track); - //thumb = new SliderThumbView(); - //addBead(thumb); - //controller = new SliderMouseController(); - //addBead(controller); positioner = p as WrappedHTMLElement; (input as WrappedHTMLElement).flexjs_wrapper = this; @@ -243,6 +230,7 @@ package org.apache.flex.mdl } /** + * @private */ COMPILE::JS public function snap(value:Number):Number @@ -260,23 +248,5 @@ package org.apache.flex.mdl return n + si; return n; } - - - /** - * @param {number} value The value used to calculate new position of the thumb. - * @return {void} Moves the thumb to the corresponding position. - * - COMPILE::JS - public function setThumbFromValue(value:Number):void - { - var min:Number = model.minimum; - var max:Number = model.maximum; - var p:Number = (value - min) / (max - min); - var xloc:Number = p * (parseInt(track.element.style.width, 10) - - parseInt(thumb.element.style.width, 10)); - - thumb.element.style.left = "" + xloc + 'px'; - } */ - } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as new file mode 100644 index 0000000..5113b5a --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderThumbView.as @@ -0,0 +1,121 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl.beads +{ + import flash.display.Graphics; + import flash.display.Shape; + import flash.display.SimpleButton; + + import org.apache.flex.core.BeadViewBase; + import org.apache.flex.core.IBeadView; + import org.apache.flex.core.IStrand; + import org.apache.flex.events.Event; + import org.apache.flex.events.IEventDispatcher; + import org.apache.flex.core.IChild; + + import org.apache.flex.mdl.Button; + + /** + * The SliderThumbView class creates the draggable input element for the + * org.apache.flex.html.Slider component. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class SliderThumbView extends BeadViewBase implements IBeadView + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function SliderThumbView() + { + hitArea = new Shape(); + upView = new Shape(); + downView = new Shape(); + overView = new Shape(); + } + + /** + * @private + */ + private function drawView(g:Graphics, bgColor:uint):void + { + var host:Button = Button(_strand); + var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton; + g.clear(); + g.lineStyle(1,0x000000); + g.beginFill(bgColor,1.0); + g.drawCircle(host.width/2, host.height/2, 10); + g.endFill(); + } + + private var hitArea:Shape; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignoreimport org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + override public function set strand(value:IStrand):void + { + super.strand = value; + + drawView(hitArea.graphics, 0xDD0000); + drawView(upView.graphics, 0xFFFFFF); + drawView(downView.graphics, 0x999999); + drawView(overView.graphics, 0xDDDDDD); + + var button:SimpleButton = IChild(value).$displayObject as SimpleButton; + button.upState = upView; + button.downState = downView; + button.overState = overView; + button.hitTestState = hitArea; + + IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler); + IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler); + } + + private var upView:Shape; + private var downView:Shape; + private var overView:Shape; + + /** + * @private + */ + private function sizeChangeHandler( event:Event ) : void + { + drawView(hitArea.graphics, 0xDD0000); + drawView(upView.graphics, 0xFFFFFF); + drawView(downView.graphics, 0x999999); + drawView(overView.graphics, 0xDDDDDD); + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as new file mode 100644 index 0000000..603a4fb --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/SliderTrackView.as @@ -0,0 +1,121 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl.beads +{ + import flash.display.Graphics; + import flash.display.Shape; + import flash.display.SimpleButton; + + import org.apache.flex.core.BeadViewBase; + import org.apache.flex.core.IBeadView; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; + import org.apache.flex.events.Event; + import org.apache.flex.events.IEventDispatcher; + import org.apache.flex.core.IChild; + + import org.apache.flex.mdl.Button; + + /** + * The SliderTrackView class creates the track area for the org.apache.flex.html.Slider + * component. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class SliderTrackView extends BeadViewBase implements IBeadView + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function SliderTrackView() + { + hitArea = new Shape(); + upView = new Shape(); + downView = new Shape(); + overView = new Shape(); + } + + /** + * @private + */ + private function drawView(g:Graphics, bgColor:uint):void + { + var host:Button = Button(_strand); + var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton; + g.clear(); + g.lineStyle(1,0x000000); + g.beginFill(bgColor); + g.drawRect(0, 0, host.width, host.height); + g.endFill(); + } + + private var hitArea:Shape; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + override public function set strand(value:IStrand):void + { + super.strand = value; + + drawView(hitArea.graphics, 0xDD0000); + drawView(upView.graphics, 0xCCCCCC); + drawView(downView.graphics, 0x808080); + drawView(overView.graphics, 0xEEEEEE); + + var button:SimpleButton = IChild(value).$displayObject as SimpleButton; + button.upState = upView; + button.downState = downView; + button.overState = overView; + button.hitTestState = hitArea; + + IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler); + IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler); + } + + private var upView:Shape; + private var downView:Shape; + private var overView:Shape; + + /** + * @private + */ + private function sizeChangeHandler( event:Event ) : void + { + drawView(hitArea.graphics, 0xDD0000); + drawView(upView.graphics, 0xCCCCCC); + drawView(downView.graphics, 0x808080); + drawView(overView.graphics, 0xEEEEEE); + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as new file mode 100644 index 0000000..8cbc8db --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as @@ -0,0 +1,287 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl.beads.controllers +{ + import org.apache.flex.core.IBead; + import org.apache.flex.core.IBeadController; + import org.apache.flex.core.IRangeModel; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; + import org.apache.flex.events.Event; + import org.apache.flex.events.IEventDispatcher; + import org.apache.flex.events.MouseEvent; + import org.apache.flex.geom.Point; + + import org.apache.flex.html.beads.ISliderView; + import org.apache.flex.mdl.beads.SliderTrackView; + + COMPILE::JS + { + import goog.events; + import goog.events.EventType; + import org.apache.flex.events.BrowserEvent; + + import org.apache.flex.mdl.Slider; + import org.apache.flex.mdl.beads.SliderThumbView; + import org.apache.flex.mdl.beads.SliderTrackView; + } + + /** + * The SliderMouseController class bead handles mouse events on the + * org.apache.flex.html.Slider's component parts (thumb and track) and + * dispatches change events on behalf of the Slider (as well as co-ordinating visual + * changes (such as moving the thumb when the track has been tapped or clicked). + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class SliderMouseController implements IBead, IBeadController + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function SliderMouseController() + { + } + + private var rangeModel:IRangeModel; + + private var _strand:IStrand; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function set strand(value:IStrand):void + { + _strand = value; + + rangeModel = UIBase(value).model as IRangeModel; + + COMPILE::SWF + { + var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; + sliderView.thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler); + + // add handler to detect click on track + sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false, 99999); + + } + COMPILE::JS + { + var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; + track = sliderView.track as UIBase; + thumb = sliderView.thumb as UIBase; + + goog.events.listen(track.element, goog.events.EventType.CLICK, + handleTrackClick, false, this); + + goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN, + handleThumbDown, false, this); + + } + } + + COMPILE::JS + private var track:UIBase; + + COMPILE::JS + private var thumb:UIBase; + + /** + * @private + */ + COMPILE::SWF + private function thumbDownHandler( event:MouseEvent ) : void + { + UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler); + UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_UP, thumbUpHandler); + + var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView; + + origin = new Point(event.screenX, event.screenY); + thumb = new Point(sliderView.thumb.x,sliderView.thumb.y); + } + + /** + * @private + */ + COMPILE::SWF + private function thumbUpHandler( event:MouseEvent ) : void + { + UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler); + UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_UP, thumbUpHandler); + + IEventDispatcher(_strand).dispatchEvent(new Event("valueChange")); + } + + COMPILE::SWF + private var origin:Point; + COMPILE::SWF + private var thumb:Point; + + /** + * @private + */ + COMPILE::SWF + private function thumbMoveHandler( event:MouseEvent ) : void + { + var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView; + + var deltaX:Number = event.screenX - origin.x; + var thumbW:Number = sliderView.thumb.width/2; + var newX:Number = thumb.x + deltaX; + + var p:Number = newX/sliderView.track.width; + var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum; + + rangeModel.value = n; + + IEventDispatcher(_strand).dispatchEvent(new Event("valueChange")); + } + + /** + * @private + */ + COMPILE::SWF + private function trackClickHandler( event:MouseEvent ) : void + { + event.stopImmediatePropagation(); + + var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView; + + var xloc:Number = event.localX; + var p:Number = xloc/sliderView.track.width; + var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum; + + rangeModel.value = n; + + IEventDispatcher(_strand).dispatchEvent(new Event("valueChange")); + } + + /** + */ + COMPILE::JS + private function handleTrackClick(event:BrowserEvent):void + { + var host:Slider = _strand as Slider; + var xloc:Number = event.clientX; + var p:Number = Math.min(1, xloc / parseInt(track.element.style.width, 10)); + var n:Number = p * (host.maximum - host.minimum) + + host.minimum; + + host.value = n; + + origin = parseInt(thumb.element.style.left, 10); + position = parseInt(thumb.element.style.left, 10); + + calcValFromMousePosition(event, true); + + host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); + } + + + /** + */ + COMPILE::JS + private function handleThumbDown(event:BrowserEvent):void + { + var host:Slider = _strand as Slider; + goog.events.listen(host.element, goog.events.EventType.MOUSEUP, + handleThumbUp, false, this); + goog.events.listen(host.element, goog.events.EventType.MOUSEMOVE, + handleThumbMove, false, this); + + origin = event.clientX; + position = parseInt(thumb.element.style.left, 10); + } + + COMPILE::JS + private var origin:Number; + COMPILE::JS + private var position:int; + + /** + */ + COMPILE::JS + private function handleThumbUp(event:BrowserEvent):void + { + var host:Slider = _strand as Slider; + goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP, + handleThumbUp, false, this); + goog.events.unlisten(host.element, goog.events.EventType.MOUSEMOVE, + handleThumbMove, false, this); + + calcValFromMousePosition(event, false); + + host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); + } + + + /** + */ + COMPILE::JS + private function handleThumbMove(event:BrowserEvent):void + { + var host:Slider = _strand as Slider; + calcValFromMousePosition(event, false); + + host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); + } + + + /** + */ + COMPILE::JS + private function calcValFromMousePosition(event:BrowserEvent, useOffset:Boolean):void + { + var host:Slider = _strand as Slider; + var deltaX:Number = (useOffset ? event.offsetX : event.clientX) - origin; + var thumbW:int = parseInt(thumb.element.style.width, 10) / 2; + var newX:Number = position + deltaX; + + var p:Number = newX / parseInt(track.element.style.width, 10); + var n:Number = p * (host.maximum - host.minimum) + + host.minimum; + n = host.snap(n); + if (n < host.minimum) n = host.minimum; + else if (n > host.maximum) n = host.maximum; + + p = (n - host.minimum) / (host.maximum - + host.minimum); + newX = p * parseInt(track.element.style.width, 10); + + thumb.element.style.left = String(newX - + parseInt(thumb.element.style.width, 10) / 2) + 'px'; + + host.value = n; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as new file mode 100644 index 0000000..d578b70 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as @@ -0,0 +1,188 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl.beads.views +{ + COMPILE::SWF { + import flash.display.DisplayObject; + import flash.display.Sprite; + } + + import org.apache.flex.core.BeadViewBase; + import org.apache.flex.core.IBead; + import org.apache.flex.core.IBeadModel; + import org.apache.flex.core.IBeadView; + import org.apache.flex.core.IRangeModel; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; + import org.apache.flex.core.IUIBase; + import org.apache.flex.core.ValuesManager; + import org.apache.flex.events.Event; + import org.apache.flex.events.IEventDispatcher; + + import org.apache.flex.mdl.Button; + import org.apache.flex.html.beads.ISliderView; + + /** + * The SliderView class creates the visual elements of the org.apache.flex.html.Slider + * component. The Slider has a track and a thumb control which are also created with view beads. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class SliderView extends BeadViewBase implements ISliderView, IBeadView + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function SliderView() + { + } + + private var rangeModel:IRangeModel; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + override public function set strand(value:IStrand):void + { + super.strand = value; + + COMPILE::SWF { + var s:UIBase = UIBase(_strand); + + _track = new Button(); + _track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead); + _track.className = "SliderTrack"; + s.addElement(_track); + + _thumb = new Button(); + _thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead); + _thumb.className = "SliderThumb"; + s.addElement(_thumb); + + } + COMPILE::JS { + _track = new Button(); + //_track.className = "SliderTrack"; + UIBase(_strand).addElement(_track); + + _thumb = new Button(); + //_thumb.className = "SliderThumb"; + UIBase(_strand).addElement(_thumb); + } + + IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler); + IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler); + + rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel; + + // listen for changes to the model and adjust the UI accordingly. + IEventDispatcher(rangeModel).addEventListener("valueChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("minimumChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("maximumChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("stepSizeChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("snapIntervalChange",modelChangeHandler); + + sizeChangeHandler(null); + } + + private var _track:Button; + private var _thumb:Button; + + + /** + * The track component. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get track():IUIBase + { + return _track; + } + + /** + * The thumb component. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get thumb():IUIBase + { + return _thumb; + } + + /** + * @private + */ + private function sizeChangeHandler( event:Event ) : void + { + var host:UIBase = UIBase(_strand); + var w:Number = host.width; + var h:Number = host.height; + + _thumb.width = 20; + _thumb.height = host.height; + + // the track is inset 1/2 of the thumbwidth so the thumb can + // overlay the track on either end with the thumb center being + // on the track's edge + _track.width = host.width - _thumb.width; + _track.height = 5; + _track.x = _thumb.width/2; + _track.y = (host.height - _track.height)/2; + + setThumbPositionFromValue(rangeModel.value); + } + + /** + * @private + */ + private function modelChangeHandler( event:Event ) : void + { + setThumbPositionFromValue(rangeModel.value); + } + + /** + * @private + */ + private function setThumbPositionFromValue( value:Number ) : void + { + var p:Number = (value-rangeModel.minimum)/(rangeModel.maximum-rangeModel.minimum); + var xloc:Number = (p*_track.width); + _thumb.x = xloc; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css index 2894c29..810be12 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css @@ -28,15 +28,15 @@ CheckBox Slider { IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel"); + iBeadView: ClassReference("org.apache.flex.mdl.beads.views.SliderView"); + iBeadController: ClassReference("org.apache.flex.mdl.beads.controllers.SliderMouseController"); } -/*Slider +Slider { - iBeadView: ClassReference("org.apache.flex.html.beads.SliderView"); - iBeadController: ClassReference("org.apache.flex.html.beads.controllers.SliderMouseController"); - iThumbView: ClassReference("org.apache.flex.html.beads.SliderThumbView"); - iTrackView: ClassReference("org.apache.flex.html.beads.SliderTrackView"); -}*/ + iThumbView: ClassReference("org.apache.flex.mdl.beads.SliderThumbView"); + iTrackView: ClassReference("org.apache.flex.mdl.beads.SliderTrackView"); +} List { http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa6ce36c/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml index 69059bd..4ad2ebd 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -30,6 +30,10 @@ <component id="Restrict" class="org.apache.flex.mdl.beads.Restrict"/> <component id="Disabled" class="org.apache.flex.mdl.beads.Disabled"/> <component id="Slider" class="org.apache.flex.mdl.Slider"/> + <component id="SliderView" class="org.apache.flex.mdl.beads.views.SliderView"/> + <component id="SliderTrackView" class="org.apache.flex.mdl.beads.SliderTrackView"/> + <component id="SliderThumbView" class="org.apache.flex.mdl.beads.SliderThumbView"/> + <component id="SliderMouseController" class="org.apache.flex.mdl.beads.controllers.SliderMouseController"/> <component id="Badge" class="org.apache.flex.mdl.beads.Badge"/> <component id="Menu" class="org.apache.flex.mdl.Menu"/> <component id="MenuItem" class="org.apache.flex.mdl.MenuItem"/>
