This is an automated email from the ASF dual-hosted git repository.
pent pushed a commit to branch feature/MXRoyale
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/MXRoyale by this push:
new ad238ff Updated Image and Button to handle async loading of image
sources. Updated layouts and base component classes.
ad238ff is described below
commit ad238ffbb35fedc7041b5ca7c65ad0e91dc10d1d
Author: Peter Ent <[email protected]>
AuthorDate: Mon Mar 19 10:25:32 2018 -0400
Updated Image and Button to handle async loading of image sources. Updated
layouts and base component classes.
---
.../src/main/resources/mx-royale-manifest.xml | 8 +-
.../MXRoyale/src/main/royale/MXRoyaleClasses.as | 1 +
.../MXRoyale/src/main/royale/mx/containers/Box.as | 2 +
.../MXRoyale/src/main/royale/mx/containers/HBox.as | 1 +
.../MXRoyale/src/main/royale/mx/containers/VBox.as | 1 +
.../main/royale/mx/containers/beads/BasicLayout.as | 111 +++++++++++++++++++++
.../main/royale/mx/containers/beads/BoxLayout.as | 45 +++++++--
.../MXRoyale/src/main/royale/mx/controls/Button.as | 59 +++++++++--
.../MXRoyale/src/main/royale/mx/controls/Image.as | 33 ++++++
.../MXRoyale/src/main/royale/mx/core/Container.as | 3 +-
.../src/main/royale/mx/core/UIComponent.as | 24 +++--
11 files changed, 262 insertions(+), 26 deletions(-)
diff --git
a/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
b/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
index c1219f1..ad1a1de 100644
--- a/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
+++ b/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
@@ -33,8 +33,10 @@
<component id="Box" class="mx.containers.Box" />
<component id="Container" class="mx.core.Container" />
<component id="HBox" class="mx.containers.HBox" />
- <component id="VBox" class="mx.containers.VBox" />
-
+ <component id="VBox" class="mx.containers.VBox" />
+ <component id="BasicLayout" class="mx.containers.beads.BasicLayout" />
+ <component id="BoxLayout" class="mx.containers.beads.BoxLayout" />
+
<component id="State" class="mx.states.State" />
-
+
</componentPackage>
diff --git a/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
b/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
index ef760d6..75194bd 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/MXRoyaleClasses.as
@@ -29,6 +29,7 @@ internal class MXRoyaleClasses
{
import mx.core.UIComponent; UIComponent;
import mx.core.Container; Container;
+ import mx.containers.beads.BasicLayout; BasicLayout;
import mx.containers.beads.BoxLayout; BoxLayout;
}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/Box.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/Box.as
index a526a74..cbecd04 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/Box.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/Box.as
@@ -135,6 +135,8 @@ public class Box extends Container
{
super();
+ // For Flex compatibility, the BoxLayout is immediately created
and added
+ // rather than being loaded from a style
_layout = new BoxLayout();
_layout.direction = _direction;
addBead(_layout);
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/HBox.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/HBox.as
index 4374e05..202eeaa 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/HBox.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/HBox.as
@@ -91,6 +91,7 @@ public class HBox extends Box
public function HBox()
{
super();
+ typeNames = "HBox";
super.direction = BoxDirection.HORIZONTAL;
}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/VBox.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/VBox.as
index 0278848..dee53b9 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/VBox.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/VBox.as
@@ -88,6 +88,7 @@ public class VBox extends Box
public function VBox()
{
super();
+ typeNames = "VBox";
super.direction = BoxDirection.VERTICAL;
}
diff --git
a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BasicLayout.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BasicLayout.as
new file mode 100644
index 0000000..8606de9
--- /dev/null
+++
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BasicLayout.as
@@ -0,0 +1,111 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 mx.containers.beads
+{
+ import mx.core.Container;
+ import mx.core.EdgeMetrics;
+ import mx.core.IUIComponent;
+
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.LayoutBase;
+
+ public class BasicLayout extends LayoutBase
+ {
+ public function BasicLayout()
+ {
+ super();
+ }
+
+
//--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+
//--------------------------------------------------------------------------
+
+ private var _strand:IStrand;
+
+ override public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ _target = value as Container;
+ super.strand = value;
+
+ }
+
+ private var _target:Container;
+
+ public function get target():Container
+ {
+ return _target;
+ }
+
+ public function set target(value:Container):void
+ {
+ _target = value;
+ }
+
+ override public function layout():Boolean
+ {
+ var testWidth:Number =
target.getExplicitOrMeasuredWidth();
+ var testHeight:Number =
target.getExplicitOrMeasuredHeight();
+ trace("Before layout: width="+testWidth+";
height="+testHeight);
+ if (updateDisplayList(target.width, target.height)) {
+ testWidth = target.getExplicitOrMeasuredWidth();
+ testHeight =
target.getExplicitOrMeasuredHeight();
+ //??? target.setActualSize(testWidth,
testHeight);
+ trace("After layout: width="+target.width+";
height="+target.height);
+
+ }
+ return true;
+ }
+
+ /**
+ * @private
+ * Lay out the children using their x, y positions
+ */
+ public function updateDisplayList(unscaledWidth:Number,
+
unscaledHeight:Number):Boolean
+ {
+ var n:int = target.numChildren;
+ if (n == 0)
+ return false;
+
+ COMPILE::JS {
+ if (target.positioner.style.position !=
'absolute' || target.positioner.style.position != 'relative') {
+ target.positioner.style.position =
'relative';
+ }
+ }
+
+ var i:int;
+ var obj:Object;
+
+ for(i=0; i < n; i++) {
+ obj = target.getLayoutChildAt(i);
+ if (obj.includeInLayout) {
+ COMPILE::JS {
+ obj.positioner.style.position =
'absolute';
+ }
+ }
+ }
+
+ return true;
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BoxLayout.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BoxLayout.as
index ab72b70..77c9e2b 100644
---
a/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BoxLayout.as
+++
b/frameworks/projects/MXRoyale/src/main/royale/mx/containers/beads/BoxLayout.as
@@ -22,12 +22,14 @@ package mx.containers.beads
import mx.containers.BoxDirection;
import mx.containers.utilityClasses.Flex;
+ import mx.controls.Image;
import mx.core.Container;
import mx.core.EdgeMetrics;
import mx.core.IUIComponent;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.LayoutBase;
+ import org.apache.royale.core.UIBase;
//import mx.core.mx_internal;
//import mx.core.ScrollPolicy;
@@ -96,7 +98,17 @@ package mx.containers.beads
/**
* @private
*/
- public var direction:String = BoxDirection.VERTICAL;
+ private var _direction:String = BoxDirection.VERTICAL;
+
+ public function get direction():String
+ {
+ return _direction;
+ }
+
+ public function set direction(value:String):void
+ {
+ _direction = value;
+ }
//--------------------------------------------------------------------------
//
@@ -130,6 +142,12 @@ package mx.containers.beads
continue;
}
+ COMPILE::JS {
+ if (child is Image) {
+ trace("measure.image.complete: "+(child
as Image).complete);
+ }
+ }
+
var wPref:Number =
child.getExplicitOrMeasuredWidth();
var hPref:Number =
child.getExplicitOrMeasuredHeight();
@@ -169,15 +187,20 @@ package mx.containers.beads
target.measuredWidth = preferredWidth + wPadding;
target.measuredHeight = preferredHeight + hPadding;
-
- // do this too??
- target.width = target.measuredWidth;
- target.height = target.measuredHeight;
}
override public function layout():Boolean
{
- updateDisplayList(target.width, target.height);
+ var testWidth:Number =
target.getExplicitOrMeasuredWidth();
+ var testHeight:Number =
target.getExplicitOrMeasuredHeight();
+ trace("Before layout: width="+testWidth+";
height="+testHeight);
+ if (updateDisplayList(target.width, target.height)) {
+ testWidth = target.getExplicitOrMeasuredWidth();
+ testHeight =
target.getExplicitOrMeasuredHeight();
+ //??? target.setActualSize(testWidth, testHeight);
+ trace("After layout: width="+target.width+";
height="+target.height);
+
+ }
return true;
}
@@ -186,11 +209,11 @@ package mx.containers.beads
* Lay out children as per Box layout rules.
*/
public function updateDisplayList(unscaledWidth:Number,
-
unscaledHeight:Number):void
+
unscaledHeight:Number):Boolean
{
var n:int = target.numChildren;
if (n == 0)
- return;
+ return false;
var vm:EdgeMetrics = target.viewMetricsAndPadding;
@@ -326,7 +349,7 @@ package mx.containers.beads
if (obj.includeInLayout)
top += obj.height + gap;
COMPILE::JS {
- obj.element.style.position =
'absolute';
+ obj.positioner.style.position =
'absolute';
}
}
}
@@ -368,10 +391,12 @@ package mx.containers.beads
if (obj.includeInLayout)
left += obj.width + gap;
COMPILE::JS {
- obj.element.style.position =
'absolute';
+ obj.positioner.style.position =
'absolute';
}
}
}
+
+ return true;
}
//--------------------------------------------------------------------------
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
index cc1a71b..dc24ce5 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
@@ -23,6 +23,7 @@ COMPILE::JS
{
import goog.DEBUG;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.BrowserEvent;
import org.apache.royale.html.util.addElementToWrapper;
}
import mx.controls.listClasses.BaseListData;
@@ -576,6 +577,12 @@ public class Button extends UIComponent implements
IDataRenderer
// internal
//----------------------------------
+ COMPILE::JS
+ private var imagePart:HTMLImageElement;
+
+ COMPILE::JS
+ private var labelPart:HTMLSpanElement;
+
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
@@ -584,6 +591,7 @@ public class Button extends UIComponent implements
IDataRenderer
{
addElementToWrapper(this,'button');
element.setAttribute('type', 'button');
+
return element;
}
@@ -592,13 +600,52 @@ public class Button extends UIComponent implements
IDataRenderer
COMPILE::JS
protected function setInnerHTML():void
{
- var inner:String = '';
- if (icon != null)
- inner += "<img src='" + icon + "'/>";
- inner += ' ';
- inner += label;
- element.innerHTML = inner;
+ if (label != null) {
+ if (labelPart == null) {
+ var lbl:HTMLSpanElement =
document.createElement('span') as HTMLSpanElement;
+ labelPart = lbl;
+ element.appendChild(lbl);
+ }
+ labelPart.innerHTML = label;
+ }
+ if (icon != null) {
+ if (imagePart == null) {
+ var img:HTMLImageElement =
document.createElement('img') as HTMLImageElement;
+ img.addEventListener("load", handleImageLoaded);
+ if (labelPart)
element.insertBefore(img,labelPart);
+ else element.appendChild(img);
+ imagePart = img;
+ }
+ img.src = icon;
+ }
};
+
+ COMPILE::JS
+ private function handleImageLoaded(event:BrowserEvent):void
+ {
+ measuredWidth = imagePart.naturalWidth + labelPart.offsetWidth
+ 2;
+ measuredHeight = Math.max(imagePart.naturalHeight,
labelPart.offsetHeight);
+
+ if (imagePart) {
+ imagePart.style.position = 'absolute';
+ imagePart.style.top = '0px';
+ imagePart.style.left = '0px';
+ }
+ if (labelPart) {
+ labelPart.style.position = 'absolute';
+ labelPart.style.lineHeight = String(measuredHeight) +
'px';
+ labelPart.style.verticalAlign = 'middle';
+ labelPart.style.top = '0px';
+ labelPart.style.left = String(imagePart ?
imagePart.naturalWidth + 2 : 0) + 'px';
+ }
+
+ setActualSize(measuredWidth, measuredHeight);
+
+ dispatchEvent(new Event("complete"));
+
+ var newEvent:Event = new Event("layoutNeeded",true);
+ dispatchEvent(newEvent);
+ }
}
}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Image.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Image.as
index 21ff753..902c811 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Image.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Image.as
@@ -27,6 +27,7 @@ import org.apache.royale.core.IImage;
import org.apache.royale.core.IImageModel;
COMPILE::JS {
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.BrowserEvent;
import org.apache.royale.html.util.addElementToWrapper;
}
import mx.core.UIComponent;
@@ -40,6 +41,8 @@ import mx.core.IDataRenderer;
import mx.core.mx_internal;
*/
import mx.events.FlexEvent;
+import org.apache.royale.events.Event;
+
/*
use namespace mx_internal;
@@ -192,6 +195,12 @@ public class Image extends UIComponent
// Overridden properties
//
//--------------------------------------------------------------------------
+
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+ trace("Image.addedToParent called:
"+getExplicitOrMeasuredWidth()+" x "+getExplicitOrMeasuredHeight());
+ }
//----------------------------------
// source
@@ -242,8 +251,32 @@ public class Image extends UIComponent
COMPILE::JS
public function applyImageData(binaryDataAsString:String):void
{
+ element.addEventListener("load", handleImageLoaded);
(element as HTMLImageElement).src = binaryDataAsString;
}
+
+ COMPILE::JS
+ public function get complete():Boolean
+ {
+ return (element as HTMLImageElement).complete;
+ }
+
+ COMPILE::JS
+ private function handleImageLoaded(event:BrowserEvent):void
+ {
+ trace("The image src "+src+" is now loaded");
+
+ trace("Image offset size is: "+(element as
HTMLImageElement).naturalWidth+" x "+(element as
HTMLImageElement).naturalHeight);
+ // should we now set the image's measured sizes?
+ measuredWidth = (element as HTMLImageElement).naturalWidth;
+ measuredHeight = (element as HTMLImageElement).naturalHeight;
+ setActualSize(measuredWidth, measuredHeight);
+
+ dispatchEvent(new Event("complete"));
+
+ var newEvent:Event = new Event("layoutNeeded",true);
+ dispatchEvent(newEvent);
+ }
//--------------------------------------------------------------------------
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/core/Container.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/core/Container.as
index 056d6e4..5565ac5 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/core/Container.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/core/Container.as
@@ -491,7 +491,8 @@ public class Container extends UIComponent
}
// Load the layout bead if it hasn't already been loaded.
- loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this);
+ if (loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this))
+ dispatchEvent(new Event("layoutNeeded"));
}
/**
diff --git
a/frameworks/projects/MXRoyale/src/main/royale/mx/core/UIComponent.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/core/UIComponent.as
index 2c595a9..760e555 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/core/UIComponent.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/core/UIComponent.as
@@ -918,7 +918,7 @@ public class UIComponent extends UIBase
* @private
* Storage for the measuredWidth property.
*/
- private var _measuredWidth:Number = 0;
+ private var _measuredWidth:Number = Number.NaN;
[Inspectable(environment="none")]
@@ -933,7 +933,14 @@ public class UIComponent extends UIBase
*/
public function get measuredWidth():Number
{
- if (_measuredWidth == 0 && width > 0) return width;
+ COMPILE::SWF {
+ if (isNaN(_measuredWidth)) return width;
+ }
+ COMPILE::JS {
+ if (isNaN(_measuredWidth)) {
+ return this.positioner.offsetWidth;
+ }
+ }
return _measuredWidth;
}
@@ -953,7 +960,7 @@ public class UIComponent extends UIBase
* @private
* Storage for the measuredHeight property.
*/
- private var _measuredHeight:Number = 0;
+ private var _measuredHeight:Number = Number.NaN;
[Inspectable(environment="none")]
@@ -968,7 +975,14 @@ public class UIComponent extends UIBase
*/
public function get measuredHeight():Number
{
- if (_measuredHeight == 0 && height > 0) return height;
+ COMPILE::SWF {
+ if (isNaN(_measuredHeight)) return height;
+ }
+ COMPILE::JS {
+ if (isNaN(_measuredHeight)) {
+ return this.positioner.offsetHeight;
+ }
+ }
return _measuredHeight;
}
@@ -3018,8 +3032,6 @@ public class UIComponent extends UIBase
*/
public function move(x:Number, y:Number):void
{
- //if (GOOG::DEBUG)
- // trace("move not implemented");
this.x = x;
this.y = y;
}
--
To stop receiving notification emails like this one, please contact
[email protected].
