You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ah...@apache.org on 2018/08/18 18:04:46 UTC

[royale-asjs] 05/05: first cut at TabNavigator. Changing selectedIndex still needs to be wired up between the TabNav's model and the TabBar's model

This is an automated email from the ASF dual-hosted git repository.

aharui pushed a commit to branch feature/MXRoyale
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit fee6961130212ea7e906ad3cd65e7b26789e87c8
Author: Alex Harui <ah...@apache.org>
AuthorDate: Sat Aug 18 11:04:27 2018 -0700

    first cut at TabNavigator.  Changing selectedIndex still needs to be wired up between the TabNav's model and the TabBar's model
---
 .../MXRoyale/src/main/resources/defaults.css       |  29 +++
 .../MXRoyale/src/main/royale/MXRoyaleClasses.as    |   2 +
 .../src/main/royale/mx/containers/TabNavigator.as  |  77 ++++++++
 .../royale/mx/containers/beads/TabNavigatorView.as | 201 +++++++++++++++++++
 .../royale/mx/containers/beads/ViewStackLayout.as  | 131 +++++++++++++
 .../MXRoyale/src/main/royale/mx/controls/TabBar.as |  82 ++++++++
 .../src/main/royale/mx/controls/ToggleButtonBar.as | 214 ++++++++++++++++-----
 7 files changed, 690 insertions(+), 46 deletions(-)

diff --git a/frameworks/projects/MXRoyale/src/main/resources/defaults.css b/frameworks/projects/MXRoyale/src/main/resources/defaults.css
index 935ec80..56c4099 100644
--- a/frameworks/projects/MXRoyale/src/main/resources/defaults.css
+++ b/frameworks/projects/MXRoyale/src/main/resources/defaults.css
@@ -238,6 +238,16 @@ PanelTitleBar
 	border-bottom: 1px solid #333333;
 }
 
+TabNavigator
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel");
+	IBeadView: ClassReference("mx.containers.beads.TabNavigatorView");
+	ITabNavigatorContentArea: ClassReference("mx.core.Container");
+	verticalGap: 0;	
+	background-color: #FFFFFF;
+	border: 1px solid #333333
+}
+
 Tree
 {
 	IBeadModel: ClassReference("mx.controls.beads.models.SingleSelectionICollectionViewModel");
@@ -246,6 +256,19 @@ Tree
 	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.TreeXMLItemRenderer");
 }
 
+ToggleButtonBar
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.ButtonBarModel");
+	IBeadView:  ClassReference("org.apache.royale.html.beads.ButtonBarView");			
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController");
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout");
+	IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData");
+	IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.TextButtonItemRenderer");
+	
+	border-style: none;
+}
+
 ViewStack
 {
 	IBeadLayout: ClassReference("mx.containers.beads.BoxLayout");
@@ -360,4 +383,10 @@ ViewStack
 		font-size: 11px;
 		font-family: Arial;
 	}
+	
+	ToggleButtonBar
+	{
+		IContentView: ClassReference("org.apache.royale.html.supportClasses.DataGroup");
+	}
+
 }
\ No newline at end of file
diff --git a/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as b/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
index b9a17b9..d35ef7e 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
@@ -162,6 +162,8 @@ internal class MXRoyaleClasses
     import mx.containers.PanelTitleBar; PanelTitleBar;
     import mx.containers.beads.PanelView; PanelView;
     import mx.containers.beads.models.PanelModel; PanelModel;
+    import mx.containers.beads.TabNavigatorView; TabNavigatorView;
+    import mx.controls.TabBar; TabBar;
     
     import mx.controls.beads.models.SingleSelectionICollectionViewModel; SingleSelectionICollectionViewModel;
     import mx.controls.beads.models.SingleSelectionIListModel; SingleSelectionIListModel;
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/TabNavigator.as b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/TabNavigator.as
index 54953da..d1e3be6 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/TabNavigator.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/TabNavigator.as
@@ -24,11 +24,15 @@ COMPILE::JS
     import goog.DEBUG;
 }
 
