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;
                        

Reply via email to