This is an automated email from the ASF dual-hosted git repository.
yishayw 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 87cb488841 Add TourDeStyle component explorer example
87cb488841 is described below
commit 87cb488841e4847017ae3571c51ed693ca0ba9f9
Author: Yishay Weiss <[email protected]>
AuthorDate: Thu Apr 16 09:35:19 2026 +0300
Add TourDeStyle component explorer example
Standalone example project showcasing all Style UI components with
interactive demos. Supports building the full tabbed tour with `ant`
or individual playgrounds with `ant -Dexample=<Name>`.
Defaults to JSRoyale target only. Maven and asconfigc are not yet
supported.
Includes playgrounds for: Pagination, Card, Modal, Tabs, Toggle, Dropdown.
Also registers DropdownSkin and Modal skins in style-manifest.xml,
and fixes AlignItems value in TabBarSkin.
---
examples/royale/TourDeStyle/README.md | 72 +++++++
examples/royale/TourDeStyle/build-output.txt | Bin 0 -> 6646 bytes
examples/royale/TourDeStyle/build.xml | 42 ++++
examples/royale/TourDeStyle/build_output.txt | Bin 0 -> 5860 bytes
.../src/main/config/compile-app-config.xml | 25 +++
.../src/main/royale/CardPlayGround.mxml | 73 +++++++
.../src/main/royale/DropdownPlayGround.mxml | 77 +++++++
.../src/main/royale/ModalPlayGround.mxml | 83 ++++++++
.../src/main/royale/PaginationPlayGround.mxml | 61 ++++++
.../src/main/royale/TabsPlayGround.mxml | 96 +++++++++
.../src/main/royale/TogglePlayGround.mxml | 54 +++++
.../TourDeStyle/src/main/royale/TourDeStyle.mxml | 225 +++++++++++++++++++++
.../Style/src/main/resources/style-manifest.xml | 5 +
.../org/apache/royale/style/skins/TabBarSkin.as | 2 +-
14 files changed, 814 insertions(+), 1 deletion(-)
diff --git a/examples/royale/TourDeStyle/README.md
b/examples/royale/TourDeStyle/README.md
new file mode 100644
index 0000000000..c3361a1e48
--- /dev/null
+++ b/examples/royale/TourDeStyle/README.md
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+## DESCRIPTION
+
+Tour De Style is a Component Explorer for the Apache Royale Style UI Set.
+
+Style is a CSS-driven UI component set that uses DaisyUI/Tailwind-inspired
+design tokens and applies them through ActionScript skin classes.
+
+This example showcases all Style components with different variants and
+configurations.
+
+## BUILDING
+
+### Prerequisites
+
+The Style library SWC must be built before compiling this example. From the
+SDK root:
+
+ cd frameworks/js/projects/StyleJS
+ ant
+
+### Build All Components (Tour)
+
+To build the combined application with tabbed navigation across all components:
+
+ cd examples/royale/TourDeStyle
+ ant
+
+### Build a Single Component
+
+Each component has a standalone PlayGround application that can be compiled
+individually:
+
+ ant -Dexample=PaginationPlayGround
+ ant -Dexample=CardPlayGround
+ ant -Dexample=ModalPlayGround
+ ant -Dexample=TabsPlayGround
+ ant -Dexample=TogglePlayGround
+ ant -Dexample=DropdownPlayGround
+
+### Viewing
+
+After building, open `bin/js-debug/index.html` in a browser.
+
+## COMPONENTS
+
+| PlayGround | Description |
+|------------------------|--------------------------------------------------|
+| PaginationPlayGround | Pagination with prev/next, disabled items |
+| CardPlayGround | Card with shadow, border, and dash variants |
+| ModalPlayGround | Modal dialogs with actions and easy dismiss |
+| TabsPlayGround | TabBar with content switching, disabled tabs |
+| TogglePlayGround | Toggle switches, checked and disabled states |
+| DropdownPlayGround | Dropdowns with programmatic and disabled states |
diff --git a/examples/royale/TourDeStyle/build-output.txt
b/examples/royale/TourDeStyle/build-output.txt
new file mode 100644
index 0000000000..759c77140d
Binary files /dev/null and b/examples/royale/TourDeStyle/build-output.txt differ
diff --git a/examples/royale/TourDeStyle/build.xml
b/examples/royale/TourDeStyle/build.xml
new file mode 100644
index 0000000000..4edd682c7d
--- /dev/null
+++ b/examples/royale/TourDeStyle/build.xml
@@ -0,0 +1,42 @@
+<?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="TourDeStyle" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+ <property name="example" value="TourDeStyle" />
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <include file="${basedir}/../../build_example.xml" />
+
+ <target name="main" depends="clean,build_example.compile"
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" />
+ <delete dir="${basedir}/target" failonerror="false" />
+ </target>
+
+</project>
diff --git a/examples/royale/TourDeStyle/build_output.txt
b/examples/royale/TourDeStyle/build_output.txt
new file mode 100644
index 0000000000..76a5bfa13d
Binary files /dev/null and b/examples/royale/TourDeStyle/build_output.txt differ
diff --git a/examples/royale/TourDeStyle/src/main/config/compile-app-config.xml
b/examples/royale/TourDeStyle/src/main/config/compile-app-config.xml
new file mode 100644
index 0000000000..55f5d02f14
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/config/compile-app-config.xml
@@ -0,0 +1,25 @@
+<!--
+
+ 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.
+
+-->
+<royale-config>
+ <compiler>
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ </compiler>
+</royale-config>
diff --git a/examples/royale/TourDeStyle/src/main/royale/CardPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/CardPlayGround.mxml
new file mode 100644
index 0000000000..f373949eff
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/CardPlayGround.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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style"
+ xmlns:e="library://ns.apache.org/royale/style-elements">
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer vertical="true" gap="24">
+
+ <!-- Default Card with shadow -->
+ <s:Card width="384">
+ <s:CardBody>
+ <s:CardTitle text="Default Card" />
+ <e:Div text="A card component has a figure, a body part, and
inside body there are title and actions parts." />
+ <s:CardActions>
+ <e:Div text="Buy Now" />
+ </s:CardActions>
+ </s:CardBody>
+ </s:Card>
+
+ <!-- Card with border variant -->
+ <s:Card width="384" variant="border">
+ <s:CardBody>
+ <s:CardTitle text="Border Card" />
+ <e:Div text="This card uses a border instead of a shadow." />
+ <s:CardActions>
+ <e:Div text="Action" />
+ </s:CardActions>
+ </s:CardBody>
+ </s:Card>
+
+ <!-- Card with dash variant -->
+ <s:Card width="384" variant="dash">
+ <s:CardBody>
+ <s:CardTitle text="Dash Border Card" />
+ <e:Div text="This card uses a dashed border style." />
+ <s:CardActions>
+ <e:Div text="Action" />
+ </s:CardActions>
+ </s:CardBody>
+ </s:Card>
+
+ <!-- Card with no actions -->
+ <s:Card width="384">
+ <s:CardBody>
+ <s:CardTitle text="Simple Card" />
+ <e:Div text="A simple card with just a title and text, no
action buttons." />
+ </s:CardBody>
+ </s:Card>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+
+</s:Application>
diff --git
a/examples/royale/TourDeStyle/src/main/royale/DropdownPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/DropdownPlayGround.mxml
new file mode 100644
index 0000000000..a42a94e2f5
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/DropdownPlayGround.mxml
@@ -0,0 +1,77 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style"
+ xmlns:e="library://ns.apache.org/royale/style-elements">
+ <fx:Style>
+ @namespace s "library://ns.apache.org/royale/style";
+ s|Dropdown
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.DropdownSkin");
+ }
+ s|View
+ {
+ IBeadView:
ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout:
ClassReference("org.apache.royale.style.beads.FlexLayout");
+ }
+ </fx:Style>
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.style.Dropdown;
+
+ private function toggleOpen():void
+ {
+ programmaticDropdown.open = !programmaticDropdown.open;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer gap="1rem">
+
+ <!-- Basic dropdown (focus-within) -->
+ <s:Dropdown triggerText="Click me">
+ <e:Div text="Option 1" />
+ <e:Div text="Option 2" />
+ <e:Div text="Option 3" />
+ </s:Dropdown>
+
+ <!-- Force open -->
+ <s:Dropdown triggerText="Always open" open="true">
+ <e:Div text="Item A" />
+ <e:Div text="Item B" />
+ </s:Dropdown>
+
+ <!-- Disabled -->
+ <s:Dropdown triggerText="Disabled" disabled="true">
+ <e:Div text="Unreachable" />
+ </s:Dropdown>
+
+ <!-- Programmatic toggle -->
+ <s:Dropdown id="programmaticDropdown" triggerText="Programmatic">
+ <e:Div text="Toggled item" />
+ </s:Dropdown>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+
+</s:Application>
diff --git a/examples/royale/TourDeStyle/src/main/royale/ModalPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/ModalPlayGround.mxml
new file mode 100644
index 0000000000..a4aa6c116c
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/ModalPlayGround.mxml
@@ -0,0 +1,83 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style"
+ xmlns:e="library://ns.apache.org/royale/style-elements">
+
+ <fx:Script>
+ <![CDATA[
+ private function openModal(id:String):void
+ {
+ var modal:Modal = this[id] as Modal;
+ if (modal)
+ modal.open = true;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer vertical="true" gap="24">
+
+ <!-- Button to open basic modal -->
+ <e:Div text="Open Basic Modal" click="openModal('basicModal')" />
+
+ <!-- Button to open easy-dismiss modal -->
+ <e:Div text="Open Easy Dismiss Modal" click="openModal('easyModal')" />
+
+ <!-- Button to open modal with actions -->
+ <e:Div text="Open Modal with Actions"
click="openModal('actionsModal')" />
+
+ <!-- Basic modal -->
+ <s:Modal id="basicModal">
+ <s:ModalBody>
+ <s:ModalTitle text="Hello!" />
+ <e:Div text="Press ESC key or click the button below to
close." />
+ </s:ModalBody>
+ <s:ModalActions>
+ <e:Div text="Close" click="basicModal.open = false" />
+ </s:ModalActions>
+ </s:Modal>
+
+ <!-- Easy dismiss modal (click backdrop to close) -->
+ <s:Modal id="easyModal" easyDismiss="true">
+ <s:ModalBody>
+ <s:ModalTitle text="Easy Dismiss" />
+ <e:Div text="Click outside this dialog or press ESC to close."
/>
+ </s:ModalBody>
+ </s:Modal>
+
+ <!-- Modal with actions -->
+ <s:Modal id="actionsModal">
+ <s:ModalBody>
+ <s:ModalTitle text="Confirm Action" />
+ <e:Div text="Are you sure you want to proceed?" />
+ </s:ModalBody>
+ <s:ModalActions>
+ <e:Div text="Cancel" click="actionsModal.open = false" />
+ <e:Div text="Confirm" click="actionsModal.open = false" />
+ </s:ModalActions>
+ </s:Modal>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+
+</s:Application>
diff --git
a/examples/royale/TourDeStyle/src/main/royale/PaginationPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/PaginationPlayGround.mxml
new file mode 100644
index 0000000000..b7115d5d31
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/PaginationPlayGround.mxml
@@ -0,0 +1,61 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style">
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer vertical="true" gap="24">
+ <s:styleBeads>
+ <s:AlignItems value="flex-start" />
+ </s:styleBeads>
+
+ <!-- Basic pagination with active page 3 -->
+ <s:Pagination>
+ <s:PaginationItem text="1" />
+ <s:PaginationItem text="2" />
+ <s:PaginationItem text="3" selected="true" />
+ <s:PaginationItem text="4" />
+ </s:Pagination>
+
+ <!-- With Prev/Next -->
+ <s:Pagination>
+ <s:PaginationItem text="Prev" selectable="false" />
+ <s:PaginationItem text="1" selected="true" />
+ <s:PaginationItem text="2" />
+ <s:PaginationItem text="3" />
+ <s:PaginationItem text="Next" selectable="false" />
+ </s:Pagination>
+
+ <!-- With disabled items -->
+ <s:Pagination>
+ <s:PaginationItem text="Prev" disabled="true" selectable="false" />
+ <s:PaginationItem text="1" selected="true" />
+ <s:PaginationItem text="2" />
+ <s:PaginationItem text="…" disabled="true" selectable="false" />
+ <s:PaginationItem text="99" />
+ <s:PaginationItem text="100" />
+ <s:PaginationItem text="Next" selectable="false" />
+ </s:Pagination>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+</s:Application>
diff --git a/examples/royale/TourDeStyle/src/main/royale/TabsPlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/TabsPlayGround.mxml
new file mode 100644
index 0000000000..f88de9490b
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/TabsPlayGround.mxml
@@ -0,0 +1,96 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style"
+ xmlns:e="library://ns.apache.org/royale/style-elements">
+ <fx:Script>
+ <![CDATA[
+ private function onTabChange():void
+ {
+ var idx:int = tabBar1.selectedIndex;
+ panel1.visible = (idx == 0);
+ panel2.visible = (idx == 1);
+ panel3.visible = (idx == 2);
+ }
+ ]]>
+ </fx:Script>
+ <fx:Style>
+ @namespace s "library://ns.apache.org/royale/style";
+ s|Tab
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.TabSkin");
+ }
+ s|TabBar
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.TabBarSkin");
+ }
+ s|View
+ {
+ IBeadView:
ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout:
ClassReference("org.apache.royale.style.beads.FlexLayout");
+ }
+ </fx:Style>
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer gap="2rem" vertical="true">
+
+ <!-- Test 1: Tabs with content switching -->
+ <s:FlexContainer vertical="true">
+ <s:TabBar id="tabBar1" selectedIndex="0" change="onTabChange()">
+ <s:tabs>
+ <s:Tab text="Tab 1" />
+ <s:Tab text="Tab 2" />
+ <s:Tab text="Tab 3" />
+ </s:tabs>
+ </s:TabBar>
+ <s:Container id="panel1">
+ <e:Div text="Content for Tab 1: Welcome to the first panel." />
+ </s:Container>
+ <s:Container id="panel2" visible="false">
+ <e:Div text="Content for Tab 2: Here is the second panel." />
+ </s:Container>
+ <s:Container id="panel3" visible="false">
+ <e:Div text="Content for Tab 3: And the third panel." />
+ </s:Container>
+ </s:FlexContainer>
+
+ <!-- Test 2: TabBar with second tab selected -->
+ <s:TabBar selectedIndex="1">
+ <s:tabs>
+ <s:Tab text="Home" />
+ <s:Tab text="Profile" />
+ <s:Tab text="Settings" />
+ </s:tabs>
+ </s:TabBar>
+
+ <!-- Test 3: TabBar with disabled tab -->
+ <s:TabBar selectedIndex="0">
+ <s:tabs>
+ <s:Tab text="Active" />
+ <s:Tab text="Disabled" disabled="true" />
+ <s:Tab text="Another" />
+ </s:tabs>
+ </s:TabBar>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+</s:Application>
diff --git a/examples/royale/TourDeStyle/src/main/royale/TogglePlayGround.mxml
b/examples/royale/TourDeStyle/src/main/royale/TogglePlayGround.mxml
new file mode 100644
index 0000000000..19d3cd0390
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/TogglePlayGround.mxml
@@ -0,0 +1,54 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style">
+ <fx:Style>
+ @namespace s "library://ns.apache.org/royale/style";
+ s|Toggle
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.ToggleSkin");
+ }
+ s|View
+ {
+ IBeadView:
ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout:
ClassReference("org.apache.royale.style.beads.FlexLayout");
+ }
+ </fx:Style>
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer gap="1rem" vertical="true">
+
+ <!-- Basic toggle -->
+ <s:Toggle label="Enable notifications" />
+
+ <!-- Checked by default -->
+ <s:Toggle label="Dark mode" checked="true" />
+
+ <!-- Disabled unchecked -->
+ <s:Toggle label="Disabled off" disabled="true" />
+
+ <!-- Disabled checked -->
+ <s:Toggle label="Disabled on" checked="true" disabled="true" />
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+</s:Application>
diff --git a/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
new file mode 100644
index 0000000000..d214b40e4b
--- /dev/null
+++ b/examples/royale/TourDeStyle/src/main/royale/TourDeStyle.mxml
@@ -0,0 +1,225 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:s="library://ns.apache.org/royale/style"
+ xmlns:e="library://ns.apache.org/royale/style-elements">
+ <fx:Script>
+ <![CDATA[
+ private function onTabChange():void
+ {
+ var idx:int = navBar.selectedIndex;
+ toggleSection.visible = (idx == 0);
+ tabsSection.visible = (idx == 1);
+ cardSection.visible = (idx == 2);
+ dropdownSection.visible = (idx == 3);
+ modalSection.visible = (idx == 4);
+ paginationSection.visible = (idx == 5);
+ }
+
+ private function openModal(id:String):void
+ {
+ var modal:Modal = this[id] as Modal;
+ if (modal)
+ modal.open = true;
+ }
+ ]]>
+ </fx:Script>
+ <fx:Style>
+ @namespace s "library://ns.apache.org/royale/style";
+ s|Tab
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.TabSkin");
+ }
+ s|TabBar
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.TabBarSkin");
+ }
+ s|Toggle
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.ToggleSkin");
+ }
+ s|Dropdown
+ {
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.DropdownSkin");
+ }
+ s|View
+ {
+ IBeadView:
ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout:
ClassReference("org.apache.royale.style.beads.FlexLayout");
+ }
+ </fx:Style>
+
+ <s:initialView>
+ <s:View>
+ <s:FlexContainer vertical="true" gap="24">
+
+ <!-- Navigation -->
+ <s:TabBar id="navBar" selectedIndex="0" change="onTabChange()">
+ <s:tabs>
+ <s:Tab text="Toggle" />
+ <s:Tab text="Tabs" />
+ <s:Tab text="Card" />
+ <s:Tab text="Dropdown" />
+ <s:Tab text="Modal" />
+ <s:Tab text="Pagination" />
+ </s:tabs>
+ </s:TabBar>
+
+ <!-- Toggle Section -->
+ <s:FlexContainer id="toggleSection" gap="1rem" vertical="true">
+ <s:Toggle label="Enable notifications" />
+ <s:Toggle label="Dark mode" checked="true" />
+ <s:Toggle label="Disabled off" disabled="true" />
+ <s:Toggle label="Disabled on" checked="true" disabled="true" />
+ </s:FlexContainer>
+
+ <!-- Tabs Section -->
+ <s:FlexContainer id="tabsSection" visible="false" gap="2rem"
vertical="true">
+ <s:TabBar selectedIndex="1">
+ <s:tabs>
+ <s:Tab text="Home" />
+ <s:Tab text="Profile" />
+ <s:Tab text="Settings" />
+ </s:tabs>
+ </s:TabBar>
+ <s:TabBar selectedIndex="0">
+ <s:tabs>
+ <s:Tab text="Active" />
+ <s:Tab text="Disabled" disabled="true" />
+ <s:Tab text="Another" />
+ </s:tabs>
+ </s:TabBar>
+ </s:FlexContainer>
+
+ <!-- Card Section -->
+ <s:FlexContainer id="cardSection" visible="false" gap="24"
vertical="true">
+ <s:Card width="384">
+ <s:CardBody>
+ <s:CardTitle text="Default Card" />
+ <e:Div text="A card component has a figure, a body part,
and inside body there are title and actions parts." />
+ <s:CardActions>
+ <e:Div text="Buy Now" />
+ </s:CardActions>
+ </s:CardBody>
+ </s:Card>
+ <s:Card width="384" variant="border">
+ <s:CardBody>
+ <s:CardTitle text="Border Card" />
+ <e:Div text="This card uses a border instead of a shadow."
/>
+ <s:CardActions>
+ <e:Div text="Action" />
+ </s:CardActions>
+ </s:CardBody>
+ </s:Card>
+ <s:Card width="384" variant="dash">
+ <s:CardBody>
+ <s:CardTitle text="Dash Border Card" />
+ <e:Div text="This card uses a dashed border style." />
+ <s:CardActions>
+ <e:Div text="Action" />
+ </s:CardActions>
+ </s:CardBody>
+ </s:Card>
+ </s:FlexContainer>
+
+ <!-- Dropdown Section -->
+ <s:FlexContainer id="dropdownSection" visible="false" gap="1rem">
+ <s:Dropdown triggerText="Click me">
+ <e:Div text="Option 1" />
+ <e:Div text="Option 2" />
+ <e:Div text="Option 3" />
+ </s:Dropdown>
+ <s:Dropdown triggerText="Always open" open="true">
+ <e:Div text="Item A" />
+ <e:Div text="Item B" />
+ </s:Dropdown>
+ <s:Dropdown triggerText="Disabled" disabled="true">
+ <e:Div text="Unreachable" />
+ </s:Dropdown>
+ </s:FlexContainer>
+
+ <!-- Modal Section -->
+ <s:FlexContainer id="modalSection" visible="false" gap="24"
vertical="true">
+ <e:Div text="Open Basic Modal" click="openModal('basicModal')" />
+ <e:Div text="Open Easy Dismiss Modal"
click="openModal('easyModal')" />
+ <e:Div text="Open Modal with Actions"
click="openModal('actionsModal')" />
+
+ <s:Modal id="basicModal">
+ <s:ModalBody>
+ <s:ModalTitle text="Hello!" />
+ <e:Div text="Press ESC key or click the button below to
close." />
+ </s:ModalBody>
+ <s:ModalActions>
+ <e:Div text="Close" click="basicModal.open = false" />
+ </s:ModalActions>
+ </s:Modal>
+ <s:Modal id="easyModal" easyDismiss="true">
+ <s:ModalBody>
+ <s:ModalTitle text="Easy Dismiss" />
+ <e:Div text="Click outside this dialog or press ESC to
close." />
+ </s:ModalBody>
+ </s:Modal>
+ <s:Modal id="actionsModal">
+ <s:ModalBody>
+ <s:ModalTitle text="Confirm Action" />
+ <e:Div text="Are you sure you want to proceed?" />
+ </s:ModalBody>
+ <s:ModalActions>
+ <e:Div text="Cancel" click="actionsModal.open = false" />
+ <e:Div text="Confirm" click="actionsModal.open = false" />
+ </s:ModalActions>
+ </s:Modal>
+ </s:FlexContainer>
+
+ <!-- Pagination Section -->
+ <s:FlexContainer id="paginationSection" visible="false" gap="24"
vertical="true">
+ <s:styleBeads>
+ <s:AlignItems value="flex-start" />
+ </s:styleBeads>
+
+ <s:Pagination>
+ <s:PaginationItem text="1" />
+ <s:PaginationItem text="2" />
+ <s:PaginationItem text="3" selected="true" />
+ <s:PaginationItem text="4" />
+ </s:Pagination>
+ <s:Pagination>
+ <s:PaginationItem text="Prev" selectable="false" />
+ <s:PaginationItem text="1" selected="true" />
+ <s:PaginationItem text="2" />
+ <s:PaginationItem text="3" />
+ <s:PaginationItem text="Next" selectable="false" />
+ </s:Pagination>
+ <s:Pagination>
+ <s:PaginationItem text="Prev" disabled="true"
selectable="false" />
+ <s:PaginationItem text="1" selected="true" />
+ <s:PaginationItem text="2" />
+ <s:PaginationItem text="…" disabled="true" selectable="false"
/>
+ <s:PaginationItem text="99" />
+ <s:PaginationItem text="100" />
+ <s:PaginationItem text="Next" selectable="false" />
+ </s:Pagination>
+ </s:FlexContainer>
+
+ </s:FlexContainer>
+ </s:View>
+ </s:initialView>
+
+</s:Application>
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index 1f5a60a709..afc610ae5f 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -293,6 +293,11 @@
<component id="CardTitleSkin"
class="org.apache.royale.style.skins.CardTitleSkin"/>
<component id="CardActionsSkin"
class="org.apache.royale.style.skins.CardActionsSkin"/>
<component id="ToggleSkin" class="org.apache.royale.style.skins.ToggleSkin"/>
+ <component id="DropdownSkin"
class="org.apache.royale.style.skins.DropdownSkin"/>
+ <component id="ModalSkin" class="org.apache.royale.style.skins.ModalSkin"/>
+ <component id="ModalBodySkin"
class="org.apache.royale.style.skins.ModalBodySkin"/>
+ <component id="ModalTitleSkin"
class="org.apache.royale.style.skins.ModalTitleSkin"/>
+ <component id="ModalActionsSkin"
class="org.apache.royale.style.skins.ModalActionsSkin"/>
<component id="PaginationSkin"
class="org.apache.royale.style.skins.PaginationSkin"/>
<component id="PaginationItemSkin"
class="org.apache.royale.style.skins.PaginationItemSkin"/>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TabBarSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TabBarSkin.as
index 9ffea098bc..f9dd1a4dc0 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TabBarSkin.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/TabBarSkin.as
@@ -65,7 +65,7 @@ package org.apache.royale.style.skins
_styles = [
new Display("flex"),
- new AlignItems("end"),
+ new AlignItems("flex-end"),
new FlexWrap("wrap"),
borderWidth,
border
