This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch style-project
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/style-project by this push:
new 3bae7f6538 Started filling in classes. Added readme
3bae7f6538 is described below
commit 3bae7f653830c53c219fa872704400e9f2c87031
Author: Harbs <[email protected]>
AuthorDate: Sun Feb 22 10:01:59 2026 +0200
Started filling in classes. Added readme
---
.../StyleJS/src/main/config/compile-js-config.xml | 7 +-
.../royale/org/apache/royale/core/CSSClassList.as | 11 ++
frameworks/projects/Style/README.md | 156 +++++++++++++++
frameworks/projects/Style/build.xml | 4 +-
frameworks/projects/Style/pom.xml | 11 +-
.../Style/src/main/config/compile-swf-config.xml | 11 +-
...style-as-manifest.xml => basic-as-manifest.xml} | 0
.../{style-manifest.xml => basic-manifest.xml} | 0
.../projects/Style/src/main/royale/StyleClasses.as | 2 +-
.../royale/org/apache/royale/style/IStyleUIBase.as | 35 ++++
.../royale/org/apache/royale/style/StyleUIBase.as | 216 +++++++++++++++++++++
.../apache/royale/style/stylebeads/FlexStyle.as | 52 +++++
.../apache/royale/style/stylebeads/IStyleBead.as | 35 ++++
.../royale/style/stylebeads/PositionStyle.as | 52 +++++
.../apache/royale/style/stylebeads/SizeStyle.as | 53 +++++
.../royale/style/stylebeads/StyleBeadBase.as | 32 +++
.../org/apache/royale/style/util/StyleManager.as | 69 +++++++
.../royale/FlexUnitRoyaleApplication-config.xml | 10 +-
.../src/test/royale/FlexUnitRoyaleApplication.mxml | 21 +-
.../test/royale/flexUnitTests/StyleManagerTest.as | 59 ++++++
20 files changed, 796 insertions(+), 40 deletions(-)
diff --git
a/frameworks/js/projects/StyleJS/src/main/config/compile-js-config.xml
b/frameworks/js/projects/StyleJS/src/main/config/compile-js-config.xml
index c4bbd3d7a1..d68ae58621 100644
--- a/frameworks/js/projects/StyleJS/src/main/config/compile-js-config.xml
+++ b/frameworks/js/projects/StyleJS/src/main/config/compile-js-config.xml
@@ -61,16 +61,13 @@
<path-element>../../../../../libs/GraphicsJS.swc</path-element>
<path-element>../../../../../libs/CollectionsJS.swc</path-element>
<path-element>../../../../../libs/XMLJS.swc</path-element>
+ <path-element>../../../../../libs/BasicJS.swc</path-element>
</external-library-path>
<namespaces>
<namespace>
<uri>library://ns.apache.org/royale/style</uri>
-
<manifest>../../../../../../projects/Style/src/main/resources/style-manifest.xml</manifest>
- </namespace>
- <namespace>
- <uri>library://ns.apache.org/royale/svg</uri>
-
<manifest>../../../../../../projects/Style/src/main/resources/svg-manifest.xml</manifest>
+
<manifest>../../../../../../projects/Style/src/main/resources/basic-manifest.xml</manifest>
</namespace>
</namespaces>
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as
index e668f5e772..c1b724988c 100644
---
a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as
+++
b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as
@@ -104,6 +104,17 @@ package org.apache.royale.core
{
return _list ? _list.join(" ") + " " : "";
}
+ /**
+ * Clears the list of class names.
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Royale 0.9.13
+ */
+ public function clear():void
+ {
+ _list = null;
+ }
}
}
diff --git a/frameworks/projects/Style/README.md
b/frameworks/projects/Style/README.md
new file mode 100644
index 0000000000..b87c63a964
--- /dev/null
+++ b/frameworks/projects/Style/README.md
@@ -0,0 +1,156 @@
+# Royale Style Project
+
+`Style` is a Royale component set inspired by the utility-first approach
popularized by Tailwind CSS.
+
+The goal is to make it easy to build consistent, modern UIs in Royale by
composing small, reusable style units instead of relying on large, monolithic
theme files.
+
+## Vision
+
+- Bring utility-style ergonomics to Royale applications.
+- Keep styling composable and predictable.
+- Generate visual assets at runtime when possible to reduce static asset
management.
+
+## Goals
+- Provide a core set of style beads that can be combined to create complex
styles.
+- Maximize performance wherever possible.
+- Enable dynamic class composition at runtime for maximum flexibility in
styling components.
+- Matches Tailwind naming conventions where it makes sense to provide
familiarity for developers coming from a utility-first CSS background.
+- Only include in runtime what is necessary to keep the bundle size small and
performance high.
+- Provide a complete set of runtime-generated colors that can be used in style
beads and components without needing to pre-generate static variants.
+- Provide theming capabilities that allow for easy switching between color
palettes and dynamic color usage in components.
+- Provide skinning capabilities that allow for application on css as well as
colors and icons for specific components.
+- Enable runtime generation of colors and SVG icons for maximum flexibility.
+- Keep the API simple and intuitive that enables easy composition using Royale
concepts and patterns.
+
+## Non-goals
+- We don't intend to have full Tailwind compatibility. Where the patterns are
too convergent, or Tailwind's approach doesn't fit well with Royale's
architecture, we will diverge and create APIs that are more natural for Royale
developers.
+- We won't include a large set of pre-generated static style variants.
Instead, we will focus on providing the building blocks and runtime
capabilities to generate styles dynamically as needed.
+- We are not styling components by default. Instead, we will provide style
beads that can be applied to components as needed, allowing developers to
choose the level of styling they want to apply to their components.
+- We are not precompiling CSS at compile time like Tailwind does. Instead, we
will generate styles at runtime based on the style beads applied to components
and the current theme or palette in use.
+
+## Core Concepts
+
+### 1) Style Beads (runtime class composition)
+
+The project introduces **style beads** that compose style classes at runtime.
+
+This enables developers to:
+
+- apply styles in small, focused building blocks,
+- combine multiple style classes dynamically,
+- adapt component appearance based on state, data, or interaction.
+
+### 2) Runtime Colors
+
+Color values are designed to be resolved/generated at runtime.
+
+This allows:
+
+- easier theme switching,
+- dynamic palette usage,
+- less duplication of pre-generated static style variants.
+
+### 3) Runtime SVG Icons
+
+SVG icons are created at runtime as well, enabling:
+
+- dynamic icon coloring,
+- scalable icon rendering,
+- flexible icon usage without requiring a large set of precompiled assets.
+
+## Why this project
+
+Traditional styling in large component systems can become rigid over time.
This project aims to keep Royale styling lightweight, composable, and
application-driven by combining:
+
+- utility-inspired style composition,
+- runtime style beads,
+- runtime-generated colors and SVG icons.
+
+## Examples
+
+Simple usage of style beads to compose styles on a component:
+```xml
+<st:IconButton theme="dark">
+ <st:icon>
+ <st:PencilIcon size="M" />
+ </st:icon>
+ <st:beads>
+ <st:ColorStyle color="primary" />
+ </st:beads>
+</st:IconButton>
+```
+
+An icon can be specified something like this as well:
+```xml
+<st:IconButton theme="dark" icon={Icons.MediumPencil}/>
+```
+
+More comples example with state beads:
+```xml
+<st:Button>
+ <st:beads>
+ <st:ColorStyle color="primary" />
+ <st:HoverStyle>
+ <st:ColorStyle color="primaryHover" />
+ </st:HoverStyle>
+ </st:beads>
+</st:Button>
+```
+
+More copmplex example showing support for media queries and dynamic class
composition:
+```xml
+<st:Button>
+ <st:beads>
+ <st:ColorStyle color="primary" />
+ <st:HoverStyle>
+ <st:ColorStyle color="primaryHover" />
+ </st:HoverStyle>
+ <st:MediaQuery maxWidth="600px">
+ <st:ColorStyle color="primaryLarge" />
+ </st:MediaQuery>
+ </st:beads>
+</st:Button>
+```
+Examples of skins:
+
+### Defining a skin:
+```xml
+<st:Skin xmlns:st="library://ns.apache.org/royale/style"
+ theme="dark">
+ <st:icon>
+ <st:PencilIcon size="M" />
+ </st:icon>
+ <st:beads>
+ <st:ColorStyle color="primary" />
+ <st:HoverStyle>
+ <st:ColorStyle color="primaryHover" />
+ </st:HoverStyle>
+ </st:beads>
+</st:Skin>
+```
+
+1) Using MXML:
+```xml
+<st:Button>
+ <st:skin>
+ <local:CustomButtonSkin/>
+ </st:skin>
+</st:Button>
+```
+
+2) In Actionscript:
+```actionscript
+var button:Button = new Button();
+button.skin = new CustomButtonSkin();
+```
+3) Using CSS:
+```css
+Button {
+ skin: ClassReference("com.example.skins.CustomButtonSkin");
+}
+```
+
+## Status
+
+This project is under active development. APIs and naming may evolve as style
beads, runtime class composition, and asset generation are expanded.
+
diff --git a/frameworks/projects/Style/build.xml
b/frameworks/projects/Style/build.xml
index e145c897cf..b3445e059a 100644
--- a/frameworks/projects/Style/build.xml
+++ b/frameworks/projects/Style/build.xml
@@ -75,9 +75,9 @@
</or>
</condition>
</target>
-
+
<target name="test" depends="check-for-tests,check-compiler"
unless="skip-tests">
- <antcall target="test-swf" />
+ <!-- This does not support swf so no tests <antcall target="test-swf"
/> -->
<antcall target="test-js" />
</target>
diff --git a/frameworks/projects/Style/pom.xml
b/frameworks/projects/Style/pom.xml
index 109b5d4517..325a21d436 100644
--- a/frameworks/projects/Style/pom.xml
+++ b/frameworks/projects/Style/pom.xml
@@ -43,16 +43,7 @@
<namespaces>
<namespace>
<uri>library://ns.apache.org/royale/style</uri>
-
<manifest>${project.basedir}/src/main/resources/style-manifest.xml</manifest>
- </namespace>
- <namespace>
- <type>as</type>
- <uri>library://ns.apache.org/royale/style</uri>
-
<manifest>${project.basedir}/src/main/resources/style-as-manifest.xml</manifest>
- </namespace>
- <namespace>
- <uri>library://ns.apache.org/royale/svg</uri>
-
<manifest>${project.basedir}/src/main/resources/svg-manifest.xml</manifest>
+
<manifest>${project.basedir}/src/main/resources/basic-manifest.xml</manifest>
</namespace>
</namespaces>
<includeClasses>
diff --git a/frameworks/projects/Style/src/main/config/compile-swf-config.xml
b/frameworks/projects/Style/src/main/config/compile-swf-config.xml
index 15fae4e34b..83055d04aa 100644
--- a/frameworks/projects/Style/src/main/config/compile-swf-config.xml
+++ b/frameworks/projects/Style/src/main/config/compile-swf-config.xml
@@ -34,6 +34,7 @@
<path-element>../../../../../libs/Core.swc</path-element>
<path-element>../../../../../libs/Graphics.swc</path-element>
<path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
</external-library-path>
<allow-subclass-overrides>true</allow-subclass-overrides>
@@ -71,16 +72,8 @@
<namespaces>
<namespace>
<uri>library://ns.apache.org/royale/style</uri>
- <manifest>../resources/style-manifest.xml</manifest>
+ <manifest>../resources/basic-manifest.xml</manifest>
</namespace>
- <namespace>
- <uri>library://ns.apache.org/royale/style</uri>
- <manifest>../resources/style-as-manifest.xml</manifest>
- </namespace>
- <!-- <namespace>
- <uri>library://ns.apache.org/royale/svg</uri>
- <manifest>../resources/svg-manifest.xml</manifest>
- </namespace> -->
</namespaces>
<source-path>
diff --git a/frameworks/projects/Style/src/main/resources/style-as-manifest.xml
b/frameworks/projects/Style/src/main/resources/basic-as-manifest.xml
similarity index 100%
rename from frameworks/projects/Style/src/main/resources/style-as-manifest.xml
rename to frameworks/projects/Style/src/main/resources/basic-as-manifest.xml
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
similarity index 100%
rename from frameworks/projects/Style/src/main/resources/style-manifest.xml
rename to frameworks/projects/Style/src/main/resources/basic-manifest.xml
diff --git a/frameworks/projects/Style/src/main/royale/StyleClasses.as
b/frameworks/projects/Style/src/main/royale/StyleClasses.as
index ab40129cdf..51ba10b4eb 100644
--- a/frameworks/projects/Style/src/main/royale/StyleClasses.as
+++ b/frameworks/projects/Style/src/main/royale/StyleClasses.as
@@ -27,7 +27,7 @@ package
*/
internal class StyleClasses
{
- // import org.apache.royale.style.Foo; Foo;
+ import org.apache.royale.style.util.StyleManager; StyleManager;
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
new file mode 100644
index 0000000000..a50c03a156
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.IUIBase;
+
+ /**
+ * The IStyleUIBase interface defines the contract for all UI
components that support styles.
+ * It provides a common set of methods and properties for
handling style classes and applying them to the component.
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.13
+ */
+ public interface IStyleUIBase extends IUIBase
+ {
+ function toggleClass(classNameVal:String,add:Boolean):void;
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
new file mode 100644
index 0000000000..9de4f276a9
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
@@ -0,0 +1,216 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.UIBase;
+ import org.apache.royale.core.CSSClassList;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.style.stylebeads.IStyleBead;
+ import org.apache.royale.style.util.StyleManager;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The StyleUIBase class is the base class for all UI components that
support styles.
+ * It provides a common implementation for handling styles and
applying them to the component.
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.13
+ */
+ public class StyleUIBase extends UIBase
+ {
+ /**
+ * Constructor.
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.13
+ */
+ public function StyleUIBase()
+ {
+ super();
+ classList = new CSSClassList();
+ utilityList = new CSSClassList();
+ }
+ protected var classList:CSSClassList;
+ protected var utilityList:CSSClassList;
+ protected var styleBeads:Array = [];
+
+ /**
+ * @royaleignorecoercion
org.apache.royale.style.stylebeads.IStyleBead
+ */
+ override public function addBead(bead:IBead):void
+ {
+ super.addBead(bead);
+ if (bead is IStyleBead)
+ {
+ var styleBead:IStyleBead = bead as IStyleBead;
+ styleBeads.push(styleBead);
+ }
+ refreshStyles();
+ }
+ override protected function loadBeads():void
+ {
+ super.loadBeads();
+ refreshStyles();
+ }
+
+ protected function refreshStyles():void
+ {
+ utilityList.clear();
+ for each (var styleBead:IStyleBead in styleBeads)
+ {
+ applyStyle(styleBead);
+ }
+ computeFinalClassNames();
+ }
+ protected function applyStyle(styleBead:IStyleBead):void
+ {
+ var selectors:Array = styleBead.selectors;
+ for(var i:int=0;i<selectors.length;i++)
+ {
+ var selector:String = selectors[i];
+ utilityList.add(selector);
+ if (!StyleManager.hasStyle(selector))
+ {
+ StyleManager.addStyle(selector,
styleBead.rules[i]);
+ }
+ }
+ }
+ public function toggleClass(classNameVal:String,
add:Boolean):void
+ {
+ COMPILE::JS
+ {
+ add ? classList.add(classNameVal) :
classList.remove(classNameVal);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ COMPILE::JS
+ override protected function computeFinalClassNames():String
+ {
+ return (utilityList.compute() + classList.compute() +
super.computeFinalClassNames()).trim();
+ }
+ public function setStyle(property:String, value:Object):void
+ {
+ COMPILE::JS
+ {
+ element.style[property] = value;
+ }
+ }
+
+ public function setAttribute(name:String, value:*):void
+ {
+ COMPILE::JS
+ {
+ element.setAttribute(name, value);
+ }
+ }
+ public function getAttribute(name:String):*
+ {
+ COMPILE::JS
+ {
+ return element.getAttribute(name);
+ }
+ COMPILE::SWF
+ {
+ return "";
+ }
+ }
+ public function removeAttribute(name:String):void
+ {
+ COMPILE::JS
+ {
+ element.removeAttribute(name);
+ }
+ }
+ COMPILE::SWF
+ private var _autofocus:Boolean;
+
+ public function get autofocus():Boolean
+ {
+ COMPILE::SWF
+ {
+ return _autofocus;
+ }
+ COMPILE::JS
+ {
+ return element["autofocus"];
+ }
+ }
+
+ public function set autofocus(value:Boolean):void
+ {
+ COMPILE::SWF
+ {
+ _autofocus = value;
+ }
+ COMPILE::JS
+ {
+ element["autofocus"] = value;
+ }
+ }
+ public function focus():void
+ {
+ COMPILE::JS
+ {
+ element.focus();
+ }
+ }
+ protected var _tabFocusable:Boolean;
+
+ public function get tabFocusable():Boolean
+ {
+ return _tabFocusable;
+ }
+
+ public function set tabFocusable(value:Boolean):void
+ {
+ _tabFocusable = value;
+ if (value)
+ {
+ setAttribute("tabindex", 0);
+ }
+ else
+ {
+ removeAttribute("tabindex");
+ }
+ }
+
+ /**
+ * Returns the tag name to use for this component.
+ *
+ * Subclasses should override this method to specify a
different tag.
+ */
+ protected function getTag():String
+ {
+ return "div";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, getTag());
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/FlexStyle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/FlexStyle.as
new file mode 100644
index 0000000000..a6a30e6b79
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/FlexStyle.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads
+{
+ public class FlexStyle extends StyleBeadBase
+ {
+ public function FlexStyle()
+ {
+ super();
+ }
+
+ private var _value:String;
+
+ [[Inspectable(category="General", enumeration="none,flex",
defaultValue="none")]]
+ public function get value():String
+ {
+ return _value;
+ }
+
+ public function set value(value:String):void
+ {
+ _value = value;
+ }
+
+ override public function get selectors():Array
+ {
+ return ["." + value];
+ }
+
+ override public function get rules():Array
+ {
+ return ["display:" + value + ";"];
+ }
+
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/IStyleBead.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/IStyleBead.as
new file mode 100644
index 0000000000..2961d63ba5
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/IStyleBead.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads
+{
+ import org.apache.royale.core.IBead;
+ /**
+ * The IStyleBead interface defines the basic contract for style beads.
+ * Style beads are responsible for applying styles to components and
managing style-related functionality.
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.13
+ */
+ public interface IStyleBead extends IBead
+ {
+ function get selectors():Array;
+ function get rules():Array;
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/PositionStyle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/PositionStyle.as
new file mode 100644
index 0000000000..8f264ba573
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/PositionStyle.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads
+{
+ public class PositionStyle extends StyleBeadBase
+ {
+ public function PositionStyle()
+ {
+ super();
+ }
+
+ private var _value:String;
+
+ [[Inspectable(category="General",
enumeration="static,fixed,absolute,relative,sticky", defaultValue="absolute")]]
+ public function get value():String
+ {
+ return _value;
+ }
+
+ public function set value(value:String):void
+ {
+ _value = value;
+ }
+
+ override public function get selectors():Array
+ {
+ return ["." + value];
+ }
+
+ override public function get rules():Array
+ {
+ return ["position:" + value + ";"];
+ }
+
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SizeStyle.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SizeStyle.as
new file mode 100644
index 0000000000..3b0ef87be9
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SizeStyle.as
@@ -0,0 +1,53 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads
+{
+ public class SizeStyle extends StyleBeadBase
+ {
+ public function SizeStyle()
+ {
+ super();
+ }
+
+ private var _value:String;
+ //TODO:
+ [[Inspectable(category="General", enumeration="",
defaultValue="")]]
+ public function get value():String
+ {
+ return _value;
+ }
+
+ public function set value(value:String):void
+ {
+ _value = value;
+ }
+
+ override public function get selectors():Array
+ {
+ return ["." + value];
+ }
+
+ override public function get rules():Array
+ {
+ //TODO
+ return null;
+ }
+
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
new file mode 100644
index 0000000000..e2bab90133
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
@@ -0,0 +1,32 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads
+{
+ import org.apache.royale.core.Bead;
+
+ abstract public class StyleBeadBase extends Bead implements IStyleBead
+ {
+ public function StyleBeadBase()
+ {
+ super();
+ }
+ abstract public function get selectors():Array;
+ abstract public function get rules():Array;
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
new file mode 100644
index 0000000000..de4cc2c9bd
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as
@@ -0,0 +1,69 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.util
+{
+ import org.apache.royale.debugging.assert;
+
+ public class StyleManager
+ {
+ private function StyleManager()
+ {
+ // Static only class.
+ }
+ COMPILE::JS
+ private static const styleList:Set = new Set();
+
+ public static function hasStyle(selector:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return styleList.has(selector);
+ }
+ return false;
+ }
+ public static function addStyle(selector:String,
rule:String):void
+ {
+ COMPILE::JS
+ {
+ assert(!styleList.has(selector), "Style " +
selector + " already exists");
+ styleList.add(selector);
+ addRule(selector, rule);
+ }
+ }
+
+ COMPILE::JS
+ private static var ss:CSSStyleSheet;
+
+ private static var ruleIdx:int = 0;
+
+ private static function addRule(selector:String,
rule:String):void
+ {
+ COMPILE::JS
+ {
+ if (!ss)
+ {
+ var styleElement:HTMLStyleElement =
document.createElement('style') as HTMLStyleElement;
+ document.head.appendChild(styleElement);
+ ss = styleElement.sheet as
CSSStyleSheet;
+ }
+ ss.insertRule(selector + "{" + rule + "}",
ruleIdx++);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication-config.xml
b/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication-config.xml
index eced9bd030..07da66a375 100644
---
a/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication-config.xml
+++
b/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication-config.xml
@@ -100,15 +100,7 @@
</namespace>
<namespace>
<uri>library://ns.apache.org/royale/style</uri>
- <manifest>../../main/resources/style-manifest.xml</manifest>
- </namespace>
- <namespace>
- <uri>library://ns.apache.org/royale/style</uri>
- <manifest>../../main/resources/style-as-manifest.xml</manifest>
- </namespace>
- <namespace>
- <uri>library://ns.apache.org/royale/svg</uri>
- <manifest>../../main/resources/svg-manifest.xml</manifest>
+ <manifest>../../main/resources/basic-manifest.xml</manifest>
</namespace>
</namespaces>
diff --git
a/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication.mxml
b/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication.mxml
index 493ef97c38..b334c0e7ab 100644
--- a/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication.mxml
+++ b/frameworks/projects/Style/src/test/royale/FlexUnitRoyaleApplication.mxml
@@ -34,7 +34,7 @@ limitations under the License.
import flash.utils.getDefinitionByName;
}
- // import flexUnitTests.DataGridColumnTester;
+ import flexUnitTests.StyleManagerTest;
import org.apache.royale.events.Event;
import org.apache.royale.test.listeners.CIListener;
@@ -77,9 +77,22 @@ limitations under the License.
} else{
core.addListener(new CIListener());
}
- core.addEventListener(Event.COMPLETE, core_completeHandler);
- // Insert test classes here. For example:
- // core.runClasses(DataGridColumnTester);
+ /**
+ * Style does not support swf, so exit without running any
tests.
+ */
+ COMPILE::SWF
+ {
+ core_completeHandler(null);
+ }
+ /**
+ * Run the tests for js.
+ */
+ COMPILE::JS
+ {
+ core.addEventListener(Event.COMPLETE,
core_completeHandler);
+ // Insert test classes here. For example:
+ core.runClasses(StyleManagerTest);
+ }
}
private function core_completeHandler(event:Event):void
diff --git
a/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
b/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
new file mode 100644
index 0000000000..ba069063c9
--- /dev/null
+++
b/frameworks/projects/Style/src/test/royale/flexUnitTests/StyleManagerTest.as
@@ -0,0 +1,59 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 flexUnitTests
+{
+
+ import org.apache.royale.test.asserts.*;
+ import org.apache.royale.style.util.StyleManager;
+
+ public class StyleManagerTest
+ {
+ [Before]
+ public function setUp():void
+ {
+ }
+
+ [After]
+ public function tearDown():void
+ {
+ }
+
+ [BeforeClass]
+ public static function setUpBeforeClass():void
+ {
+ }
+
+ [AfterClass]
+ public static function tearDownAfterClass():void
+ {
+ }
+
+ [Test]
+ public function testInsert():void
+ {
+ COMPILE::JS
+ {
+ assertFalse(StyleManager.hasStyle(".foo"));
+ StyleManager.addStyle(".foo", "display:flex;");
+ assertTrue(StyleManager.hasStyle(".foo"));
+ }
+ }
+
+ }
+}