+import mx.containers.beads.TabNavigatorView;
 import mx.controls.Button;
 import mx.core.Container;
 import mx.core.EdgeMetrics;
 import mx.managers.IFocusManagerComponent;
 
+import org.apache.royale.core.IChild;
+import org.apache.royale.events.Event;
+
 //--------------------------------------
 //  Styles
 //--------------------------------------
@@ -418,6 +422,79 @@ public class TabNavigator extends ViewStack implements IFocusManagerComponent
         return null;
     }
 
+    
+    //--------------------------------------------------------------------------
+    //
+    //  ILayoutView  (pass to view)
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     * @private
+     * @royaleignorecoercion org.apache.royale.html.beads.TabNavigatorView
+     */
+    override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+    {
+        var tnView:TabNavigatorView = view as TabNavigatorView;
+        tnView.contentArea.addElement(c, dispatchEvent);
+        if ((isHeightSizedToContent() || !isNaN(explicitHeight)) &&
+            (isWidthSizedToContent() || !isNaN(explicitWidth)))
+            this.dispatchEvent(new Event("layoutNeeded"));
+    }
+    
+    /**
+     * @private
+     * @royaleignorecoercion org.apache.royale.html.beads.TabNavigatorView
+     */
+    override public function addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
+    {
+        var tnView:TabNavigatorView = view as TabNavigatorView;
+        tnView.contentArea.addElementAt(c, index, dispatchEvent);
+        if ((isHeightSizedToContent() || !isNaN(explicitHeight)) &&
+            (isWidthSizedToContent() || !isNaN(explicitWidth)))
+            this.dispatchEvent(new Event("layoutNeeded"));
+    }
+    
+    /**
+     * @private
+     * @royaleignorecoercion org.apache.royale.html.beads.TabNavigatorView
+     */
+    override public function getElementIndex(c:IChild):int
+    {
+        var tnView:TabNavigatorView = view as TabNavigatorView;
+        return tnView.contentArea.getElementIndex(c);
+    }
+    
+    /**
+     * @private
+     * @royaleignorecoercion org.apache.royale.html.beads.TabNavigatorView
+     */
+    override public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
+    {
+        var tnView:TabNavigatorView = view as TabNavigatorView;
+        tnView.contentArea.removeElement(c, dispatchEvent);
+    }
+    
+    /**
+     * @private
+     * @royaleignorecoercion org.apache.royale.html.beads.TabNavigatorView
+     */
+    override public function get numElements():int
+    {
+        var tnView:TabNavigatorView = view as TabNavigatorView;
+        return tnView.contentArea.numElements;
+    }
+    
+    /**
+     * @private
+     * @royaleignorecoercion org.apache.royale.html.beads.TabNavigatorView
+     */
+    override public function getElementAt(index:int):IChild
+    {
+        var tnView:TabNavigatorView = view as TabNavigatorView;
+        return tnView.contentArea.getElementAt(index);
+    }
+
 }
 
 }
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/TabNavigatorView.as b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/TabNavigatorView.as
new file mode 100644
index 0000000..70eca41
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/TabNavigatorView.as
@@ -0,0 +1,201 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 mx.containers.beads
+{
+
+import mx.containers.BoxDirection;
+import mx.containers.TabNavigator;
+import mx.containers.ViewStack;
+import mx.containers.beads.BoxLayout;
+import mx.containers.beads.ViewStackLayout;
+import mx.controls.TabBar;
+import mx.core.Container;
+import mx.core.ContainerLayout;
+
+import org.apache.royale.core.IBead;
+import org.apache.royale.core.IChild;
+import org.apache.royale.core.IContainerBaseStrandChildrenHost;
+import org.apache.royale.core.ILayoutView;
+import org.apache.royale.core.ISelectionModel;
+import org.apache.royale.core.IStrand;
+import org.apache.royale.core.UIBase;
+import org.apache.royale.core.ValuesManager;
+import org.apache.royale.events.Event;
+import org.apache.royale.events.IEventDispatcher;
+import org.apache.royale.html.beads.GroupView;
+import org.apache.royale.html.supportClasses.PanelLayoutProxy;
+
+
+/**
+ *  @private
+ *  The TabNavigatorView for emulation.
+ */
+public class TabNavigatorView extends GroupView
+{
+	//--------------------------------------------------------------------------
+	//
+	//  Constructor
+	//
+	//--------------------------------------------------------------------------
+
+	/**
+	 *  Constructor.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 9
+	 *  @playerversion AIR 1.1
+	 *  @productversion Flex 3
+	 */
+	public function TabNavigatorView()
+	{
+		super();
+	}
+
+    private var _tabBar:UIBase;
+    
+    /**
+     *  The org.apache.royale.html.ButtonBar component of the
+     *  mx.containers.TabNavigator.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9
+     */
+    public function get tabBar():UIBase
+    {
+        return _tabBar;
+    }
+    
+    /**
+     *  @private
+     */
+    public function set tabBar(value:UIBase):void
+    {
+        _tabBar = value;
+    }
+
+    private var _contentArea:UIBase;
+    
+    /**
+     * The content area of the TabNavigator.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+    public function get contentArea():UIBase
+    {
+        return _contentArea;
+    }
+    public function set contentArea(value:UIBase):void
+    {
+        _contentArea = value;
+    }
+
+    /**
+     * @royaleignorecoercion org.apache.royale.core.UIBase; 
+     * @royaleignorecoercion mx.containers.beads.models.PanelModel; 
+     */
+    override public function set strand(value:IStrand):void
+    {
+        super.strand = value;
+        
+        tabBar = new TabBar();
+        tabBar.percentWidth = 100;
+        tabBar.addEventListener("change", tabChangeHandler);
+        addEventListener("change", tabChangeHandler);
+        if (tabBar.parent == null) {
+            (_strand as IContainerBaseStrandChildrenHost).$addElement(tabBar);
+        }
+            
+        if (!_contentArea) {
+            var cls:Class = ValuesManager.valuesImpl.getValue(_strand, "iTabNavigatorContentArea");
+            _contentArea = new cls() as UIBase;
+            _contentArea.id = "tabNavigatorContent";
+            _contentArea.typeNames = "TabNavigatorContent";
+        }
+        contentArea.percentWidth = 100;
+        contentArea.percentHeight = 100;
+        // try to listen for childrenAdded before ViewStackLayout listens for childrenAdded
+        // so we can update the selection before the layout picks the visible child
+        (_strand as IEventDispatcher).addEventListener("childrenAdded", childrenAddedHandler);
+        contentArea.addEventListener("childrenAdded", childrenAddedHandler);
+        var vsl:ViewStackLayout = new ViewStackLayout();
+        vsl.target = contentArea as Container;
+        vsl.model = tabBar.model as ISelectionModel;
+        contentArea.addBead(vsl);
+        if (contentArea.parent == null) {
+            (_strand as IContainerBaseStrandChildrenHost).$addElement(contentArea as IChild);
+        }
+        
+        // Now give the TabNavigator its own layout
+        var boxLayout:BoxLayout = new BoxLayout();
+        boxLayout.direction = "vertical";
+        _strand.addBead(boxLayout);
+        
+    }
+    
+    private var tabDP:Array = [];
+    
+    private function childrenAddedHandler(event:Event):void
+    {
+        tabDP = [];
+        var n:int = contentArea.numElements;
+        for (var i:int = 0; i < n; i++)
+        {
+            var child:Container = contentArea.getElementAt(i) as Container;
+            tabDP.push({ label: child.label});
+        }
+        (tabBar as TabBar).dataProvider = tabDP;
+        if ((tabBar.model as ISelectionModel).selectedIndex == -1)
+            (tabBar.model as ISelectionModel).selectedIndex = 0;
+    }
+    
+    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 Royale 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;
+    }
+    
+    private function tabChangeHandler(event:Event):void
+    {
+        dispatchEvent(new Event("layoutNeeded"));
+    }
+
+}
+
+}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/ViewStackLayout.as b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/ViewStackLayout.as
new file mode 100644
index 0000000..d951ade
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/ViewStackLayout.as
@@ -0,0 +1,131 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 mx.containers.beads
+{
+	import mx.containers.TabNavigator;
+	import mx.containers.ViewStack;
+	import mx.core.Container;
+	import mx.core.EdgeMetrics;
+	import mx.core.UIComponent;
+	
+	import org.apache.royale.core.ISelectionModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.geom.Rectangle;
+
+/*
+import mx.core.mx_internal;
+import mx.events.ChildExistenceChangedEvent;
+import mx.events.MoveEvent;
+import mx.resources.IResourceManager;
+import mx.resources.ResourceManager;
+import flash.utils.Dictionary;
+
+use namespace mx_internal;
+*/
+
+/**
+ *  @private
+ *  The ViewStackLayout class is for internal use only.
+ */
+public class ViewStackLayout extends LayoutBase
+{
+    
+
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 9
+     *  @playerversion AIR 1.1
+     *  @productversion Flex 3
+     */
+    public function ViewStackLayout()
+    {
+        super();
+    }
+	
+	//--------------------------------------------------------------------------
+	//
+	//  Properties
+	//
+	//--------------------------------------------------------------------------
+	
+	private var _strand:IStrand;
+	
+	override public function set strand(value:IStrand):void
+	{
+		_strand = value;
+		_target = value as Container;
+		super.strand = value;
+		
+	}
+	
+	private var _target:Container;
+	
+	public function get target():Container
+	{
+		return _target;
+	}
+	
+	public function set target(value:Container):void
+	{
+		_target = value;
+	}
+
+    private var _model:ISelectionModel;
+    
+    public function get model():ISelectionModel
+    {
+        return _model;
+    }
+    
+    public function set model(value:ISelectionModel):void
+    {
+        _model = value;
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+
+	override public function layout():Boolean
+	{
+        var selectedIndex:int = model.selectedIndex;
+        var n:int = target.numChildren;
+        for (var i:int = 0; i < n; i++)
+        {
+            var child:UIComponent = target.getChildAt(i) as UIComponent;
+            child.visible = i == selectedIndex;
+            child.setWidthAndHeight(target.width, target.height);
+        }
+		return true;
+	}
+}
+}
+
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/TabBar.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/TabBar.as
new file mode 100644
index 0000000..27976e4
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/TabBar.as
@@ -0,0 +1,82 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 mx.controls
+{
+COMPILE::JS
+{
+    import goog.DEBUG;
+	import org.apache.royale.core.WrappedHTMLElement;
+}
+import mx.core.UIComponent;
+
+import org.apache.royale.events.Event;
+import org.apache.royale.html.beads.models.ArraySelectionModel;
+
+/*
+import mx.events.MoveEvent;
+import mx.events.SandboxMouseEvent;
+import mx.managers.IFocusManagerComponent;
+import mx.styles.ISimpleStyleClient;
+
+
+use namespace mx_internal;
+*/
+
+//--------------------------------------
+//  Events
+//--------------------------------------
+
+
+/**
+ *  Dispatched when a Tab is selected
+ *
+ *  @eventType flash.events.Event.CHANGE
+ *
+ *  @langversion 3.0
+ *  @playerversion Flash 9
+ *  @playerversion AIR 1.1
+ *  @productversion Flex 3
+ */
+[Event(name="change", type="org.apache.royale.events.Event")]
+
+
+
+/**
+ *  The TabBar control is a ButtonBar with buttons that
+ *  look like Tabs.
+
+ *
+ *  @langversion 3.0
+ *  @playerversion Flash 9
+ *  @playerversion AIR 1.1
+ *  @productversion Flex 3
+ */
+public class TabBar extends ToggleButtonBar
+{
+	
+	public function TabBar()
+	{
+		super();
+		typeNames = "TabBar";
+	}
+		
+}
+
+}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/ToggleButtonBar.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/ToggleButtonBar.as
index 075c1ba..a93a740 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/ToggleButtonBar.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/ToggleButtonBar.as
@@ -24,14 +24,26 @@ package mx.controls
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent; 
 import flash.ui.Keyboard;*/
+import mx.collections.IList;
 import mx.core.IFlexDisplayObject;
+import mx.core.UIComponent;
 import mx.core.mx_internal;
 import mx.events.FlexEvent;
-import org.apache.royale.html.ButtonBar;
 import mx.events.ItemClickEvent;
-import mx.collections.IList;
 use namespace mx_internal;
 
+import org.apache.royale.core.IBeadLayout;
+import org.apache.royale.core.IDataProviderItemRendererMapper;
+import org.apache.royale.core.IItemRendererClassFactory;
+import org.apache.royale.core.ILayoutParent;
+import org.apache.royale.core.ILayoutHost;
+import org.apache.royale.core.ILayoutView;
+import org.apache.royale.core.ISelectionModel;
+import org.apache.royale.core.ValuesManager;
+import org.apache.royale.events.Event;
+import org.apache.royale.html.beads.models.ButtonBarModel;
+import org.apache.royale.utils.loadBeadFromValuesManager;
+import org.apache.royale.core.ILayoutHost;
 
 
 //--------------------------------------
@@ -190,21 +202,9 @@ use namespace mx_internal;
  *  @playerversion AIR 1.1
  *  @productversion Royale 0.9.3
  */
-public class ToggleButtonBar extends org.apache.royale.html.ButtonBar
+public class ToggleButtonBar extends UIComponent implements ILayoutParent, ILayoutView
 {
   //  include "../core/Version.as";
-
-  
-  //----------------------------------
-    //  dataProvider copied from flexsdk NavBar
-    //----------------------------------
-
-    /**
-     *  @private
-     *  Storage for the dataProvider property.
-     */
-    private var _dataProvider:IList;
-
 	
     //--------------------------------------------------------------------------
     //
@@ -223,61 +223,150 @@ public class ToggleButtonBar extends org.apache.royale.html.ButtonBar
     public function ToggleButtonBar()
     {
         super();
+        widthType == ButtonBarModel.NATURAL_WIDTHS;
     }
 
+    /**
+     *  @see org.apache.royale.html.beads.models.ButtonBarModel#buttonWidths
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9
+     *  @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+     */
+    public function get buttonWidths():Array
+    {
+        return ButtonBarModel(model).buttonWidths;
+    }
+    /**
+     * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+     */
+    public function set buttonWidths(value:Array):void
+    {
+        ButtonBarModel(model).buttonWidths = value;
+    }
+    
+    /**
+     *  @see org.apache.royale.html.beads.models.ButtonBarModel#widthType
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9
+     *  @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+     */
+    public function get widthType():Number
+    {
+        return ButtonBarModel(model).widthType;
+    }
+    /**
+     * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+     */
+    public function set widthType(value:Number):void
+    {
+        ButtonBarModel(model).widthType = value;
+    }
    
-
-    //--------------------------------------------------------------------------
-    //
-    //  Overridden properties
-    //
-    //--------------------------------------------------------------------------
-
     //----------------------------------
-    //  selectedIndex
+    //  dataProvider
     //----------------------------------
-
+    
+    [Bindable("collectionChange")]
+    [Inspectable(category="Data", defaultValue="undefined")]
+    
     /**
-     *  @private
-     *  Storage for the selectedIndex property.
+     *  Set of data to be viewed.
+     *  This property lets you use most types of objects as data providers.
+     *  If you set the <code>dataProvider</code> property to an Array, 
+     *  it will be converted to an ArrayCollection. If you set the property to
+     *  an XML object, it will be converted into an XMLListCollection with
+     *  only one item. If you set the property to an XMLList, it will be 
+     *  converted to an XMLListCollection.  
+     *  If you set the property to an object that implements the 
+     *  IList or ICollectionView interface, the object will be used directly.
+     *
+     *  <p>As a consequence of the conversions, when you get the 
+     *  <code>dataProvider</code> property, it will always be
+     *  an ICollectionView, and therefore not necessarily be the type of object
+     *  you used to  you set the property.
+     *  This behavior is important to understand if you want to modify the data 
+     *  in the data provider: changes to the original data may not be detected, 
+     *  but changes to the ICollectionView object that you get back from the 
+     *  <code>dataProvider</code> property will be detected.</p>
+     * 
+     *  @default null
+     *  @see mx.collections.ICollectionView
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 9
+     *  @playerversion AIR 1.1
+     *  @productversion Flex 3
+     *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
+     */
+    public function get dataProvider():Object
+    {
+        return (model as ISelectionModel).dataProvider;
+    }
+    /**
+     *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
      */
-    private var _selectedIndex:int = -2;
+    public function set dataProvider(value:Object):void
+    {
+        (model as ISelectionModel).dataProvider = value;
+    }
 
+    //----------------------------------
+    //  selectedIndex
+    //----------------------------------
+    
+    [Bindable("change")]
+    [Bindable("valueCommit")]
+    [Inspectable(category="General", defaultValue="-1")]
     
     /**
-     *  Index of the selected button.
-     *  Indexes are in the range of 0, 1, 2, ..., n - 1,
-     *  where <i>n</i> is the number of buttons.
+     *  The index in the data provider of the selected item.
+     * 
+     *  <p>The default value is -1 (no selected item).</p>
      *
-     *  <p>The default value is 0.
-	 *  A value of -1 deselects all the buttons in the bar.</p>
      *  
      *  @langversion 3.0
      *  @playerversion Flash 9
      *  @playerversion AIR 1.1
-     *  @productversion Royale 0.9.3
+     *  @productversion Flex 3
+     *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
      */
-    override public function get selectedIndex():int
+    public function get selectedIndex():int
     {
-      return super.selectedIndex;
-      //return _selectedIndex;
+        return (model as ISelectionModel).selectedIndex;
     }
-
+    
     /**
-     *  @private.
+     *  @private
+     *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
      */
-    override public function set selectedIndex(value:int):void
-    {  
-    	//#SDK-15690 - if the user has asked for -1 (no child selected) then we must preserve this
-		if (value == selectedIndex && value != -1)
-			return;
-    	
-		_selectedIndex = value;
-       
+    public function set selectedIndex(value:int):void
+    {
+        // if (!collection || collection.length == 0)
+        // {
+        (model as ISelectionModel).selectedIndex = value;
+        //   bSelectionChanged = true;
+        //   bSelectedIndexChanged = true;
+        //  invalidateDisplayList();
+        return;
+        // }
+        //commitSelectedIndex(value);
     }
 
     //--------------------------------------------------------------------------
     //
+    //  Overridden properties
+    //
+    //--------------------------------------------------------------------------
+
+
+    //--------------------------------------------------------------------------
+    //
     //  Properties
     //
     //--------------------------------------------------------------------------
@@ -325,6 +414,39 @@ public class ToggleButtonBar extends org.apache.royale.html.ButtonBar
         _toggleOnClick = value;
     }
 
+    /**
+     * Returns the ILayoutHost which is its view. From ILayoutParent.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     *  @royaleignorecoercion org.apache.royale.core.ILayoutHost
+     */
+    public function getLayoutHost():ILayoutHost
+    {
+        return view as ILayoutHost;
+    }
+    
+    /**
+     * @private
+     */
+    override public function addedToParent():void
+    {
+        super.addedToParent();
+        
+        // Load the layout bead if it hasn't already been loaded.
+        loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this);
+        
+        // Even though super.addedToParent dispatched "beadsAdded", DataContainer still needs its data mapper
+        // and item factory beads. These beads are added after super.addedToParent is called in case substitutions
+        // were made; these are just defaults extracted from CSS.
+        loadBeadFromValuesManager(IDataProviderItemRendererMapper, "iDataProviderItemRendererMapper", this);
+        loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", this);
+        
+        dispatchEvent(new Event("initComplete"));
+    }
+
 }
 
 }