You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2015/07/28 20:40:52 UTC

[26/36] git commit: [flex-asjs] [refs/heads/develop] - start moving the FlatUI code to its own swc and revert the HTML library back to its basic state

start moving the FlatUI code to its own swc and revert the HTML library back to its basic state


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

Branch: refs/heads/develop
Commit: 5c6408ce2d9b71b0f5122dff0848b6169e9a3fbc
Parents: 56a9621
Author: Alex Harui <ah...@apache.org>
Authored: Mon Jul 27 10:58:43 2015 -0700
Committer: Alex Harui <ah...@apache.org>
Committed: Mon Jul 27 10:58:43 2015 -0700

----------------------------------------------------------------------
 examples/DataBindingTest/src/MyInitialView.mxml |   3 +-
 frameworks/air-config-template.xml              |   6 +
 frameworks/air-config.xml                       |   6 +
 frameworks/build.xml                            |   8 +
 frameworks/flex-config-template.xml             |   6 +
 frameworks/flex-config.xml                      |   6 +
 frameworks/projects/Flat/as/defaults.css        | 814 +++++++++++++++++++
 frameworks/projects/Flat/as/src/FlatClasses.as  |  37 +
 .../as/src/org/apache/flex/flat/CheckBox.as     |  47 ++
 .../as/src/org/apache/flex/flat/DropDownList.as |  46 ++
 .../as/src/org/apache/flex/flat/RadioButton.as  |  47 ++
 .../beads/CSSContentAndTextToggleButtonView.as  | 304 +++++++
 .../flex/flat/beads/CSSScrollBarButtonView.as   | 178 ++++
 .../apache/flex/flat/beads/CSSScrollBarView.as  | 241 ++++++
 ...CheckboxCSSContentAndTextToggleButtonView.as |  48 ++
 .../apache/flex/flat/beads/DropDownListView.as  | 287 +++++++
 .../RadioCSSContentAndTextToggleButtonView.as   |  47 ++
 .../flat/supportClasses/DropDownListList.as     |  76 ++
 .../DropDownListStringItemRenderer.as           |  71 ++
 frameworks/projects/Flat/build.xml              | 161 ++++
 frameworks/projects/Flat/compile-config.xml     |  91 +++
 frameworks/projects/Flat/flat-manifest.xml      | 105 +++
 .../js/src/org/apache/flex/flat/CheckBox.js     | 137 ++++
 .../js/src/org/apache/flex/flat/DropDownList.js | 219 +++++
 .../js/src/org/apache/flex/flat/RadioButton.js  | 227 ++++++
 frameworks/projects/HTML/as/defaults.css        |   8 +-
 frameworks/projects/HTML/as/src/HTMLClasses.as  |   3 -
 .../beads/CSSContentAndTextToggleButtonView.as  | 304 -------
 .../flex/html/beads/CSSScrollBarButtonView.as   | 182 -----
 .../apache/flex/html/beads/CSSScrollBarView.as  | 240 ------
 ...CheckboxCSSContentAndTextToggleButtonView.as |  48 --
 .../RadioCSSContentAndTextToggleButtonView.as   |  47 --
 .../DropDownListStringItemRenderer.as           |  70 --
 frameworks/projects/HTML/basic-manifest.xml     |   2 -
 34 files changed, 3220 insertions(+), 902 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/examples/DataBindingTest/src/MyInitialView.mxml
----------------------------------------------------------------------
diff --git a/examples/DataBindingTest/src/MyInitialView.mxml b/examples/DataBindingTest/src/MyInitialView.mxml
index 59bfd77..a7d92f1 100644
--- a/examples/DataBindingTest/src/MyInitialView.mxml
+++ b/examples/DataBindingTest/src/MyInitialView.mxml
@@ -18,8 +18,7 @@ limitations under the License.
 
 -->
 <js:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"
