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 2017/05/01 03:48:07 UTC

[08/50] [abbrv] git commit: [flex-asjs] [refs/heads/develop] - Merge branch 'develop' into dual. Clean build. Now to get it to run

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateChooserView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateChooserView.as
index 057661d,54b2550..ca1a0ee
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateChooserView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateChooserView.as
@@@ -23,27 -23,24 +23,31 @@@ package org.apache.flex.html.bead
  	import org.apache.flex.core.IBeadModel;
  	import org.apache.flex.core.IBeadView;
  	import org.apache.flex.core.IStrand;
++	import org.apache.flex.core.SimpleCSSStyles;
  	import org.apache.flex.core.UIBase;
  	import org.apache.flex.core.ValuesManager;
  	import org.apache.flex.events.Event;
  	import org.apache.flex.events.IEventDispatcher;
  	import org.apache.flex.html.Container;
-     import org.apache.flex.html.List;
++	import org.apache.flex.html.Group;
++	import org.apache.flex.html.List;
  	import org.apache.flex.html.TextButton;
-     import org.apache.flex.html.beads.layouts.HorizontalLayout;
++	import org.apache.flex.html.beads.GroupView;
++	import org.apache.flex.html.beads.layouts.HorizontalLayout;
  	import org.apache.flex.html.beads.layouts.TileLayout;
  	import org.apache.flex.html.beads.models.DateChooserModel;
 -	import org.apache.flex.html.supportClasses.DateChooserButton;
  	import org.apache.flex.html.supportClasses.DateHeaderButton;
-     import org.apache.flex.html.supportClasses.DateChooserHeader;
-     import org.apache.flex.html.supportClasses.DateChooserList;
-     
++	import org.apache.flex.html.supportClasses.DateChooserHeader;
++	import org.apache.flex.html.supportClasses.DateChooserList;
+ 
  	/**
  	 * The DateChooserView class is a view bead for the DateChooser. This class
  	 * creates the elements for the DateChooser: the buttons to move between
  	 * months, the labels for the days of the week, and the buttons for each day
  	 * of the month.
++	 *  @viewbead	 
  	 */
