You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2016/06/06 20:25:26 UTC

git commit: [flex-asjs] [refs/heads/develop] - Added RangeStepper controller and associated beads.

Repository: flex-asjs
Updated Branches:
  refs/heads/develop 7f2737785 -> f376283d4


Added RangeStepper controller and associated beads.


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f376283d
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f376283d
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f376283d

Branch: refs/heads/develop
Commit: f376283d4c00040c8505c60fa2b59fd3dd9449fc
Parents: 7f27377
Author: Peter Ent <pe...@apache.org>
Authored: Mon Jun 6 16:25:19 2016 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Mon Jun 6 16:25:19 2016 -0400

----------------------------------------------------------------------
 .../projects/HTML/src/main/flex/HTMLClasses.as  |   5 +
 .../flex/org/apache/flex/html/RangeStepper.as   |  69 ++++++++
 .../flex/html/beads/DecrementButtonView.as      |  96 +++++++++++
 .../flex/html/beads/IncrementButtonView.as      |  96 +++++++++++
 .../apache/flex/html/beads/RangeStepperView.as  | 158 +++++++++++++++++++
 .../controllers/RangeStepperMouseController.as  |  94 +++++++++++
 .../html/beads/models/RangeModelExtended.as     | 101 ++++++++++++
 .../HTML/src/main/resources/basic-manifest.xml  |   1 +
 .../HTML/src/main/resources/defaults.css        |   6 +
 9 files changed, 626 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
index ad3ba4b..0834abb 100644
--- a/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
+++ b/frameworks/projects/HTML/src/main/flex/HTMLClasses.as
@@ -91,6 +91,7 @@ internal class HTMLClasses
 	}
 	import org.apache.flex.html.beads.models.ArraySelectionModel; ArraySelectionModel;
     import org.apache.flex.html.beads.models.RangeModel; RangeModel;