-				xmlns:js="library://ns.apache.org/flexjs/basic"
-                xmlns:core="library://ns.apache.org/flexjs/core"
+				xmlns:js="library://ns.apache.org/flexjs/flat"
 			    initComplete="initControls()">
     <fx:Script>
         <![CDATA[

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/air-config-template.xml
----------------------------------------------------------------------
diff --git a/frameworks/air-config-template.xml b/frameworks/air-config-template.xml
index e6c68d2..6edcb05 100644
--- a/frameworks/air-config-template.xml
+++ b/frameworks/air-config-template.xml
@@ -115,6 +115,12 @@
             <manifest>projects/HTML5/html5-manifest.xml</manifest>
          
         </namespace>   
+         <namespace>
+             <uri>library://ns.apache.org/flexjs/flat</uri>
+             
+             <manifest>projects/Flat/flat-manifest.xml</manifest>
+             
+         </namespace>
       </namespaces>
       
       <!-- Enable post-link SWF optimization. -->

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/air-config.xml
----------------------------------------------------------------------
diff --git a/frameworks/air-config.xml b/frameworks/air-config.xml
index 8f82882..5d9c109 100644
--- a/frameworks/air-config.xml
+++ b/frameworks/air-config.xml
@@ -115,6 +115,12 @@
             <manifest>projects/HTML5/html5-manifest.xml</manifest>
          
         </namespace>   
+         <namespace>
+             <uri>library://ns.apache.org/flexjs/flat</uri>
+             
+             <manifest>projects/Flat/flat-manifest.xml</manifest>
+             
+         </namespace>
       </namespaces>
       
       <!-- Enable post-link SWF optimization. -->

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/build.xml
----------------------------------------------------------------------
diff --git a/frameworks/build.xml b/frameworks/build.xml
index 0dafc4e..8a6f621 100644
--- a/frameworks/build.xml
+++ b/frameworks/build.xml
@@ -80,6 +80,7 @@
         <antcall target="Graphics"/>
         <antcall target="Binding"/>
         <antcall target="HTML"/>
+        <antcall target="Flat"/>
         <antcall target="Charts"/>
         <antcall target="Collections"/>
         <antcall target="CreateJS"/>
@@ -119,6 +120,7 @@
         <ant dir="${basedir}/projects/CreateJS" target="lint-js"/>
         <ant dir="${basedir}/projects/DragDrop" target="lint-js"/>
         <ant dir="${basedir}/projects/Effects" target="lint-js"/>
+        <ant dir="${basedir}/projects/Flat" target="lint-js"/>
         <ant dir="${basedir}/projects/Formatters" target="lint-js"/>
         <ant dir="${basedir}/projects/GoogleMaps" target="lint-js"/>
         <ant dir="${basedir}/projects/Graphics" target="lint-js"/>
@@ -135,6 +137,7 @@
         <ant dir="${basedir}/projects/Graphics" target="compile"/>
         <ant dir="${basedir}/projects/Binding" target="compile"/>
         <ant dir="${basedir}/projects/HTML" target="compile"/>
+        <ant dir="${basedir}/projects/Flat" target="compile"/>
         <ant dir="${basedir}/projects/Charts" target="compile"/>
         <ant dir="${basedir}/projects/Collections" target="compile"/>
         <ant dir="${basedir}/projects/CreateJS" target="compile"/>
@@ -181,6 +184,7 @@
         <ant dir="${basedir}/projects/CreateJS" target="clean"/>
         <ant dir="${basedir}/projects/DragDrop" target="clean"/>
         <ant dir="${basedir}/projects/Effects" target="clean"/>
+        <ant dir="${basedir}/projects/Flat" target="clean"/>
         <ant dir="${basedir}/projects/Formatters" target="clean"/>
         <ant dir="${basedir}/projects/GoogleMaps" target="clean"/>
         <ant dir="${basedir}/projects/Graphics" target="clean"/>
@@ -237,6 +241,10 @@
         <ant dir="${basedir}/projects/Effects"/>
     </target>
 
+    <target name="Flat" description="Clean build of Flat.swc">
+        <ant dir="${basedir}/projects/Flat"/>
+    </target>
+
     <target name="Formatters" description="Clean build of Formatters.swc">
         <ant dir="${basedir}/projects/Formatters"/>
     </target>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/flex-config-template.xml
----------------------------------------------------------------------
diff --git a/frameworks/flex-config-template.xml b/frameworks/flex-config-template.xml
index 4aaaed5..7569957 100644
--- a/frameworks/flex-config-template.xml
+++ b/frameworks/flex-config-template.xml
@@ -122,6 +122,12 @@
             <uri>library://ns.apache.org/flexjs/svg</uri>
          	<manifest>projects/HTML/svg-manifest.xml</manifest>
         </namespace>   
+        <namespace>
+            <uri>library://ns.apache.org/flexjs/flat</uri>
+            
+            <manifest>projects/Flat/flat-manifest.xml</manifest>
+            
+        </namespace>
    
       </namespaces>
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/flex-config.xml
----------------------------------------------------------------------
diff --git a/frameworks/flex-config.xml b/frameworks/flex-config.xml
index 27828d2..94c7e66 100644
--- a/frameworks/flex-config.xml
+++ b/frameworks/flex-config.xml
@@ -122,6 +122,12 @@
             <uri>library://ns.apache.org/flexjs/svg</uri>
          	<manifest>projects/HTML/svg-manifest.xml</manifest>
         </namespace>   
+        <namespace>
+            <uri>library://ns.apache.org/flexjs/flat</uri>
+            
+            <manifest>projects/Flat/flat-manifest.xml</manifest>
+            
+        </namespace>
    
       </namespaces>
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/defaults.css b/frameworks/projects/Flat/as/defaults.css
new file mode 100644
index 0000000..790eb0c
--- /dev/null
+++ b/frameworks/projects/Flat/as/defaults.css
@@ -0,0 +1,814 @@
+/*
+ *
+ *  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.
+ *
+ */
+
+@namespace "library://ns.apache.org/flexjs/flat";
+
+@font-face {
+  font-family: 'Flat-UI-Icons';
+
+  src: url('fonts/flat-ui-icons-regular.eot');
+  src: url('fonts/flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('fonts/flat-ui-icons-regular.woff') format('woff'), url('fonts/flat-ui-icons-regular.ttf') format('truetype'), url('fonts/flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg');
+}
+
+/* Global style declaration */
+*
+{
+    font-family: "Arial";
+    font-size: 12px;
+    color: #34495e;
+    background-color: #fff;
+}
+
+.flexjs *, . flexjs *:before, . flexjs *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+Button
+{
+  color: #fff;
+  background-color: #1abc9c;
+  padding: 10px 15px;
+  font-size: 15px;
+  font-weight: normal;
+  line-height: 1.4;
+  border: none;
+  border-radius: 4px;
+  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
+          transition: border .25s linear, color .25s linear, background-color .25s linear;
+
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+Button:hover
+{
+  color: #fff;
+  background-color: #48c9b0;
+  border-color: #48c9b0;
+}
+
+Button:active
+{
+  outline: none;
+  box-shadow: none;
+}
+
+ButtonBar
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.ButtonBarView");			
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.ButtonBarLayout");
+    IDataGroup: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.ButtonBarButtonItemRenderer");
+
+    border-style: none;
+}
+
+ButtonBarButtonItemRenderer
+{
+    width: 80;
+    height: 30;
+}
+
+.checkbox-icon,
+.checkbox-icon-hover,
+.checkbox-icon-checked
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  color: #bdc3c7;
+  text-align: center;
+  cursor: pointer;
+  
+  /* .radio .icon-checked:before */
+  /* .radio .icon-unchecked:before */
+  font-family: 'Flat-UI-Icons';
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;  
+  
+  font-size: 20px;
+  line-height: 20px;
+}
+
+.checkbox-icon:before
+{
+  content: "\e60d";
+}
+
+.checkbox-icon-hover:before
+{
+  content: "\e60e";
+}
+
+.checkbox-icon-checked:before 
+{
+  content: "\e60e";
+}
+
+.checkbox-icon-checked 
+{
+  color: #1abc9c;
+}
+
+.checkbox-input
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  outline: none !important;
+  opacity: 0;
+}
+
+CheckBox
+{
+  /* .checkbox */
+  position: relative;
+  padding-left: 32px;
+  margin-bottom: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-transition: color .25s linear;
+          transition: color .25s linear;
+}
+
+Container
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.BasicLayout");
+}
+
+ControlBar
+{
+	IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
+	IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.FlexibleFirstChildHorizontalLayout");
+	
+    background-color: #CECECE;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+}
+
+/* ASJS */
+DataGrid
+{
+    IDataGridPresentationModel: ClassReference("org.apache.flex.html.beads.models.DataGridPresentationModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.DataGridView");
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.DataGridModel");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.DataGridLayout");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+
+    background-color: #FFFFFF;
+	border-style: solid;
+	border-color: #222222;
+	border-width: 1px;
+}
+
+DateChooser {
+    IBeadView:   ClassReference("org.apache.flex.html.beads.DateChooserView");
+    IBeadModel:  ClassReference("org.apache.flex.html.beads.models.DateChooserModel");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.DateChooserMouseController");
+    width:  280px;
+    height: 240px;
+}
+
+DateField {
+    IBeadView:   ClassReference("org.apache.flex.html.beads.DateFieldView");
+    IBeadModel:  ClassReference("org.apache.flex.html.beads.models.DateChooserModel");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.DateFieldMouseController");
+    IFormatBead: ClassReference("org.apache.flex.html.accessories.DateFormatMMDDYYYYBead");
+}
+
+.dropdown-menu {
+  position: absolute;
+  z-index: 1000;
+  min-width: 220px;
+  padding: 0;
+  margin-top: 9px;
+  font-size: 14px;
+  background-color: #f3f4f5;
+  border: none;
+  border-radius: 4px;
+  box-shadow: none;
+  list-style: none;
+  }
+.dropdown-menu-divider {
+  height: 2px;
+  margin: 3px 0;
+  overflow: hidden;
+  background-color: rgba(202, 206, 209, .5);
+  }
+.dropdown-menu-item-renderer {
+  padding: 8px 16px;
+  line-height: 1.429;
+  font-size: inherit;
+  color: #606d7a;
+  background-color: transparent;
+}
+.dropdown-menu-item-renderer-selected {
+  padding: 8px 16px;
+  line-height: 1.875;
+  font-size: inherit;
+  color: #fff;
+  background-color: #1abc9c;
+}
+.dropdown-menu-item-renderer:hover {
+  font-size: inherit;
+  color: #55606c;
+  background-color: rgba(202, 206, 209, .5);
+}
+
+.dropdown-toggle-open-btn {
+  border-radius: 4px;
+  color: #fff;
+  background-color: #1abc9c;
+  border-color: #1abc9c;
+  }
+  
+.dropdown-toggle-open-btn:hover {
+  border-radius: 4px;
+  color: #fff;
+  background-color: #48c9b0;
+  border-color: #48c9b0;
+  }
+  
+.dropdown-caret {
+  display: inline-block;
+  color: inherit;
+  background-color: inherit;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  vertical-align: middle;
+  border-top: 8px solid;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  -webkit-transition: border-color .25s, color .25s;
+          transition: border-color .25s, color .25s;
+  }
+
+HContainer
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.HorizontalLayout");
+}
+
+ImageButton
+{
+    border-style: none;
+}
+
+VContainer
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
+}
+
+List
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.ListView");			
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
+    IDataGroup: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+	IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+	border-style: solid;
+	border-color: #222222;
+}
+
+Panel
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.PanelModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.PanelView");
+    
+    background-color: #FFFFFF;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+	padding: 2px;
+}
+
+PanelWithControlBar
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.PanelModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.PanelWithControlBarView");
+    
+    background-color: #FFFFFF;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+	padding: 2px;
+}
+
+.radio-icon,
+.radio-icon-hover,
+.radio-icon-checked
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  color: #bdc3c7;
+  text-align: center;
+  cursor: pointer;
+  
+  /* .radio .icon-checked:before */
+  /* .radio .icon-unchecked:before */
+  font-family: 'Flat-UI-Icons';
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;  
+  
+  font-size: 20px;
+  line-height: 20px;
+}
+
+.radio-icon:before
+{
+  content: "\e60b";
+}
+
+.radio-icon-hover:before
+{
+  content: "\e60c";
+}
+
+.radio-icon-checked:before
+{
+  content: "\e60c";
+}
+
+.radio-icon-checked
+{
+  color: #1abc9c;
+}
+
+.radio-input
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  outline: none !important;
+  opacity: 0;
+}
+
+RadioButton
+{
+  /* .radio */
+  position: relative;
+  padding-left: 32px;
+  margin-bottom: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-transition: color .25s linear;
+          transition: color .25s linear;
+}
+
+SimpleList
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.ListView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout");
+    IDataGroup: ClassReference("org.apache.flex.html.supportClasses.DataGroup");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+	IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport");
+}
+
+StringItemRenderer
+{
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ItemRendererMouseController");
+    height: 16;
+}
+
+TextArea
+{
+  padding: 6px 10px;
+  font-size: 13px;
+  border-radius: 6px;
+  border: 2px solid #1abc9c;
+}
+
+TextInput
+{
+  height: 35px;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 1.462;
+  border-radius: 6px;
+  border: 2px solid #1abc9c;
+}
+
+TitleBar
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.TitleBarModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.TitleBarView");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.FlexibleFirstChildHorizontalLayout");
+    iMeasurementBead: ClassReference("org.apache.flex.html.beads.TitleBarMeasurementBead");
+    background-color: #E2E2E2;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+}
+
+ToolTip
+{
+    background-color: #FFFFCC;
+}
+
+ViewBase
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.ContainerView");
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.BasicLayout");
+}
+
+
+/* Global Style Declaration */
+global
+{
+    IStatesImpl: ClassReference("org.apache.flex.core.SimpleStatesImpl");
+    IEffectTimer: ClassReference("org.apache.flex.utils.EffectTimer");
+    effectTimerInterval: 10;
+}
+
+@media -flex-flash
+{
+
+Alert
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.AlertModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.AlertView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.AlertController");
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+    
+    background-color: #FFFFFF;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+}
+
+Border
+{
+  border-radius: inherit;
+  border: inherit;
+}
+
+Button
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.CSSButtonView");
+}
+
+CheckBox
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ToggleButtonModel");
+    IBeadView:  ClassReference("org.apache.flex.flat.beads.CheckboxCSSContentAndTextToggleButtonView");			
+}
+
+CloseButton
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.CloseButtonView");
+}
+
+ComboBox
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ComboBoxModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.ComboBoxView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ComboBoxController");
+    IPopUp: ClassReference("org.apache.flex.html.supportClasses.DropDownListList");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+}
+
+Container
+{
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+}
+
+ControlBar
+{
+	IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.FlexibleFirstChildHorizontalLayout");
+    iMeasurementBead: ClassReference("org.apache.flex.html.beads.ControlBarMeasurementBead");
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");    
+}
+
+DropDownList
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.DropDownListView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.DropDownListController");
+    IPopUp: ClassReference("org.apache.flex.html.supportClasses.DropDownListList");
+}
+
+DropDownListList
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.DropDownListStringItemRenderer");
+}
+
+Image
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ImageModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.ImageView");
+}
+
+ImageButton
+{
+    IBeadView: ClassReference("org.apache.flex.html.beads.ImageButtonView");
+}
+
+ImageAndTextButton
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ImageAndTextModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.ImageAndTextButtonView");
+}
+
+Label
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.TextModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.TextFieldView");
+	iMeasurementBead: ClassReference("org.apache.flex.html.beads.TextFieldLabelMeasurementBead");
+}
+
+List
+{
+    iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead');
+    iBorderModel: ClassReference('org.apache.flex.html.beads.models.SingleLineBorderModel');
+}
+
+MultilineLabel
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.TextModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.MultilineTextFieldView");
+}
+
+NumericStepper
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.NumericStepperView");
+    
+    padding: 0px;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+    background-color: #FFFFFF;
+    iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead');
+    iBackgroundBead: ClassReference('org.apache.flex.html.beads.SolidBackgroundBead');
+}
+
+Panel
+{
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");    
+}
+
+PanelWithControlBar
+{
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+}
+
+RadioButton
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ValueToggleButtonModel");
+    IBeadView:  ClassReference("org.apache.flex.flat.beads.RadioCSSContentAndTextToggleButtonView");			
+}
+
+.vscrollbar-uparrow {
+  padding: 0px;
+  display: inline-block;
+  border-color: #16a085;
+  border-radius: initial;
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  vertical-align: middle;
+  border-bottom: 8px solid;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  -webkit-transition: border-color .25s, color .25s;
+          transition: border-color .25s, color .25s;
+  }
+.vscrollbar-downarrow-btn {
+  padding: 2px;
+  display: inline-block;
+  border-style: none;
+  border-radius: initial;
+  background-color: transparent;
+  width: 12;
+  height: 12;
+  margin-left: 5px;
+  vertical-align: middle;
+  }
+.vscrollbar-uparrow-btn {
+  padding: 2px;
+  display: inline-block;
+  border-style: none;
+  border-radius: initial;
+  background-color: transparent;
+  width: 12;
+  height: 12;
+  margin-left: 5px;
+  vertical-align: middle;
+  }
+.vscrollbar-downarrow {
+  padding: 0px;
+  display: inline-block;
+  border-color: #16a085;
+  border-radius: initial;
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  vertical-align: middle;
+  border-top: 8px solid;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  -webkit-transition: border-color .25s, color .25s;
+          transition: border-color .25s, color .25s;
+  }
+.vscrollbar-track {
+  padding: 0px;
+  position: relative;
+  width: 8px;
+  height: 8px;
+  /*margin-bottom: 20px;*/
+  cursor: pointer;
+  background-color: #ebedef;
+  border-radius: 4px;
+  /*border-radius: 32px;*/
+  box-shadow: none;
+  }
+.vscrollbar-thumb {
+  padding: 0px;
+  position: absolute;
+  z-index: 2;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  background-color: #16a085;
+  border-radius: 6px;
+  -webkit-transition: background .25s;
+          transition: background .25s;
+  }
+.vscrollbar-thumb:hover {
+  background-color: #48c9b0;
+  outline: none;
+  }
+.vscrollbar-thumb:active {
+  background-color: #16a085;
+  }
+
+ScrollBar
+{
+    IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VScrollBarLayout");
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ScrollBarModel");
+    IBeadView: ClassReference("org.apache.flex.flat.beads.CSSScrollBarView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.VScrollBarMouseController");
+}
+
+SimpleAlert
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.AlertModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.SimpleAlertView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.AlertController");
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+    
+    background-color: #FFFFFF;
+    border-style: solid;
+    border-color: #000000;
+    border-width: 1px;
+}
+
+Slider
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel");
+    iBeadView:  ClassReference("org.apache.flex.html.beads.SliderView");
+    iBeadController: ClassReference("org.apache.flex.html.beads.controllers.SliderMouseController");
+    iThumbView: ClassReference("org.apache.flex.html.beads.SliderThumbView");
+    iTrackView: ClassReference("org.apache.flex.html.beads.SliderTrackView");
+}
+
+Spinner
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.SpinnerView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.SpinnerMouseController");
+}
+
+TextArea
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.TextModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.TextAreaView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.EditableTextKeyboardController");
+    iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead');
+    iBorderModel: ClassReference('org.apache.flex.html.beads.models.SingleLineBorderModel');
+    width: 135;
+    height: 20;
+}
+
+TextButton
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.TextModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.CSSTextButtonView");
+    iMeasurementBead: ClassReference("org.apache.flex.html.beads.TextButtonMeasurementBead");
+}
+
+TextFieldItemRenderer
+{
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ItemRendererMouseController");
+    height: 16;
+}
+
+TextInput
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.TextModel");
+    IBeadView: ClassReference("org.apache.flex.html.beads.TextInputWithBorderView");
+    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.EditableTextKeyboardController");
+    iBorderBead: ClassReference('org.apache.flex.html.beads.SingleLineBorderBead');
+    iBorderModel: ClassReference('org.apache.flex.html.beads.models.SingleLineBorderModel');
+	width: 135;
+	height: 20;
+}
+
+TitleBar
+{
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+}
+
+ToggleTextButton
+{
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ToggleButtonModel");
+    IBeadView:  ClassReference("org.apache.flex.html.beads.CSSTextButtonView");
+}
+
+ViewBase
+{
+    iBackgroundBead: ClassReference("org.apache.flex.html.beads.SolidBackgroundBead");
+    iBorderBead: ClassReference("org.apache.flex.html.beads.SingleLineBorderBead");
+}
+
+
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/FlatClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/FlatClasses.as b/frameworks/projects/Flat/as/src/FlatClasses.as
new file mode 100644
index 0000000..161c114
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/FlatClasses.as
@@ -0,0 +1,37 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+
+/**
+ *  @private
+ *  This class is used to link additional classes into rpc.swc
+ *  beyond those that are found by dependecy analysis starting
+ *  from the classes specified in manifest.xml.
+ */
+internal class FlatClasses
+{	
+	
+    import org.apache.flex.flat.beads.CSSScrollBarView; CSSScrollBarView;
+    import org.apache.flex.flat.beads.CSSScrollBarButtonView; CSSScrollBarButtonView;
+    import org.apache.flex.flat.supportClasses.DropDownListStringItemRenderer; DropDownListStringItemRenderer;
+}
+
+}
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/CheckBox.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/CheckBox.as
new file mode 100644
index 0000000..b91a2c9
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/CheckBox.as
@@ -0,0 +1,47 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat
+{
+    import org.apache.flex.html.CheckBox;
+
+    /**
+     *  The CheckBox class provides a FlatUI-like appearance for
+     *  a CheckBox.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CheckBox extends org.apache.flex.html.CheckBox
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CheckBox()
+		{
+			super();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/DropDownList.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/DropDownList.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/DropDownList.as
new file mode 100644
index 0000000..30a22a5
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/DropDownList.as
@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat
+{
+    import org.apache.flex.html.DropDownList;
+    /**
+     *  The DropDownList class provides a FlatUI-like appearance for
+     *  a DropDownList.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class DropDownList extends org.apache.flex.html.DropDownList
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function DropDownList()
+		{
+			super();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/RadioButton.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/RadioButton.as
new file mode 100644
index 0000000..ca02613
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/RadioButton.as
@@ -0,0 +1,47 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat
+{
+    import org.apache.flex.html.RadioButton;
+    
+    /**
+     *  The RadioButton class provides a FlatUI-like appearance for
+     *  a RadioButton.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class RadioButton extends org.apache.flex.html.RadioButton
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function RadioButton()
+		{
+			super();
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSContentAndTextToggleButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSContentAndTextToggleButtonView.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSContentAndTextToggleButtonView.as
new file mode 100644
index 0000000..aacefb2
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSContentAndTextToggleButtonView.as
@@ -0,0 +1,304 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.beads
+{
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.text.TextFieldAutoSize;
+	import flash.text.TextFieldType;
+	
+    import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.CSSTextField;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IToggleButtonModel;
+    import org.apache.flex.core.StyleableCSSTextField;
+    import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+    import org.apache.flex.utils.CSSUtils;
+	
+    /**
+     *  The CSSContentAndTextToggleButtonView class is the default view for
+     *  the org.apache.flex.flat.CheckBox and RadioButton classes.
+     *  It supports CSS content property for the
+     *  icon.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSContentAndTextToggleButtonView extends BeadViewBase implements IBeadView
+	{
+        /**
+         *  map of classname suffixes.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        private static var suffixMap:Object = {
+            "upSprite": "",
+            "downSprite": "-checked",
+            "overSprite": "-hover",
+            "upAndSelectedSprite": "-checked",
+            "downAndSelectedSprite": "-checked",
+            "overAndSelectedSprite": "-checked"
+        }
+        
+        /**
+         *  className to use for styling.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected var className:String;
+        
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CSSContentAndTextToggleButtonView()
+		{
+		}
+		
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+		private var upAndSelectedSprite:Sprite;
+		private var downAndSelectedSprite:Sprite;
+		private var overAndSelectedSprite:Sprite;
+		
+		private var sprites:Array = [];
+		
+		private var _toggleButtonModel:IToggleButtonModel;
+
+        // TODO: Can we remove this?
+		private function get toggleButtonModel() : IToggleButtonModel
+		{
+			return _toggleButtonModel;
+		}
+		
+        /**
+         *  @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;
+            
+            for (var p:String in suffixMap)
+            {
+                var s:Sprite = new Sprite();
+                sprites.push(s);
+                this[p] = s;
+                
+                var tf:CSSTextField = new CSSTextField();
+                tf.type = TextFieldType.DYNAMIC;
+                tf.autoSize = TextFieldAutoSize.LEFT;
+                tf.name = "textField";
+                tf.parentHandlesPadding = true;
+                var icon:StyleableCSSTextField = new StyleableCSSTextField();
+                icon.name = "icon";
+                icon.className = className + suffixMap[p];
+                s.addChild(icon);
+                s.addChild(tf);
+            }
+            
+			_toggleButtonModel = value.getBeadByType(IToggleButtonModel) as IToggleButtonModel;
+			_toggleButtonModel.addEventListener("textChange", textChangeHandler);
+			_toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
+			_toggleButtonModel.addEventListener("selectedChange", selectedChangeHandler);
+			if (_toggleButtonModel.text !== null)
+				text = _toggleButtonModel.text;
+			
+			layoutControl();
+			
+			var hitArea:Shape = new Shape();
+			hitArea.graphics.beginFill(0x000000);
+			hitArea.graphics.drawRect(0,0,upSprite.width, upSprite.height);
+			hitArea.graphics.endFill();
+			
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
+			SimpleButton(value).hitTestState = hitArea;
+			
+			if (toggleButtonModel.text !== null)
+				text = toggleButtonModel.text;
+			if (toggleButtonModel.html !== null)
+				html = toggleButtonModel.html;
+		}
+		
+        /**
+         *  @copy org.apache.flex.html.Label#text
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get text():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.text;
+		}
+		
+        /**
+         *  @private
+         */
+		public function set text(value:String):void
+		{
+			for each( var s:Sprite in sprites )
+			{
+				var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+                tf.styleParent = _strand;
+				tf.text = value;
+			}
+			
+			layoutControl();
+		}
+		
+        /**
+         *  @copy org.apache.flex.html.Label#html
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get html():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.htmlText;
+		}
+		
+        /**
+         *  @private
+         */
+		public function set html(value:String):void
+		{
+			for each(var s:Sprite in sprites)
+			{
+				var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+				tf.htmlText = value;
+			}
+			
+			layoutControl();
+		}
+		
+		private function textChangeHandler(event:Event):void
+		{
+			text = toggleButtonModel.text;
+		}
+		
+		private function htmlChangeHandler(event:Event):void
+		{
+			html = toggleButtonModel.html;
+		}
+		
+		private var _selected:Boolean;
+		
+        /**
+         *  @copy org.apache.flex.core.IToggleButtonModel#selected
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get selected():Boolean
+		{
+			return _selected;
+		}
+		
+        /**
+         *  @private
+         */
+		public function set selected(value:Boolean):void
+		{
+			_selected = value;
+			
+			layoutControl();
+			
+			if( value ) {
+				SimpleButton(_strand).upState = upAndSelectedSprite;
+				SimpleButton(_strand).downState = downAndSelectedSprite;
+				SimpleButton(_strand).overState = overAndSelectedSprite;
+				
+			} else {
+				SimpleButton(_strand).upState = upSprite;
+				SimpleButton(_strand).downState = downSprite;
+				SimpleButton(_strand).overState = overSprite;
+			}
+		}
+		
+		private function selectedChangeHandler(event:Event):void
+		{
+			selected = toggleButtonModel.selected;
+		}
+		
+        /**
+         *  Display the icon and text label
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		protected function layoutControl() : void
+		{
+            // TODO: Layout using descendant selectors (.checkbox .icons)
+			for (var p:String in suffixMap)
+			{
+                var s:Sprite = this[p];
+				var icon:StyleableCSSTextField = s.getChildByName("icon") as StyleableCSSTextField;
+                icon.autoSize = TextFieldAutoSize.LEFT;
+				var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+				
+                icon.CSSParent = _strand;
+                var content:String = ValuesManager.valuesImpl.getValue(icon, "content", "before");
+                if (content != null)
+                    icon.text = content;
+				var mh:Number = Math.max(icon.height,tf.height);
+				
+                var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding");
+                var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand,"padding-left");
+                icon.x = CSSUtils.getLeftValue(paddingLeft, padding, s.width);
+				icon.y = (mh - icon.height)/2;
+				
+				tf.x = icon.x + icon.width + 1;
+				tf.y = (mh - tf.height)/2;
+			}
+			
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarButtonView.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarButtonView.as
new file mode 100644
index 0000000..09669c4
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarButtonView.as
@@ -0,0 +1,178 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.beads
+{
+    import flash.display.DisplayObject;
+    import flash.display.Loader;
+    import flash.display.Shape;
+    import flash.display.SimpleButton;
+    import flash.display.Sprite;
+    import flash.events.Event;
+    import flash.net.URLRequest;
+    
+    import org.apache.flex.core.BeadViewBase;
+    import org.apache.flex.core.CSSShape;
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.ITextModel;
+    import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.Event;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.utils.CSSBorderUtils;
+    import org.apache.flex.utils.CSSUtils;
+    import org.apache.flex.utils.StringTrimmer;
+
+    /**
+     *  The CSSScrollBarButtonView class is the default view for
+     *  the buttons in a org.apache.flex.html.ScrollBar class.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSScrollBarButtonView extends BeadViewBase implements IBeadView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CSSScrollBarButtonView()
+		{
+			upSprite = new Sprite();
+			downSprite = new Sprite();
+			overSprite = new Sprite();
+            upArrowShape = new CSSShape();
+            downArrowShape = new CSSShape();
+            overArrowShape = new CSSShape();
+            overArrowShape.state = "hover";
+            upSprite.addChild(upArrowShape);
+            downSprite.addChild(downArrowShape);
+            overSprite.addChild(overArrowShape);
+		}
+		
+		private var textModel:ITextModel;
+		
+		private var shape:Shape;
+		
+        /**
+         *  @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;
+			shape = new Shape();
+			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;
+
+            setupBackground(overSprite, overArrowShape, "hover");
+            setupBackground(downSprite, downArrowShape, "active");
+            setupBackground(upSprite, upArrowShape);
+            
+            IEventDispatcher(_strand).addEventListener("widthChanged",sizeChangeHandler);
+            IEventDispatcher(_strand).addEventListener("heightChanged",sizeChangeHandler);
+		}
+	
+        private function sizeChangeHandler(event:org.apache.flex.events.Event):void
+        {
+            setupSkins();
+        }
+        
+        protected function setupSkins():void
+        {
+            setupSkin(overSprite, overArrowShape, "hover");
+            setupSkin(downSprite, downArrowShape, "active");
+            setupSkin(upSprite, upArrowShape);
+            updateHitArea();
+        }
+
+		private function setupSkin(sprite:Sprite, shape:CSSShape, state:String = null):void
+		{
+			var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
+			var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-left", state);
+			var paddingRight:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-right", state);
+			var paddingTop:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-top", state);
+			var paddingBottom:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-bottom", state);
+			var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, DisplayObject(_strand).width);
+            var pr:Number = CSSUtils.getRightValue(paddingRight, padding, DisplayObject(_strand).width);
+            var pt:Number = CSSUtils.getTopValue(paddingTop, padding, DisplayObject(_strand).height);
+            var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, DisplayObject(_strand).height);
+			
+            var w:Object = ValuesManager.valuesImpl.getValue(shape, "width", state);
+            var h:Object = ValuesManager.valuesImpl.getValue(shape, "height", state);
+            shape.draw(Number(w), Number(h));
+            
+		    CSSBorderUtils.draw(sprite.graphics, 
+					shape.width + pl + pr, 
+					shape.height + pt + pb,
+                    _strand as DisplayObject,
+                    state, true);
+		}
+		
+        private function setupBackground(sprite:Sprite, shape:CSSShape, state:String = null):void
+        {
+            var backgroundImage:Object = ValuesManager.valuesImpl.getValue(_strand, "background-image", state);
+            if (backgroundImage)
+            {
+                var loader:Loader = new Loader();
+                sprite.addChildAt(loader, 0);
+                var url:String = backgroundImage as String;
+                loader.load(new URLRequest(url));
+                loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, function (e:flash.events.Event):void { 
+                    setupSkin(sprite, shape, state);
+                    updateHitArea();
+                });
+            }
+            else {
+                setupSkin(sprite, shape, state);
+                updateHitArea();
+            }
+        }
+        
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+        public var upArrowShape:CSSShape;
+        public var downArrowShape:CSSShape;
+        public var overArrowShape:CSSShape;
+				
+		private function updateHitArea():void
+		{
+			shape.graphics.clear();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, upSprite.width, upSprite.height);
+			shape.graphics.endFill();
+			
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarView.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarView.as
new file mode 100644
index 0000000..38583f6
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CSSScrollBarView.as
@@ -0,0 +1,241 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.beads
+{
+	import flash.display.DisplayObject;
+	
+    import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IScrollBarModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.Strand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.events.Event;
+	import org.apache.flex.html.Button;
+	import org.apache.flex.html.beads.controllers.ButtonAutoRepeatController;
+    import org.apache.flex.html.beads.IScrollBarView;
+
+    /**
+     *  The ScrollBarView class is the default view for
+     *  the org.apache.flex.html.supportClasses.ScrollBar class.
+     *  It implements the classic desktop-like ScrollBar.
+     *  A different view would implement more modern scrollbars that hide themselves
+     *  until hovered over with the mouse.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSScrollBarView extends Strand implements IBeadView, IStrand, IScrollBarView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CSSScrollBarView()
+		{
+		}
+				
+		private var sbModel:IScrollBarModel;
+		
+		private var _strand:IStrand;
+		
+        /**
+         *  The layout. 
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        private var layout:IBeadLayout;
+        
+        /**
+         *  The host component. 
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get host():IUIBase
+        {
+            return _strand as IUIBase;
+        }
+
+        /**
+         *  @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;
+            
+            for each (var bead:IBead in beads)
+                addBead(bead);
+                        
+			sbModel = value.getBeadByType(IScrollBarModel) as IScrollBarModel;
+            sbModel = _strand.getBeadByType(IScrollBarModel) as IScrollBarModel;
+            sbModel.addEventListener("maximumChange", changeHandler);
+            sbModel.addEventListener("minimumChange", changeHandler);
+            sbModel.addEventListener("snapIntervalChange", changeHandler);
+            sbModel.addEventListener("stepSizeChange", changeHandler);
+            sbModel.addEventListener("pageSizeChange", changeHandler);
+            sbModel.addEventListener("valueChange", changeHandler);
+            
+            // TODO: (aharui) put in values impl
+			_increment = new Button();
+            Button(_increment).className = "vscrollbar-downarrow-btn";
+            var sbView:CSSScrollBarButtonView = new CSSScrollBarButtonView();
+            sbView.upArrowShape.className = "vscrollbar-downarrow";
+            sbView.downArrowShape.className = "vscrollbar-downarrow";
+            sbView.overArrowShape.className = "vscrollbar-downarrow";
+            Button(_increment).addBead(sbView);
+            Button(_increment).addBead(new ButtonAutoRepeatController());
+			_decrement = new Button();
+            Button(_decrement).className = "vscrollbar-uparrow-btn";
+            sbView = new CSSScrollBarButtonView();
+            sbView.upArrowShape.className = "vscrollbar-uparrow";
+            sbView.downArrowShape.className = "vscrollbar-uparrow";
+            sbView.overArrowShape.className = "vscrollbar-uparrow";
+            Button(_decrement).addBead(sbView);
+            Button(_decrement).addBead(new ButtonAutoRepeatController());
+			_track = new Button();
+            Button(_track).className = "vscrollbar-track";
+			_thumb = new Button();				
+            Button(_thumb).className = "vscrollbar-thumb";
+            
+            UIBase(value).addElement(_decrement);
+            UIBase(value).addElement(_increment);
+            UIBase(value).addElement(_track);
+            UIBase(value).addElement(_thumb);
+            
+            IEventDispatcher(_strand).addEventListener("heightChanged", changeHandler);
+            
+            if( _strand.getBeadByType(IBeadLayout) == null ) {
+                layout = new (ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout")) as IBeadLayout;
+                _strand.addBead(layout);
+            }
+            layout.layout();
+		}
+						
+        private function changeHandler(event:Event):void
+        {
+            layout.layout();    
+        }
+        
+		private var _decrement:DisplayObject;
+		private var _increment:DisplayObject;
+		private var _track:DisplayObject;
+		private var _thumb:DisplayObject;
+		
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#decrement
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get decrement():DisplayObject
+		{
+			return _decrement;
+		}
+
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#increment
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get increment():DisplayObject
+		{
+			return _increment;
+		}
+        
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#track
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get track():DisplayObject
+		{
+			return _track;
+		}
+        
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#thumb
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get thumb():DisplayObject
+		{
+			return _thumb;
+		}
+		
+        /**
+         *  @copy org.apache.flex.core.IBeadView#viewHeight
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get viewHeight():Number
+        {
+            // don't want to put $height in an interface
+            return _strand["$height"];
+        }
+        
+        /**
+         *  @copy org.apache.flex.core.IBeadView#viewWidth
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get viewWidth():Number
+        {
+            // don't want to put $width in an interface
+            return _strand["$width"];
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CheckboxCSSContentAndTextToggleButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CheckboxCSSContentAndTextToggleButtonView.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CheckboxCSSContentAndTextToggleButtonView.as
new file mode 100644
index 0000000..e52076f
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/CheckboxCSSContentAndTextToggleButtonView.as
@@ -0,0 +1,48 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.beads
+{
+	
+    /**
+     *  The CheckboxCSSContentAndTextToggleButtonView class is the default view for
+     *  the org.apache.flex.flat.Checkbox class.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CheckboxCSSContentAndTextToggleButtonView extends CSSContentAndTextToggleButtonView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CheckboxCSSContentAndTextToggleButtonView()
+		{
+			super();
+			
+			className = "checkbox-icon";
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/DropDownListView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/DropDownListView.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/DropDownListView.as
new file mode 100644
index 0000000..0aaf964
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/DropDownListView.as
@@ -0,0 +1,287 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	import flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.text.TextFieldType;
+	
+    import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.CSSTextField;
+    import org.apache.flex.core.CSSShape;
+    import org.apache.flex.core.CSSSprite;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IPopUpHost;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IPopUpHost;
+    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 DropDownListView class is the default view for
+     *  the org.apache.flex.flat.DropDownList class.
+     *  It displays a simple text label with what appears to be a
+     *  down arrow button on the right, but really, the entire
+     *  view is the button that will display or dismiss the dropdown.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class DropDownListView extends BeadViewBase implements IDropDownListView, IBeadView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function DropDownListView()
+		{
+            upSprite = new CSSSprite();
+            upSprite.className = 'dropdown-toggle-open-btn';
+            downSprite = new CSSSprite();
+            downSprite.className = 'dropdown-toggle-open-btn';
+            overSprite = new CSSSprite();
+            overSprite.className = 'dropdown-toggle-open-btn';
+            overSprite.state = 'hover';
+			upTextField = new CSSTextField();
+			downTextField = new CSSTextField();
+			overTextField = new CSSTextField();
+            upSprite.addChild(upTextField);
+            overSprite.addChild(overTextField);
+            downSprite.addChild(downTextField);
+			upTextField.selectable = false;
+            upTextField.parentDrawsBackground = true;
+			upTextField.type = TextFieldType.DYNAMIC;
+			downTextField.selectable = false;
+            downTextField.parentDrawsBackground = true;
+			downTextField.type = TextFieldType.DYNAMIC;
+			overTextField.selectable = false;
+            overTextField.parentDrawsBackground = true;
+			overTextField.type = TextFieldType.DYNAMIC;
+            // auto-size collapses if no text
+			//upTextField.autoSize = "left";
+			//downTextField.autoSize = "left";
+			//overTextField.autoSize = "left";
+
+            upArrows = new CSSShape();
+            upArrows.className = 'dropdown-caret';
+            overArrows = new CSSShape();
+            overArrows.className = 'dropdown-caret';
+            downArrows = new CSSShape();
+            downArrows.className = 'dropdown-caret';
+            upSprite.addChild(upArrows);
+			overSprite.addChild(overArrows);
+			downSprite.addChild(downArrows);
+
+		}
+
+        
+		private var selectionModel:ISelectionModel;
+		
+		private var shape:Shape;
+		
+        /**
+         *  @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;;
+            selectionModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
+            selectionModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
+			shape = new Shape();
+			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;
+			if (selectionModel.selectedIndex !== -1)
+				text = selectionModel.selectedItem.toString();
+            else
+                text = "^W_";
+            upTextField.height = upTextField.textHeight + 4;
+            downTextField.height = downTextField.textHeight + 4;
+            overTextField.height = overTextField.textHeight + 4;
+            if (selectionModel.selectedIndex == -1)
+                text = "";
+            
+            IEventDispatcher(value).addEventListener("heightChanged", changeHandler);
+            IEventDispatcher(value).addEventListener("widthChanged", changeHandler);
+			changeHandler(null);
+		}
+		
+		private function selectionChangeHandler(event:Event):void
+		{
+			text = selectionModel.selectedItem.toString();
+		}
+		
+        private function changeHandler(event:Event):void
+        {
+            var ww:Number = DisplayObject(_strand).width;
+            var hh:Number = DisplayObject(_strand).height;
+            upArrows.draw(0, 0);
+            overArrows.draw(0, 0);
+            downArrows.draw(0, 0);
+            upSprite.draw(ww, hh);
+            overSprite.draw(ww, hh);
+            downSprite.draw(ww, hh);
+            
+            upArrows.x = ww - upArrows.width;            
+            overArrows.x = ww - overArrows.width;            
+            downArrows.x = ww - downArrows.width;
+            upArrows.y = (hh - upArrows.height) / 2;            
+            overArrows.y = (hh - overArrows.height) / 2;            
+            downArrows.y = (hh - downArrows.height) / 2;
+            
+			upTextField.width = upArrows.x;
+			downTextField.width = downArrows.x;
+			overTextField.width = overArrows.x;
+			upTextField.height = upTextField.textHeight + 5;
+			downTextField.height = downTextField.textHeight + 5;
+			overTextField.height = overTextField.textHeight + 5;
+            upTextField.y = (hh - upTextField.height) / 2;
+            downTextField.y =  (hh - downTextField.height) / 2;
+            overTextField.y =  (hh - overTextField.height) / 2;
+			shape.graphics.clear();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, ww, hh);
+			shape.graphics.endFill();
+        }
+        
+		private var upTextField:CSSTextField;
+		private var downTextField:CSSTextField;
+		private var overTextField:CSSTextField;
+        private var upSprite:CSSSprite;
+        private var downSprite:CSSSprite;
+        private var overSprite:CSSSprite;
+        private var upArrows:CSSShape;
+        private var downArrows:CSSShape;
+        private var overArrows:CSSShape;
+		
+        /**
+         *  The text that is displayed in the view.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get text():String
+		{
+			return upTextField.text;
+		}
+        
+        /**
+         *  @private
+         */
+		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;
+            upTextField.height = upTextField.textHeight + 5;
+            downTextField.height = downTextField.textHeight + 5;
+            overTextField.height = overTextField.textHeight + 5;
+            upTextField.y = (hh - upTextField.height) / 2;
+            downTextField.y =  (hh - downTextField.height) / 2;
+            overTextField.y =  (hh - overTextField.height) / 2;
+		}
+		
+        private var _popUp:IStrand;
+        
+        /**
+         *  The dropdown/popup that displays the set of choices.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get popUp():IStrand
+        {
+            return _popUp;
+        }
+        
+        private var _popUpVisible:Boolean;
+        
+        /**
+         *  A flag that indicates whether the dropdown/popup is
+         *  visible.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get popUpVisible():Boolean
+        {
+            return _popUpVisible;
+        }
+        
+        /**
+         *  @private
+         */
+        public function set popUpVisible(value:Boolean):void
+        {
+            if (value != _popUpVisible)
+            {
+                _popUpVisible = value;
+                if (value)
+                {
+                    if (!_popUp)
+                    {
+                        var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
+                        _popUp = new popUpClass() as IStrand;
+                    }
+					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);
+                }
+                else
+                {
+                    DisplayObject(_popUp).parent.removeChild(_popUp as DisplayObject);                    
+                }
+            }
+        }
+        
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/RadioCSSContentAndTextToggleButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/RadioCSSContentAndTextToggleButtonView.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/RadioCSSContentAndTextToggleButtonView.as
new file mode 100644
index 0000000..e6e3ba5
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/beads/RadioCSSContentAndTextToggleButtonView.as
@@ -0,0 +1,47 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.beads
+{
+    /**
+     *  The RadioCSSContentAndTextToggleButtonView class is the default view for
+     *  the org.apache.flex.flat.RadioButton class.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class RadioCSSContentAndTextToggleButtonView extends CSSContentAndTextToggleButtonView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function RadioCSSContentAndTextToggleButtonView()
+		{
+			super();
+			
+			className = "radio-icon";
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c6408ce/frameworks/projects/Flat/as/src/org/apache/flex/flat/supportClasses/DropDownListList.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Flat/as/src/org/apache/flex/flat/supportClasses/DropDownListList.as b/frameworks/projects/Flat/as/src/org/apache/flex/flat/supportClasses/DropDownListList.as
new file mode 100644
index 0000000..097f279
--- /dev/null
+++ b/frameworks/projects/Flat/as/src/org/apache/flex/flat/supportClasses/DropDownListList.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flat.supportClasses
+{
+    import org.apache.flex.core.IPopUp;
+    import org.apache.flex.html.SimpleList;
+    import org.apache.flex.html.beads.SolidBackgroundBead;
+    
+    //--------------------------------------
+    //  Events
+    //--------------------------------------
+    
+    /**
+     *  @copy org.apache.flex.core.ISelectionModel#change
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    [Event(name="change", type="org.apache.flex.events.Event")]
+    
+    /**
+     *  The DropDownListList class is the List class used internally
+     *  by DropDownList as the dropdown/popup.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class DropDownListList extends SimpleList implements IPopUp
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function DropDownListList()
+		{
+			super();
+            className = "dropdown-menu";
+		}
+		
+        /**
+         *  @private
+         */
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+			
+			var bb:SolidBackgroundBead = new SolidBackgroundBead();
+			bb.backgroundColor = 0xffffff;
+			addBead(bb);
+		}
+	}
+}