--	public class DateChooserView extends BeadViewBase implements IBeadView
++	public class DateChooserView extends GroupView implements IBeadView
  	{
  		/**
  		 *  constructor
@@@ -55,33 -52,45 +59,33 @@@
  		 */
  		public function DateChooserView()
  		{
++			super();
  		}
  		
 -		/**
 -		 *  @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;
 -
 -			// make sure there is a model.
++			
  			model = _strand.getBeadByType(IBeadModel) as DateChooserModel;
  			if (model == null) {
  				model = new (ValuesManager.valuesImpl.getValue(_strand,"iBeadModel")) as DateChooserModel;
  			}
  			model.addEventListener("displayedMonthChanged",handleModelChange);
  			model.addEventListener("displayedYearChanged",handleModelChange);
--
--			var host:UIBase = value as UIBase;
--			host.addEventListener("widthChanged", handleSizeChange);
--			host.addEventListener("heightChanged", handleSizeChange);
--
++			
  			createChildren();
--			layoutContents();
++			updateDisplay();
  		}
--
-         private var model:DateChooserModel;
++		
++		private var model:DateChooserModel;
++		
  		private var _prevMonthButton:DateHeaderButton;
  		private var _nextMonthButton:DateHeaderButton;
 -		private var _dayButtons:Array;
  		private var monthLabel:DateHeaderButton;
-         private var dayNamesContainer:DateChooserHeader;
-         private var daysContainer:DateChooserList;
-         
 -		private var dayContainer:Container;
 -
 -		private var model:DateChooserModel;
 -
++		private var monthButtonsContainer:Group;
++		private var dayNamesContainer:DateChooserHeader;
++		private var daysContainer:DateChooserList;
++		
  		/**
  		 *  The button that causes the previous month to be displayed by the DateChooser.
  		 *
@@@ -94,7 -103,7 +98,7 @@@
  		{
  			return _prevMonthButton;
  		}
--
++		
  		/**
  		 *  The button that causes the next month to be displayed by the DateChooser.
  		 *
@@@ -107,103 -116,213 +111,136 @@@
  		{
  			return _nextMonthButton;
  		}
--
-         public function get dayList():List
-         {
-             return daysContainer;
-         }
-             
 -		/**
 -		 * The array of DateChooserButton instances that represent each day of the month.
 -		 */
 -		public function get dayButtons():Array
 -		{
 -			return _dayButtons;
 -		}
 -
--		private function handleSizeChange(event:Event):void
 -		{
 -			layoutContents();
 -		}
 -
 -		private function layoutContents():void
++		
++		public function get dayList():List
  		{
- 			layoutContents();
 -			var sw:Number = UIBase(_strand).width;
 -			var sh:Number = UIBase(_strand).height;
 -
 -			_prevMonthButton.x = 0;
 -			_prevMonthButton.y = 0;
 -
 -			_nextMonthButton.x = sw - _nextMonthButton.width;
 -			_nextMonthButton.y = 0;
 -
 -			monthLabel.x = (sw - monthLabel.width)/2;
 -			monthLabel.y = 0;
 -
 -			dayContainer.x = 0;
 -			dayContainer.y = monthLabel.y + monthLabel.height + 5;
 -			dayContainer.width = sw;
 -			dayContainer.height = sh - (monthLabel.height+5);
 -			
 -			COMPILE::SWF {
 -				displayBackgroundAndBorder(_strand as UIBase);
 -			}
 -
 -			IEventDispatcher(_strand).dispatchEvent( new Event("layoutNeeded") );
 -			IEventDispatcher(dayContainer).dispatchEvent( new Event("layoutNeeded") );
++			return daysContainer;
  		}
--
++		
++		private const controlHeight:int = 26;
++		private const commonButtonWidth:int = 40;
++		
  		/**
  		 * @private
  		 */
  		private function createChildren():void
  		{
++			// HEADER BUTTONS
++			
++			monthButtonsContainer = new Group();
++			monthButtonsContainer.height = controlHeight;
++			monthButtonsContainer.id = "dateChooserMonthButtons";
++			monthButtonsContainer.className = "DateChooserMonthButtons";
++			monthButtonsContainer.style = new SimpleCSSStyles();
++			monthButtonsContainer.style.flexGrow = 0;
++			COMPILE::JS {
++				monthButtonsContainer.element.style["flex-grow"] = "0";
++			}
++			
  			_prevMonthButton = new DateHeaderButton();
--			_prevMonthButton.width = 40;
--			_prevMonthButton.height = 20;
++			_prevMonthButton.width = commonButtonWidth;
  			_prevMonthButton.text = "<";
--			UIBase(_strand).addElement(_prevMonthButton);
--
--			_nextMonthButton = new DateHeaderButton();
--			_nextMonthButton.width = 40;
--			_nextMonthButton.height = 20;
--			_nextMonthButton.text = ">";
--			UIBase(_strand).addElement(_nextMonthButton);
--
++			if (_prevMonthButton.style == null) {
++				_prevMonthButton.style = new SimpleCSSStyles();
++			}
++			_prevMonthButton.style.flexGrow = 0;
++			COMPILE::JS {
++				_prevMonthButton.element.style["flex-grow"] = "0";
++			}
++			monthButtonsContainer.addElement(_prevMonthButton);
++			
  			monthLabel = new DateHeaderButton();
  			monthLabel.text = "Month Here";
--			monthLabel.width = 100;
--			monthLabel.height = 20;
--			UIBase(_strand).addElement(monthLabel);
--
-             dayNamesContainer = new DateChooserHeader();
-             UIBase(_strand).addElement(dayNamesContainer, false);
-             
-             daysContainer = new DateChooserList();
-             UIBase(_strand).addElement(daysContainer, false);
-             
 -			dayContainer = new Container();
 -			var tileLayout:TileLayout = new TileLayout();
 -			dayContainer.addBead(tileLayout);
 -            UIBase(_strand).addElement(dayContainer, false);
 -
 -			tileLayout.numColumns = 7;
 -
 -			// the calendar has 7 columns with 6 rows, the first row are the day names
 -			for(var i:int=0; i < 7; i++) {
 -				var dayName:DateChooserButton = new DateChooserButton();
 -				dayName.text = model.dayNames[i];
 -				dayName.dayOfMonth = 0;
 -				dayContainer.addElement(dayName, false);
++			if (monthLabel.style == null) {
++				monthLabel.style = new SimpleCSSStyles();
+ 			}
 -
 -			_dayButtons = new Array();
 -
 -			for(i=0; i < 42; i++) {
 -				var date:DateChooserButton = new DateChooserButton();
 -				date.text = String(i+1);
 -				dayContainer.addElement(date, false);
 -				dayButtons.push(date);
++			monthLabel.style.flexGrow = 1;
++			COMPILE::JS {
++				monthLabel.element.style["flex-grow"] = "1";
+ 			}
 -
 -			IEventDispatcher(dayContainer).dispatchEvent( new Event("itemsCreated") );
 -
 -			updateCalendar();
 -		}
 -
 -		/**
 -		 * @private
 -		 */
 -		private function updateCalendar():void
 -		{
 -			monthLabel.text = model.monthNames[model.displayedMonth] + " " +
 -				String(model.displayedYear);
 -
 -			var firstDay:Date = new Date(model.displayedYear,model.displayedMonth,1);
 -
 -			// blank out the labels for the first firstDay.day-1 entries.
 -			for(var i:int=0; i < firstDay.getDay(); i++) {
 -				var dateButton:DateChooserButton = dayButtons[i] as DateChooserButton;
 -				dateButton.dayOfMonth = -1;
 -				dateButton.text = "";
++			monthButtonsContainer.addElement(monthLabel);
++			
++			_nextMonthButton = new DateHeaderButton();
++			_nextMonthButton.width = commonButtonWidth;
++			_nextMonthButton.text = ">";
++			if (_nextMonthButton.style == null) {
++				_nextMonthButton.style = new SimpleCSSStyles();
+ 			}
 -
 -			// flag today
 -			var today:Date = new Date();
 -
 -			// renumber to the last day of the month
 -			var dayNumber:int = 1;
 -			var numDays:Number = numberOfDaysInMonth(model.displayedMonth, model.displayedYear);
 -
 -			for(; i < dayButtons.length && dayNumber <= numDays; i++) {
 -				dateButton = dayButtons[i] as DateChooserButton;
 -				dateButton.dayOfMonth = dayNumber;
 -				dateButton.text = String(dayNumber++);
 -
 -				if (model.displayedMonth == today.getMonth() &&
 -				    model.displayedYear == today.getFullYear() &&
 -				    (dayNumber-1) == today.getDate()) {
 -				    dateButton.id = "todayDateChooserButton";
 -				} else {
 -					dateButton.id = "";
 -				}
++			COMPILE::JS {
++				_nextMonthButton.element.style["flex-grow"] = "0";
+ 			}
 -
 -			// blank out the rest
 -			for(; i < dayButtons.length; i++) {
 -				dateButton = dayButtons[i] as DateChooserButton;
 -				dateButton.dayOfMonth = -1;
 -				dateButton.text = "";
++			_nextMonthButton.style.flexGrow = 0;
++			monthButtonsContainer.addElement(_nextMonthButton);
++			
++			UIBase(_strand).addElement(monthButtonsContainer, false);
++			
++			// DAY NAMES
++			
++			dayNamesContainer = new DateChooserHeader();
++			dayNamesContainer.id = "dateChooserDayNames";
++			dayNamesContainer.className = "DateChooserHeader";
++			dayNamesContainer.height = controlHeight;
++			dayNamesContainer.style = new SimpleCSSStyles();
++			dayNamesContainer.style.flexGrow = 0;
++			COMPILE::JS {
++				dayNamesContainer.element.style["flex-grow"] = "0";
++				dayNamesContainer.element.style["align-items"] = "center";
+ 			}
++			COMPILE::SWF {
++				dayNamesContainer.percentWidth = 100;
++			}
++			UIBase(_strand).addElement(dayNamesContainer, false);
++			
++			// DAYS
++			
++			daysContainer = new DateChooserList();
++			daysContainer.className = "DateChooserList";
++			daysContainer.id = "dateChooserList";
++			daysContainer.style = new SimpleCSSStyles();
++			daysContainer.style.flexGrow = 1;
++			COMPILE::JS {
++				daysContainer.element.style["flex-grow"] = "1";
++			}
++			COMPILE::SWF {
++				daysContainer.percentWidth = 100;
++			}
++			UIBase(_strand).addElement(daysContainer, false);
++			
++			
 +			IEventDispatcher(daysContainer).dispatchEvent( new Event("itemsCreated") );
- 
-             model.addEventListener("selectedDateChanged", selectionChangeHandler);
-         }
- 
-         private function layoutContents():void
-         {
-             var sw:Number = UIBase(_strand).width;
-             var sh:Number = UIBase(_strand).height;
-             
-             _prevMonthButton.x = 0;
-             _prevMonthButton.y = 0;
-             
-             _nextMonthButton.x = sw - _nextMonthButton.width;
-             _nextMonthButton.y = 0;
-             
-             monthLabel.x = _prevMonthButton.x + _prevMonthButton.width;
-             monthLabel.y = 0;
-             monthLabel.width = sw - _prevMonthButton.width - _nextMonthButton.width;
-             monthLabel.text = model.monthNames[model.displayedMonth] + " " +
-                 String(model.displayedYear);
- 
-             dayNamesContainer.x = 0;
-             dayNamesContainer.y = monthLabel.y + monthLabel.height;
-             dayNamesContainer.width = sw;
-             dayNamesContainer.height = monthLabel.height;
-             
-             dayNamesContainer.dataProvider = model.dayNames;
-             
-             daysContainer.x = 0;
-             daysContainer.y = dayNamesContainer.y + dayNamesContainer.height;
-             daysContainer.width = sw;
-             daysContainer.height = sh - monthLabel.height - dayNamesContainer.height;
-             daysContainer.dataProvider = model.days;
-                 
-             IEventDispatcher(_strand).dispatchEvent( new Event("layoutNeeded") );
-             IEventDispatcher(daysContainer).dispatchEvent( new Event("layoutNeeded") );
-         }
- 
-         
++			model.addEventListener("selectedDateChanged", selectionChangeHandler);
+ 		}
 -
++		
  		/**
  		 * @private
  		 */
-         private function selectionChangeHandler(event:Event):void
 -		private function numberOfDaysInMonth(month:Number, year:Number):Number
++		private function updateDisplay():void
  		{
-             layoutContents();
-             var index:Number = model.getIndexForSelectedDate();
-             daysContainer.selectedIndex = index;
 -			var n:int;
 -
 -			if (month == 1) // Feb
 -			{
 -				if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) // leap year
 -					n = 29;
 -				else
 -					n = 28;
 -			}
 -
 -			else if (month == 3 || month == 5 || month == 8 || month == 10)
 -				n = 30;
 -
 -			else
 -				n = 31;
 -
 -			return n;
++			monthLabel.text = model.monthNames[model.displayedMonth] + " " +
++				String(model.displayedYear);
++			
++			dayNamesContainer.dataProvider = model.dayNames;
++			
++			daysContainer.dataProvider = model.days;
  		}
--
++		
  		/**
  		 * @private
  		 */
--		private function handleModelChange(event:Event):void
++		private function selectionChangeHandler(event:Event):void
  		{
-             layoutContents();
 -			updateCalendar();
++			updateDisplay();
++			
++			var index:Number = model.getIndexForSelectedDate();
++			daysContainer.selectedIndex = index;
  		}
  		
+ 		/**
+ 		 * @private
+ 		 */
 -		COMPILE::SWF
 -		protected function displayBackgroundAndBorder(host:UIBase) : void
++		private function handleModelChange(event:Event):void
+ 		{
 -			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(host, "background-color");
 -			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(host, "background-image");
 -			if (backgroundColor != null || backgroundImage != null)
 -			{
 -				if (host.getBeadByType(IBackgroundBead) == null)
 -					var c:Class = ValuesManager.valuesImpl.getValue(host, "iBackgroundBead");
 -				if (c) {
 -					host.addBead( new c() as IBead );
 -				}
 -			}
 -			
 -			var borderStyle:String;
 -			var borderStyles:Object = ValuesManager.valuesImpl.getValue(host, "border");
 -			if (borderStyles is Array)
 -			{
 -				borderStyle = borderStyles[1];
 -			}
 -			if (borderStyle == null)
 -			{
 -				borderStyle = ValuesManager.valuesImpl.getValue(host, "border-style") as String;
 -			}
 -			if (borderStyle != null && borderStyle != "none")
 -			{
 -				if (host.getBeadByType(IBorderBead) == null) {
 -					c = ValuesManager.valuesImpl.getValue(host, "iBorderBead");
 -					if (c) {
 -						host.addBead( new c() as IBead );
 -					}
 -				}
 -			}
++			updateDisplay();
+ 		}
  	}
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateFieldView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateFieldView.as
index f709a1f,f709a1f..33bdfbb
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateFieldView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DateFieldView.as
@@@ -41,6 -41,6 +41,7 @@@ package org.apache.flex.html.bead
  	 * input and button controls. This class also handles the pop-up 
  	 * mechanics.
  	 *  
++	 *  @viewbead
  	 *  @langversion 3.0
  	 *  @playerversion Flash 10.2
  	 *  @playerversion AIR 2.6
@@@ -109,8 -109,8 +110,11 @@@
  			_button = new TextButton();
  			_button.text = "M";
  			UIBase(_strand).addElement(_button);
--			_button.x = _textInput.width;
--			_button.y = _textInput.y;
++			
++			COMPILE::SWF {
++				_button.x = _textInput.width;
++				_button.y = _textInput.y;
++			}
  			
  			IEventDispatcher(_strand).addEventListener("beadsAdded",handleBeadsAdded);
  		}
@@@ -167,18 -167,18 +171,21 @@@
  					{
  						_popUp = new DateChooser();
  						_popUp.width = 210;
--						_popUp.height = 220;
++						_popUp.height = 230;
  					}
  					
  					var model:IDateChooserModel = _strand.getBeadByType(IDateChooserModel) as IDateChooserModel;
  					_popUp.selectedDate = model.selectedDate;
  					
  					var host:IPopUpHost = UIUtils.findPopUpHost(UIBase(_strand));
--					var point:Point = new Point(_button.x, _button.y+_button.height);
++					var point:Point = new Point(_textInput.width, _button.height);
  					var p2:Point = PointUtils.localToGlobal(point, _strand);
  					var p3:Point = PointUtils.globalToLocal(p2, host);
  					_popUp.x = p3.x;
  					_popUp.y = p3.y;
++					COMPILE::JS {
++						_popUp.element.style.position = "absolute";
++					}
  					
  					host.addElement(_popUp);
  				}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DispatchInputFinishedBead.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DispatchInputFinishedBead.as
index 0000000,0000000..40cc900
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DispatchInputFinishedBead.as
@@@ -1,0 -1,0 +1,140 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.IBead;
++	import org.apache.flex.core.IStrand;
++	import org.apache.flex.events.Event;
++	import org.apache.flex.events.IEventDispatcher;
++	
++	COMPILE::JS
++		{
++			import org.apache.flex.core.IRenderedObject;
++			import goog.events;
++		}
++		
++		COMPILE::SWF
++		{
++			import flash.events.FocusEvent;
++			import flash.events.KeyboardEvent;
++			import org.apache.flex.html.beads.ITextFieldView;
++		}
++		
++		/**
++		 *  The DispatchInputFinishedBead class dispatched INPUT_FINISHED on strand
++		 *  when enter is pressed, or when foucus is out.
++		 *  
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		public class DispatchInputFinishedBead implements IBead
++		{
++			/**
++			 *  constructor.
++			 *  
++			 *  @langversion 3.0
++			 *  @playerversion Flash 10.2
++			 *  @playerversion AIR 2.6
++			 *  @productversion FlexJS 0.0
++			 */
++			public function DispatchInputFinishedBead()
++			{
++			}
++			
++			public static const INPUT_FINISHED:String = "inputFinished";
++			
++			
++			
++			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;
++				
++				COMPILE::SWF
++					{
++						var viewBead:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
++						viewBead.textField.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
++						viewBead.textField.addEventListener(FocusEvent.FOCUS_OUT, focusOutHandler);
++					}
++					COMPILE::JS
++					{
++						goog.events.listen((_strand as IRenderedObject).element, 'keydown', keydownHandler);
++						goog.events.listen((_strand as IRenderedObject).element, 'focusout', focusoutHandler);
++					}
++			}
++			
++			/**
++			 * @private
++			 */
++			COMPILE::SWF
++			protected function focusOutHandler(event:FocusEvent):void
++			{
++				(_strand as IEventDispatcher).dispatchEvent(new Event(INPUT_FINISHED));
++			}
++			
++			/**
++			 * @private
++			 */
++			COMPILE::SWF
++			private function keyDownHandler( event:KeyboardEvent ) : void
++			{
++				// this will otherwise bubble an event of flash.events.Event
++				event.stopImmediatePropagation();
++				if (event.keyCode == 13) //enter
++				{
++					(_strand as IEventDispatcher).dispatchEvent(new Event(INPUT_FINISHED));
++				}
++			}
++			
++			/**
++			 * @private
++			 */
++			COMPILE::JS
++			private function keydownHandler( event:Object ) : void
++			{
++				if (event.keyCode == 13) //enter
++				{
++					(_strand as IEventDispatcher).dispatchEvent(new Event(INPUT_FINISHED));
++				}
++			}
++
++			
++			/**
++			 * @private
++			 */
++			COMPILE::JS
++			private function focusoutHandler( event:Object ) : void
++			{
++				(_strand as IEventDispatcher).dispatchEvent(new Event(INPUT_FINISHED));
++			}
++			
++		}
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DispatchKeyboardEventBead.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DispatchKeyboardEventBead.as
index 0000000,0000000..fe09148
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DispatchKeyboardEventBead.as
@@@ -1,0 -1,0 +1,148 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.IBead;
++	import org.apache.flex.core.IStrand;
++	import org.apache.flex.events.Event;
++	import org.apache.flex.events.IEventDispatcher;
++	import org.apache.flex.events.KeyboardEvent;
++	import org.apache.flex.events.utils.KeyboardEventConverter;
++	
++	COMPILE::JS
++	{
++		import org.apache.flex.core.IRenderedObject;
++		import goog.events;
++	}
++	
++	COMPILE::SWF
++	{
++		import flash.events.KeyboardEvent;
++		import org.apache.flex.html.beads.ITextFieldView;
++	}
++	
++	/**
++	 *  The DispatchKeyboardEventBead class dispatched INPUT_FINISHED on strand
++	 *  when enter is pressed, or when foucus is out.
++	 *  
++	 *  @langversion 3.0
++	 *  @playerversion Flash 10.2
++	 *  @playerversion AIR 2.6
++	 *  @productversion FlexJS 0.0
++	 */
++	public class DispatchKeyboardEventBead implements IBead
++	{
++		/**
++		 *  constructor.
++		 *  
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		public function DispatchKeyboardEventBead()
++		{
++		}			
++		
++		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;
++			
++			COMPILE::SWF
++			{
++				if (!attachEventListeners())
++				{
++					(_strand as IEventDispatcher).addEventListener("viewChanged", viewChangedHandler);
++				}
++			}
++			COMPILE::JS
++			{
++				(_strand as Object).element.addEventListener('keydown', keyEventHandler);
++				(_strand as Object).element.addEventListener('keyup', keyEventHandler);
++			}
++		}
++		
++		
++		/**
++		 * @private
++		 */
++		COMPILE::SWF
++		private function viewChangedHandler(e:Event):void
++		{
++			attachEventListeners();
++		}
++		
++		/**
++		 * @private
++		 */
++		COMPILE::SWF
++		private function attachEventListeners():Boolean
++		{
++			var viewBead:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
++			if (!viewBead) return false;
++			viewBead.textField.addEventListener(flash.events.KeyboardEvent.KEY_DOWN, keyEventHandler);
++			viewBead.textField.addEventListener(flash.events.KeyboardEvent.KEY_UP, keyEventHandler);
++			return true;
++		}
++		
++		
++		/**
++		 * @private
++		 */
++		COMPILE::SWF
++		protected function keyEventHandler(event:flash.events.KeyboardEvent):void
++		{
++			// this will otherwise bubble an event of flash.events.Event
++			event.stopImmediatePropagation();
++			var newEvent:org.apache.flex.events.KeyboardEvent = KeyboardEventConverter.convert(event);
++			(_strand as IEventDispatcher).dispatchEvent(newEvent);
++			if(newEvent.defaultPrevented)
++			{
++				event.preventDefault();
++			}
++		}
++		
++		/**
++		 * @private
++		 */
++		COMPILE::JS
++		protected function keyEventHandler(event:KeyboardEvent):void
++		{
++			event.stopImmediatePropagation();
++			var newEvent:org.apache.flex.events.KeyboardEvent = KeyboardEventConverter.convert(event);
++			(_strand as IEventDispatcher).dispatchEvent(newEvent);
++			if(newEvent.defaultPrevented)
++			{
++				event.preventDefault();
++			}
++		}
++		
++	}
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DropDownListView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DropDownListView.as
index d3d7ebd,d3d7ebd..2e10302
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DropDownListView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DropDownListView.as
@@@ -18,7 -18,7 +18,6 @@@
  ////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads
  {
--	import flash.display.DisplayObject;
  	import flash.display.DisplayObjectContainer;
  	import flash.display.Graphics;
  	import flash.display.Shape;
@@@ -29,14 -29,14 +28,16 @@@
  	import org.apache.flex.core.BeadViewBase;
  	import org.apache.flex.core.CSSTextField;
  	import org.apache.flex.core.IBeadView;
--    import org.apache.flex.core.IChild;
++	import org.apache.flex.core.IChild;
  	import org.apache.flex.core.IPopUpHost;
  	import org.apache.flex.core.ISelectionModel;
  	import org.apache.flex.core.IStrand;
++	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.utils.SolidBorderUtil;
++	import org.apache.flex.utils.SolidBorderUtil;
++	import org.apache.flex.utils.UIUtils;
      
      /**
       *  The DropDownListView class is the default view for
@@@ -45,6 -45,6 +46,7 @@@
       *  down arrow button on the right, but really, the entire
       *  view is the button that will display or dismiss the dropdown.
       *  
++	 *  @viewbead
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6
@@@ -112,7 -112,7 +114,7 @@@
           */
  		override public function set strand(value:IStrand):void
  		{
--			super.strand = value;;
++			super.strand = value;
              selectionModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
              selectionModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
              selectionModel.addEventListener("dataProviderChanged", selectionChangeHandler);
@@@ -120,10 -120,10 +122,11 @@@
  			shape.graphics.beginFill(0xCCCCCC);
  			shape.graphics.drawRect(0, 0, 10, 10);
  			shape.graphics.endFill();
--			SimpleButton(value).upState = upSprite;
--			SimpleButton(value).downState = downSprite;
--			SimpleButton(value).overState = overSprite;
--			SimpleButton(value).hitTestState = shape;
++            var button:SimpleButton = value as SimpleButton;
++			button.upState = upSprite;
++            button.downState = downSprite;
++            button.overState = overSprite;
++            button.hitTestState = shape;
  			if (selectionModel.selectedIndex !== -1)
  				text = selectionModel.selectedItem.toString();
              else
@@@ -151,8 -151,8 +154,8 @@@
  		
          private function changeHandler(event:Event):void
          {
--            var ww:Number = DisplayObject(_strand).width;
--            var hh:Number = DisplayObject(_strand).height;
++            var ww:Number = IUIBase(_strand).width;
++            var hh:Number = IUIBase(_strand).height;
              
              upArrows.x = ww - upArrows.width - 6;            
              overArrows.x = ww - overArrows.width - 6;            
@@@ -190,6 -190,6 +193,7 @@@
  		
          private function drawBorder(sprite:Sprite, color:uint, ww:Number, hh:Number):void
          {
++			sprite.graphics.clear();
              SolidBorderUtil.drawBorder(sprite.graphics, 0, 0,
                  ww, hh,
                  0x808080, color, 1, 1, 4);
@@@ -230,8 -230,8 +234,6 @@@
           */
  		public function set text(value:String):void
  		{
--            var ww:Number = DisplayObject(_strand).width;
--            var hh:Number = DisplayObject(_strand).height;
  			upTextField.text = value;
  			downTextField.text = value;
  			overTextField.text = value;
@@@ -278,21 -278,21 +280,19 @@@
           */
          public function set popUpVisible(value:Boolean):void
          {
++            var host:IPopUpHost;
              if (value != _popUpVisible)
              {
                  _popUpVisible = value;
                  if (value)
                  {
--					var root:Object = DisplayObject(_strand).root;
--					var host:DisplayObjectContainer = DisplayObject(_strand).parent;
--                    while (host && !(host is IPopUpHost))
--                        host = host.parent;
--                    if (host)
--                        IPopUpHost(host).addElement(popUp as IChild);
++					host = UIUtils.findPopUpHost(_strand as IUIBase);
++                    IPopUpHost(host).addElement(popUp as IChild);
                  }
                  else
                  {
--                    DisplayObject(_popUp).parent.removeChild(_popUp as DisplayObject);                    
++                    host = UIUtils.findPopUpHost(_strand as IUIBase);
++                    IPopUpHost(host).removeElement(popUp as IChild);
                  }
              }
          }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/GroupView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/GroupView.as
index 0000000,0000000..c3351a5
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/GroupView.as
@@@ -1,0 -1,0 +1,429 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.IBead;
++	import org.apache.flex.core.IBeadLayout;
++	import org.apache.flex.core.IBeadView;
++	import org.apache.flex.core.ILayoutChild;
++	import org.apache.flex.core.ILayoutHost;
++	import org.apache.flex.core.ILayoutView;
++	import org.apache.flex.core.IStrand;
++	import org.apache.flex.core.IUIBase;
++	import org.apache.flex.core.UIBase;
++	import org.apache.flex.core.ValuesManager;
++	import org.apache.flex.events.Event;
++	import org.apache.flex.events.IEventDispatcher;
++
++	COMPILE::SWF {
++		import org.apache.flex.geom.Size;
++		import org.apache.flex.geom.Rectangle;
++		import org.apache.flex.utils.CSSContainerUtils;
++	}
++
++	/**
++	 *  The GroupView is a bead that manages the layout bead (if any) attached to a Group. This class
++	 *  also provides support for background and border styles for a Group on the SWF platform.
++     *
++	 *  @viewbead
++     *  @langversion 3.0
++     *  @playerversion Flash 10.2
++     *  @playerversion AIR 2.6
++     *  @productversion FlexJS 0.8
++	 */
++	public class GroupView extends BeadViewBase implements IBeadView, ILayoutHost
++	{
++		/**
++     	 *  The GroupView class is the default view for
++         *  the org.apache.flex.html.Group class.
++         *  It lets you use some CSS styles to manage the border, background
++         *  and padding around the content area.
++         *
++         *  @langversion 3.0
++         *  @playerversion Flash 10.2
++         *  @playerversion AIR 2.6
++         *  @productversion FlexJS 0.8
++         */
++		public function GroupView()
++		{
++			super();
++
++			layoutRunning = false;
++		}
++
++		/**
++		 * The sub-element used as the parent of the container's elements. This does not
++		 * include the chrome elements.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		public function get contentView():ILayoutView
++		{
++			return host as ILayoutView;
++		}
++
++		/**
++		 * The view that can be resized.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		public function get resizableView():IUIBase
++		{
++			return host;
++		}
++
++
++		private var layoutRunning:Boolean;
++
++		/**
++		 * Strand setter.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		override public function set strand(value:IStrand):void
++		{
++			_strand = value;
++			super.strand = value;
++
++			COMPILE::SWF {
++				displayBackgroundAndBorder(host as UIBase);
++			}
++
++			// listen for initComplete to signal that the strand has been initialized
++			// with its beads and children.
++			host.addEventListener("initComplete", handleInitComplete);
++			
++			// listen for when children have been added so additional event listeners
++			// can be placed upon them.
++			host.addEventListener("childrenAdded", handleChildrenAdded);
++			
++			// listen for requests to run the layout.
++			host.addEventListener("layoutNeeded", performLayout);
++		}
++
++		/**
++		 * Handles the initComplete event by completing the setup and kicking off the
++		 * presentation of the contents.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function handleInitComplete(event:Event):void
++		{
++            var ilc:ILayoutChild = host as ILayoutChild;
++			// Complete the setup if the height is sized to content or has been explicitly set
++            // and the width is sized to content or has been explicitly set
++			if ((ilc.isHeightSizedToContent() || !isNaN(ilc.explicitHeight) || !isNaN(ilc.percentHeight)) &&
++                (ilc.isWidthSizedToContent() || !isNaN(ilc.explicitWidth) || !isNaN(ilc.percentWidth))) {
++				completeSetup();
++			}
++			else {
++				// otherwise, wait until the unknown sizes have been set and then finish
++				host.addEventListener("sizeChanged", deferredSizeHandler);
++                host.addEventListener("widthChanged", deferredSizeHandler);
++                host.addEventListener("heightChanged", deferredSizeHandler);
++			}
++		}
++
++		/**
++		 * Handles the case where the size of the host is not immediately known, usually do
++		 * to one of its dimensions being indicated as a percent size.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function deferredSizeHandler(event:Event):void
++		{
++            host.removeEventListener("sizeChanged", deferredSizeHandler);
++            host.removeEventListener("widthChanged", deferredSizeHandler);
++            host.removeEventListener("heightChanged", deferredSizeHandler);
++			
++			completeSetup();
++
++			var num:Number = contentView.numElements;
++			if (num > 0)
++            {
++                performLayout(event);
++            }
++		}
++
++		/**
++		 * Called when the host is ready to complete its setup (usually after its size has been
++		 * determined).
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function completeSetup():void
++		{
++			// listen for changes to strand's size and rerun the layout
++			host.addEventListener("sizeChanged", resizeHandler);
++			host.addEventListener("widthChanged", resizeHandler);
++			host.addEventListener("heightChanged", resizeHandler);
++		}
++
++		/**
++		 * Handles the viewCreated event by performing the first layout if
++		 * there are children already present (ie, from MXML).
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function viewCreatedHandler(event:Event):void
++		{
++			var num:Number = contentView.numElements;
++			if (num > 0)
++			{
++				performLayout(event);
++			}
++		}
++
++		/**
++		 * @private
++		 */
++		protected function handleChildrenAdded(event:Event):void
++		{
++			COMPILE::SWF {
++				var n:Number = contentView.numElements;
++				for(var i:int=0; i < n; i++) {
++					var child:IEventDispatcher = contentView.getElementAt(i) as IEventDispatcher;
++					child.addEventListener("widthChanged", childResizeHandler);
++					child.addEventListener("heightChanged", childResizeHandler);
++					child.addEventListener("sizeChanged", childResizeHandler);
++				}
++			}
++
++			performLayout(event);
++		}
++		
++		/**
++		 * Invoked in response to the strand being resized.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function resizeHandler(event:Event):void
++		{
++			performLayout(event);
++		}
++		
++		/**
++		 * Invoked in response to any child being resized.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function childResizeHandler(event:Event):void
++		{
++			performLayout(event);
++		}
++		
++		/**
++		 * Provides a place for pre-layout actions.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function layoutViewBeforeContentLayout():void
++		{
++			// This has no use for Group but is here so a subclass can override it.
++		}
++
++		/**
++		 * Executes the layout associated with this container. Once the layout has been
++		 * run, it may affect the size of the host or may cause the host to present scroll
++		 * bars view its viewport.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		protected function performLayout(event:Event):void
++		{
++			if (layoutRunning) return;
++
++			layoutRunning = true;
++			
++			// pre-process before layout
++			layoutViewBeforeContentLayout();
++
++			var host:UIBase = _strand as UIBase;
++
++			var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
++			if (layout == null) {
++				var c:Class = ValuesManager.valuesImpl.getValue(host, "iBeadLayout");
++				if (c) {
++					layout = new c() as IBeadLayout;
++					_strand.addBead(layout);
++				}
++			}
++
++			if (layout) {
++				layout.layout();
++			}
++
++			// cleanup or adjust after layout
++			layoutViewAfterContentLayout();
++
++			layoutRunning = false;
++			
++			host.dispatchEvent(new Event("layoutComplete"));
++		}
++
++		/**
++		 * Returns the size of the content area including the padding.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		COMPILE::SWF
++		protected function calculateContentSize():Size
++		{
++			var maxWidth:Number = 0;
++			var maxHeight:Number = 0;
++			var num:Number = contentView.numElements;
++
++			for (var i:int=0; i < num; i++) {
++				var child:IUIBase = contentView.getElementAt(i) as IUIBase;
++				if (child == null || !child.visible) continue;
++				var childXMax:Number = child.x + child.width;
++				var childYMax:Number = child.y + child.height;
++				maxWidth = Math.max(maxWidth, childXMax);
++				maxHeight = Math.max(maxHeight, childYMax);
++			}
++
++			var padding:org.apache.flex.geom.Rectangle = CSSContainerUtils.getPaddingMetrics(this._strand);
++			var border:org.apache.flex.geom.Rectangle = CSSContainerUtils.getBorderMetrics(this._strand);
++
++			// return the content size as the max plus right/bottom padding. the x,y position of
++			// each child is already offset by the left/top padding by the layout algorithm.
++			return new Size(maxWidth + padding.right - (border.left+border.right), maxHeight + padding.bottom - (border.top+border.bottom));
++		}
++
++		/**
++		 * @private
++		 */
++		private var adjusting:Boolean = false;
++
++		/**
++		 * Adjusts the size of the host after the layout has been run.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.0
++		 */
++		COMPILE::SWF
++		protected function layoutViewAfterContentLayout():void
++		{
++			if (adjusting) return;
++
++			var host:UIBase = _strand as UIBase;
++
++			adjusting = true;
++
++			var contentSize:Size = calculateContentSize();
++
++			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {
++				host.setWidthAndHeight(contentSize.width, contentSize.height, true);
++			}
++			else if (!host.isWidthSizedToContent() && host.isHeightSizedToContent())
++			{
++				host.setHeight(contentSize.height, true);
++			}
++			else if (host.isWidthSizedToContent() && !host.isHeightSizedToContent())
++			{
++				host.setWidth(contentSize.width, true);
++			}
++
++			adjusting = false;
++		}
++		
++		COMPILE::JS
++		protected function layoutViewAfterContentLayout():void
++		{
++			// maybe useful in a subclass on the JS side.
++		}
++
++		/**
++		 * @private
++		 */
++		COMPILE::SWF
++		protected function displayBackgroundAndBorder(host:UIBase) : void
++		{
++			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(host, "background-color");
++			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(host, "background-image");
++			if (backgroundColor != null || backgroundImage != null)
++			{
++				if (host.getBeadByType(IBackgroundBead) == null)
++					var c:Class = ValuesManager.valuesImpl.getValue(host, "iBackgroundBead");
++				if (c) {
++					host.addBead( new c() as IBead );
++				}
++			}
++
++			var borderStyle:String;
++			var borderStyles:Object = ValuesManager.valuesImpl.getValue(host, "border");
++			if (borderStyles is Array)
++			{
++				borderStyle = borderStyles[1];
++			}
++			if (borderStyle == null)
++			{
++				borderStyle = ValuesManager.valuesImpl.getValue(host, "border-style") as String;
++			}
++			if (borderStyle != null && borderStyle != "none")
++			{
++				if (host.getBeadByType(IBorderBead) == null) {
++					c = ValuesManager.valuesImpl.getValue(host, "iBorderBead");
++					if (c) {
++						host.addBead( new c() as IBead );
++					}
++				}
++			}
++		}
++	}
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/HScrollBarTrackView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/HScrollBarTrackView.as
index de6a3af,de6a3af..212d29b
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/HScrollBarTrackView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/HScrollBarTrackView.as
@@@ -32,6 -32,6 +32,7 @@@ package org.apache.flex.html.bead
       *  The HScrollBarTrackView class is the view for
       *  the track in a Horizontal ScrollBar.
       *  
++ 	 *  @viewbead
       *  @langversion 3.0
       *  @playerversion Flash 10.2
       *  @playerversion AIR 2.6

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
index 9e1ebdf,9e1ebdf..f54faef
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
@@@ -29,11 -29,11 +29,12 @@@ COMPILE::SWF 
  
  	import org.apache.flex.core.UIButtonBase;
  }
--
++    
      import org.apache.flex.core.BeadViewBase;
--	import org.apache.flex.core.IBead;
--	import org.apache.flex.core.IBeadView;
--	import org.apache.flex.core.IStrand;
++    import org.apache.flex.core.IBead;
++    import org.apache.flex.core.IBeadView;
++    import org.apache.flex.core.IChild;
++    import org.apache.flex.core.IStrand;
      import org.apache.flex.core.ValuesManager;
      import org.apache.flex.events.Event;
      import org.apache.flex.events.IEventDispatcher;
@@@ -44,6 -44,6 +45,7 @@@
  	 *  class does not support background and border; only images
  	 *  for the up, over, and active states.
  	 *
++	 *  @viewbead
  	 *  @langversion 3.0
  	 *  @playerversion Flash 10.2
  	 *  @playerversion AIR 2.6
@@@ -85,14 -85,14 +87,17 @@@
  				shape.graphics.beginFill(0xCCCCCC);
  				shape.graphics.drawRect(0, 0, 10, 10);
  				shape.graphics.endFill();
--				SimpleButton(value).upState = upSprite;
--				SimpleButton(value).downState = downSprite;
--				SimpleButton(value).overState = overSprite;
--				SimpleButton(value).hitTestState = shape;
++                var button:SimpleButton = value as SimpleButton;
++				button.upState = upSprite;
++				button.downState = downSprite;
++				button.overState = overSprite;
++				button.hitTestState = shape;
  
  				setupBackground(upSprite);
  				setupBackground(overSprite, "hover");
  				setupBackground(downSprite, "active");
++				
++				IEventDispatcher(value).addEventListener("sourceChanged", handleSourceChange);
  			}
  		}
  
@@@ -125,8 -125,8 +130,8 @@@
                      if (isNaN(host.explicitWidth) && isNaN(host.percentWidth))
                      {
                          host.setWidth(loader.content.width);
--                        if (host.parent)
--                            (host.parent as IEventDispatcher).dispatchEvent(new org.apache.flex.events.Event("layoutNeeded"));
++                        if (host.parent is IEventDispatcher)
++                            IEventDispatcher(host.parent).dispatchEvent(new org.apache.flex.events.Event("layoutNeeded"));
                      }
                      else
                          loader.content.width = host.width;
@@@ -134,8 -134,8 +139,8 @@@
                      if (isNaN(host.explicitHeight) && isNaN(host.percentHeight))
                      {
                          host.setHeight(loader.content.height);
--                        if (host.parent)
--                            (host.parent as IEventDispatcher).dispatchEvent(new org.apache.flex.events.Event("layoutNeeded"));
++                        if (host.parent is IEventDispatcher)
++                            IEventDispatcher(host.parent).dispatchEvent(new org.apache.flex.events.Event("layoutNeeded"));
                      }
                      else
                          loader.content.height = host.height;
@@@ -143,6 -143,6 +148,17 @@@
  				});
  			}
  		}
