[royale-asjs] branch develop updated: tour-de-jewel: Add a DropDownList to select themes dinamically in TDJ home. For now just 12 variations (light/noflat).

[carlosrovira]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira 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 5c61817  tour-de-jewel: Add a DropDownList to select themes 
dinamically in TDJ home. For now just 12 variations (light/noflat).
5c61817 is described below

commit 5c6181718b32191fd604a944e0e76041884ae2a2
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Sat Jan 4 12:25:42 2020 +0100

    tour-de-jewel: Add a DropDownList to select themes dinamically in TDJ home. 
For now just 12 variations (light/noflat).
---
 .../src/main/royale/WelcomeSection.mxml            | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/examples/royale/TourDeJewel/src/main/royale/WelcomeSection.mxml 
b/examples/royale/TourDeJewel/src/main/royale/WelcomeSection.mxml
index 16b54fd..ca7b77c 100644
--- a/examples/royale/TourDeJewel/src/main/royale/WelcomeSection.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/WelcomeSection.mxml
@@ -26,6 +26,17 @@ limitations under the License.
     <fx:Script>
         <![CDATA[
             import org.apache.royale.utils.OSUtils;
+            import org.apache.royale.utils.css.loadCSS;
+            import org.apache.royale.events.Event;
+
+            [Bindable]
+            public var color:String = "Blue";
+
+            public function changeCSS(event:Event):void
+            {
+                color = event.target.selectedItem;
+                loadCSS("assets/themes/Jewel-Light-NoFlat-Primary-" + color + 
"-Theme/defaults.css");
+            }
         ]]>
     </fx:Script>
 
@@ -46,6 +57,18 @@ limitations under the License.
             </html:beads>
         </html:H1>
 
+        <j:VGroup gap="3" itemsHorizontalAlign="itemsCentered">
+            <j:Label text="Choose your Jewel Theme:"/>
+            <j:DropDownList change="changeCSS(event)" selectedIndex="1">
+                <j:dataProvider>
+                    <js:ArrayList source="[Amethyst, Blue, Emerald, Green, 
Orange, Red, Sapphire, Sunflower, Topaz, Turquoise, Violet, Yellow]" />
+                </j:dataProvider>
+                <j:beads>
+                    <j:RequireSelection requireSelection="true"/>
+                </j:beads>
+            </j:DropDownList>
+        </j:VGroup>
+
         <j:Label width="400" multiline="true" html="Jewel is a themeable and 
responsive set of user interface components for Apache Royale to help you 
quickly build the front end of your applications with ActionScript &amp; 
MXML.&lt;br>Check &lt;a 
href='https://royale.apache.org'>https://royale.apache.org&lt;/a>">
             <j:beads>
                 <j:SizeControl size="large"/>