[20/55] [abbrv] git commit: [flex-asjs] [refs/heads/develop] - move handwritten JS code to final home. Build scripts still need fixing up

[ah...@apache.org]

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
new file mode 100644
index 0000000..6db743e
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/List.js
@@ -0,0 +1,177 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_List');
+
+goog.require('mx_core_IFactory');
+goog.require('org_apache_flex_core_IDataProviderItemRendererMapper');
+goog.require('org_apache_flex_core_IItemRendererClassFactory');
+goog.require('org_apache_flex_core_IListPresentationModel');
+goog.require('org_apache_flex_core_ItemRendererClassFactory');
+goog.require('org_apache_flex_core_ListBase');
+goog.require('org_apache_flex_core_ValuesManager');
+goog.require('org_apache_flex_html_beads_ListView');
+goog.require('org_apache_flex_html_beads_TextItemRendererFactoryForArrayData');
+goog.require('org_apache_flex_html_beads_controllers_ListSingleSelectionMouseController');
+goog.require('org_apache_flex_html_beads_models_ArraySelectionModel');
+goog.require('org_apache_flex_html_beads_models_ListPresentationModel');
+goog.require('org_apache_flex_html_supportClasses_DataItemRenderer');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_ListBase}
+ */
+org_apache_flex_html_List = function() {
+  org_apache_flex_html_List.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_List,
+    org_apache_flex_core_ListBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_List.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'List',
+                qName: 'org_apache_flex_html_List' }] };
+
+
+Object.defineProperties(org_apache_flex_html_List.prototype, {
+    /** @expose */
+    itemRenderer: {
+        /** @this {org_apache_flex_html_List} */
+        get: function() {
+            return this.itemRenderer_;
+        },
+        /** @this {org_apache_flex_html_List} */
+        set: function(value) {
+            this.itemRenderer_ = value;
+        }
+    },
+    /** @expose */
+    labelField: {
+        /** @this {org_apache_flex_html_List} */
+        get: function() {
+            return this.model.labelField;
+        },
+        /** @this {org_apache_flex_html_List} */
+        set: function(value) {
+            this.model.labelField = value;
+        }
+    },
+    /** @expose */
+    rowHeight: {
+        /** @this {org_apache_flex_html_List} */
+        get: function() {
+            return this.presentationModel.rowHeight;
+        },
+        /** @this {org_apache_flex_html_List} */
+        set: function(value) {
+            this.presentationModel.rowHeight = value;
+        }
+    },
+    /** @expose */
+    presentationModel: {
+        /** @this {org_apache_flex_html_List} */
+        get: function() {
+            var presModel = this.getBeadByType(org_apache_flex_core_IListPresentationModel);
+            if (presModel == null) {
+              presModel = new org_apache_flex_html_beads_models_ListPresentationModel();
+              this.addBead(presModel);
+            }
+            return presModel;
+        }
+    }
+});
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_List.prototype.createElement =
+    function() {
+  org_apache_flex_html_List.base(this, 'createElement');
+  this.className = 'List';
+
+  return this.element;
+};
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_List.prototype.addedToParent =
+    function() {
+  org_apache_flex_html_List.base(this, 'addedToParent');
+
+  var dataFactory = this.getBeadByType(org_apache_flex_html_beads_DataItemRendererFactoryForArrayData);
+  if (dataFactory == null) {
+    var m1 = org_apache_flex_core_ValuesManager.valuesImpl.getValue(this, 'iDataProviderItemRendererMapper');
+    dataFactory = new m1();
+    this.addBead(dataFactory);
+  }
+
+  var itemRendererFactory = this.getBeadByType(org_apache_flex_core_IItemRendererClassFactory);
+  if (itemRendererFactory == null) {
+    var m2 = org_apache_flex_core_ValuesManager.valuesImpl.getValue(this, 'iItemRendererClassFactory');
+    itemRendererFactory = new m2();
+    this.addBead(itemRendererFactory);
+  }
+};
+
+
+/**
+ * @expose
+ * @return {Array.<Object>} An array of objects that make up the actual
+ *                          list (most likely itemRenderers).
+ */
+org_apache_flex_html_List.prototype.internalChildren =
+    function() {
+  var listView =
+      this.getBeadByType(org_apache_flex_html_beads_ListView);
+  var dg = listView.dataGroup;
+  var items = null;
+  if (dg.renderers) {
+    items = dg.renderers;
+  }
+  return items;
+};
+
+
+/**
+ * @expose
+ * @param {Object} event The event that triggered the selection.
+ */
+org_apache_flex_html_List.prototype.selectedHandler =
+    function(event) {
+  var itemRenderer = event.currentTarget;
+  if (this.renderers) {
+    var n = this.renderers.length;
+    var i;
+    for (i = 0; i < n; i++) {
+      var test = this.renderers[i];
+      if (test == itemRenderer) {
+        this.model.selectedIndex = i;
+        itemRenderer.selected = true;
+      }
+      else {
+        test.selected = false;
+      }
+    }
+  }
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/MultilineLabel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/MultilineLabel.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/MultilineLabel.js
new file mode 100644
index 0000000..5962793
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/MultilineLabel.js
@@ -0,0 +1,69 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_MultilineLabel');
+
+goog.require('org_apache_flex_core_UIBase');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_MultilineLabel = function() {
+  org_apache_flex_html_MultilineLabel.base(this, 'constructor');
+
+  this.element = document.createElement('div');
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+};
+goog.inherits(org_apache_flex_html_MultilineLabel,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_MultilineLabel.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'MultilineLabel',
+                qName: 'org_apache_flex_html_MultilineLabel' }] };
+
+
+Object.defineProperties(org_apache_flex_html_MultilineLabel.prototype, {
+    /** @expose */
+    text: {
+        /** @this {org_apache_flex_html_MultilineLabel} */
+        get: function() {
+            return this.element.innerHTML;
+        },
+        /** @this {org_apache_flex_html_MultilineLabel} */
+        set: function(value) {
+            this.element.innerHTML = value;
+        }
+    },
+    /** @expose */
+    html: {
+        /** @this {org_apache_flex_html_MultilineLabel} */
+        get: function() {
+            return this.element.innerHTML;
+        },
+        /** @this {org_apache_flex_html_MultilineLabel} */
+        set: function(value) {
+            this.element.innerHTML = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/NumericStepper.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/NumericStepper.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/NumericStepper.js
new file mode 100644
index 0000000..abdac91
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/NumericStepper.js
@@ -0,0 +1,161 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_NumericStepper');
+
+goog.require('org_apache_flex_core_UIBase');
+goog.require('org_apache_flex_html_Spinner');
+goog.require('org_apache_flex_html_TextInput');
+goog.require('org_apache_flex_html_beads_models_RangeModel');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_NumericStepper = function() {
+  org_apache_flex_html_NumericStepper.base(this, 'constructor');
+  this.model =
+      new org_apache_flex_html_beads_models_RangeModel();
+};
+goog.inherits(org_apache_flex_html_NumericStepper,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_NumericStepper.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'NumericStepper',
+                qName: 'org_apache_flex_html_NumericStepper' }] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_NumericStepper.prototype.createElement =
+    function() {
+  this.element = document.createElement('div');
+  this.positioner = this.element;
+
+  this.input = new org_apache_flex_html_TextInput();
+  this.addElement(this.input);
+  this.input.positioner.style.display = 'inline-block';
+  this.input.positioner.style.width = '100px';
+
+  this.spinner = new org_apache_flex_html_Spinner();
+  this.spinner.positioner.style.display = 'inline-block';
+  this.spinner.positioner.style.height = '24px';
+  this.spinner.positioner.style.marginLeft = '-2px';
+  this.spinner.positioner.style.marginTop = '2px';
+  this.addElement(this.spinner);
+  /* TODO: ajh move to view and css */
+  this.spinner.incrementButton.positioner.style.display = 'block';
+  this.spinner.incrementButton.positioner.style.marginBottom = '-1px';
+  this.spinner.incrementButton.positioner.style.paddingTop = '1px';
+  this.spinner.incrementButton.positioner.style.paddingBottom = '1px';
+  this.spinner.incrementButton.positioner.style.fontSize = '6px';
+  this.spinner.decrementButton.positioner.style.marginTop = '0px';
+  this.spinner.decrementButton.positioner.style.display = 'block';
+  this.spinner.decrementButton.positioner.style.paddingTop = '1px';
+  this.spinner.decrementButton.positioner.style.paddingBottom = '1px';
+  this.spinner.decrementButton.positioner.style.fontSize = '6px';
+  this.spinner.positioner.style.display = 'inline-block';
+  goog.events.listen(this.spinner, 'valueChange',
+      goog.bind(this.spinnerChange, this));
+
+  this.element.flexjs_wrapper = this;
+  this.className = 'NumericStepper';
+
+  this.input.text = String(this.spinner.value);
+
+  return this.element;
+};
+
+
+/**
+ * @param {Object} event The input event.
+ */
+org_apache_flex_html_NumericStepper.prototype.spinnerChange =
+    function(event)
+    {
+  var newValue = this.spinner.value;
+  this.value = newValue;
+  this.input.text = String(this.spinner.value);
+  this.dispatchEvent(new org_apache_flex_events_Event('valueChange'));
+};
+
+
+Object.defineProperties(org_apache_flex_html_NumericStepper.prototype, {
+    /** @expose */
+    minimum: {
+        /** @this {org_apache_flex_html_NumericStepper} */
+        get: function() {
+            return this.model.minimum;
+        },
+        /** @this {org_apache_flex_html_NumericStepper} */
+        set: function(value) {
+            this.model.minimum = value;
+        }
+    },
+    /** @expose */
+    maximum: {
+        /** @this {org_apache_flex_html_NumericStepper} */
+        get: function() {
+            return this.model.maximum;
+        },
+        /** @this {org_apache_flex_html_NumericStepper} */
+        set: function(value) {
+            this.model.maximum = value;
+        }
+    },
+    /** @expose */
+    value: {
+        /** @this {org_apache_flex_html_NumericStepper} */
+        get: function() {
+            return this.model.value;
+        },
+        /** @this {org_apache_flex_html_NumericStepper} */
+        set: function(newValue) {
+            this.model.value = newValue;
+            this.spinner.value = newValue;
+        }
+    },
+    /** @expose */
+    snapInterval: {
+        /** @this {org_apache_flex_html_NumericStepper} */
+        get: function() {
+            return this.model.snapInterval;
+        },
+        /** @this {org_apache_flex_html_NumericStepper} */
+        set: function(value) {
+            this.model.snapInterval = value;
+        }
+    },
+    /** @expose */
+    stepSize: {
+        /** @this {org_apache_flex_html_NumericStepper} */
+        get: function() {
+            return this.model.stepSize;
+        },
+        /** @this {org_apache_flex_html_NumericStepper} */
+        set: function(value) {
+            this.model.stepSize = value;
+        }
+    }
+});
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
new file mode 100644
index 0000000..f0baa42
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/Panel.js
@@ -0,0 +1,180 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_Panel');
+
+goog.require('org_apache_flex_html_Container');
+goog.require('org_apache_flex_html_ControlBar');
+goog.require('org_apache_flex_html_TitleBar');
+goog.require('org_apache_flex_html_beads_PanelView');
+goog.require('org_apache_flex_html_beads_models_PanelModel');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_html_Container}
+ */
+org_apache_flex_html_Panel = function() {
+  org_apache_flex_html_Panel.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_Panel,
+    org_apache_flex_html_Container);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_Panel.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'Panel',
+                qName: 'org_apache_flex_html_Panel' }] };
+
+
+/**
+ * @override
+ * @param {Object} c Element being added.
+ */
+org_apache_flex_html_Panel.prototype.addElement = function(c) {
+  if (c == this.titleBar) {
+    this.element.insertBefore(this.titleBar.element, this.contentArea);
+  }
+  else if (c == this.controlBar) {
+    this.element.appendChild(c.element);
+  }
+  else {
+    this.contentArea.appendChild(c.element);
+  }
+  c.addedToParent();
+};
+
+
+/**
+ * @override
+ * @param {Object} c The child element.
+ * @param {number} index The index.
+ */
+org_apache_flex_html_Panel.prototype.addElementAt =
+    function(c, index) {
+  var children = this.internalChildren();
+  if (index >= children.length)
+    this.addElement(c);
+  else
+  {
+    this.contentArea.insertBefore(c.element,
+        children[index]);
+    c.addedToParent();
+  }
+};
+
+
+/**
+ * @override
+ * @param {Object} c The child element.
+ * @return {number} The index in parent.
+ */
+org_apache_flex_html_Panel.prototype.getElementIndex =
+    function(c) {
+  var children = this.internalChildren();
+  var n = children.length;
+  for (var i = 0; i < n; i++)
+  {
+    if (children[i] == c.element)
+      return i;
+  }
+  return -1;
+};
+
+
+/**
+ * @override
+ * @param {Object} c The child element.
+ */
+org_apache_flex_html_Panel.prototype.removeElement =
+    function(c) {
+  this.contentArea.removeChild(c.element);
+};
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_Panel.prototype.createElement =
+    function() {
+
+  this.element = document.createElement('div');
+  this.element.className = 'Panel';
+  this.typeNames = 'Panel';
+
+  this.contentArea = document.createElement('div');
+  this.contentArea.flexjs_wrapper = this;
+  this.element.appendChild(this.contentArea);
+
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+
+  return this.element;
+};
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_Panel.prototype.addedToParent =
+    function() {
+  org_apache_flex_html_Panel.base(this, 'addedToParent');
+};
+
+
+Object.defineProperties(org_apache_flex_html_Panel.prototype, {
+    /** @expose */
+    showCloseButton: {
+        /** @this {org_apache_flex_html_Panel} */
+        get: function() {
+            return this.model.showCloseButton;
+        },
+        /** @this {org_apache_flex_html_Panel} */
+        set: function(value) {
+            this.model.showCloseButton = value;
+        }
+    },
+    /** @expose */
+    title: {
+        /** @this {org_apache_flex_html_Panel} */
+        get: function() {
+            return this.model.title;
+        },
+        /** @this {org_apache_flex_html_Panel} */
+        set: function(value) {
+            this.model.title = value;
+        }
+    },
+    /** @expose */
+    controlBar: {
+        /** @this {org_apache_flex_html_Panel} */
+        get: function() {
+            return this.controlBarChildren;
+        },
+        /** @this {org_apache_flex_html_Panel} */
+        set: function(value) {
+            this.controlBarChildren = value;
+
+            for (var i = 0; i < value.length; i++) {
+              var item = value[i];
+              this.controlBar.addElement(item);
+            }
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/RadioButton.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/RadioButton.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/RadioButton.js
new file mode 100644
index 0000000..17d3a63
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/RadioButton.js
@@ -0,0 +1,176 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_RadioButton');
+
+goog.require('org_apache_flex_core_UIBase');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_RadioButton = function() {
+  org_apache_flex_html_RadioButton.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_RadioButton,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_RadioButton.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'RadioButton',
+                qName: 'org_apache_flex_html_RadioButton'}] };
+
+
+/**
+ * Provides unique name
+ */
+org_apache_flex_html_RadioButton.radioCounter = 0;
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_RadioButton.prototype.createElement =
+    function() {
+
+  this.input = document.createElement('input');
+  this.input.type = 'radio';
+  this.input.id = '_radio_' + org_apache_flex_html_RadioButton.radioCounter++;
+
+  this.textNode = document.createTextNode('radio button');
+
+  this.labelFor = document.createElement('label');
+  this.labelFor.appendChild(this.input);
+  this.labelFor.appendChild(this.textNode);
+
+  this.element = this.labelFor;
+  this.positioner = this.element;
+  this.input.flexjs_wrapper = this;
+  this.element.flexjs_wrapper = this;
+  this.textNode.flexjs_wrapper = this;
+
+  return this.element;
+};
+
+
+/**
+ * @expose
+ */
+org_apache_flex_html_RadioButton.prototype.initModel =
+    function() {
+};
+
+
+/**
+ * @expose
+ */
+org_apache_flex_html_RadioButton.prototype.initSkin =
+    function() {
+};
+
+
+Object.defineProperties(org_apache_flex_html_RadioButton.prototype, {
+    /** @expose */
+    id: {
+        /** @this {org_apache_flex_html_RadioButton} */
+        set: function(value) {
+            org_apache_flex_utils_Language.superSetter(org_apache_flex_html_RadioButton, this, 'id', value);
+            this.labelFor.id = value;
+            this.input.id = value;
+        }
+    },
+    /** @expose */
+    groupName: {
+        /** @this {org_apache_flex_html_RadioButton} */
+        get: function() {
+            return this.input.name;
+        },
+        /** @this {org_apache_flex_html_RadioButton} */
+        set: function(value) {
+            this.input.name = value;
+        }
+    },
+    /** @expose */
+    text: {
+        /** @this {org_apache_flex_html_RadioButton} */
+        get: function() {
+            return this.textNode.nodeValue;
+        },
+        /** @this {org_apache_flex_html_RadioButton} */
+        set: function(value) {
+            this.textNode.nodeValue = value;
+        }
+    },
+    /** @expose */
+    selected: {
+        /** @this {org_apache_flex_html_RadioButton} */
+        get: function() {
+            return this.input.checked;
+        },
+        /** @this {org_apache_flex_html_RadioButton} */
+        set: function(value) {
+            this.input.checked = value;
+        }
+    },
+    /** @expose */
+    value: {
+        /** @this {org_apache_flex_html_RadioButton} */
+        get: function() {
+            return this.input.value;
+        },
+        /** @this {org_apache_flex_html_RadioButton} */
+        set: function(value) {
+            this.input.value = value;
+        }
+    },
+    /** @expose */
+    selectedValue: {
+        /** @this {org_apache_flex_html_RadioButton} */
+        get: function() {
+            var buttons, groupName, i, n;
+
+            groupName = this.input.name;
+            buttons = document.getElementsByName(groupName);
+            n = buttons.length;
+
+            for (i = 0; i < n; i++) {
+              if (buttons[i].checked) {
+                return buttons[i].value;
+              }
+            }
+            return null;
+        },
+        /** @this {org_apache_flex_html_RadioButton} */
+        set: function(value) {
+            var buttons, groupName, i, n;
+
+            groupName = this.input.name;
+            buttons = document.getElementsByName(groupName);
+            n = buttons.length;
+            for (i = 0; i < n; i++) {
+              if (buttons[i].value === value) {
+                buttons[i].checked = true;
+                break;
+              }
+            }
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleAlert.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleAlert.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleAlert.js
new file mode 100644
index 0000000..0937804
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleAlert.js
@@ -0,0 +1,51 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_SimpleAlert');
+
+goog.require('org_apache_flex_core_UIBase');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_SimpleAlert = function() {
+  org_apache_flex_html_SimpleAlert.base(this, 'constructor');
+
+};
+goog.inherits(org_apache_flex_html_SimpleAlert,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_SimpleAlert.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'SimpleAlert',
+                qName: 'org_apache_flex_html_SimpleAlert'}] };
+
+
+/**
+ * @param {string} message The message to display in the alert.
+ * @param {Object} host The host that should display the alert.
+ */
+org_apache_flex_html_SimpleAlert.show =
+    function(message, host) {
+
+  alert(message);
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleList.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleList.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleList.js
new file mode 100644
index 0000000..560597b
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/SimpleList.js
@@ -0,0 +1,110 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_SimpleList');
+
+goog.require('org_apache_flex_core_ListBase');
+goog.require('org_apache_flex_html_beads_models_ArraySelectionModel');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_ListBase}
+ */
+org_apache_flex_html_SimpleList = function() {
+  org_apache_flex_html_SimpleList.base(this, 'constructor');
+  this.model = new org_apache_flex_html_beads.models.ArraySelectionModel();
+};
+goog.inherits(org_apache_flex_html_SimpleList,
+    org_apache_flex_core_ListBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_SimpleList.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'SimpleList',
+                qName: 'org_apache_flex_html_SimpleList'}] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_SimpleList.prototype.
+    createElement = function() {
+  this.element = document.createElement('select');
+  this.element.size = 5;
+  goog.events.listen(this.element, 'change',
+      goog.bind(this.changeHandler, this));
+  this.positioner = this.element;
+  this.className = 'SimpleList';
+
+  return this.element;
+};
+
+
+Object.defineProperties(org_apache_flex_html_SimpleList.prototype, {
+    /** @expose */
+    dataProvider: {
+        /** @this {org_apache_flex_html_SimpleList} */
+        get: function() {
+            return this.model.dataProvider;
+        },
+        /** @this {org_apache_flex_html_SimpleList} */
+        set: function(value) {
+            var dp, i, n, opt;
+
+            this.model.dataProvider = value;
+
+            dp = this.element.options;
+            n = dp.length;
+            for (i = 0; i < n; i++) {
+              dp.remove(0);
+            }
+
+            n = value.length;
+            for (i = 0; i < n; i++) {
+              opt = document.createElement('option');
+              opt.text = value[i].toString();
+              dp.add(opt);
+            }
+        }
+    },
+    /** @expose */
+    selectedIndex: {
+        /** @this {org_apache_flex_html_SimpleList} */
+        get: function() {
+            return this.model.selectedIndex;
+        },
+        /** @this {org_apache_flex_html_SimpleList} */
+        set: function(value) {
+            this.model.selectedIndex = value;
+        }
+    },
+    /** @expose */
+    selectedItem: {
+        /** @this {org_apache_flex_html_SimpleList} */
+        get: function() {
+            return this.model.selectedItem;
+        },
+        /** @this {org_apache_flex_html_SimpleList} */
+        set: function(value) {
+            this.model.selectedItem = value;
+        }
+    }
+});
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/Slider.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/Slider.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/Slider.js
new file mode 100644
index 0000000..6ba09d5
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/Slider.js
@@ -0,0 +1,172 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_Slider');
+
+goog.require('org_apache_flex_core_UIBase');
+goog.require('org_apache_flex_html_beads_SliderThumbView');
+goog.require('org_apache_flex_html_beads_SliderTrackView');
+goog.require('org_apache_flex_html_beads_controllers_SliderMouseController');
+goog.require('org_apache_flex_html_beads_models_RangeModel');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_Slider = function() {
+  this.model =
+      new org_apache_flex_html_beads_models_RangeModel();
+  org_apache_flex_html_Slider.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_Slider,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_Slider.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'Slider',
+                qName: 'org_apache_flex_html_Slider'}] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_Slider.prototype.createElement =
+    function() {
+
+  this.element = document.createElement('div');
+  this.element.style.width = '200px';
+  this.element.style.height = '30px';
+
+  this.track = new org_apache_flex_html_beads_SliderTrackView();
+  this.addBead(this.track);
+
+  this.thumb = new org_apache_flex_html_beads_SliderThumbView();
+  this.addBead(this.thumb);
+
+  this.controller = new org_apache_flex_html_beads_controllers_SliderMouseController();
+  this.addBead(this.controller);
+
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+
+  this.className = 'Slider';
+
+  return this.element;
+};
+
+
+Object.defineProperties(org_apache_flex_html_Slider.prototype, {
+    /** @expose */
+    value: {
+        /** @this {org_apache_flex_html_Slider} */
+        get: function() {
+            return this.model.value;
+        },
+        /** @this {org_apache_flex_html_Slider} */
+        set: function(newValue) {
+            this.model.value = newValue;
+            this.setThumbFromValue(this.model.value);
+        }
+    },
+    /** @expose */
+    minimum: {
+        /** @this {org_apache_flex_html_Slider} */
+        get: function() {
+            return this.model.minimum;
+        },
+        /** @this {org_apache_flex_html_Slider} */
+        set: function(value) {
+            this.model.minimum = value;
+        }
+    },
+    /** @expose */
+    maximum: {
+        /** @this {org_apache_flex_html_Slider} */
+        get: function() {
+            return this.model.maximum;
+        },
+        /** @this {org_apache_flex_html_Slider} */
+        set: function(value) {
+            this.model.maximum = value;
+        }
+    },
+    /** @expose */
+    snapInterval: {
+        /** @this {org_apache_flex_html_Slider} */
+        get: function() {
+            return this.model.snapInterval;
+        },
+        /** @this {org_apache_flex_html_Slider} */
+        set: function(value) {
+            this.model.snapInterval = value;
+        }
+    },
+    /** @expose */
+    stepSize: {
+        /** @this {org_apache_flex_html_Slider} */
+        get: function() {
+            return this.model.stepSize;
+        },
+        /** @this {org_apache_flex_html_Slider} */
+        set: function(value) {
+            this.model.stepSize = value;
+        }
+    }
+});
+
+
+/**
+ * @param {Object} value The current value.
+ * @return {number} Calculates the new value based snapInterval and stepSize.
+ */
+org_apache_flex_html_Slider.prototype.snap = function(value)
+    {
+  var si = this.snapInterval;
+  var n = Math.round((value - this.minimum) / si) *
+      si + this.minimum;
+  if (value > 0)
+  {
+    if (value - n < n + si - value)
+      return n;
+    return n + si;
+  }
+  if (value - n > n + si - value)
+    return n + si;
+  return n;
+};
+
+
+/**
+ * @param {number} value The value used to calculate new position of the thumb.
+ * @return {void} Moves the thumb to the corresponding position.
+ */
+org_apache_flex_html_Slider.prototype.setThumbFromValue =
+    function(value)
+    {
+  var min = this.model.minimum;
+  var max = this.model.maximum;
+  var p = (value - min) / (max - min);
+  var xloc = p * (parseInt(this.track.element.style.width, 10) -
+             parseInt(this.thumb.element.style.width, 10));
+
+  this.thumb.element.style.left = String(xloc) + 'px';
+};
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/Spacer.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/Spacer.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/Spacer.js
new file mode 100644
index 0000000..c05f1d8
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/Spacer.js
@@ -0,0 +1,44 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_Spacer');
+
+goog.require('org_apache_flex_core_UIBase');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_Spacer = function() {
+  org_apache_flex_html_Spacer.base(this, 'constructor');
+
+  this.element = document.createElement('div');
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+};
+goog.inherits(org_apache_flex_html_Spacer,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_Spacer.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'Spacer',
+                qName: 'org_apache_flex_html_Spacer' }] };
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/Spinner.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/Spinner.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/Spinner.js
new file mode 100644
index 0000000..8b0c6be
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/Spinner.js
@@ -0,0 +1,170 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_Spinner');
+
+goog.require('org_apache_flex_core_UIBase');
+goog.require('org_apache_flex_html_TextButton');
+goog.require('org_apache_flex_html_beads_controllers_SpinnerMouseController');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_Spinner = function() {
+  org_apache_flex_html_Spinner.base(this, 'constructor');
+
+  this.minimum_ = 0;
+  this.maximum_ = 100;
+  this.value_ = 1;
+  this.stepSize_ = 1;
+  this.snapInterval_ = 1;
+};
+goog.inherits(org_apache_flex_html_Spinner,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_Spinner.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'Spinner',
+                qName: 'org_apache_flex_html_Spinner'}] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_Spinner.prototype.createElement =
+    function() {
+  this.element = document.createElement('div');
+  this.positioner = this.element;
+
+  this.element.style.verticalAlign = 'middle';
+
+  this.incrementButton = new org_apache_flex_html_TextButton();
+  this.incrementButton.text = '\u25B2';
+  this.addElement(this.incrementButton);
+
+  this.decrementButton = new org_apache_flex_html_TextButton();
+  this.decrementButton.text = '\u25BC';
+  this.addElement(this.decrementButton);
+
+  this.controller = new org_apache_flex_html_beads_controllers_SpinnerMouseController();
+  this.addBead(this.controller);
+
+  this.element.flexjs_wrapper = this;
+
+  return this.element;
+};
+
+
+Object.defineProperties(org_apache_flex_html_Spinner.prototype, {
+    /** @expose */
+    minimum: {
+        /** @this {org_apache_flex_html_Spinner} */
+        get: function() {
+            return this.minimum_;
+        },
+        /** @this {org_apache_flex_html_Spinner} */
+        set: function(value) {
+            if (value != this.minimum_) {
+              this.minimum_ = value;
+              this.dispatchEvent('minimumChanged');
+            }
+        }
+    },
+    /** @expose */
+    maximum: {
+        /** @this {org_apache_flex_html_Spinner} */
+        get: function() {
+            return this.maximum_;
+        },
+        /** @this {org_apache_flex_html_Spinner} */
+        set: function(value) {
+            if (value != this.maximum_) {
+              this.maximum_ = value;
+              this.dispatchEvent('maximumChanged');
+            }
+        }
+    },
+    /** @expose */
+    snapInterval: {
+        /** @this {org_apache_flex_html_Spinner} */
+        get: function() {
+            return this.snapInterval_;
+        },
+        /** @this {org_apache_flex_html_Spinner} */
+        set: function(value) {
+            if (value != this.snapInterval_) {
+              this.snapInterval_ = value;
+              this.dispatchEvent('snapIntervalChanged');
+            }
+        }
+    },
+    /** @expose */
+    stepSize: {
+        /** @this {org_apache_flex_html_Spinner} */
+        get: function() {
+            return this.stepSize_;
+        },
+        /** @this {org_apache_flex_html_Spinner} */
+        set: function(value) {
+            if (value != this.stepSize_) {
+              this.stepSize_ = value;
+              this.dispatchEvent('stepSizeChanged');
+            }
+        }
+    },
+    /** @expose */
+    value: {
+        /** @this {org_apache_flex_html_Spinner} */
+        get: function() {
+            return this.value_;
+        },
+        /** @this {org_apache_flex_html_Spinner} */
+        set: function(value) {
+            if (value != this.value_) {
+              this.value_ = value;
+              this.dispatchEvent('valueChange');
+            }
+        }
+    }
+});
+
+
+/**
+ * @param {number} value The proposed value.
+ * @return {number} The new value based on snapInterval
+ * and stepSize.
+ */
+org_apache_flex_html_Spinner.prototype.snap = function(value)
+    {
+  var si = this.snapInterval_;
+  var n = Math.round((value - this.minimum_) / si) * si + this.minimum_;
+  if (value > 0)
+  {
+    if (value - n < n + si - value)
+      return n;
+    return n + si;
+  }
+  if (value - n > n + si - value)
+    return n + si;
+  return n;
+};
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/TextArea.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/TextArea.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/TextArea.js
new file mode 100644
index 0000000..fdcb810
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/TextArea.js
@@ -0,0 +1,68 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_TextArea');
+
+goog.require('org_apache_flex_core_UIBase');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_TextArea = function() {
+  org_apache_flex_html_TextArea.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_TextArea,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_TextArea.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'TextArea',
+                qName: 'org_apache_flex_html_TextArea'}] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_TextArea.prototype.createElement =
+    function() {
+
+  this.element = document.createElement('textarea');
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+
+  return this.element;
+};
+
+
+Object.defineProperties(org_apache_flex_html_TextArea.prototype, {
+    /** @expose */
+    text: {
+        /** @this {org_apache_flex_html_TextArea} */
+        get: function() {
+            return this.element.value;
+        },
+        /** @this {org_apache_flex_html_TextArea} */
+        set: function(value) {
+            this.element.value = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/TextButton.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/TextButton.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/TextButton.js
new file mode 100644
index 0000000..8bc2a81
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/TextButton.js
@@ -0,0 +1,54 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_TextButton');
+
+goog.require('org_apache_flex_html_Button');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_html_Button}
+ */
+org_apache_flex_html_TextButton = function() {
+  org_apache_flex_html_TextButton.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_TextButton,
+    org_apache_flex_html_Button);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_TextButton.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'TextButton',
+                qName: 'org_apache_flex_html_TextButton'}] };
+
+
+Object.defineProperties(org_apache_flex_html_TextButton.prototype, {
+    /** @expose */
+    text: {
+        /** @this {org_apache_flex_html_TextButton} */
+        get: function() {
+            return this.element.innerHTML;
+        },
+        /** @this {org_apache_flex_html_TextButton} */
+        set: function(value) {
+            this.element.innerHTML = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/TextInput.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/TextInput.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/TextInput.js
new file mode 100644
index 0000000..59e91cc
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/TextInput.js
@@ -0,0 +1,95 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_TextInput');
+
+goog.require('org_apache_flex_core_UIBase');
+goog.require('org_apache_flex_events_Event');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_UIBase}
+ */
+org_apache_flex_html_TextInput = function() {
+  org_apache_flex_html_TextInput.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_TextInput,
+    org_apache_flex_core_UIBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_TextInput.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'TextInput',
+                qName: 'org_apache_flex_html_TextInput'}] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_TextInput.prototype.createElement = function() {
+  this.element = document.createElement('input');
+  this.element.setAttribute('type', 'input');
+
+  //attach input handler to dispatch flexjs change event when user write in textinput
+  //goog.events.listen(this.element, 'change', goog.bind(this.killChangeHandler, this));
+  goog.events.listen(this.element, 'input', goog.bind(this.inputChangeHandler_, this));
+
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+
+  return this.element;
+};
+
+
+Object.defineProperties(org_apache_flex_html_TextInput.prototype, {
+    /** @expose */
+    text: {
+        /** @this {org_apache_flex_html_TextInput} */
+        get: function() {
+            return this.element.value;
+        },
+        /** @this {org_apache_flex_html_TextInput} */
+        set: function(value) {
+            this.element.value = value;
+            this.dispatchEvent(new org_apache_flex_events_Event('textChange'));
+        }
+    }
+});
+
+
+/**
+ * @expose
+ * @param {Object} event The event.
+ */
+/*org_apache_flex_html_TextInput.prototype.killChangeHandler = function(event) {
+    //event.preventDefault();
+};*/
+
+
+/**
+ * @private
+ * @param {Object} event The event.
+ */
+org_apache_flex_html_TextInput.prototype.inputChangeHandler_ = function(event) {
+  event.stopPropagation();
+
+  this.dispatchEvent(new org_apache_flex_events_Event(org_apache_flex_events_Event.EventType.CHANGE));
+  this.dispatchEvent(new org_apache_flex_events_Event('textChange'));
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/TitleBar.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/TitleBar.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/TitleBar.js
new file mode 100644
index 0000000..5a8b087
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/TitleBar.js
@@ -0,0 +1,86 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_TitleBar');
+
+goog.require('org_apache_flex_html_Container');
+goog.require('org_apache_flex_html_Label');
+goog.require('org_apache_flex_html_TextButton');
+goog.require('org_apache_flex_html_beads_models_TitleBarModel');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_html_Container}
+ */
+org_apache_flex_html_TitleBar = function() {
+
+  org_apache_flex_html_TitleBar.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_TitleBar,
+    org_apache_flex_html_Container);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_TitleBar.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'TitleBar',
+                qName: 'org_apache_flex_html_TitleBar'}] };
+
+
+/**
+ * @override
+ */
+org_apache_flex_html_TitleBar.prototype.createElement =
+    function() {
+
+  this.element = document.createElement('div');
+
+  this.positioner = this.element;
+  this.element.flexjs_wrapper = this;
+
+  this.className = 'TitleBar';
+
+  return this.element;
+};
+
+
+Object.defineProperties(org_apache_flex_html_TitleBar.prototype, {
+    /** @expose */
+    title: {
+        /** @this {org_apache_flex_html_TitleBar} */
+        get: function() {
+            return this.model.title;
+        },
+        /** @this {org_apache_flex_html_TitleBar} */
+        set: function(value) {
+            this.model.title = value;
+        }
+    },
+    /** @expose */
+    showCloseButton: {
+        /** @this {org_apache_flex_html_TitleBar} */
+        get: function() {
+            return this.model.showCloseButton;
+        },
+        /** @this {org_apache_flex_html_TitleBar} */
+        set: function(value) {
+            this.model.showCloseButton = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/ToggleTextButton.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/ToggleTextButton.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/ToggleTextButton.js
new file mode 100644
index 0000000..6ef186f
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/ToggleTextButton.js
@@ -0,0 +1,92 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_ToggleTextButton');
+
+goog.require('org_apache_flex_html_Button');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_html_Button}
+ */
+org_apache_flex_html_ToggleTextButton = function() {
+  org_apache_flex_html_ToggleTextButton.base(this, 'constructor');
+
+
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.selected_ = false;
+};
+goog.inherits(org_apache_flex_html_ToggleTextButton,
+    org_apache_flex_html_Button);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_ToggleTextButton.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'ToggleTextButton',
+                qName: 'org_apache_flex_html_ToggleTextButton'}] };
+
+
+Object.defineProperties(org_apache_flex_html_ToggleTextButton.prototype, {
+    /** @expose */
+    text: {
+        /** @this {org_apache_flex_html_ToggleTextButton} */
+        get: function() {
+            return this.element.innerHTML;
+        },
+        /** @this {org_apache_flex_html_ToggleTextButton} */
+        set: function(value) {
+            this.element.innerHTML = value;
+        }
+    },
+    /** @expose */
+    selected: {
+        /** @this {org_apache_flex_html_ToggleTextButton} */
+        get: function() {
+             return this.selected_;
+        },
+        /** @this {org_apache_flex_html_ToggleTextButton} */
+        set: function(value) {
+            if (this.selected_ != value) {
+              this.selected_ = value;
+
+              var className = this.className;
+              if (value) {
+                 if (className.indexOf(this.SELECTED) == className.length - this.SELECTED.length)
+                   this.className = className.substring(0, className.length - this.SELECTED.length);
+              }
+              else {
+                if (className.indexOf(this.SELECTED) == -1)
+                  this.className = className + this.SELECTED;
+              }
+           }
+        }
+    }
+});
+
+
+/**
+ * @type {string} The selected setter.
+ */
+org_apache_flex_html_ToggleTextButton.prototype.SELECTED = '_Selected';
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/ToolTip.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/ToolTip.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/ToolTip.js
new file mode 100644
index 0000000..ab25eed
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/ToolTip.js
@@ -0,0 +1,40 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_ToolTip');
+
+goog.require('org_apache_flex_html_Label');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_html_Label}
+ */
+org_apache_flex_html_ToolTip = function() {
+  org_apache_flex_html_ToolTip.base(this, 'constructor');
+  this.element.className = 'ToolTip';
+};
+goog.inherits(org_apache_flex_html_ToolTip,
+    org_apache_flex_html_Label);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_ToolTip.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'ToolTip',
+                qName: 'org_apache_flex_html_ToolTip' }]};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/VContainer.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/VContainer.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/VContainer.js
new file mode 100644
index 0000000..d7c608a
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/VContainer.js
@@ -0,0 +1,42 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_VContainer');
+
+goog.require('org_apache_flex_core_IContainer');
+goog.require('org_apache_flex_html_Container');
+
+
+
+/**
+ * @constructor
+ * @implements {org_apache_flex_core_IContainer}
+ * @extends {org_apache_flex_html_Container}
+ */
+org_apache_flex_html_VContainer = function() {
+  org_apache_flex_html_VContainer.base(this, 'constructor');
+};
+goog.inherits(org_apache_flex_html_VContainer,
+    org_apache_flex_html_Container);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_VContainer.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'VContainer',
+                qName: 'org_apache_flex_html_VContainer' }],
+      interfaces: [org_apache_flex_core_IContainer] };

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/NumericOnlyTextInputBead.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/NumericOnlyTextInputBead.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/NumericOnlyTextInputBead.js
new file mode 100644
index 0000000..8109d5a
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/NumericOnlyTextInputBead.js
@@ -0,0 +1,92 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_accessories_NumericOnlyTextInputBead');
+
+
+
+/**
+ * @constructor
+ */
+org_apache_flex_html_accessories_NumericOnlyTextInputBead =
+    function() {
+
+  /**
+   * @protected
+   * @type {Object}
+   */
+  this.promptElement = null;
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_accessories_NumericOnlyTextInputBead.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'NumericOnlyTextInputBead',
+                qName: 'org_apache_flex_html_accessories_NumericOnlyTextInputBead' }] };
+
+
+Object.defineProperties(org_apache_flex_html_accessories_NumericOnlyTextInputBead.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_accessories_NumericOnlyTextInputBead} */
+        set: function(value) {
+            if (this.strand_ !== value) {
+              this.strand_ = value;
+              value.addEventListener('keypress', goog.bind(this.validateInput, this));
+            }
+        }
+    }
+});
+
+
+/**
+ * @expose
+ * @param {Object} event The input to validate?
+ */
+org_apache_flex_html_accessories_NumericOnlyTextInputBead.
+    prototype.validateInput = function(event) {
+
+  var code = event.charCode;
+
+  // backspace or delete
+  if (event.keyCode == 8 || event.keyCode == 46) return;
+
+  // tab or return/enter
+  if (event.keyCode == 9 || event.keyCode == 13) return;
+
+  // left or right cursor arrow
+  if (event.keyCode == 37 || event.keyCode == 39) return;
+
+  var key = String.fromCharCode(code);
+
+  var regex = /[0-9]|\./;
+  if (!regex.test(key)) {
+    event.returnValue = false;
+    if (event.preventDefault) event.preventDefault();
+    return;
+  }
+  var cursorStart = event.target.selectionStart;
+  var cursorEnd = event.target.selectionEnd;
+  var left = event.target.value.substring(0, cursorStart);
+  var right = event.target.value.substr(cursorEnd);
+  var complete = left + key + right;
+  if (isNaN(complete)) {
+    event.returnValue = false;
+    if (event.preventDefault) event.preventDefault();
+  }
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/PasswordInputBead.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/PasswordInputBead.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/PasswordInputBead.js
new file mode 100644
index 0000000..e606dd7
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/PasswordInputBead.js
@@ -0,0 +1,54 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_accessories_PasswordInputBead');
+
+
+
+/**
+ * @constructor
+ */
+org_apache_flex_html_accessories_PasswordInputBead =
+    function() {
+
+  /**
+   * @protected
+   * @type {Object}
+   */
+  this.promptElement = null;
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_accessories_PasswordInputBead.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'PasswordInputBead',
+                qName: 'org_apache_flex_html_accessories_PasswordInputBead' }] };
+
+
+Object.defineProperties(org_apache_flex_html_accessories_PasswordInputBead.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_accessories_PasswordInputBead} */
+        set: function(value) {
+            if (this.strand_ !== value) {
+              this.strand_ = value;
+              value.element.type = 'password';
+            }
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/TextPromptBead.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/TextPromptBead.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/TextPromptBead.js
new file mode 100644
index 0000000..0c9bce2
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/accessories/TextPromptBead.js
@@ -0,0 +1,64 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_accessories_TextPromptBead');
+
+
+
+/**
+ * @constructor
+ */
+org_apache_flex_html_accessories_TextPromptBead = function() {
+
+  /**
+   * @protected
+   * @type {Object}
+   */
+  this.promptElement = null;
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_accessories_TextPromptBead.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'TextPromptBead',
+                qName: 'org_apache_flex_html_accessories_TextPromptBead' }] };
+
+
+Object.defineProperties(org_apache_flex_html_accessories_TextPromptBead.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_accessories_TextPromptBead} */
+        set: function(value) {
+            if (this.strand_ !== value) {
+              this.strand_ = value;
+              value.element.placeholder = this.prompt;
+            }
+        }
+    },
+    /** @expose */
+    prompt: {
+        /** @this {org_apache_flex_html_accessories_TextPromptBead} */
+        get: function() {
+            return this.prompt;
+        },
+        /** @this {org_apache_flex_html_accessories_TextPromptBead} */
+        set: function(value) {
+            this.prompt = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ButtonBarView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ButtonBarView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ButtonBarView.js
new file mode 100644
index 0000000..d3efd91
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ButtonBarView.js
@@ -0,0 +1,57 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_beads_ButtonBarView');
+
+goog.require('org_apache_flex_html_beads_ListView');
+goog.require('org_apache_flex_utils_Language');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_html_beads_ListView}
+ */
+org_apache_flex_html_beads_ButtonBarView = function() {
+  this.lastSelectedIndex = -1;
+  org_apache_flex_html_beads_ButtonBarView.base(this, 'constructor');
+
+  this.className = 'ButtonBarView';
+};
+goog.inherits(
+    org_apache_flex_html_beads_ButtonBarView,
+    org_apache_flex_html_beads_ListView);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_beads_ButtonBarView.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'ButtonBarView',
+                qName: 'org_apache_flex_html_beads_ButtonBarView' }] };
+
+
+Object.defineProperties(org_apache_flex_html_beads_ButtonBarView.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_beads_ButtonBarView} */
+        set: function(value) {
+            org_apache_flex_utils_Language.superSetter(
+                org_apache_flex_html_beads_ButtonBarView, this, 'strand', value);
+            this.strand_ = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
new file mode 100644
index 0000000..91b8373
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ContainerView.js
@@ -0,0 +1,64 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_beads_ContainerView');
+
+goog.require('org_apache_flex_core_BeadViewBase');
+goog.require('org_apache_flex_core_ILayoutParent');
+
+
+
+/**
+ * @constructor
+ * @extends {org_apache_flex_core_BeadViewBase}
+ */
+org_apache_flex_html_beads_ContainerView = function() {
+  this.lastSelectedIndex = -1;
+  org_apache_flex_html_beads_ContainerView.base(this, 'constructor');
+
+  this.className = 'ContainerView';
+};
+goog.inherits(
+    org_apache_flex_html_beads_ContainerView,
+    org_apache_flex_core_BeadViewBase);
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_beads_ContainerView.prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'ContainerView',
+                qName: 'org_apache_flex_html_beads_ContainerView' }],
+    interfaces: [org_apache_flex_core_ILayoutParent]
+    };
+
+
+Object.defineProperties(org_apache_flex_html_beads_ContainerView.prototype, {
+    /** @expose */
+    contentView: {
+        /** @this {org_apache_flex_html_beads_ContainerView} */
+        get: function() {
+            return this._strand;
+        }
+    },
+    /** @expose */
+    resizableView: {
+        /** @this {org_apache_flex_html_beads_ContainerView} */
+        get: function() {
+            return this._strand;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
new file mode 100644
index 0000000..6001515
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.js
@@ -0,0 +1,137 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_beads_DataItemRendererFactoryForArrayData');
+
+goog.require('org_apache_flex_core_IDataProviderItemRendererMapper');
+goog.require('org_apache_flex_core_IListPresentationModel');
+goog.require('org_apache_flex_events_EventDispatcher');
+goog.require('org_apache_flex_html_beads_ListView');
+goog.require('org_apache_flex_html_beads_models_ArraySelectionModel');
+goog.require('org_apache_flex_html_supportClasses_ButtonBarButtonItemRenderer');
+
+
+
+/**
+ * @constructor
+ * @implements {org_apache_flex_core_IDataProviderItemRendererMapper}
+ */
+org_apache_flex_html_beads_DataItemRendererFactoryForArrayData =
+    function() {
+};
+
+
+/**
+ * @expose
+ */
+org_apache_flex_html_beads_DataItemRendererFactoryForArrayData.prototype.itemRendererFactory = null;
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_beads_DataItemRendererFactoryForArrayData.
+    prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'DataItemRendererFactoryForArrayData',
+                qName: 'org_apache_flex_html_beads_DataItemRendererFactoryForArrayData' }],
+      interfaces: [org_apache_flex_core_IDataProviderItemRendererMapper] };
+
+
+/**
+ * @private
+ * @type {Object}
+ */
+org_apache_flex_html_beads_DataItemRendererFactoryForArrayData.
+    prototype.itemRendererClass_ = null;
+
+
+Object.defineProperties(org_apache_flex_html_beads_DataItemRendererFactoryForArrayData.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_beads_DataItemRendererFactoryForArrayData} */
+        set: function(value) {
+            this.strand_ = value;
+
+            this.model = value.getBeadByType(
+                org_apache_flex_html_beads_models_ArraySelectionModel);
+
+            this.listView = value.getBeadByType(
+                org_apache_flex_html_beads_ListView);
+            this.dataGroup = this.listView.dataGroup;
+
+            this.model.addEventListener('dataProviderChanged',
+                goog.bind(this.dataProviderChangedHandler, this));
+
+            if (org_apache_flex_core_ValuesManager.valuesImpl.getValue && !this.itemRendererFactory_) {
+              /**
+               * @type {Function}
+               */
+              var c = /** @type {Function} */ (org_apache_flex_core_ValuesManager.valuesImpl.getValue(this.strand_,
+                  'iItemRendererClassFactory'));
+              this.itemRendererFactory_ = new c();
+              this.strand_.addBead(this.itemRendererFactory_);
+            }
+
+            this.dataProviderChangedHandler(null);
+        }
+    },
+    /** @expose */
+    itemRendererClass: {
+        /** @this {org_apache_flex_html_beads_DataItemRendererFactoryForArrayData} */
+        get: function() {
+            if (org_apache_flex_core_ValuesManager.valuesImpl.getValue && !this.itemRendererClass_) {
+              var c = org_apache_flex_core_ValuesManager.valuesImpl.getValue(this.strand_, 'iItemRenderer');
+              if (c) {
+                this.itemRendererClass_ = c;
+              }
+            }
+            return this.itemRendererClass_;
+        },
+        /** @this {org_apache_flex_html_beads_DataItemRendererFactoryForArrayData} */
+        set: function(value) {
+            this.itemRendererClass_ = value;
+        }
+    }
+});
+
+
+/**
+ * @expose
+ * @param {Object} event The event that triggered the dataProvider change.
+ */
+org_apache_flex_html_beads_DataItemRendererFactoryForArrayData.
+    prototype.dataProviderChangedHandler = function(event) {
+  var dp, i, n, opt;
+
+  this.dataGroup.removeAllElements();
+
+  var presModel = this.strand_.getBeadByType(org_apache_flex_core_IListPresentationModel);
+
+  dp = this.model.dataProvider;
+  if (dp == undefined) return;
+
+  n = dp.length;
+  for (i = 0; i < n; i++) {
+    var ir = this.itemRendererFactory_.createItemRenderer(this.dataGroup);
+    ir.index = i;
+    ir.labelField = this.model.labelField;
+    ir.data = dp[i];
+    if (presModel) ir.height = presModel.rowHeight;
+  }
+
+  var newEvent = new org_apache_flex_events_Event('itemsCreated');
+  this.strand_.dispatchEvent(newEvent);
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/IListView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/IListView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/IListView.js
new file mode 100644
index 0000000..a4d0bf5
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/IListView.js
@@ -0,0 +1,43 @@
+/**
+ * Licensed 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.
+ */
+
+/**
+ * @fileoverview
+ * @suppress {checkTypes}
+ */
+
+goog.provide('org_apache_flex_html_beads_IListView');
+
+goog.require('org_apache_flex_core_IBeadView');
+
+
+
+/**
+ * IListView
+ *
+ * @interface
+ */
+org_apache_flex_html_beads_IListView = function() {
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_beads_IListView.prototype.FLEXJS_CLASS_INFO =
+{ names: [{ name: 'IListView',
+            qName: 'org_apache_flex_html_beads_IListView'}],
+  interfaces: [org_apache_flex_core_IBeadView] };

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageButtonView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageButtonView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageButtonView.js
new file mode 100644
index 0000000..629be37
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageButtonView.js
@@ -0,0 +1,45 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_beads_ImageButtonView');
+
+
+
+/**
+ * @constructor
+ */
+org_apache_flex_html_beads_ImageButtonView = function() {
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_beads_ImageButtonView
+  .prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'ImageButtonView',
+                qName: 'org_apache_flex_html_beads_ImageButtonView'}] };
+
+
+Object.defineProperties(org_apache_flex_html_beads_ImageButtonView.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_beads_ImageButtonView} */
+        set: function(value) {
+            this.strand_ = value;
+        }
+    }
+});

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b677c658/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageView.js
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageView.js b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageView.js
new file mode 100644
index 0000000..8b49822
--- /dev/null
+++ b/frameworks/projects/HTML/js/src/org/apache/flex/html/beads/ImageView.js
@@ -0,0 +1,63 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org_apache_flex_html_beads_ImageView');
+
+
+goog.require('org_apache_flex_html_beads_models_ImageModel');
+
+
+
+/**
+ * @constructor
+ */
+org_apache_flex_html_beads_ImageView = function() {
+};
+
+
+/**
+ * Metadata
+ *
+ * @type {Object.<string, Array.<Object>>}
+ */
+org_apache_flex_html_beads_ImageView
+  .prototype.FLEXJS_CLASS_INFO =
+    { names: [{ name: 'ImageView',
+                qName: 'org_apache_flex_html_beads_ImageView'}] };
+
+
+Object.defineProperties(org_apache_flex_html_beads_ImageView.prototype, {
+    /** @expose */
+    strand: {
+        /** @this {org_apache_flex_html_beads_ImageView} */
+        set: function(value) {
+            this.strand_ = value;
+
+            this.model = value.getBeadByType(
+                org_apache_flex_html_beads_models_ImageModel);
+            this.model.addEventListener('sourceChanged',
+                goog.bind(this.sourceChangeHandler, this));
+        }
+    }
+});
+
+
+/**
+ * @expose
+ * @param {Object} event The event triggered by the source change.
+ */
+org_apache_flex_html_beads_ImageView.prototype.
+    sourceChangeHandler = function(event) {
+  this.strand_.element.src = this.model.source;
+};