++		
++		/**
++		 * @private
++		 */
++		COMPILE::SWF
++		private function handleSourceChange(event:org.apache.flex.events.Event):void
++		{
++			setupBackground(upSprite);
++			setupBackground(overSprite, "hover");
++			setupBackground(downSprite, "active");
++		}
  
  		/**
  		 * @private

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
index 3018600,3018600..0f73421
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
@@@ -17,13 -17,13 +17,14 @@@
  //
  ////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads
--{	
++{
  	import org.apache.flex.core.BeadViewBase;
  	import org.apache.flex.core.ContainerBase;
  	import org.apache.flex.core.IBead;
  	import org.apache.flex.core.IBeadLayout;
  	import org.apache.flex.core.IBeadModel;
  	import org.apache.flex.core.IBeadView;
++	import org.apache.flex.core.IList;
  	import org.apache.flex.core.ISelectableItemRenderer;
  	import org.apache.flex.core.IItemRenderer;
  	import org.apache.flex.core.IItemRendererParent;
@@@ -46,71 -46,71 +47,89 @@@
  	import org.apache.flex.html.supportClasses.ScrollBar;
  
  	/**
--	 *  The List class creates the visual elements of the org.apache.flex.html.List 
--	 *  component. A List consists of the area to display the data (in the dataGroup), any 
++	 *  The List class creates the visual elements of the org.apache.flex.html.List
++	 *  component. A List consists of the area to display the data (in the dataGroup), any
  	 *  scrollbars, and so forth.
--	 *  
++	 *
++	 *  @viewbead
  	 *  @langversion 3.0
  	 *  @playerversion Flash 10.2
  	 *  @playerversion AIR 2.6
  	 *  @productversion FlexJS 0.0
  	 */
