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 2020/03/15 12:17:26 UTC
[royale-asjs] branch develop updated: blog example 14: working with
graphics
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 5203165 blog example 14: working with graphics
5203165 is described below
commit 5203165df09c8b3358fad1554eda4df18721ccc1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 15 13:17:14 2020 +0100
blog example 14: working with graphics
---
.../BE0014_Working_with_Graphics.as3proj | 117 +++++++++++++++++++++
.../BE0014_Working_with_Graphics/asconfig.json | 34 ++++++
examples/blog/BE0014_Working_with_Graphics/pom.xml | 100 ++++++++++++++++++
.../src/main/resources/assets/bottle-main.svg | 21 ++++
.../src/main/resources/assets/bottle-mask.svg | 21 ++++
.../src/main/resources/assets/bottle-shade.svg | 25 +++++
.../src/main/resources/bottle.afdesign | Bin 0 -> 5704413 bytes
.../resources/jewel-example-index-template.html | 30 ++++++
.../main/royale/BE0014_Working_with_Graphics.mxml | 92 ++++++++++++++++
9 files changed, 440 insertions(+)
diff --git a/examples/blog/BE0014_Working_with_Graphics/BE0014_Working_with_Graphics.as3proj b/examples/blog/BE0014_Working_with_Graphics/BE0014_Working_with_Graphics.as3proj
new file mode 100644
index 0000000..150e792
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/BE0014_Working_with_Graphics.as3proj
@@ -0,0 +1,117 @@
+<!--
+
+ 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.
+
+-->
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+ <output>
+ <movie width="800"/>
+ <movie disabled="False"/>
+ <movie path="bin-debug/NewJavaScriptBrowserProject.swf"/>
+ <movie platform="Flash Player"/>
+ <movie fps="60"/>
+ <movie version="11"/>
+ <movie height="600"/>
+ <movie background="#FFFFFF"/>
+ <movie input=""/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <jsOutput>
+ <option path="/Users/christofer.dutz/Library/Containers/com.moonshine-ide/Data/Documents/NewJavaScriptBrowserProject"/>
+ </jsOutput>
+ <classpaths>
+ <class path="src"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option compilerConstants=""/>
+ <option strict="True"/>
+ <option useResourceBundleMetadata="True"/>
+ <option allowSourcePathOverlap="False"/>
+ <option sourceMap="True"/>
+ <option showDeprecationWarnings="True"/>
+ <option benchmark="False"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option customSDK="/Users/christofer.dutz/Downloads/MoonshineSDKs/Royale_SDK/apache-royale-0.9.6-bin-js/royale-asjs"/>
+ <option showActionScriptWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option verboseStackTraces="False"/>
+ <option loadConfig=""/>
+ <option additional="-theme=${royalelib}/themes/JewelTheme/src/main/resources/defaults.css -html-template=src/resources/jewel-index-template.html"/>
+ <option linkReport=""/>
+ <option optimize="False"/>
+ <option locale=""/>
+ <option accessible="False"/>
+ <option staticLinkRSL="False"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option useNetwork="True"/>
+ <option es="False"/>
+ </build>
+ <mavenBuild>
+ <option settingsFilePath=""/>
+ <option mavenBuildPath="/Users/christofer.dutz/Library/Containers/com.moonshine-ide/Data/Documents/NewJavaScriptBrowserProject"/>
+ <option commandLine=""/>
+ <actions>
+ <action action="install" actionName="Build"/>
+ <action action="clean package" actionName="Clean and package"/>
+ <action action="clean" actionName="Clean"/>
+ <action action="clean install" actionName="Clean and Build"/>
+ <action action="war:exploded" actionName="Exploded"/>
+ </actions>
+ </mavenBuild>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/NewJavaScriptBrowserProject.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <trustSVNCertificate>False</trustSVNCertificate>
+ <options>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isRoyale="True"/>
+ <option isExportedToExistingSource="False"/>
+ <option showHiddenPaths="False"/>
+ <option isPrimeFacesVisualEditor="False"/>
+ <option testMovie=""/>
+ <option visualEditorExportPath=""/>
+ </options>
+ <moonshineRunCustomization>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch="/Users/christofer.dutz/Library/Containers/com.moonshine-ide/Data/Documents/NewJavaScriptBrowserProject/bin/js-debug/index.html"/>
+ <option targetPlatform="5"/>
+ <option projectType="2"/>
+ <option customUrlToLaunch=""/>
+ <option deviceSimulator="null"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0014_Working_with_Graphics/asconfig.json b/examples/blog/BE0014_Working_with_Graphics/asconfig.json
new file mode 100644
index 0000000..b6e1e15
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/asconfig.json
@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+{
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale"],
+ "source-map": true,
+ "html-template": "src/main/resources/jewel-example-index-template.html",
+ "theme": "${royalelib}/themes/JewelTheme/src/main/resources/defaults.css"
+ },
+ "copySourcePathAssets": true,
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/BE0014_Working_with_Graphics.mxml"
+ ]
+}
diff --git a/examples/blog/BE0014_Working_with_Graphics/pom.xml b/examples/blog/BE0014_Working_with_Graphics/pom.xml
new file mode 100644
index 0000000..8e9335b
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/pom.xml
@@ -0,0 +1,100 @@
+<?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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.examples</groupId>
+ <artifactId>examples-blog</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0014_Working_with_Graphics</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0014: Working with Graphics</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <mainClass>BE0014_Working_with_Graphics.mxml</mainClass>
+ <targets>${royale.targets}</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html</htmlTemplate>
+ <additionalCompilerOptions>-source-map=true;</additionalCompilerOptions>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Network</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelTheme</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+ <profiles>
+ <profile>
+ <id>option-with-swf</id>
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Network</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ </dependencies>
+ </profile>
+ </profiles>
+
+</project>
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-main.svg b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-main.svg
new file mode 100644
index 0000000..a6ce9d2
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-main.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+ 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.
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+ <path id="shape" d="M350.968,500L49.691,500C39.182,500 29.44,494.501 24.009,485.505C18.577,476.509 18.249,465.327 23.143,456.028C62.915,380.462 140,234 140,234L140,30L264,30L264,234C264,234 339.092,380.871 377.679,456.343C382.434,465.643 382.01,476.747 376.558,485.657C371.107,494.567 361.413,500 350.968,500ZM254,40L150,40L150,234C149.95,235.635 149.616,237.2 148.849,238.657C109.902,312.67 70.942,386.674 31.993,460.685C30.891,462.779 30.165,465.067 29.859,467.413C28.302,479.353 37.815 [...]
+</svg>
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-mask.svg b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-mask.svg
new file mode 100644
index 0000000..ff2b99e
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-mask.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+ 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.
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+ <path id="mask" d="M400,500L350.968,500C361.413,500 371.107,494.567 376.558,485.657C382.01,476.747 382.434,465.643 377.679,456.343C339.092,380.871 264,234 264,234L264,40L140,40L140,234C140,234 62.915,380.462 23.143,456.028C18.249,465.327 18.577,476.509 24.009,485.505C29.44,494.501 39.182,500 49.691,500L0,500L0,0L400,0L400,500Z" style="fill:white;"/>
+</svg>
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-shade.svg b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-shade.svg
new file mode 100644
index 0000000..07be12d
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/assets/bottle-shade.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+ 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.
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+ <path id="inner" d="M369.259,461.074C372.421,467.275 372.131,474.674 368.493,480.609C364.856,486.544 358.395,490.161 351.434,490.158C281.717,490.133 118.985,490.075 48.865,490.05C41.86,490.048 35.367,486.381 31.748,480.384C28.129,474.386 27.911,466.933 31.174,460.735C66.451,393.714 150,234.984 150,234.984L150,40L255,40L254,235C254,235 335.14,394.151 369.259,461.074Z" style="fill:url(#_Radial1);"/>
+ <path d="M369.259,461.074C372.421,467.275 372.131,474.674 368.493,480.609C364.856,486.544 358.395,490.161 351.434,490.158C281.717,490.133 118.985,490.075 48.865,490.05C41.86,490.048 35.367,486.381 31.748,480.384C28.129,474.386 27.911,466.933 31.174,460.735C66.451,393.714 150,234.984 150,234.984L150,40L255,40L254,235C254,235 335.14,394.151 369.259,461.074ZM244.949,50L160,50L160,234.984C160,236.607 159.605,238.206 158.849,239.642C158.849,239.642 75.3,398.371 40.023,465.392C38.392,468.4 [...]
+ <defs>
+ <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(229.791,1.35475,-1.98413,336.545,205.755,161.944)"><stop offset="0" style="stop-color:white;stop-opacity:0.2"/><stop offset="0.43" style="stop-color:white;stop-opacity:0.34"/><stop offset="1" style="stop-color:white;stop-opacity:0.65"/></radialGradient>
+ </defs>
+</svg>
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign
new file mode 100644
index 0000000..694129c
Binary files /dev/null and b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/bottle.afdesign differ
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..140ba98
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/src/main/resources/jewel-example-index-template.html
@@ -0,0 +1,30 @@
+<!--
+ 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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml b/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml
new file mode 100644
index 0000000..a809a96
--- /dev/null
+++ b/examples/blog/BE0014_Working_with_Graphics/src/main/royale/BE0014_Working_with_Graphics.mxml
@@ -0,0 +1,92 @@
+<?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.
+
+-->
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:svg="library://ns.apache.org/royale/svg">
+
+ <fx:Script>
+ <![CDATA[
+ private function changeFill(event:ValueChangeEvent):void {
+ if(slider.value <= 400)
+ {
+ bgShape.height = slider.value;
+ bgShape.y = fgShape.height - slider.value;
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ApplicationDataBinding/>
+ </j:beads>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:HorizontalCenteredLayout/>
+ <j:Paddings padding="50"/>
+ </j:beads>
+
+ <j:Card width="460" height="680">
+ <j:CardHeader>
+ <html:H3 text="Working with Graphics" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent itemsHorizontalAlign="itemsCentered">
+ <j:Group width="400" height="500">
+ <j:Group localId="bgShape" width="400" height="0" className="bgshape"/>
+ <!-- fill mask -->
+ <svg:Image localId="fgShape" src="assets/bottle-mask.svg" width="400" height="500"/>
+
+ <!-- inner shade -->
+ <svg:Image src="assets/bottle-shade.svg" width="400" height="500"/>
+
+ <!-- main shape -->
+ <svg:Image src="assets/bottle-main.svg" width="400" height="500"/>
+ </j:Group>
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Slide to fill"/>
+ <j:HSlider localId="slider" width="250" value="0" minimum="0" maximum="500" valueChange="changeFill(event)"/>
+ </j:CardActions>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+
+ <fx:Style>
+ @namespace "http://www.w3.org/1999/xhtml";
+ @namespace svg "library://ns.apache.org/royale/svg";
+
+ .bgshape
+ {
+ background: #15CF12;
+ }
+
+ svg|Image
+ {
+ vertical-align: top;
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ImageModel");
+ IBeadView: ClassReference("org.apache.royale.svg.beads.ImageView");
+ }
+ </fx:Style>
+
+</j:Application>
\ No newline at end of file