You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2016/06/16 22:59:38 UTC

[21/50] [abbrv] git commit: [flex-asjs] [refs/heads/spark] - Separated the icon parts of CheckBox and RadioButton so they can be styled more easily.

Separated the icon parts of CheckBox and RadioButton so they can be styled more easily.


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

Branch: refs/heads/spark
Commit: b86f09bda097081226a533bb0de8a8aac49c3a72
Parents: 4af86f5
Author: Peter Ent <pe...@apache.org>
Authored: Tue Jun 14 11:19:50 2016 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Tue Jun 14 11:19:50 2016 -0400

----------------------------------------------------------------------
 .../main/flex/org/apache/flex/html/CheckBox.as  |  85 +++++++-------
 .../flex/org/apache/flex/html/RadioButton.as    | 115 ++++++++++---------
 .../flex/org/apache/flex/html/TextButton.as     |  44 ++++---
 .../flex/html/accessories/CheckBoxIcon.as       |  92 +++++++++++++++
 .../flex/html/accessories/RadioButtonIcon.as    | 111 ++++++++++++++++++
 .../HTML/src/main/resources/basic-manifest.xml  |   2 +
 6 files changed, 339 insertions(+), 110 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as
index bb1f6bd..d65cd5e 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/CheckBox.as
@@ -20,31 +20,32 @@ package org.apache.flex.html
 {
     COMPILE::SWF
     {
-        import flash.events.MouseEvent;            
+        import flash.events.MouseEvent;
     }
-	
+
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IToggleButtonModel;
 	import org.apache.flex.core.IUIBase;
     COMPILE::SWF
     {
-        import org.apache.flex.core.UIButtonBase;            
+        import org.apache.flex.core.UIButtonBase;
     }
     COMPILE::JS
     {
-        import org.apache.flex.core.UIBase;        
-        import org.apache.flex.core.WrappedHTMLElement;        
+        import org.apache.flex.core.UIBase;
+        import org.apache.flex.core.WrappedHTMLElement;
+		import org.apache.flex.html.accessories.CheckBoxIcon;
     }
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.MouseEvent;
-	
+
     //--------------------------------------
     //  Events
     //--------------------------------------
-    
+
     /**
      *  Dispatched when the user checks or un-checks the CheckBox.
-     *  
+     *
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
@@ -55,7 +56,7 @@ package org.apache.flex.html
     /**
      *  The CheckBox class implements the common user interface
      *  control.  The CheckBox includes its text label.
-     *  
+     *
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
@@ -66,7 +67,7 @@ package org.apache.flex.html
 	{
         /**
          *  Constructor.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -75,13 +76,13 @@ package org.apache.flex.html
 		public function CheckBox()
 		{
 			super();
-			
+
 			addEventListener(org.apache.flex.events.MouseEvent.CLICK, internalMouseHandler);
 		}
-		
+
         /**
          *  The text label for the CheckBox.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -91,7 +92,7 @@ package org.apache.flex.html
 		{
 			return IToggleButtonModel(model).text;
 		}
-        
+
         /**
          *  @private
          */
@@ -99,11 +100,11 @@ package org.apache.flex.html
 		{
 			IToggleButtonModel(model).text = value;
 		}
-		
+
         [Bindable("change")]
         /**
          *  <code>true</code> if the check mark is displayed.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -113,7 +114,7 @@ package org.apache.flex.html
 		{
 			return IToggleButtonModel(model).selected;
 		}
-		
+
         /**
          *  @private
          */
@@ -121,61 +122,65 @@ package org.apache.flex.html
 		{
 			IToggleButtonModel(model).selected = value;
 		}
-				
+
 		private function internalMouseHandler(event:org.apache.flex.events.MouseEvent) : void
 		{
 			selected = !selected;
 			dispatchEvent(new Event("change"));
 		}
 	}