--	public class ListView extends ContainerView implements IListView
++	COMPILE::JS
++	public class ListView extends DataContainerView
  	{
  		public function ListView()
  		{
++			super();
  		}
--						
++
  		protected var listModel:ISelectionModel;
--		
--		private var _border:Border;
--		
--		/**
--		 *  The border surrounding the org.apache.flex.html.List.
--		 *
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--        public function get border():Border
--        {
--            return _border;
--        }
--		
++
++		protected var lastSelectedIndex:int = -1;
++
  		/**
--		 *  The area holding the itemRenderers.
--		 *
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
++		 * @private
  		 */
--		public function get dataGroup():IItemRendererParent
++		override protected function handleInitComplete(event:Event):void
++		{
++			listModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
++			listModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
++			listModel.addEventListener("rollOverIndexChanged", rollOverIndexChangeHandler);
++
++			super.handleInitComplete(event);
++		}
++
++		protected function selectionChangeHandler(event:Event):void
  		{
--			(contentView as UIBase).className = "ListDataGroup";
--			return contentView as IItemRendererParent;
++			if (lastSelectedIndex != -1)
++			{
++				var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastSelectedIndex) as ISelectableItemRenderer;
++				if (ir != null) ir.selected = false;
++			}
++			if (listModel.selectedIndex != -1)
++			{
++				ir = dataGroup.getItemRendererForIndex(listModel.selectedIndex) as ISelectableItemRenderer;
++				if (ir != null) ir.selected = true;
++			}
++			lastSelectedIndex = listModel.selectedIndex;
  		}
