Updated Branches: refs/heads/develop d8ceac774 -> 355fdd698
Added DropList and ComboBox to html5 suite. Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/355fdd69 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/355fdd69 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/355fdd69 Branch: refs/heads/develop Commit: 355fdd6988a36f68ed18841a7fac0dcf1699bade Parents: d8ceac7 Author: Peter Ent <[email protected]> Authored: Tue Apr 2 11:41:10 2013 -0400 Committer: Peter Ent <[email protected]> Committed: Tue Apr 2 11:41:10 2013 -0400 ---------------------------------------------------------------------- frameworks/as/defaults.css | 13 + frameworks/as/html5-manifest.xml | 2 + .../apache/flex/html5/staticControls/ComboBox.js | 257 +++++++++++++++ .../flex/html5/staticControls/DropDownList.js | 144 ++++++++ 4 files changed, 416 insertions(+), 0 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/355fdd69/frameworks/as/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/as/defaults.css b/frameworks/as/defaults.css index 38aae49..9d0189e 100644 --- a/frameworks/as/defaults.css +++ b/frameworks/as/defaults.css @@ -101,3 +101,16 @@ h5|List { ISelectionModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel"); } + +h5|DropDownList +{ + ISelectionModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ArraySelectionModel"); + IPopUp: ClassReference("org.apache.flex.html.staticControls.supportClasses.DropDownListList"); +} + +h5|ComboBox +{ + IComboBoxBead: ClassReference("org.apache.flex.html.staticControls.beads.ComboBoxBead"); + IComboBoxModel: ClassReference("org.apache.flex.html.staticControls.beads.models.ComboBoxModel"); + IPopUp: ClassReference("org.apache.flex.html.staticControls.supportClasses.DropDownListList"); +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/355fdd69/frameworks/as/html5-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/as/html5-manifest.xml b/frameworks/as/html5-manifest.xml index 6b43be9..efba2fa 100644 --- a/frameworks/as/html5-manifest.xml +++ b/frameworks/as/html5-manifest.xml @@ -29,5 +29,7 @@ <component id="CheckBox" class="org.apache.flex.html5.staticControls.CheckBox"/> <component id="RadioButton" class="org.apache.flex.html5.staticControls.RadioButton"/> <component id="List" class="org.apache.flex.html5.staticControls.List"/> + <component id="DropDownList" class="org.apache.flex.html5.staticControls.DropDownList"/> + <component id="ComboBox" class="org.apache.flex.html5.staticControls.ComboBox"/> </componentPackage> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/355fdd69/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/ComboBox.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/ComboBox.js b/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/ComboBox.js new file mode 100644 index 0000000..889a9db --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/ComboBox.js @@ -0,0 +1,257 @@ +/** + * 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.html5.staticControls.ComboBox'); + +goog.require('org.apache.flex.core.UIBase'); + + +/** + * @constructor + * @extends {org.apache.flex.core.UIBase} + */ +org.apache.flex.html5.staticControls.ComboBox = function() { + org.apache.flex.core.UIBase.call(this); + + /** + * @private + * @type {Array.<Object>} + */ + this._dataProvider; + this._selectedIndex = -1; +}; +goog.inherits( + org.apache.flex.html5.staticControls.ComboBox, org.apache.flex.core.UIBase +); + + +/** + * @override + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @param {Object} p The parent element. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.addToParent = +function(p) { + this.element = document.createElement('div'); + + var input = document.createElement('input'); + input.style.position = "absolute"; + input.style.width = "80px"; + this.element.appendChild(input); + + var button = document.createElement('div'); + button.style.position = "absolute"; + button.style.top = "0px"; + button.style.right = "0px"; + button.style.background = "#bbb"; + button.style.width = "16px"; + button.style.height = "20px"; + button.style.margin = "0"; + button.style.border = "solid #609 1px"; + button.onclick = org.apache.flex.FlexGlobal.createProxy( + this, this.buttonClicked); + this.element.appendChild(button); + + this.element.style.position = "relative"; + + p.appendChild(this.element); + + this.positioner = this.element; + + // add a click handler to p's parentElement so that a click + // outside of the combo box can dismiss the pop-up should it + // be visible + p.parentElement.onclick = org.apache.flex.FlexGlobal.createProxy( + this, this.dismissPopup); +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.selectChanged = +function(event) { + var select = event.currentTarget; +// var input = this.element.childNodes.item(0); +// input.value = select.value; + this.set_selectedItem(select.value); + + this.popup.parentNode.removeChild(this.popup); + this.popup = null; +}; + + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.dismissPopup = +function(event) { + + // remove the popup if it already exists + if( this.popup ) { + this.popup.parentNode.removeChild(this.popup); + this.popup = null; + } +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.buttonClicked = +function(event) { + + event.stopPropagation(); + + // remove the popup if it already exists + if( this.popup ) { + this.popup.parentNode.removeChild(this.popup); + this.popup = null; + return; + } + + var input = this.element.childNodes.item(0); + + var pn = this.element; + var top = pn.offsetTop + input.offsetHeight; + var left = pn.offsetLeft; + var width = pn.offsetWidth; + + var popup = document.createElement('div'); + popup.className = 'popup'; + popup.id = 'test'; + popup.style.position = "absolute"; + popup.style.top = top.toString() + "px"; + popup.style.left = left.toString() + "px"; + popup.style.width = width.toString() + "px"; + popup.style.margin = "0px auto"; + popup.style.padding = "0px"; + popup.style.zIndex = "10000"; + + var select = document.createElement('select'); + select.style.width = width.toString() + "px"; + select.onchange = org.apache.flex.FlexGlobal.createProxy( + this, this.selectChanged); + var opts = select.options; + + var dp = this._dataProvider; + var n = dp.length; + for (i = 0; i < n; i++) + { + var opt = document.createElement('option'); + opt.text = dp[i]; + opts.add(opt); + } + select.size = n; + if( this._selectedIndex < 0 ) select.value = null; + else select.value = this._dataProvider[this._selectedIndex]; + + this.popup = popup; + + popup.appendChild(select); + document.body.appendChild(popup); + + +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @return {Array.<Object>} The collection of data. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.get_dataProvider = +function() { + return this._dataProvider; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @param {Array.<Object>} value The text setter. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.set_dataProvider = +function(value) { + this._dataProvider = value; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @return {int} The selected index. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.get_selectedIndex = +function() { + return this._selectedIndex; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @param {int} value The selected index. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.set_selectedIndex = +function(value) { + this._selectedIndex = value; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @return {Object} The selected item. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.get_selectedItem = +function() { + if( this._dataProvider == null || this._selectedIndex < 0 || this._selectedIndex >= this._dataProvider.length ) return null; + return this._dataProvider[this._selectedIndex]; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @param {Object} value The selected item. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.set_selectedItem = +function(value) { + + var dp = this._dataProvider; + var n = dp.length; + for (var i = 0; i < n; i++) + { + if (dp[i] == value) + break; + } + if (i < n) { + this._selectedIndex = i; + this.element.childNodes.item(0).value = this._dataProvider[i]; + } +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @return {string} The text getter. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.get_text = function() { + return this.element.childNodes.item(0).value; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.ComboBox} + * @param {string} value The text setter. + */ +org.apache.flex.html5.staticControls.ComboBox.prototype.set_text = function(value) { + this.element.childNodes.item(0).value = value; +}; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/355fdd69/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/DropDownList.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/DropDownList.js b/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/DropDownList.js new file mode 100644 index 0000000..0ae45d0 --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/html5/staticControls/DropDownList.js @@ -0,0 +1,144 @@ +/** + * 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.html5.staticControls.DropDownList'); + +goog.require('org.apache.flex.core.UIBase'); + +/** + * @constructor + * @extends {org.apache.flex.core.UIBase} + */ +org.apache.flex.html5.staticControls.DropDownList = function() { + org.apache.flex.core.UIBase.call(this); + + /** + * @private + * @type {Array.<Object>} + */ + this._dataProvider; + +}; +goog.inherits( + org.apache.flex.html5.staticControls.DropDownList, org.apache.flex.core.UIBase +); + +/** + * @override + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @param {Object} p The parent element. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.addToParent = function(p) { + this.element = document.createElement('select'); + this.element.onchange = org.apache.flex.FlexGlobal.createProxy( + this, this.changeHandler); + + p.appendChild(this.element); + + this.positioner = this.element; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @return {Array.<Object>} The collection of data. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.get_dataProvider = +function() { + return this._dataProvider; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @param {Array.<Object>} value The text setter. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.set_dataProvider = +function(value) { + this._dataProvider = value; + + var dp = this.element.options; + var n = dp.length; + for (var i = 0; i < n; i++) + dp.remove(0); + + n = value.length; + for (i = 0; i < n; i++) + { + var opt = document.createElement('option'); + opt.text = value[i]; + dp.add(opt); + } +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @return {int} The selected index. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.get_selectedIndex = +function() { + return this.element.selectedIndex; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @param {int} value The selected index. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.set_selectedIndex = +function(value) { + this.element.selectedIndex = value; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @return {Object} The selected item. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.get_selectedItem = +function() { + return this._dataProvider[this.element.selectedIndex]; +}; + +/** + * @expose + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @param {Object} value The selected item. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.set_selectedItem = +function(value) { + + var dp = this._dataProvider; + var n = dp.length; + for (var i = 0; i < n; i++) + { + if (dp[i] == value) + break; + } + if (i < n) + this.element.selectedIndex = i; +}; + +/** + * @protected + * @this {org.apache.flex.html5.staticControls.DropDownList} + * @return {Object} The selected item. + */ +org.apache.flex.html5.staticControls.DropDownList.prototype.changeHandler = +function() { + evt = this.createEvent('change'); + this.dispatchEvent(evt); +}; +