+    import org.apache.flex.html.beads.models.RangeModelExtended; RangeModelExtended;
 	COMPILE::AS3
 	{
 	    import org.apache.flex.html.beads.models.ComboBoxModel; ComboBoxModel;
@@ -152,12 +153,16 @@ internal class HTMLClasses
 	import org.apache.flex.html.beads.DataGridView; DataGridView;
 	import org.apache.flex.html.beads.DateChooserView; DateChooserView;
 	import org.apache.flex.html.beads.DateFieldView; DateFieldView;
+	import org.apache.flex.html.beads.DecrementButtonView; DecrementButtonView;
+	import org.apache.flex.html.beads.IncrementButtonView; IncrementButtonView;
+	import org.apache.flex.html.beads.RangeStepperView; RangeStepperView;
     import org.apache.flex.html.beads.layouts.FlexibleFirstChildHorizontalLayout; FlexibleFirstChildHorizontalLayout;
 	import org.apache.flex.html.beads.models.DataGridModel; DataGridModel;
 	import org.apache.flex.html.beads.models.DateChooserModel; DateChooserModel;
 	import org.apache.flex.html.beads.models.DataGridPresentationModel; DataGridPresentationModel;
 	import org.apache.flex.html.beads.controllers.DateChooserMouseController; DateChooserMouseController;
 	import org.apache.flex.html.beads.controllers.DateFieldMouseController; DateFieldMouseController;
+	import org.apache.flex.html.beads.controllers.RangeStepperMouseController; RangeStepperMouseController;
 	import org.apache.flex.html.supportClasses.DataGridColumn; DataGridColumn;
 	import org.apache.flex.html.supportClasses.DateChooserButton; DateChooserButton;
 	import org.apache.flex.html.supportClasses.GraphicsItemRenderer; GraphicsItemRenderer;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RangeStepper.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RangeStepper.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RangeStepper.as
new file mode 100644
index 0000000..bcba27b
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RangeStepper.as
@@ -0,0 +1,69 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html
+{
+	import org.apache.flex.core.IRangeModel;
+	import org.apache.flex.core.UIBase;
+
+	/**
+	 *  The RangeStepper control allows for the selection of a single value
+	 *  from multiple choices.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class RangeStepper extends UIBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function RangeStepper()
+		{
+			super();
+
+			className = "RangeStepper";
+
+			setWidthAndHeight(40, 60, true);
+		}
+
+		/**
+		 *  The value selected or set.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set value(newValue:Number):void
+		{
+			IRangeModel(model).value = newValue;
+		}
+		public function get value():Number
+		{
+			return IRangeModel(model).value;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DecrementButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DecrementButtonView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DecrementButtonView.as
new file mode 100644
index 0000000..a753090
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/DecrementButtonView.as
@@ -0,0 +1,96 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads
+{
+	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.core.graphics.Path;
+	import org.apache.flex.core.graphics.Rect;
+	import org.apache.flex.core.graphics.SolidColor;
+	import org.apache.flex.core.graphics.SolidColorStroke;
+	import org.apache.flex.events.Event;
+
+	public class DecrementButtonView extends BeadViewBase implements IBeadView
+	{
+		public function DecrementButtonView()
+		{
+			super();
+		}
+
+		private var _strand:IStrand;
+
+		private var _backRect:Rect;
+		private var _arrow:Path;
+
+		/**
+		 *  @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;
+			_strand = value;
+
+			var host:UIBase = _strand as UIBase;
+
+			_backRect = new Rect();
+			_backRect.fill = new SolidColor();
+			(_backRect.fill as SolidColor).color = 0xFFFFFF;
+			_backRect.stroke = new SolidColorStroke();
+			(_backRect.stroke as SolidColorStroke).color = 0x000000;
+			(_backRect.stroke as SolidColorStroke).weight = 1.0;
+			host.addElement(_backRect);
+
+			// arrow
+			_arrow = new Path();
+			_arrow.fill = new SolidColor();
+			(_arrow.fill as SolidColor).color = 0x000000;
+			host.addElement(_arrow);
+
+			host.addEventListener("widthChanged", sizeHandler);
+			host.addEventListener("heightChanged", sizeHandler);
+
+			sizeHandler(null);
+		}
+
+		private function sizeHandler(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+
+			_backRect.x = 0;
+			_backRect.y = 0;
+			_backRect.setWidthAndHeight(host.width, host.height, true);
+			_backRect.drawRect(0, 0, host.width, host.height);
+
+			var xm:Number = host.width/2;
+			var ym:Number = host.height - 4;
+
+			_arrow.setWidthAndHeight(xm, ym, true);
+			_arrow.y = 2;
+			_arrow.x = 0;
+			_arrow.drawPath(0, 0, "M "+String(xm)+" "+String(ym)+" L "+String(xm-8)+" 2 "+String(xm+8)+" 2 "+String(xm)+" "+String(ym)+" Z");
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
new file mode 100644
index 0000000..2e0c8a0
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
@@ -0,0 +1,96 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads
+{
+	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.core.graphics.Path;
+	import org.apache.flex.core.graphics.Rect;
+	import org.apache.flex.core.graphics.SolidColor;
+	import org.apache.flex.core.graphics.SolidColorStroke;
+	import org.apache.flex.events.Event;
+
+	public class IncrementButtonView extends BeadViewBase implements IBeadView
+	{
+		public function IncrementButtonView()
+		{
+			super();
+		}
+
+		private var _strand:IStrand;
+
+		private var _backRect:Rect;
+		private var _arrow:Path;
+
+		/**
+		 *  @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;
+			_strand = value;
+
+			var host:UIBase = _strand as UIBase;
+
+			_backRect = new Rect();
+			_backRect.fill = new SolidColor();
+			(_backRect.fill as SolidColor).color = 0xFFFFFF;
+			_backRect.stroke = new SolidColorStroke();
+			(_backRect.stroke as SolidColorStroke).color = 0x000000;
+			(_backRect.stroke as SolidColorStroke).weight = 1.0;
+			host.addElement(_backRect);
+
+			// arrow
+			_arrow = new Path();
+			_arrow.fill = new SolidColor();
+			(_arrow.fill as SolidColor).color = 0x000000;
+			host.addElement(_arrow);
+
+			host.addEventListener("widthChanged", sizeHandler);
+			host.addEventListener("heightChanged", sizeHandler);
+
+			sizeHandler(null);
+		}
+
+		private function sizeHandler(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+
+			_backRect.x = 0;
+			_backRect.y = 0;
+			_backRect.setWidthAndHeight(host.width, host.height, true);
+			_backRect.drawRect(0, 0, host.width, host.height);
+
+			var xm:Number = host.width/2;
+			var ym:Number = host.height - 4;
+
+			_arrow.setWidthAndHeight(xm, ym, true);
+			_arrow.y = 2;
+			_arrow.x = 0;
+			_arrow.drawPath(0, 0, "M "+String(xm)+" 2 L "+String(xm-8)+" "+String(ym)+" L "+String(xm+8)+" "+String(ym)+" Z");
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
new file mode 100644
index 0000000..ca3986c
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
@@ -0,0 +1,158 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads
+{
+	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.core.graphics.Rect;
+	import org.apache.flex.core.graphics.SolidColorStroke;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.ImageButton;
+	import org.apache.flex.html.Label;
+	import org.apache.flex.html.beads.models.RangeModelExtended;
+
+	/**
+	 *  The RangeStepperView bead creates the visual elements of the RangeStepper. This
+	 *  includes an increment button, a decrement button, and label to display the value.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class RangeStepperView extends BeadViewBase implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function RangeStepperView()
+		{
+			super();
+		}
+
+		private var _strand:IStrand;
+		private var _label:Label;
+		private var _incrementButton:ImageButton;
+		private var _decrementButton:ImageButton;
+		private var _labelBox:Rect;
+
+		/**
+		 *  Increment control.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get incrementButton():ImageButton
+		{
+			return _incrementButton;
+		}
+
+		/**
+		 *  Decrement control.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get decrementButton():ImageButton
+		{
+			return _decrementButton;
+		}
+
+		/**
+		 *  @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;
+			_strand = value;
+
+			var host:UIBase = _strand as UIBase;
+
+			_labelBox = new Rect();
+			_labelBox.stroke = new SolidColorStroke();
+			(_labelBox.stroke as SolidColorStroke).color = 0x000000;
+			(_labelBox.stroke as SolidColorStroke).weight = 1.0;
+
+			_incrementButton = new ImageButton();
+			_incrementButton.source = "assets/up-arrow.png";
+
+			_decrementButton = new ImageButton();
+			_decrementButton.source = "assets/down-arrow.png";
+
+			IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+			IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+
+			_label = new Label();
+
+			host.addElement(_labelBox);
+			host.addElement(_incrementButton);
+			host.addElement(_decrementButton);
+			host.addElement(_label);
+
+			var model:RangeModelExtended = host.model as RangeModelExtended;
+			model.addEventListener("valueChange", handleValueChange);
+
+			sizeChangeHandler(null);
+		}
+
+		private function sizeChangeHandler(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+
+			_incrementButton.x = 0;
+			_incrementButton.y = 0;
+			_incrementButton.setWidthAndHeight(host.width, 20);
+
+			_label.x = 0;
+			_label.y = _incrementButton.height + 2;
+			_label.setWidthAndHeight(host.width, host.height-40, true);
+
+			_labelBox.x = _label.x;
+			_labelBox.y = _label.y - 2;
+			_labelBox.drawRect(0, 0, _label.width - 1, _label.height);
+
+			_decrementButton.x = 0;
+			_decrementButton.y = host.height - 20;
+			_decrementButton.setWidthAndHeight(host.width, 20);
+		}
+
+		private function handleValueChange(event:Event):void
+		{
+			var model:RangeModelExtended = (_strand as UIBase).model as RangeModelExtended;
+			_label.text = model.getLabelForIndex(model.value);
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/RangeStepperMouseController.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/RangeStepperMouseController.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/RangeStepperMouseController.as
new file mode 100644
index 0000000..b566d55
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/controllers/RangeStepperMouseController.as
@@ -0,0 +1,94 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads.controllers
+{
+	import org.apache.flex.core.IBeadController;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.MouseEvent;
+	import org.apache.flex.html.ImageButton;
+	import org.apache.flex.html.beads.RangeStepperView;
+	import org.apache.flex.html.beads.models.RangeModel;
+
+	/**
+	 *  The RangeStepperMouseController bead feeds mouse events to the RangeStepper and its
+	 *  components. 
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class RangeStepperMouseController implements IBeadController
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function RangeStepperMouseController()
+		{
+		}
+
+		private var _strand:IStrand;
+
+		private var _incrButton:ImageButton;
+		private var _decrButton:ImageButton;
+
+		/**
+		 *  @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;
+
+			var stepperView:RangeStepperView = _strand.getBeadByType(RangeStepperView) as RangeStepperView;
+
+			_incrButton = stepperView.incrementButton;
+			_incrButton.addEventListener(MouseEvent.CLICK, handleIncrClick);
+
+			_decrButton = stepperView.decrementButton;
+			_decrButton.addEventListener(MouseEvent.CLICK, handleDecrClick);
+		}
+
+		private function handleIncrClick(event:MouseEvent):void
+		{
+			var model:RangeModel = (_strand as UIBase).model as RangeModel;
+			var nextValue:Number = model.value + 1;
+			if (nextValue >= model.maximum) nextValue = model.maximum;
+			model.value = nextValue;
+		}
+
+		private function handleDecrClick(event:MouseEvent):void
+		{
+			var model:RangeModel = (_strand as UIBase).model as RangeModel;
+			var nextValue:Number = model.value - 1;
+			if (nextValue < model.minimum) nextValue = model.minimum;
+			model.value = nextValue;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/RangeModelExtended.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/RangeModelExtended.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/RangeModelExtended.as
new file mode 100644
index 0000000..ebbc4f3
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/RangeModelExtended.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.beads.models
+{
+	import org.apache.flex.events.Event;
+	import org.apache.flex.html.beads.models.RangeModel;
+
+	/**
+	 *  The RangeModelExtended bead expands on the RangeModel and adds a function to
+	 *  display a value from the model.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class RangeModelExtended extends RangeModel
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function RangeModelExtended()
+		{
+			super();
+		}
+
+		private var _value:Number = 0;
+		
+		/**
+		 * @private
+		 */
+		override public function get value():Number
+		{
+			return _value;
+		}
+		override public function set value(newValue:Number):void
+		{
+			_value = newValue;
+			dispatchEvent(new Event("valueChange"));
+		}
+
+		private var _labelFunction:Function;
+		
+		/**
+		 *  A function used to format a value in the model.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get labelFunction():Function
+		{
+			return _labelFunction;
+		}
+		public function set labelFunction(value:Function):void
+		{
+			_labelFunction = value;
+		}
+
+		/**
+		 *  Returns the label, using the labelFunction (if provided) for the value
+		 *  at the given index.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function getLabelForIndex(index:Number):String
+		{
+			if (_labelFunction != null) {
+				return _labelFunction(this, index);
+			}
+			else {
+				return "";
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
index 8a4db07..9fe03a8 100644
--- a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
@@ -46,6 +46,7 @@
     <component id="PanelView" class="org.apache.flex.html.beads.PanelView"/>
     <component id="PanelWithControlBar" class="org.apache.flex.html.PanelWithControlBar"/>
     <component id="ControlBar" class="org.apache.flex.html.ControlBar"/>
+    <component id="RangeStepper" class="org.apache.flex.html.RangeStepper" />
     <component id="TitleBar" class="org.apache.flex.html.TitleBar"/>
     <component id="TitleBarModel" class="org.apache.flex.html.beads.models.TitleBarModel"/>
     <component id="ToolTip" class="org.apache.flex.html.ToolTip"/>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f376283d/frameworks/projects/HTML/src/main/resources/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/resources/defaults.css b/frameworks/projects/HTML/src/main/resources/defaults.css
index ea0c0c8..20fcebd 100644
--- a/frameworks/projects/HTML/src/main/resources/defaults.css
+++ b/frameworks/projects/HTML/src/main/resources/defaults.css
@@ -153,6 +153,12 @@ DateField {
     IFormatBead: ClassReference("org.apache.flex.html.accessories.DateFormatMMDDYYYYBead");
 }
 
+RangeStepper {
+	IBeadView: ClassReference("org.apache.flex.html.beads.RangeStepperView");
+	IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModelExtended");
+	IBeadController: ClassReference("org.apache.flex.html.beads.controllers.RangeStepperMouseController");
+}
+
 HContainer
 {
     IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");