--				
++
++		protected var lastRollOverIndex:int = -1;
++
  		/**
  		 * @private
  		 */
--		override public function get resizableView():IUIBase
++		protected function rollOverIndexChangeHandler(event:Event):void
  		{
--			return _strand as IUIBase;
++			if (lastRollOverIndex != -1)
++			{
++				var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastRollOverIndex) as ISelectableItemRenderer;
++				ir.hovered = false;
++			}
++			if (IRollOverModel(listModel).rollOverIndex != -1)
++			{
++				ir = dataGroup.getItemRendererForIndex(IRollOverModel(listModel).rollOverIndex) as ISelectableItemRenderer;
++				ir.hovered = true;
++			}
++			lastRollOverIndex = IRollOverModel(listModel).rollOverIndex;
  		}
--        
--        /**
--         * @private
--         */
--        override public function get host():IUIBase
--        {
--            return _strand as IUIBase;
--        }
--        		
++	}
++
++	COMPILE::SWF
++	public class ListView extends DataContainerView
++	{
++		public function ListView()
++		{
++			super();
++		}
++
++		protected var listModel:ISelectionModel;
++
  		/**
  		 *  @copy org.apache.flex.core.IBead#strand
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -121,42 -121,42 +140,21 @@@
  			_strand = value;
  			super.strand = value;
  		}
--		
--		override protected function completeSetup():void
++
++		/**
++		 * @private
++		 */
++		override protected function handleInitComplete(event:Event):void
  		{
--			super.completeSetup();
--			
--			// list is not interested in UI children, it wants to know when new items
--			// have been added or the dataProvider has changed.
--			
--			host.removeEventListener("childrenAdded", childrenChangedHandler);
--			host.removeEventListener("childrenAdded", performLayout);
--			host.addEventListener("itemsCreated", itemsCreatedHandler);
--			
++			super.handleInitComplete(event);
++
  			listModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
  			listModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
  			listModel.addEventListener("rollOverIndexChanged", rollOverIndexChangeHandler);
--			listModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
  		}
--		
++
  		protected var lastSelectedIndex:int = -1;
--		
--		/**
--		 * @private
--		 */
--		protected function itemsCreatedHandler(event:Event):void
--		{
--			performLayout(event);
--		}
--		
--		/**
--		 * @private
--		 */
--		protected function dataProviderChangeHandler(event:Event):void
--		{
--			performLayout(event);
--		}
--		
++
  		/**
  		 * @private
  		 */
@@@ -174,9 -174,9 +172,9 @@@
  			}
              lastSelectedIndex = listModel.selectedIndex;
  		}
