You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/15 10:36:43 UTC
[royale-asjs] 11/12: Added HorizontalLayoutWithPaddingAndGap and
VerticalLayoutWithPaddingAndGap using CSS,
but gaps and padding are still in inline style, what can be ok,
but can't be modified at runtime, this must be revisited some time later
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit d07d7615c82cb51c967e469da14876f0dc86bfc7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 14 16:44:54 2018 +0100
Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later
---
.../src/main/royale/ButtonPlayGround.mxml | 19 +--
frameworks/projects/Jewel/pom.xml | 6 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 +
...Gap.as => HorizontalLayoutWithPaddingAndGap.as} | 174 +++++++++------------
.../royale/jewel/beads/layouts/VerticalLayout.as | 4 +-
.../layouts/VerticalLayoutWithPaddingAndGap.as | 37 +----
7 files changed, 90 insertions(+), 152 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index fd5f879..f89ecaa 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -32,7 +32,7 @@ limitations under the License.
</fx:Script>
<js:beads>
- <js:VerticalLayoutWithPaddingAndGap gap="10"/>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
<j:Label text="Basic"/>
@@ -41,31 +41,22 @@ limitations under the License.
<j:Label text="Jewel Button"/>
<j:Button primary="true"/>
-
<j:Label text="Jewel TextButton"/>
-
- <j:TextButton text="DEFAULT"/>
-
+ <j:TextButton text="Default"/>
<j:TextButton text="Button With More Text"/>
-
- <j:TextButton text="PRIMARY" primary="true"/>
-
- <j:TextButton text="SECONDARY" secondary="true"/>
-
- <j:TextButton text="EMPHASIZED" emphasized="true"/>
-
+ <j:TextButton text="Primary" primary="true"/>
+ <j:TextButton text="Secondary" secondary="true"/>
+ <j:TextButton text="Emphasized" emphasized="true"/>
<j:TextButton text="Disabled" primary="true">
<j:beads>
<j:Disabled/>
</j:beads>
</j:TextButton>
-
<j:Label text="Jewel Button Sizing (respect min values)"/>
<j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
valueChange="onValueChange(event)"/>
<j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
valueChange="onValueChange(event)"/>
-
<j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 53fb1fc..e7de6c2 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -60,10 +60,10 @@
<name>defaults.css</name>
<path>../src/main/resources/defaults.css</path>
</include-file>
- <!-- <include-file>
- <name>jewel.css</name>
+ <include-file>
+ <name>jewel-framework.css</name>
<path>../src/main/resources/jewel-framework.css</path>
- </include-file> -->
+ </include-file>
</includeFiles>
<includeLookupOnly>true</includeLookupOnly>
<!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 96b6b31..b57f9a2 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -33,6 +33,7 @@
<component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
<component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+ <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
<component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index b2dfb99..547acc3 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -41,6 +41,7 @@ package
import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap;
import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
similarity index 62%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
index f941993..95b689d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
@@ -21,47 +21,39 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
- import org.apache.royale.utils.CSSUtils;
-
- /**
- * The VerticalLayoutWithPaddingAndGap class is a simple layout
- * bead similar to VerticalLayout, but it adds support for
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The HorizontalLayoutWithPaddingAndGap class is a simple layout
+ * bead similar to HorizontalLayout, but it adds support for
* padding and gap values.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
{
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function VerticalLayoutWithPaddingAndGap()
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function HorizontalLayoutWithPaddingAndGap()
{
super();
}
@@ -196,20 +188,16 @@ package org.apache.royale.jewel.beads.layouts
_gap = value;
}
- /**
- * Layout children vertically
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- * @royaleignorecoercion org.apache.royale.core.ILayoutHost
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
- */
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+ */
override public function layout():Boolean
{
- COMPILE::SWF
- {
+ COMPILE::SWF
+ {
var contentView:ILayoutView = layoutView;
var n:Number = contentView.numElements;
@@ -228,7 +216,7 @@ package org.apache.royale.jewel.beads.layouts
var paddingMetrics:EdgeData = new EdgeData();
paddingMetrics.left = _paddingLeft;
- paddingMetrics.top = _paddingTop;
+ paddingMetrics.top = _paddingTop;
paddingMetrics.right = _paddingRight;
paddingMetrics.bottom = _paddingBottom;
var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
@@ -250,92 +238,74 @@ package org.apache.royale.jewel.beads.layouts
ilc = child as ILayoutChild;
- var childXpos:Number = xpos; // default x position
+ var childYpos:Number = ypos; // default y position
- if (!hostWidthSizedToContent) {
- var childWidth:Number = child.width;
- if (ilc != null && !isNaN(ilc.percentWidth)) {
- childWidth = hostWidth * ilc.percentWidth/100.0;
- ilc.setWidth(childWidth);
+ if (!hostHeightSizedToContent) {
+ var childHeight:Number = child.height;
+ if (ilc != null && !isNaN(ilc.percentHeight)) {
+ childHeight = hostHeight * ilc.percentHeight/100.0;
+ ilc.setHeight(childHeight);
}
- // the following code center-aligns the child, but since HTML does not
- // do this normally, this code is commented. (Use VerticalFlexLayout for
- // horizontally centered elements in a vertical column).
- // childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
+ // the following code middle-aligns the child, but since HTML does not
+ // do this normally, this code is commented. (Use HorizontalFlexLayout for
+ // vertically centered elements in a horizontal row).
+// childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
}
if (ilc) {
- ilc.setX(childXpos);
- ilc.setY(ypos);
+ ilc.setX(xpos);
+ ilc.setY(childYpos);
- if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
- var newHeight:Number = hostHeight * ilc.percentHeight / 100;
- ilc.setHeight(newHeight);
+ if (!hostWidthSizedToContent && !isNaN(ilc.percentWidth)) {
+ var newWidth:Number = hostWidth * ilc.percentWidth / 100;
+ ilc.setWidth(newWidth);
}
} else {
- child.x = childXpos;
- child.y = ypos;
+ child.x = xpos;
+ child.y = childYpos;
}
- ypos += child.height + _gap;
+ xpos += child.width + _gap;
}
return true;
- }
- COMPILE::JS
- {
- var children:Array;
- var i:int;
- var n:int;
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.style["vertical-align"] = "top";
-
- children = contentView.internalChildren();
- n = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i];
-
- child.className += " vertical-layout-padding-gap";
+ }
+ COMPILE::JS
+ {
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.classList.add("layout", "horizontal");
- /*if(i == 0)
- {
- child.style.marginTop = _paddingTop + 'px';
- }
- else
- {
- child.style.marginTop = _gap + 'px';
- }
- child.style.marginRight = _paddingRight + 'px';
+ var children:Array = contentView.internalChildren();
+ var i:int;
+ var n:int = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ if (child == null) continue;
+ child.style.marginTop = _paddingTop + 'px';
if(i === (n - 1))
{
- child.style.marginBottom = _paddingBottom + 'px';
+ child.style.marginRight = _paddingRight + 'px';
}
else
{
- child.style.marginBottom = '0px';
+ child.style.marginRight = '0px';
}
- child.style.marginLeft = _paddingLeft + 'px';
- child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
+ child.style.marginBottom = _paddingBottom + 'px';
+ if(i == 0)
{
- child.royale_wrapper.setDisplayStyleForLayout('block');
+ child.style.marginLeft = _paddingLeft + 'px';
}
else
{
- // block elements don't measure width correctly so set to inline for a second
- child.style.display = 'inline-block';
- child.style.display = 'block';
- }
- */
- child.royale_wrapper.dispatchEvent('sizeChanged');
+ child.style.marginLeft = _gap + 'px';
+ }
}
- return true;
- }
+ return true;
+ }
}
-
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index cc217c2..947a7de 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -153,10 +153,8 @@ package org.apache.royale.jewel.beads.layouts
contentView.element.classList.add("layout", "vertical");
var children:Array = contentView.internalChildren();
- n = children.length;
-
var i:int;
- var n:int;
+ var n:int = children.length;
for (i = 0; i < n; i++)
{
var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
index f941993..ed602a2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -21,14 +21,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
@@ -36,10 +33,6 @@ package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.WrappedHTMLElement;
}
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
- import org.apache.royale.utils.CSSUtils;
/**
* The VerticalLayoutWithPaddingAndGap class is a simple layout
@@ -285,22 +278,17 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var children:Array;
- var i:int;
- var n:int;
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.style["vertical-align"] = "top";
-
- children = contentView.internalChildren();
- n = children.length;
+ contentView.element.classList.add("layout", "vertical");
+
+ var children:Array = contentView.internalChildren();
+ var i:int;
+ var n:int = children.length;
for (i = 0; i < n; i++)
{
var child:WrappedHTMLElement = children[i];
- child.className += " vertical-layout-padding-gap";
-
-
- /*if(i == 0)
+ if(i == 0)
{
child.style.marginTop = _paddingTop + 'px';
}
@@ -318,18 +306,7 @@ package org.apache.royale.jewel.beads.layouts
child.style.marginBottom = '0px';
}
child.style.marginLeft = _paddingLeft + 'px';
- child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
- {
- child.royale_wrapper.setDisplayStyleForLayout('block');
- }
- else
- {
- // block elements don't measure width correctly so set to inline for a second
- child.style.display = 'inline-block';
- child.style.display = 'block';
- }
- */
+
child.royale_wrapper.dispatchEvent('sizeChanged');
}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.