-    
+
     COMPILE::JS
     public class CheckBox extends UIBase
     {
+		private var _label:WrappedHTMLElement;
+		private var _icon:CheckBoxIcon;
+
+		private static var _checkNumber:Number = 0;
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
         override protected function createElement():WrappedHTMLElement
         {
             var cb:HTMLInputElement;
-            
+
             element = document.createElement('label') as WrappedHTMLElement;
-            
-            cb = document.createElement('input') as HTMLInputElement;
-            cb.type = 'checkbox';
-            element.appendChild(cb);
+			_label = element;
+			_icon = new CheckBoxIcon();
+            element.appendChild(_icon.element);
+
             element.appendChild(document.createTextNode(''));
-            
-            element.className = 'CheckBox';
-            typeNames = 'CheckBox';
-            
+
             positioner = element;
             positioner.style.position = 'relative';
-            (cb as WrappedHTMLElement).flexjs_wrapper = this;
             element.flexjs_wrapper = this;
-            
+
+            className = 'CheckBox';
+            typeNames = 'CheckBox, CheckBoxIcon';
+
             return element;
-        }        
-        
+        }
+
         public function get text():String
         {
-            return element.childNodes.item(1).nodeValue;
+            return _label.childNodes.item(1).nodeValue;
         }
-        
+
         public function set text(value:String):void
         {
-            element.childNodes.item(1).nodeValue = value;
+            _label.childNodes.item(1).nodeValue = value;
         }
-        
+
         public function get selected():Boolean
         {
-            return (element.childNodes.item(0) as HTMLInputElement).checked;
+            return (_icon.element as HTMLInputElement).checked;
         }
-        
+
         public function set selected(value:Boolean):void
         {
-            (element.childNodes.item(0) as HTMLInputElement).checked = value;
+           (_icon.element as HTMLInputElement).checked = value;
         }
-    }        
+    }
 
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as
index 66f4e42..fc65985 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/RadioButton.as
@@ -22,34 +22,35 @@ package org.apache.flex.html
     {
         import flash.display.DisplayObject;
         import flash.events.MouseEvent;
-        import flash.utils.Dictionary;            
+        import flash.utils.Dictionary;
     }
-	
+
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IValueToggleButtonModel;
     COMPILE::SWF
     {
-        import org.apache.flex.core.UIButtonBase;            
+        import org.apache.flex.core.UIButtonBase;
     }
     COMPILE::JS
     {
         import org.apache.flex.core.UIBase;
         import org.apache.flex.core.WrappedHTMLElement;
+        import org.apache.flex.html.accessories.RadioButtonIcon;
     }
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.MouseEvent;
 	import org.apache.flex.core.IUIBase;
-	
+
 	[Event(name="change", type="org.apache.flex.events.Event")]
 
 	/**
 	 *  The RadioButton class is a component that displays a selectable Button. RadioButtons
 	 *  are typically used in groups, identified by the groupName property. RadioButton use
 	 *  the following beads:
-	 * 
+	 *
 	 *  org.apache.flex.core.IBeadModel: the data model, which includes the groupName.
 	 *  org.apache.flex.core.IBeadView:  the bead that constructs the visual parts of the RadioButton..
-	 *  
+	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
@@ -69,14 +70,14 @@ package org.apache.flex.html
 		public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
 		{
 			super(upState, overState, downState, hitTestState);
-			
+
 			addEventListener(org.apache.flex.events.MouseEvent.CLICK, internalMouseHandler);
 		}
-		
+
 		protected static var dict:Dictionary = new Dictionary(true);
-		
+
 		private var _groupName:String;
-		
+
 		/**
 		 *  The name of the group. Only one RadioButton in a group is selected.
 		 *
@@ -93,7 +94,7 @@ package org.apache.flex.html
 		{
 			IValueToggleButtonModel(model).groupName = value;
 		}
-		
+
 		/**
 		 *  The string used as a label for the RadioButton.
 		 *
@@ -110,7 +111,7 @@ package org.apache.flex.html
 		{
 			IValueToggleButtonModel(model).text = value;
 		}
-		
+
 		/**
 		 *  Whether or not the RadioButton instance is selected. Setting this property
 		 *  causes the currently selected RadioButton in the same group to lose the
@@ -128,7 +129,7 @@ package org.apache.flex.html
 		public function set selected(selValue:Boolean):void
 		{
 			IValueToggleButtonModel(model).selected = selValue;
-			
+
 			// if this button is being selected, its value should become
 			// its group's selectedValue
 			if( selValue ) {
@@ -141,7 +142,7 @@ package org.apache.flex.html
 				}
 			}
 		}
-		
+
 		/**
 		 *  The value associated with the RadioButton. For example, RadioButtons with labels,
 		 *  "Red", "Green", and "Blue" might have the values 0, 1, and 2 respectively.
@@ -159,7 +160,7 @@ package org.apache.flex.html
 		{
 			IValueToggleButtonModel(model).value = newValue;
 		}
-		
+
 		/**
 		 *  The group's currently selected value.
 		 *
@@ -168,17 +169,17 @@ package org.apache.flex.html
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		public function get selectedValue():Object 
+		public function get selectedValue():Object
 		{
 			return IValueToggleButtonModel(model).selectedValue;
 		}
-		public function set selectedValue(newValue:Object):void 
+		public function set selectedValue(newValue:Object):void
 		{
 			// a radio button is really selected when its value matches that of the group's value
 			IValueToggleButtonModel(model).selected = (newValue == value);
 			IValueToggleButtonModel(model).selectedValue = newValue;
 		}
-				
+
 		/**
 		 * @private
 		 */