--		
++
  		protected var lastRollOverIndex:int = -1;
--		
++
  		/**
  		 * @private
  		 */
@@@ -194,18 -194,18 +192,5 @@@
  			}
  			lastRollOverIndex = IRollOverModel(listModel).rollOverIndex;
  		}
--        
--        /**
--         *  respond to a change in size or request to re-layout everything
--         *  
--         *  @langversion 3.0
--         *  @playerversion Flash 10.2
--         *  @playerversion AIR 2.6
--         *  @productversion FlexJS 0.0
--         */
--		override protected function resizeHandler(event:Event):void
--		{
--			super.resizeHandler(event);
--		}
  	}
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
index c52fe93,c52fe93..43af3f8
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
@@@ -19,10 -19,10 +19,15 @@@
  package org.apache.flex.html.beads
  {
  	import org.apache.flex.core.IBeadView;
++	import org.apache.flex.core.IBeadLayout;
  	import org.apache.flex.core.ILayoutChild;
--	import org.apache.flex.core.IContentViewHost;
++	import org.apache.flex.core.ILayoutView;
++	import org.apache.flex.core.IChild;
++	import org.apache.flex.core.IContainer;
++	import org.apache.flex.core.IParent;
  	import org.apache.flex.core.IStrand;
  	import org.apache.flex.core.IUIBase;
++	import org.apache.flex.core.IViewport;
  	import org.apache.flex.core.IViewportModel;
  	import org.apache.flex.core.UIBase;
  	import org.apache.flex.core.ValuesManager;
@@@ -30,23 -30,23 +35,31 @@@
  	import org.apache.flex.events.IEventDispatcher;
  	import org.apache.flex.geom.Rectangle;
  	import org.apache.flex.geom.Size;
++	import org.apache.flex.html.Group;
  	import org.apache.flex.html.Container;
  	import org.apache.flex.html.Panel;
  	import org.apache.flex.html.TitleBar;
  	import org.apache.flex.utils.CSSContainerUtils;
  	import org.apache.flex.utils.CSSUtils;
--	
++	import org.apache.flex.html.beads.layouts.VerticalFlexLayout;
++	import org.apache.flex.html.supportClasses.PanelLayoutProxy;
++
++	COMPILE::SWF {
++		import org.apache.flex.core.SimpleCSSStyles;
++	}
++
  	/**
--	 *  The Panel class creates the visual elements of the org.apache.flex.html.Panel 
++	 *  The Panel class creates the visual elements of the org.apache.flex.html.Panel
  	 *  component. A Panel has a org.apache.flex.html.TitleBar, and content.  A
       *  different View, PanelWithControlBarView, can display a ControlBar.
--	 *  
++	 *
++	 *  @viewbead
  	 *  @langversion 3.0
  	 *  @playerversion Flash 10.2
  	 *  @playerversion AIR 2.6
  	 *  @productversion FlexJS 0.0
  	 */
--	public class PanelView extends ContainerView implements IBeadView
++	public class PanelView extends GroupView implements IBeadView
  	{
  		/**
  		 *  constructor.
@@@ -60,11 -60,11 +73,11 @@@
  		{
  			super();
  		}
--		
++
  		private var _titleBar:TitleBar;
--		
++
  		/**
--		 *  The org.apache.flex.html.TitleBar component of the 
++		 *  The org.apache.flex.html.TitleBar component of the
  		 *  org.apache.flex.html.Panel.
  		 *
  		 *  @langversion 3.0
@@@ -76,7 -76,7 +89,7 @@@
  		{
  			return _titleBar;
  		}
--		
++
          /**
           *  @private
           */
@@@ -84,10 -84,10 +97,31 @@@
          {
              _titleBar = value;
          }
--				
++
++		private var _contentArea:Container;
++
++		/**
++		 * The content area of the panel.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		public function get contentArea():Container
++		{
++			return _contentArea;
++		}
++		public function set contentArea(value:Container):void
++		{
++			_contentArea = value;
++		}
++
++		private var _strand:IStrand;
++
  		/**
  		 *  @copy org.apache.flex.core.IBead#strand
--		 *  
++		 *
  		 *  @langversion 3.0
  		 *  @playerversion Flash 10.2
  		 *  @playerversion AIR 2.6
@@@ -95,74 -95,74 +129,138 @@@
  		 */
  		override public function set strand(value:IStrand):void
  		{
++			_strand = value;
++
              var host:UIBase = UIBase(value);
--            
++
              if (!_titleBar) {
                  _titleBar = new TitleBar();
  				_titleBar.id = "panelTitleBar";
--				_titleBar.height = 30;
++
++				COMPILE::SWF {
++					_titleBar.percentWidth = 100;
++
++					if (_titleBar.style == null) {
++						_titleBar.style = new SimpleCSSStyles();
++					}
++					_titleBar.style.flexGrow = 0;
++					_titleBar.style.order = 1;
++				}
++
++				COMPILE::JS {
++					_titleBar.element.style["flex-grow"] = "0";
++					_titleBar.element.style["order"] = "1";
++				}
  			}
  			// replace the TitleBar's model with the Panel's model (it implements ITitleBarModel) so that
--			// any changes to values in the Panel's model that correspond values in the TitleBar will 
++			// any changes to values in the Panel's model that correspond values in the TitleBar will
  			// be picked up automatically by the TitleBar.
  			titleBar.model = host.model;
--			            
++
++			if (!_contentArea) {
++				_contentArea = new Container();
++				_contentArea.id = "panelContent";
++				_contentArea.className = "PanelContent";
++
++				COMPILE::SWF {
++					_contentArea.percentWidth = 100;
++
++					if (_contentArea.style == null) {
++						_contentArea.style = new SimpleCSSStyles();
++					}
++					_contentArea.style.flexGrow = 1;
++					_contentArea.style.order = 2;
++				}
++
++				COMPILE::JS {
++					_contentArea.element.style["flex-grow"] = "1";
++					_contentArea.element.style["order"] = "2";
++					_contentArea.element.style["overflow"] = "auto"; // temporary
++				}
++			}
++
++			COMPILE::SWF {
++				IEventDispatcher(value).addEventListener("widthChanged", handleSizeChange);
++				IEventDispatcher(value).addEventListener("heightChanged", handleSizeChange);
++				IEventDispatcher(value).addEventListener("sizeChanged", handleSizeChange);
++				IEventDispatcher(value).addEventListener("childrenAdded", handleChildrenAdded);
++			}
++
              super.strand = value;
++
++			// If the Panel was given a layout, transfer it to the content area.
++			var layoutBead:IBeadLayout = value.getBeadByType(IBeadLayout) as IBeadLayout;
++			if (layoutBead) {
++				value.removeBead(layoutBead);
++
++				var contentLayout:IBeadLayout = _contentArea.getBeadByType(IBeadLayout) as IBeadLayout;
++				if (contentLayout) {
++					_contentArea.removeBead(contentLayout);
++				}
++				_contentArea.addBead(layoutBead);
++			}
++
++			// If the Panel was given a viewport, transfer it to the content area.
++			var viewportBead:IViewport = value.getBeadByType(IViewport) as IViewport;
++			if (viewportBead) {
++				value.removeBead(viewportBead);
++				_contentArea.addBead(viewportBead);
++			}
++
++			// Now give the Panel its own layout
++			layoutBead = new VerticalFlexLayout();
++			value.addBead(layoutBead);
  		}
--		
++
++		private var _panelLayoutProxy:PanelLayoutProxy;
++
++		/**
++		 * The sub-element used as the parent of the container's elements. This does not
++		 * include the chrome elements.
++		 *
++		 *  @langversion 3.0
++		 *  @playerversion Flash 10.2
++		 *  @playerversion AIR 2.6
++		 *  @productversion FlexJS 0.8
++		 */
++		override public function get contentView():ILayoutView
++		{
++			// we want to return a proxy for the host which will have numElements, getElementAt, etc.
++			// functions that will use the host.$numElements, host.$getElementAt, etc. functions
++			if (_panelLayoutProxy == null) {
++				_panelLayoutProxy = new PanelLayoutProxy(_strand);
++			}
++			return _panelLayoutProxy;
++		}
++
  		override protected function completeSetup():void
  		{
--			(host as IContentViewHost).strandChildren.addElement(titleBar);
++			if (titleBar.parent == null) {
++				(_strand as Panel).$addElement(titleBar);
++			}
++			if (contentArea.parent == null) {
++				(_strand as Panel).$addElement(contentArea as IChild);
++			}
++
  			super.completeSetup();
++			
++			performLayout(null);
  		}
--		
--        /**
--         * Calculate the space taken up by non-content children like a TItleBar in a Panel.
--         *  
--         *  @langversion 3.0
--         *  @playerversion Flash 10.2
--         *  @playerversion AIR 2.6
--         *  @productversion FlexJS 0.0
--         */
--        override protected function getChromeMetrics():Rectangle
--        {
--            return new Rectangle(0, titleBar.height, 0, 0 - titleBar.height);
--        }
--        
--        override protected function layoutViewBeforeContentLayout():void
--        {
--            var vm:IViewportModel = viewportModel;
--            var host:ILayoutChild = this.host as ILayoutChild;
--            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
--            titleBar.x = vm.borderMetrics.left;
--            titleBar.y = vm.borderMetrics.top;
--            if (!host.isWidthSizedToContent())
--                titleBar.width = host.width - vm.borderMetrics.left - vm.borderMetrics.right;
--            vm.chromeMetrics = getChromeMetrics();
--            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
--                vm.borderMetrics.top + vm.chromeMetrics.top);
--            viewport.layoutViewportBeforeContentLayout(
--                !host.isWidthSizedToContent() ? 
--                host.width - vm.borderMetrics.left - vm.borderMetrics.right -
--                vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
--                !host.isHeightSizedToContent() ?
--                host.height - vm.borderMetrics.top - vm.borderMetrics.bottom -
--                vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
--        }
--        
--		override protected function layoutViewAfterContentLayout():void
++
++		protected function handleSizeChange(event:Event):void
  		{
--            var vm:IViewportModel = viewportModel;
--            var viewportSize:Size = this.viewport.layoutViewportAfterContentLayout();
--            var host:ILayoutChild = this.host as ILayoutChild;
--            var hasWidth:Boolean = !host.isWidthSizedToContent();
--            var hasHeight:Boolean = !host.isHeightSizedToContent();
--            if (!hasWidth) {
--                titleBar.width = viewportSize.width; // should get titlebar to layout and get new height
--                vm.chromeMetrics = this.getChromeMetrics();
--                vm.chromeMetrics.top = titleBar.height;
--            }
--            super.layoutViewAfterContentLayout();
--		}       
++			COMPILE::JS {
++				_titleBar.percentWidth = 100;
++				_contentArea.percentWidth = 100;
++			}
++
++			performLayout(event);
++		}
++
++		private function handleChildrenAdded(event:Event):void
++		{
++			_contentArea.dispatchEvent(new Event("layoutNeeded"));
++			performLayout(event);
++		}
  	}
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
index 8dfcd42,cfbbae8..3312b85
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
@@@ -18,9 -18,7 +18,8 @@@
  ////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads
  {
- 	import flash.display.Sprite;
- 	
  	import org.apache.flex.core.IBeadView;
++	import org.apache.flex.core.IChild;
  	import org.apache.flex.core.IContentViewHost;
  	import org.apache.flex.core.ILayoutChild;
  	import org.apache.flex.core.IPanelModel;
@@@ -34,21 -32,21 +33,27 @@@
  	import org.apache.flex.geom.Rectangle;
  	import org.apache.flex.geom.Size;
  	import org.apache.flex.html.Container;
++	import org.apache.flex.html.Panel;
  	import org.apache.flex.html.ControlBar;
  	import org.apache.flex.html.TitleBar;
  	import org.apache.flex.utils.CSSContainerUtils;
  	
++	COMPILE::SWF {
++		import org.apache.flex.core.SimpleCSSStyles;
++	}
++	
  	/**
  	 *  The Panel class creates the visual elements of the org.apache.flex.html.Panel 
  	 *  component. A Panel has a org.apache.flex.html.TitleBar, content, and an 
  	 *  optional org.apache.flex.html.ControlBar.
  	 *  
++	 *  @viewbead
  	 *  @langversion 3.0
  	 *  @playerversion Flash 10.2
  	 *  @playerversion AIR 2.6
  	 *  @productversion FlexJS 0.0
  	 */
--	public class PanelWithControlBarView extends ContainerView implements IBeadView
++	public class PanelWithControlBarView extends PanelView
  	{
  		/**
  		 *  constructor.
@@@ -60,22 -58,22 +65,7 @@@
  		 */
  		public function PanelWithControlBarView()
  		{
--		}
--		
--		private var _titleBar:TitleBar;
--		
--		/**
--		 *  The org.apache.flex.html.TitleBar component of the 
--		 *  org.apache.flex.html.Panel.
--		 *
--		 *  @langversion 3.0
--		 *  @playerversion Flash 10.2
--		 *  @playerversion AIR 2.6
--		 *  @productversion FlexJS 0.0
--		 */
--		public function get titleBar():TitleBar
--		{
--			return _titleBar;
++			super();
  		}
  		
  		private var _controlBar:ControlBar;
@@@ -103,105 -101,105 +93,65 @@@
  		 */
  		override public function set strand(value:IStrand):void
  		{
--			var host:UIBase = UIBase(value);
++			super.strand = value;
  			
--			// TODO: (aharui) get class to instantiate from CSS
--			if (!_titleBar) {
--				_titleBar = new TitleBar();
--				_titleBar.id = "panelTitleBar";
--				_titleBar.height = 30;
--			}
--			// replace the TitleBar's model with the Panel's model (it implements ITitleBarModel) so that
--			// any changes to values in the Panel's model that correspond values in the TitleBar will 
--			// be picked up automatically by the TitleBar.
--			_titleBar.model = host.model;
++			var host:UIBase = UIBase(_strand);
  			
--			var controlBarItems:Array = (host.model as IPanelModel).controlBar;
--			if( controlBarItems && controlBarItems.length > 0 ) {
--				_controlBar = new ControlBar();
--				_controlBar.id = "panelControlBar";
--				_controlBar.height = 30;
++			_controlBar = new ControlBar();
++			_controlBar.id = "panelControlBar";
++			
++			COMPILE::SWF {
++				_controlBar.percentWidth = 100;
  				
--				for each(var comp:IUIBase in controlBarItems) {
--					_controlBar.addElement(comp, false);
++				if (_controlBar.style == null) {
++					_controlBar.style = new SimpleCSSStyles();
  				}
++				_controlBar.style.flexGrow = 0;
++				_controlBar.style.order = 3;
++			}
++				
++			COMPILE::JS {
++				_controlBar.element.style["flex-grow"] = "0";
++				_controlBar.element.style["order"] = "3";
  			}
--			
--			super.strand = value;
  		}
  		
  		override protected function completeSetup():void
  		{
--			super.completeSetup();
++			if (titleBar.parent == null) {
++				(_strand as Panel).$addElement(titleBar);
++			}
++			if (contentArea.parent == null) {
++				(_strand as Panel).$addElement(contentArea as IChild);
++			}
++			if (controlBar.parent == null) {
++				(_strand as Panel).$addElement(controlBar);
++			}
  			
--			(_strand as IContentViewHost).strandChildren.addElement(titleBar, false);
++			var host:UIBase = UIBase(_strand);
  			
--			if (controlBar) {
--				(_strand as IContentViewHost).strandChildren.addElement(_controlBar, false);
++			var controlBarItems:Array = (host.model as IPanelModel).controlBar;
++			if( controlBarItems && controlBarItems.length > 0 ) {
++				for each(var comp:IUIBase in controlBarItems) {
++					controlBar.addElement(comp, false);
++				}
++				controlBar.childrenAdded();
  			}
++			
++			super.completeSetup();
++			
++			performLayout(null);
  		}
  		
--        /**
--         * Calculate the space taken up by non-content children like a TItleBar in a Panel.
--         *  
--         *  @langversion 3.0
--         *  @playerversion Flash 10.2
--         *  @playerversion AIR 2.6
--         *  @productversion FlexJS 0.0
--         */
--        override protected function getChromeMetrics():Rectangle
--        {
--            return new Rectangle(0, titleBar.height, 0, controlBar.height - titleBar.height);
--        }
--        
--        override protected function layoutViewBeforeContentLayout():void
--        {
--            var vm:IViewportModel = viewportModel;
--            var host:ILayoutChild = this.host as ILayoutChild;
--            var hasHeight:Boolean = !host.isHeightSizedToContent();
--            var hasWidth:Boolean = !host.isWidthSizedToContent();
--            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
--            titleBar.x = vm.borderMetrics.left;
--            titleBar.y = vm.borderMetrics.top;
--            if (hasWidth) 
--            {
--                titleBar.width = host.width - vm.borderMetrics.left - vm.borderMetrics.right;
--                controlBar.width = host.width - vm.borderMetrics.left - vm.borderMetrics.right;
--            }
--            vm.chromeMetrics = getChromeMetrics();
--            controlBar.x = vm.borderMetrics.left;
--            if (hasHeight && hasWidth) 
--                controlBar.y = host.height - vm.borderMetrics.bottom - controlBar.height;
--            
--            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
--                vm.borderMetrics.top + vm.chromeMetrics.top);
--            viewport.layoutViewportBeforeContentLayout(
--                hasWidth ? 
--                    host.width - vm.borderMetrics.left - vm.borderMetrics.right -
--                        vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
--                hasHeight ?
--                    host.height - vm.borderMetrics.top - vm.borderMetrics.bottom -
--                        vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
--        }
--        
--        override protected function layoutViewAfterContentLayout():void
--        {
--            var vm:IViewportModel = viewportModel;
--            var viewportSize:Size = this.viewport.layoutViewportAfterContentLayout();
--            var host:ILayoutChild = this.host as ILayoutChild;
--            var hasWidth:Boolean = !host.isWidthSizedToContent();
--            var hasHeight:Boolean = !host.isHeightSizedToContent();
--            if (!hasWidth) {
--                titleBar.width = viewportSize.width; // should get titlebar to layout and get new height
--                vm.chromeMetrics = this.getChromeMetrics();
--                vm.chromeMetrics.top = titleBar.height;
--                controlBar.width = viewportSize.width; // should get controlbar to layout and get new height
--                vm.chromeMetrics.bottom = controlBar.height;
--            }
--            super.layoutViewAfterContentLayout();
--            if (!hasHeight) {
--                controlBar.y = host.height - vm.borderMetrics.bottom - controlBar.height;
--            }
--        }       
++		override protected function handleSizeChange(event:Event):void
++		{
++			COMPILE::JS {
++				titleBar.percentWidth = 100;
++				contentArea.percentWidth = 100;
++				controlBar.percentWidth = 100;
++			}
++				
++			performLayout(event);
++		}       
  	}
  }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
index a05b913,3ac84ce..62506f7
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/RangeStepperView.as
@@@ -34,6 -34,6 +34,7 @@@ package org.apache.flex.html.bead
  	 *  The RangeStepperView bead creates the visual elements of the RangeStepper. This
  	 *  includes an increment button, a decrement button, and label to display the value.
  	 *  
++	 *  @viewbead
  	 *  @langversion 3.0
  	 *  @playerversion Flash 10.2
  	 *  @playerversion AIR 2.6

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
index 49f3608,49f3608..657beef
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
@@@ -19,7 -19,7 +19,7 @@@
  package org.apache.flex.html.beads
  {
  	import flash.display.Graphics;
--	
++
  	import org.apache.flex.core.IBead;
  	import org.apache.flex.core.IStatesObject;
  	import org.apache.flex.core.IStrand;
@@@ -65,14 -65,14 +65,14 @@@
  		public function set strand(value:IStrand):void
  		{
  			_strand = value;
--            IEventDispatcher(value).addEventListener("layoutNeeded", changeHandler);
              IEventDispatcher(value).addEventListener("heightChanged", changeHandler);
              IEventDispatcher(value).addEventListener("widthChanged", changeHandler);
--            IEventDispatcher(value).addEventListener("sizeChanged", changeHandler);
--            changeHandler(null);
++			IEventDispatcher(value).addEventListener("sizeChanged", changeHandler);
++			IEventDispatcher(value).addEventListener("initComplete", changeHandler);
++			IEventDispatcher(value).addEventListener("layoutComplete", changeHandler);
  		}
  		        
--		private function changeHandler(event:Event):void
++		protected function changeHandler(event:Event):void
  		{
              var host:UIBase = UIBase(_strand);
              var g:Graphics = host.graphics;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderWithChangeListenerBead.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderWithChangeListenerBead.as
index 0000000,0000000..ae7440f
new file mode 100644
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SingleLineBorderWithChangeListenerBead.as
@@@ -1,0 -1,0 +1,89 @@@
++////////////////////////////////////////////////////////////////////////////////
++//
++//  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.IStrand;
++	import org.apache.flex.core.IStyleableObject;
++	import org.apache.flex.core.ValuesManager;
++	import org.apache.flex.events.IEventDispatcher;
++	import org.apache.flex.events.StyleChangeEvent;
++
++    /**
++     *  The SingleLineBorderWithChangeListenerBead adds the ability to react to
++	 *  changes in border style at runtime.
++     *  
++     *  @langversion 3.0
++     *  @playerversion Flash 10.2
++     *  @playerversion AIR 2.6
++     *  @productversion FlexJS 0.0
++     */
++	public class SingleLineBorderWithChangeListenerBead extends SingleLineBorderBead
++	{
++        /**
++         *  Constructor.
++         *  
++         *  @langversion 3.0
++         *  @playerversion Flash 10.2
++         *  @playerversion AIR 2.6
++         *  @productversion FlexJS 0.0
++         */
++		public function SingleLineBorderWithChangeListenerBead()
++		{
++			super();
++		}
++		
++		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
++         */
++		override public function set strand(value:IStrand):void
++		{
++			super.strand = value;
++			_strand = value;
++			IEventDispatcher(value).addEventListener(StyleChangeEvent.STYLE_CHANGE, handleStyleChange);
++		}
++		
++		/**
++		 * @private
++		 */
++		private function handleStyleChange(event:StyleChangeEvent):void
++		{			
++			// see if border style needs to be converted into an array
++			var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border");
++			if (borderStyles is String) {
++				// it may be just "solid"
++				var list:Array = String(borderStyles).split(" ");
++				if (list.length == 3) {
++					// set it on the strand's style (IValuesImpl does not have setStyle exposed).
++					var host:IStyleableObject = _strand as IStyleableObject;
++					// setting this will trigger this event listener again
++					host.style.border = list;
++				}
++			} else {
++				changeHandler(null);
++			}
++		}
++	}
++}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9fd9b78b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
----------------------------------------------------------------------
diff --cc frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
index a162669,a162669..5833d52
--- a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
@@@ -18,17 -18,17 +18,17 @@@
  ////////////////////////////////////////////////////////////////////////////////
  package org.apache.flex.html.beads
  {
++    import flash.display.Graphics;
      import flash.display.Sprite;
--	import flash.display.Graphics;
--	
--	import org.apache.flex.core.IBead;
++    
++    import org.apache.flex.core.IBead;
      import org.apache.flex.core.IBeadView;
      import org.apache.flex.core.ILayoutChild;
--	import org.apache.flex.core.IStrand;
--	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.core.IStrand;
++    import org.apache.flex.core.IUIBase;
++    import org.apache.flex.core.ValuesManager;
++    import org.apache.flex.events.Event;
++    import org.apache.flex.events.IEventDispatcher;
  
      /**
       *  The SolidBackgroundBead class draws a solid filled background.
@@@ -77,27 -77,27 +77,31 @@@
              IEventDispatcher(host).addEventListener("widthChanged", changeHandler);
  			IEventDispatcher(host).addEventListener("sizeChanged", changeHandler);
  			IEventDispatcher(host).addEventListener("initComplete", changeHandler);
++			IEventDispatcher(host).addEventListener("layoutComplete", changeHandler);
  			
++			setupStyle();
++		}
++		
++		protected function setupStyle():void
++		{
  			var bgColor:Object = ValuesManager.valuesImpl.getValue(host, "background-color");
  			if ((bgColor is String) && (bgColor == "transparent")) {
  				bgColor = null;
  				opacity = 0;
  			}
  			else if( bgColor != null ) {
--				backgroundColor = ValuesManager.valuesImpl.convertColor(bgColor);
++				_backgroundColor = ValuesManager.valuesImpl.convertColor(bgColor);
  			}
  			
  			var bgAlpha:Object = ValuesManager.valuesImpl.getValue(host, "opacity");
  			if( bgAlpha != null ) {
--				opacity = Number(bgAlpha);
++				_opacity = Number(bgAlpha);
++			}
++			
++			var corner:Object = ValuesManager.valuesImpl.getValue(host, "border-radius");
++			if( corner != null ) {
++				_borderRadius = Number(corner);
  			}
--            
--            var corner:Object = ValuesManager.valuesImpl.getValue(host, "border-radius");
--            if( corner != null ) {
--                borderRadius = Number(corner);
--            }
--            
--            changeHandler(null);
  		}
  		
  		private var _backgroundColor:uint;
@@@ -175,9 -175,9 +179,9 @@@
                  changeHandler(null);
          }
          
--		private function changeHandler(event:Event):void
++		protected function changeHandler(event:Event):void
  		{
--            var g:Graphics = Sprite(host).graphics;
++            var g:Graphics = Sprite(host).graphics as Graphics;
              var w:Number = host.width;
              var h:Number = host.height;