flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [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
Date Tue, 28 Jul 2015 18:40:52 GMT
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 <aharui@apache.org>
Authored: Mon Jul 27 10:58:43 2015 -0700
Committer: Alex Harui <aharui@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);
+		}
+	}
+}


Mime
View raw message