Repository: flex-asjs Updated Branches: refs/heads/develop 0b65a29a4 -> 7749741e9
FormLayout/VerticalColumnLayout with an example Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/7749741e Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/7749741e Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/7749741e Branch: refs/heads/develop Commit: 7749741e96a418f7406fa60d2df129210a72c5ac Parents: 0b65a29 Author: Alex Harui <[email protected]> Authored: Tue May 20 13:41:14 2014 -0700 Committer: Alex Harui <[email protected]> Committed: Tue May 20 13:41:28 2014 -0700 ---------------------------------------------------------------------- examples/FormExample/build.xml | 51 +++++++ examples/FormExample/src/FormExample.mxml | 33 ++++ examples/FormExample/src/MyFormView.mxml | 73 +++++++++ .../as/projects/FlexJSJX/basic-manifest.xml | 2 + .../html/beads/layouts/VerticalColumnLayout.as | 151 +++++++++++++++++++ .../org/apache/flex/core/IMeasurementBead.js | 38 +++++ .../FlexJS/src/org/apache/flex/core/UIBase.js | 10 +- .../src/org/apache/flex/html/Container.js | 14 +- .../js/FlexJS/src/org/apache/flex/html/Label.js | 2 +- 9 files changed, 370 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/examples/FormExample/build.xml ---------------------------------------------------------------------- diff --git a/examples/FormExample/build.xml b/examples/FormExample/build.xml new file mode 100644 index 0000000..141ebc1 --- /dev/null +++ b/examples/FormExample/build.xml @@ -0,0 +1,51 @@ +<?xml version="1.0"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<project name="formexample" default="main" basedir="."> + <property name="FLEXJS_HOME" location="../.."/> + <property name="example" value="FormExample" /> + + <property file="${FLEXJS_HOME}/env.properties"/> + <property environment="env"/> + <property file="${FLEXJS_HOME}/build.properties"/> + <property name="FLEX_HOME" value="${FLEXJS_HOME}"/> + <property name="FALCON_HOME" value="${env.FALCON_HOME}"/> + <property name="FALCONJX_HOME" value="${env.FALCONJX_HOME}"/> + <property name="GOOG_HOME" value="${env.GOOG_HOME}"/> + + <include file="${basedir}/../build_example.xml" /> + + <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}"> + </target> + <!-- Uncomment to reproduce cross-compilation error in compilejs step + <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}"> + </target> + --> + + <target name="clean"> + <delete dir="${basedir}/bin" failonerror="false" /> + <delete dir="${basedir}/bin-debug" failonerror="false" /> + <delete dir="${basedir}/bin-release" failonerror="false" /> + </target> + + + +</project> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/examples/FormExample/src/FormExample.mxml ---------------------------------------------------------------------- diff --git a/examples/FormExample/src/FormExample.mxml b/examples/FormExample/src/FormExample.mxml new file mode 100644 index 0000000..0664147 --- /dev/null +++ b/examples/FormExample/src/FormExample.mxml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<!--- +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +--> +<basic:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:local="*" + xmlns:models="models.*" + xmlns:basic="library://ns.apache.org/flexjs/basic" + > + + <basic:valuesImpl> + <basic:SimpleCSSValuesImpl /> + </basic:valuesImpl> + <basic:initialView> + <local:MyFormView /> + </basic:initialView> +</basic:Application> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/examples/FormExample/src/MyFormView.mxml ---------------------------------------------------------------------- diff --git a/examples/FormExample/src/MyFormView.mxml b/examples/FormExample/src/MyFormView.mxml new file mode 100644 index 0000000..26c64dd --- /dev/null +++ b/examples/FormExample/src/MyFormView.mxml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +--> +<basic:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:basic="library://ns.apache.org/flexjs/basic" + xmlns:local="*" + xmlns:models="models.*" + xmlns:acc="org.apache.flex.html.accessories.*"> + + <fx:Style> + .title { + font-size: 14pt; + font-weight: bold; + } + + </fx:Style> + + <fx:Script> + <![CDATA[ + import org.apache.flex.core.IPopUpHost; + import org.apache.flex.events.Event; + import org.apache.flex.utils.UIUtils; + + ]]> + </fx:Script> + + <basic:Container width="600" height="700" x="50" y="50"> + <basic:beads> + <basic:NonVirtualVerticalLayout /> + </basic:beads> + + <basic:Label text="Loan Form" className="title" /> + + <basic:Container width="500"> + <basic:beads> + <basic:VerticalColumnLayout numColumns="2" /> + </basic:beads> + <basic:Label text="Name:" /> + <basic:TextInput id="nameField" /> + <basic:Label text="Age:" /> + <basic:TextInput id="ageField"> + <basic:beads> + <basic:NumericOnlyTextInputBead /> + </basic:beads> + </basic:TextInput> + <basic:Label text="Phone Number:" /> + <basic:TextInput id="phoneField" > + </basic:TextInput> + <basic:Label text="Date of Loan:" /> + <basic:DateField id="dateOfLoan"/> + <basic:Label text="Loan Amount:" /> + <basic:TextInput id="loanAmount"> + </basic:TextInput> + </basic:Container> + </basic:Container> + +</basic:ViewBase> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/frameworks/as/projects/FlexJSJX/basic-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSJX/basic-manifest.xml b/frameworks/as/projects/FlexJSJX/basic-manifest.xml index 6117517..62e663b 100644 --- a/frameworks/as/projects/FlexJSJX/basic-manifest.xml +++ b/frameworks/as/projects/FlexJSJX/basic-manifest.xml @@ -34,5 +34,7 @@ <component id="BarChartSeries" class="org.apache.flex.charts.supportClasses.BarChartSeries" /> <component id="BoxItemRenderer" class="org.apache.flex.charts.supportClasses.BoxItemRenderer" /> <component id="XAxisBead" class="org.apache.flex.charts.beads.XAxisBead" /> + + <component id="VerticalColumnLayout" class="org.apache.flex.html.beads.layouts.VerticalColumnLayout" /> </componentPackage> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/frameworks/as/projects/FlexJSJX/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSJX/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as new file mode 100644 index 0000000..d4b801b --- /dev/null +++ b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as @@ -0,0 +1,151 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.html.beads.layouts +{ + import org.apache.flex.core.IBeadLayout; + import org.apache.flex.core.IMeasurementBead; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.IContainer; + import org.apache.flex.core.IUIBase; + import org.apache.flex.core.UIBase; + import org.apache.flex.events.Event; + import org.apache.flex.events.IEventDispatcher; + + /** + * ColumnLayout is a class that organizes the positioning of children + * of a container into a set of columns where each column's width is set to + * the maximum size of all of the children in that column. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class VerticalColumnLayout implements IBeadLayout + { + /** + * constructor + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function VerticalColumnLayout() + { + } + + private var _strand:IStrand; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function set strand(value:IStrand):void + { + _strand = value; + IEventDispatcher(value).addEventListener("widthChanged", changeHandler); + IEventDispatcher(value).addEventListener("heightChanged", changeHandler); + IEventDispatcher(value).addEventListener("childrenAdded", changeHandler); + } + + + private var _numColumns:int; + + /** + * The number of columns. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get numColumns():int + { + return _numColumns; + } + public function set numColumns(value:int):void + { + _numColumns = value; + } + + /** + * @private + */ + private function changeHandler(event:Event):void + { + var sw:Number = UIBase(_strand).width; + var sh:Number = UIBase(_strand).height; + + var e:IUIBase; + var i:int; + var col:int = 0; + var columns:Array = []; + for (i = 0; i < numColumns; i++) + columns[i] = 0; + + var children:Array = IContainer(_strand).getChildren(); + var n:int = children.length; + + // determine max widths of columns + for (i = 0; i < n; i++) { + e = children[i]; + var thisPrefWidth:int = 0; + if (e is IStrand) + { + var mb:IMeasurementBead = e.getBeadByType(IMeasurementBead) as IMeasurementBead; + if (mb) + thisPrefWidth = mb.measuredWidth; + else + thisPrefWidth = e.width; + } + else + thisPrefWidth = e.width; + + columns[col] = Math.max(columns[col], thisPrefWidth); + col = (col + 1) % numColumns; + } + + var curx:int = 0; + var cury:int = 0; + var maxHeight:int = 0; + col = 0; + for (i = 0; i < n; i++) { + e = children[i]; + e.x = curx; + e.y = cury; + curx += columns[col++]; + maxHeight = Math.max(e.height, maxHeight); + if (col == numColumns) + { + cury += maxHeight; + maxHeight = 0; + col = 0; + curx = 0; + } + } + + IEventDispatcher(_strand).dispatchEvent(new Event("layoutComplete")); + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/frameworks/js/FlexJS/src/org/apache/flex/core/IMeasurementBead.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IMeasurementBead.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IMeasurementBead.js new file mode 100644 index 0000000..46b58f3 --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IMeasurementBead.js @@ -0,0 +1,38 @@ +/** + * 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.core.IMeasurementBead'); + + + +/** + * @interface + */ +org.apache.flex.core.IMeasurementBead = function() { +}; + + +/** + * Metadata + * + * @type {Object.<string, Array.<Object>>} + */ +org.apache.flex.core.IMeasurementBead.prototype.FLEXJS_CLASS_INFO = + { names: [{ name: 'IMeasurementBead', + qName: 'org.apache.flex.core.IMeasurementBead' }] }; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js b/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js index 41b9073..1f0b6e4 100644 --- a/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js +++ b/frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js @@ -334,8 +334,11 @@ org.apache.flex.core.UIBase.prototype.set_width = function(pixels) { * @return {number} The width of the object in pixels. */ org.apache.flex.core.UIBase.prototype.get_width = function() { + var pixels; var strpixels = this.positioner.style.width; - var pixels = parseFloat(strpixels); + pixels = parseFloat(strpixels); + if (isNaN(pixels)) + pixels = this.positioner.offsetWidth; return pixels; }; @@ -355,8 +358,11 @@ org.apache.flex.core.UIBase.prototype.set_height = function(pixels) { * @return {number} The height of the object in pixels. */ org.apache.flex.core.UIBase.prototype.get_height = function() { + var pixels; var strpixels = this.positioner.style.height; - var pixels = parseFloat(strpixels); + pixels = parseFloat(strpixels); + if (isNaN(pixels)) + pixels = this.positioner.offsetHeight; return pixels; }; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/frameworks/js/FlexJS/src/org/apache/flex/html/Container.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/Container.js b/frameworks/js/FlexJS/src/org/apache/flex/html/Container.js index baf82e3..4a0d9c2 100644 --- a/frameworks/js/FlexJS/src/org/apache/flex/html/Container.js +++ b/frameworks/js/FlexJS/src/org/apache/flex/html/Container.js @@ -52,6 +52,11 @@ org.apache.flex.html.Container.prototype.createElement = this.element = document.createElement('div'); this.positioner = this.element; + // absolute positioned children need a non-null + // position value in the parent. It might + // get set to 'absolute' if the container is + // also absolutely positioned + this.positioner.style.position = 'relative'; this.element.flexjs_wrapper = this; return this.element; @@ -91,6 +96,13 @@ org.apache.flex.html.Container.prototype.internalChildren = * @return {Array} All of the children of the container. */ org.apache.flex.html.Container.prototype.getChildren = function() { - return this.element.children; + var arr = this.element.children; + var comparr = []; + var n = arr.length; + for (var i = 0; i < n; i++) + { + comparr.push(arr[i].flexjs_wrapper); + } + return comparr; }; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7749741e/frameworks/js/FlexJS/src/org/apache/flex/html/Label.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/Label.js b/frameworks/js/FlexJS/src/org/apache/flex/html/Label.js index 1870d7e..9728f69 100644 --- a/frameworks/js/FlexJS/src/org/apache/flex/html/Label.js +++ b/frameworks/js/FlexJS/src/org/apache/flex/html/Label.js @@ -25,7 +25,7 @@ goog.require('org.apache.flex.core.UIBase'); org.apache.flex.html.Label = function() { goog.base(this); - this.element = document.createElement('div'); + this.element = document.createElement('span'); this.positioner = this.element; this.element.flexjs_wrapper = this; };
