This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 202e642c57 Added GridContainer
202e642c57 is described below
commit 202e642c578905edb843ffe6e3f2cf35995cc828
Author: Harbs <[email protected]>
AuthorDate: Fri Mar 20 12:17:53 2026 +0200
Added GridContainer
---
.../Style/src/main/resources/style-manifest.xml | 1 +
.../org/apache/royale/style/FlexContainer.as | 98 +------
.../org/apache/royale/style/GridContainer.as | 323 +++++++++++++++++++++
.../ContentContainerBase.as} | 140 ++-------
4 files changed, 355 insertions(+), 207 deletions(-)
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index b5fb9db0e6..212b37a7b5 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -26,6 +26,7 @@
<component id="CheckBox" class="org.apache.royale.style.CheckBox"/>
<component id="Divider" class="org.apache.royale.style.Divider"/>
<component id="FlexContainer" class="org.apache.royale.style.FlexContainer"/>
+ <component id="GridContainer" class="org.apache.royale.style.GridContainer"/>
<component id="StyleSkin" class="org.apache.royale.style.StyleSkin"/>
<component id="Icon" class="org.apache.royale.style.Icon"/>
<component id="FlexLayout" class="org.apache.royale.style.beads.FlexLayout"/>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
index 01b6f7b56e..8b7729e23c 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
@@ -19,6 +19,8 @@
package org.apache.royale.style
{
+ import org.apache.royale.style.support.ContentContainerBase;
+
/**
* The FlexContainer class is a container with CSS flex display
enabled.
*
@@ -26,7 +28,7 @@ package org.apache.royale.style
* @productversion Royale 1.0.0
*/
- public class FlexContainer extends Container
+ public class FlexContainer extends ContentContainerBase
{
/**
* Constructor.
@@ -36,51 +38,10 @@ package org.apache.royale.style
*/
public function FlexContainer()
{
+ displayType = "flex";
super();
- setStyle("display","flex");
}
- /**
- * Returns the align-content style value.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get alignContent():String{
- COMPILE::SWF{return "";}
- COMPILE::JS{return element.style.alignContent;}
- }
- public function set alignContent(value:String):void{
- setStyle("alignContent",value);
- }
- /**
- * Returns the align-items style value.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get alignItems():String{
- COMPILE::SWF{return "";}
- COMPILE::JS{return element.style.alignItems;}
- }
- public function set alignItems(value:String):void{
- setStyle("alignItems",value);
- }
-
- /**
- * Returns the justify-content style value.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get justifyContent():String{
- COMPILE::SWF{return "";}
- COMPILE::JS{return element.style.justifyContent;}
- }
- public function set justifyContent(value:String):void{
- setStyle("justifyContent",value);
- }
-
private var _vertical:Boolean = false;
/**
@@ -178,56 +139,5 @@ package org.apache.royale.style
setStyle("flexWrap",wrapVal);
}
- private var _gap:String;
-
- /**
- * Returns the gap style value.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get gap():String
- {
- return _gap;
- }
- public function set gap(value:String):void
- {
- _gap = value;
- setStyle("gap",value);
- }
- private var _columnGap:String;
-
- /**
- * Returns the column-gap style value.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get columnGap():String
- {
- return _columnGap;
- }
- public function set columnGap(value:String):void
- {
- _columnGap = value;
- setStyle("columnGap",value);
- }
- private var _rowGap:String;
-
- /**
- * Returns the row-gap style value.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get rowGap():String
- {
- return _rowGap;
- }
- public function set rowGap(value:String):void
- {
- _rowGap = value;
- setStyle("rowGap",value);
- }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/GridContainer.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/GridContainer.as
new file mode 100644
index 0000000000..19db089dca
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/GridContainer.as
@@ -0,0 +1,323 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.royale.style
+{
+ import org.apache.royale.style.support.ContentContainerBase;
+
+ public class GridContainer extends ContentContainerBase
+ {
+ public function GridContainer()
+ {
+ displayType = "grid";
+ super();
+ }
+
+ /**
+ * Sets the place-content property which is a shorthand for
setting align-content and justify-content in a single declaration.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get placeContent():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["placeContent"];}
+ }
+
+ public function set placeContent(value:String):void
+ {
+ setStyle("place-content", value);
+ }
+
+ /**
+ * Sets the place-items property which is a shorthand for
setting align-items and justify-items in a single declaration.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get placeItems():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["placeItems"];}
+ }
+
+ public function set placeItems(value:String):void
+ {
+ setStyle("place-items", value);
+ }
+ /**
+ * Sets the justify-items property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get justifyItems():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["justifyItems"];}
+ }
+
+ public function set justifyItems(value:String):void
+ {
+ setStyle("justify-items", value);
+ }
+
+ /**
+ * Sets the grid property which is a shorthand for setting
grid-template-rows, grid-template-columns,
+ * grid-template-areas, grid-auto-rows, grid-auto-columns, and
grid-auto-flow in a single declaration.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get grid():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["grid"];}
+ }
+
+ public function set grid(value:String):void
+ {
+ setStyle("grid",value);
+ }
+
+ /**
+ * Sets the grid-row property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridRow():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridRow"];}
+ }
+
+ public function set gridRow(value:String):void
+ {
+ setStyle("grid-row", value);
+ }
+
+ /**
+ * Sets the grid-column property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridColumn():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridColumn"];}
+ }
+
+ public function set gridColumn(value:String):void
+ {
+ setStyle("grid-column", value);
+ }
+
+ /**
+ * Sets the grid-row-start property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridRowStart():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridRowStart"];}
+ }
+
+ public function set gridRowStart(value:String):void
+ {
+ setStyle("grid-row-start", value);
+ }
+
+ /**
+ * Sets the grid-row-end property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridRowEnd():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridRowEnd"];}
+ }
+
+ public function set gridRowEnd(value:String):void
+ {
+ setStyle("grid-row-end", value);
+ }
+
+ /**
+ * Sets the grid-column-start property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridColumnStart():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridColumnStart"];}
+ }
+
+ public function set gridColumnStart(value:String):void
+ {
+ setStyle("grid-column-start", value);
+ }
+
+ /**
+ * Sets the grid-column-end property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridColumnEnd():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridColumnEnd"];}
+ }
+
+ public function set gridColumnEnd(value:String):void
+ {
+ setStyle("grid-column-end", value);
+ }
+
+
+ /**
+ * Sets the grid-area property which is a shorthand for setting
grid-row-start, grid-column-start, grid-row-end and grid-column-end in a single
declaration.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridArea():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridArea"];}
+ }
+
+ public function set gridArea(value:String):void
+ {
+ setStyle("grid-area", value);
+ }
+
+ /**
+
+ * Sets the grid-template-columns property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridTemplateColumns():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return
element.style["gridTemplateColumns"];}
+ }
+
+ public function set gridTemplateColumns(value:String):void
+ {
+ setStyle("grid-template-columns", value);
+ }
+ /**
+ * Sets the grid-template-rows property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridTemplateRows():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridTemplateRows"];}
+ }
+
+ public function set gridTemplateRows(value:String):void
+ {
+ setStyle("grid-template-rows", value);
+ }
+
+ /**
+ * Sets the grid-template-areas property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridTemplateAreas():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridTemplateAreas"];}
+ }
+
+ public function set gridTemplateAreas(value:String):void
+ {
+ setStyle("grid-template-areas", value);
+ }
+
+ /**
+ * Sets the grid-auto-rows property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridAutoRows():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridAutoRows"];}
+ }
+
+ public function set gridAutoRows(value:String):void
+ {
+ setStyle("grid-auto-rows", value);
+ }
+
+ /**
+ * Sets the grid-auto-columns property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridAutoColumns():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridAutoColumns"];}
+ }
+
+ public function set gridAutoColumns(value:String):void
+ {
+ setStyle("grid-auto-columns", value);
+ }
+
+ /**
+ * Sets the grid-auto-flow property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
+ */
+ public function get gridAutoFlow():String
+ {
+ COMPILE::SWF{return "";}
+ COMPILE::JS{return element.style["gridAutoFlow"];}
+ }
+
+ public function set gridAutoFlow(value:String):void
+ {
+ setStyle("grid-auto-flow", value);
+ }
+
+
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/ContentContainerBase.as
similarity index 58%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/ContentContainerBase.as
index 01b6f7b56e..4465309c94 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/FlexContainer.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/ContentContainerBase.as
@@ -16,28 +16,40 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style
+package org.apache.royale.style.support
{
-
+ import org.apache.royale.style.Container;
+ import org.apache.royale.debugging.assert;
+
/**
- * The FlexContainer class is a container with CSS flex display
enabled.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
+ * This is a base class for flex and grid containers for shared
properties.
*/
-
- public class FlexContainer extends Container
+ public class ContentContainerBase extends Container
{
+ public function ContentContainerBase()
+ {
+ super();
+ assert(displayType != null, "Subclasses of
ContentContainerBase must set layoutStyleName to the name of the layout style
they use");
+ setStyle("display",displayType);
+ }
+ protected var displayType:String;
+
+ private var _inline:Boolean;
/**
- * Constructor.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
+ * Whether to use inline version of the layout style instead of
the block version.
+ *
+ * @langversion 3.0
+ * @productversion Royale 1.0.0
*/
- public function FlexContainer()
+ public function get inline():Boolean
{
- super();
- setStyle("display","flex");
+ return _inline;
+ }
+
+ public function set inline(value:Boolean):void
+ {
+ _inline = value;
+ setStyle("display",value ? "inline-" + displayType :
displayType);
}
/**
@@ -81,105 +93,7 @@ package org.apache.royale.style
setStyle("justifyContent",value);
}
- private var _vertical:Boolean = false;
-
- /**
- * Whether the main axis is vertical.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get vertical():Boolean
- {
- return _vertical;
- }
- public function set vertical(value:Boolean):void
- {
- _vertical = value;
- computeDirection();
- }
-
- private var _reverse:Boolean;
-
- /**
- * Whether the current flex direction is reversed.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get reverse():Boolean
- {
- return _reverse;
- }
- public function set reverse(value:Boolean):void
- {
- _reverse = value;
- computeDirection();
- }
- private function computeDirection():void{
- var direction:String = vertical ? "column" : "row";
- if(reverse){
- direction += "-reverse";
- }
- setStyle("flexDirection",direction);
- }
-
- private var _wrap:Boolean;
-
- /**
- * Whether items should wrap onto multiple lines.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get wrap():Boolean
- {
- return _wrap;
- }
- public function set wrap(value:Boolean):void
- {
- _wrap = value;
- if(value){
- _reverseWrap = false;
- }
- setWrap();
- }
-
- private var _reverseWrap:Boolean;
-
- /**
- * Whether wrapping should use reverse order.
- *
- * @langversion 3.0
- * @productversion Royale 1.0.0
- */
- public function get reverseWrap():Boolean
- {
- return _reverseWrap;
- }
- public function set reverseWrap(value:Boolean):void
- {
- _reverseWrap = value;
- if(value){
- _wrap = false;
- }
- setWrap();
- }
-
- private function setWrap():void{
- var wrapVal:String;
- if(_wrap){
- wrapVal = "wrap";
- } else if(_reverseWrap){
- wrapVal = "wrap-reverse";
- } else {
- wrapVal = "nowrap";
- }
- setStyle("flexWrap",wrapVal);
- }
-
private var _gap:String;
-
/**
* Returns the gap style value.
*