@@ -189,9 +190,9 @@ package org.apache.flex.html
             // if this instance is selected, set the local selectedValue to
 			// this instance's value
 			if( selected ) selectedValue = value;
-			
+
 			else {
-			
+
 				// make sure this button's selectedValue is set from its group's selectedValue
 				// to keep it in sync with the rest of the buttons in its group.
 				for each(var rb:RadioButton in dict)
@@ -203,10 +204,10 @@ package org.apache.flex.html
 					}
 				}
 			}
-			
+
 			dict[this] = this;
 		}
-			
+
 		/**
 		 * @private
 		 */
@@ -219,15 +220,17 @@ package org.apache.flex.html
 			}
 		}
 	}
-    
+
     COMPILE::JS
     public class RadioButton extends UIBase
     {
         public static var radioCounter:int = 0;
-        
+
         private var input:HTMLInputElement;
         private var labelFor:HTMLLabelElement;
         private var textNode:Text;
+        private var icon:RadioButtonIcon;
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          * @flexjsignorecoercion HTMLInputElement
@@ -235,47 +238,47 @@ package org.apache.flex.html
          * @flexjsignorecoercion Text
          */
         override protected function createElement():WrappedHTMLElement
-        {            
-            input = document.createElement('input') as HTMLInputElement;
-            input.type = 'radio';
-            input.id = '_radio_' + RadioButton.radioCounter++;
-            
+        {
+            icon = new RadioButtonIcon()
+            icon.id = '_radio_' + RadioButton.radioCounter++;
+
+
             textNode = document.createTextNode('radio button') as Text;
-            
+
             labelFor = document.createElement('label') as HTMLLabelElement;
-            labelFor.appendChild(input);
+            labelFor.appendChild(icon.element);
             labelFor.appendChild(textNode);
-            
+
             element = labelFor as WrappedHTMLElement;
-            element.className = 'RadioButton';
-            typeNames = 'RadioButton';
-            
+
             positioner = element;
             positioner.style.position = 'relative';
-            
-            (input as WrappedHTMLElement).flexjs_wrapper = this;
+
             (element as WrappedHTMLElement).flexjs_wrapper = this;
             (textNode as WrappedHTMLElement).flexjs_wrapper = this;
-            
+
+            className = 'RadioButton';
+            typeNames = 'RadioButton, RadioButtonIcon';
+
             return element;
-        }        
-        
-        override public function set id(value:String):void 
+        }
+
+        override public function set id(value:String):void
         {
             super.id = value;
             labelFor.id = value;
-            input.id = value;
+            icon.element.id = value;
         }
-        
+
         public function get groupName():String
         {
-            return input.name as String;
+            return (icon.element as HTMLInputElement).name as String;
         }
         public function set groupName(value:String):void
         {
-            input.name = value;
+            (icon.element as HTMLInputElement).name = value;
         }
-        
+
         public function get text():String
         {
             return textNode.nodeValue as String;
@@ -284,17 +287,17 @@ package org.apache.flex.html
         {
             textNode.nodeValue = value;
         }
-        
+
         /** @export */
         public function get selected():Boolean
         {
-            return input.checked;
+            return (icon.element as HTMLInputElement).checked;
         }
         public function set selected(value:Boolean):void
         {
-            input.checked = value;            
+            (icon.element as HTMLInputElement).checked = value;
         }
-        
+
         public function get value():Object
         {
             return input.value;
@@ -303,18 +306,18 @@ package org.apache.flex.html
         {
             input.value = v as String;
         }
-        
+
         public function get selectedValue():Object
         {
             var buttons:NodeList;
             var groupName:String;
             var i:int;
             var n:int;
-            
+
             groupName = input.name as String;
             buttons = document.getElementsByName(groupName);
             n = buttons.length;
-            
+
             for (i = 0; i < n; i++) {
                 if (buttons[i].checked) {
                     return buttons[i].value;
@@ -322,7 +325,7 @@ package org.apache.flex.html
             }
             return null;
         }
-        
+
         /**
          * @flexjsignorecoercion Array
          */
@@ -332,7 +335,7 @@ package org.apache.flex.html
             var groupName:String;
             var i:int;
             var n:int;
-            
+
             groupName = input.name as String;
             buttons = document.getElementsByName(groupName);
             n = buttons.length;
@@ -343,6 +346,6 @@ package org.apache.flex.html
                 }
             }
         }
-    }        
+    }
 
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as
index 7d90ed1..f8c8c8f 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/TextButton.as
@@ -19,21 +19,25 @@
 package org.apache.flex.html
 {
 	import org.apache.flex.core.ITextModel;
-	
+
+	COMPILE::JS {
+		import org.apache.flex.core.WrappedHTMLElement;
+	}
+
     /**
      *  The TextButton class implements a basic button that
      *  displays text.
-     *  
+     *
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
-     */    
+     */
 	public class TextButton extends Button
 	{
         /**
          *  Constructor.
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -43,10 +47,10 @@ package org.apache.flex.html
 		{
 			super();
 		}
-		
+
         /**
          *  @copy org.apache.flex.html.Label#text
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -55,7 +59,7 @@ package org.apache.flex.html
 		public function get text():String
 		{
             COMPILE::SWF
-            {                    
+            {
                 return ITextModel(model).text;
             }
             COMPILE::JS
@@ -71,18 +75,18 @@ package org.apache.flex.html
 		{
             COMPILE::SWF
             {
-                ITextModel(model).text = value;                    
+                ITextModel(model).text = value;
             }
             COMPILE::JS
             {
                 this.element.innerHTML = value;
-                this.dispatchEvent('textChange');                
+                this.dispatchEvent('textChange');
             }
 		}
-		
+
         /**
          *  @copy org.apache.flex.html.Label#html
-         *  
+         *
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
@@ -92,7 +96,7 @@ package org.apache.flex.html
 		{
             COMPILE::SWF
             {
-                return ITextModel(model).html;                    
+                return ITextModel(model).html;
             }
             COMPILE::JS
             {
@@ -107,14 +111,26 @@ package org.apache.flex.html
 		{
             COMPILE::SWF
             {
-                ITextModel(model).html = value;                    
+                ITextModel(model).html = value;
             }
             COMPILE::JS
             {
                 this.element.innerHTML = value;
-                this.dispatchEvent('textChange');                
+                this.dispatchEvent('textChange');
             }
 		}
 
+		/**
+		 * @private
+		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+		 */
+		COMPILE::JS
+		override protected function createElement():WrappedHTMLElement
+		{
+			var element:WrappedHTMLElement = super.createElement();
+			typeNames = "TextButton";
+			return element;
+		}
+
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as
new file mode 100644
index 0000000..627e70d
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/CheckBoxIcon.as
@@ -0,0 +1,92 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.accessories
+{
+	COMPILE::JS {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+
+	public class CheckBoxIcon
+	{
+		public function CheckBoxIcon()
+		{
+			COMPILE::JS {
+				createElement();
+			}
+
+			className = 'CheckBoxIcon';
+		}
+
+		COMPILE::JS {
+		public var element:WrappedHTMLElement;
+		public var positioner:WrappedHTMLElement;
+		}
+
+		private var _className:String;
+
+		public function get className():String
+		{
+			return _className;
+		}
+		public function set className(value:String):void
+		{
+			_className = value;
+
+			COMPILE::JS {
+				element.className = value;
+			}
+		}
+
+		private var _id:String;
+
+		public function get id():String
+		{
+			return _id;
+		}
+		public function set id(value:String):void
+		{
+			_id = value;
+
+			COMPILE::JS {
+				element.id = value;
+			}
+		}
+
+		/**
+		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+		 * @flexjsignorecoercion HTMLInputElement
+		 * @flexjsignorecoercion Text
+		 */
+		COMPILE::JS
+ 		protected function createElement():WrappedHTMLElement
+		{
+			var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
+			input.type = 'checkbox';
+
+			element = input as WrappedHTMLElement;
+
+			positioner = element;
+			positioner.style.position = 'relative';
+
+			(element as WrappedHTMLElement).flexjs_wrapper = this;
+
+			return element;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as
new file mode 100644
index 0000000..cbcf427
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/accessories/RadioButtonIcon.as
@@ -0,0 +1,111 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.accessories
+{
+	COMPILE::JS {
+        import org.apache.flex.core.WrappedHTMLElement;
+    }
+
+	/**
+	 *  The RadioButton class is a component that displays a selectable Button. RadioButtons
+	 *  are typically used in groups, identified by the groupName property. RadioButton use
+	 *  the following beads:
+	 *
+	 *  org.apache.flex.core.IBeadModel: the data model, which includes the groupName.
+	 *  org.apache.flex.core.IBeadView:  the bead that constructs the visual parts of the RadioButton..
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class RadioButtonIcon
+	{
+		public function RadioButtonIcon()
+		{
+			COMPILE::JS {
+				createElement();
+			}
+
+			className = 'RadioButtonIcon';
+		}
+
+		COMPILE::JS {
+		public var element:WrappedHTMLElement;
+		public var positioner:WrappedHTMLElement;
+		}
+
+		private var _className:String;
+
+		/**
+		 * @private
+		 */
+		public function get className():String
+		{
+			return _className;
+		}
+		public function set className(value:String):void
+		{
+			_className = value;
+
+			COMPILE::JS {
+				element.className = value;
+			}
+		}
+
+		private var _id:String;
+
+		/**
+		 * @private
+		 */
+		public function get id():String
+		{
+			return _id;
+		}
+		public function set id(value:String):void
+		{
+			_id = value;
+
+			COMPILE::JS {
+				element.id = value;
+			}
+		}
+
+		/**
+		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+		 * @flexjsignorecoercion HTMLInputElement
+		 * @flexjsignorecoercion Text
+		 */
+		COMPILE::JS
+ 		protected function createElement():WrappedHTMLElement
+		{
+			var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
+			input.type = 'radio';
+
+			element = input as WrappedHTMLElement;
+
+			positioner = element;
+			positioner.style.position = 'relative';
+
+			(element as WrappedHTMLElement).flexjs_wrapper = this;
+
+			return element;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b86f09bd/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 8904c6e..5fd72c0 100644
--- a/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/HTML/src/main/resources/basic-manifest.xml
@@ -37,7 +37,9 @@
     <component id="List" class="org.apache.flex.html.List"/>
     <component id="SimpleList" class="org.apache.flex.html.SimpleList"/>
     <component id="CheckBox" class="org.apache.flex.html.CheckBox"/>
+    <component id="CheckBoxIcon" class="org.apache.flex.html.accessories.CheckBoxIcon" />
     <component id="RadioButton" class="org.apache.flex.html.RadioButton"/>
+    <component id="RadioButtonIcon" class="org.apache.flex.html.accessories.RadioButtonIcon"/>
     <component id="ComboBox" class="org.apache.flex.html.ComboBox"/>
     <component id="Container" class="org.apache.flex.html.Container"/>
     <component id="HContainer" class="org.apache.flex.html.HContainer"/>