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/06/04 16:10:56 UTC

[royale-asjs] branch develop updated: BE0015: preparing blog example 15

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 7e94463  BE0015: preparing blog example 15
7e94463 is described below

commit 7e944634b7ad48dd1bc585a67a1d8c2320e9ccb1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 18:10:45 2020 +0200

    BE0015: preparing blog example 15
---
 ...BE0015_Using_Jewel_TileHorizontalLayout.as3proj | 117 +++++++++++++++++++++
 .../README.txt                                     |  27 +++++
 .../asconfig.json                                  |  34 ++++++
 .../pom.xml                                        | 101 ++++++++++++++++++
 .../src/assets/bottle-perspective.afdesign         | Bin 0 -> 116386 bytes
 .../src/assets/bottle.afdesign                     | Bin 0 -> 67557 bytes
 .../src/main/resources/assets/bottle-main.svg      |  21 ++++
 .../src/main/resources/assets/bottle-mask.svg      |  21 ++++
 .../src/main/resources/assets/bottle-shade.svg     |  31 ++++++
 .../resources/jewel-example-index-template.html    |  30 ++++++
 .../BE0015_Using_Jewel_TileHorizontalLayout.mxml   | 113 ++++++++++++++++++++
 11 files changed, 495 insertions(+)

diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/BE0015_Using_Jewel_TileHorizontalLayout.as3proj b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/BE0015_Using_Jewel_TileHorizontalLayout.as3proj
new file mode 100644
index 0000000..150e792
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/BE0015_Using_Jewel_TileHorizontalLayout.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>
+  &lt;!-- Other classes to be compiled into your SWF --&gt;
+  <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/BE0015_Using_Jewel_TileHorizontalLayout/README.txt b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/README.txt
new file mode 100644
index 0000000..05f3524
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/README.txt
@@ -0,0 +1,27 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+
+Using Jewel TileHorizontalLayout
+
+This example shows some supported ways to work with vector graphics in Apache Royale.
+SVG graphics and the powerful ActionScript 3 drawing API:
+
+https://royale.apache.org/working-with-vector-graphics/
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/asconfig.json b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/asconfig.json
new file mode 100644
index 0000000..1dfcb70
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/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_vector_graphics.mxml"
+    ]
+}
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml
new file mode 100644
index 0000000..6e07c26
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml
@@ -0,0 +1,101 @@
+<?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.8-SNAPSHOT</version>
+  </parent>
+
+  <artifactId>BE0015_Using_Jewel_TileHorizontalLayout</artifactId>
+  <version>0.9.8-SNAPSHOT</version>
+  <packaging>swf</packaging>
+
+  <name>Apache Royale: Examples: Blog: 0015: Using Jewel TileHorizontalLayout</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>BE0015_Using_Jewel_TileHorizontalLayout.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>Jewel</artifactId>
+      <version>0.9.8-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Icons</artifactId>
+      <version>0.9.8-SNAPSHOT</version>
+      <type>swc</type>
+      <scope>theme</scope>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>JewelTheme</artifactId>
+      <version>0.9.8-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>Jewel</artifactId>
+          <version>0.9.8-SNAPSHOT</version>
+          <type>swc</type>
+          <classifier>swf</classifier>
+        </dependency>
+        <dependency>
+          <groupId>org.apache.royale.framework</groupId>
+          <artifactId>Icons</artifactId>
+          <version>0.9.8-SNAPSHOT</version>
+          <type>swc</type>
+          <classifier>swf</classifier>
+        </dependency>
+      </dependencies>
+    </profile>
+  </profiles>
+
+<properties /></project>
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/assets/bottle-perspective.afdesign b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/assets/bottle-perspective.afdesign
new file mode 100644
index 0000000..e4a0465
Binary files /dev/null and b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/assets/bottle-perspective.afdesign differ
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/assets/bottle.afdesign b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/assets/bottle.afdesign
new file mode 100644
index 0000000..29e2ea8
Binary files /dev/null and b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/assets/bottle.afdesign differ
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-main.svg b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-main.svg
new file mode 100644
index 0000000..a6ce9d2
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/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/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-mask.svg b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-mask.svg
new file mode 100644
index 0000000..ff2b99e
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/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/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-shade.svg b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-shade.svg
new file mode 100644
index 0000000..f788f8a
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/assets/bottle-shade.svg
@@ -0,0 +1,31 @@
+<?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);"/>
+    <clipPath id="_clip2">
+        <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.074Z"/>
+    </clipPath>
+    <g clip-path="url(#_clip2)">
+        <path d="M170.955,77L194,77L194,245L81,467.049C81,467.049 48.173,471.562 56.009,459C64.639,445.166 171,241 171,241L170.955,77Z" style="fill:white;fill-opacity:0.35;"/>
+    </g>
+    <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/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..140ba98
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/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/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml
new file mode 100644
index 0000000..9475d7d
--- /dev/null
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml
@@ -0,0 +1,113 @@
+<?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">
+
+    <fx:Script>
+    <![CDATA[
+        
+        
+    ]]>
+    </fx:Script>
+
+    <j:valuesImpl>
+        <js:AllCSSValuesImpl />
+    </j:valuesImpl>
+
+    <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="Using Ti" className="primary-normal"/>
+                </j:CardHeader>
+                <j:CardPrimaryContent itemsHorizontalAlign="itemsCentered">
+                    <j:Container localId="fgShape" width="400" height="500">
+                        
+                        <!-- <j:Group className="wrapper" width="100%">
+						<j:beads>
+							<j:TileHorizontalLayout localId="thl" waitForSize="true"/>
+						</j:beads>
+						<j:Button text="1" emphasis="primary" width="60" height="60"/>
+						<j:Button text="2" emphasis="secondary" width="60" height="60"/>
+						<j:Button text="3" emphasis="emphasized" width="60" height="60"/>
+						<j:Button text="4" width="60" height="60"/>
+						<j:Button text="5" emphasis="primary" width="60" height="60"/>
+						<j:Button text="6" emphasis="secondary" width="60" height="60"/>
+						<j:Button text="7" emphasis="emphasized" width="60" height="60"/>
+						<j:Button text="8" width="60" height="60"/>
+						<j:Button text="9" emphasis="primary" width="60" height="60"/>
+						<j:Button text="10" emphasis="secondary" width="60" height="60"/>
+						<j:Button text="11" emphasis="emphasized" width="60" height="60"/>
+						<j:Button text="12" width="60" height="60"/>
+					</j:Group> -->
+
+                    </j:Container>
+                </j:CardPrimaryContent>
+                <j:CardActions itemsVerticalAlign="itemsCentered">
+                    <j:BarSection width="50%">
+                        <!-- <j:VGroup>
+							<j:Label text="columnWidth"/>
+							<j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="thl.columnWidth = event.target.value"/>
+						</j:VGroup>
+						<j:VGroup>
+							<j:Label text="horizontalGap"/>
+							<j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="thl.horizontalGap = event.target.value"/>
+						</j:VGroup>
+						<j:VGroup>
+							<j:Label text="requestedColumnCount"/>
+							<j:HSlider width="200" value="4" minimum="1" maximum="8" valueChange="thl.requestedColumnCount = event.target.value"/>
+						</j:VGroup> -->
+                        <!-- <j:ToggleButton localId="ruleVisibility" 
+                            outlined="true" emphasis="emphasized"
+                            text="Hide Rule" selectedText="Show Rule" selected="true">
+                            <j:icon>
+                                <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY_OFF}" selectedText="{MaterialIconType.VISIBILITY}"/>
+                            </j:icon>
+                        </j:ToggleButton> -->
+                    </j:BarSection>
+                    <j:BarSection width="50%" itemsHorizontalAlign="itemsRight">
+                        <!-- <j:Label text="Slide to fill"/>
+                        <j:HSlider localId="slider" value="0" minimum="0" maximum="500" valueChange="changeFill(event)"/> -->
+                        <!-- <j:VGroup>
+							<j:Label text="rowHeight"/>
+							<j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="thl.rowHeight = event.target.value"/>
+						</j:VGroup>
+						<j:VGroup>
+							<j:Label text="verticalGap"/>
+							<j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="thl.verticalGap = event.target.value"/>
+						</j:VGroup> -->
+                    </j:BarSection>
+                </j:CardActions>
+            </j:Card>
+        </j:View>
+    </j:initialView>
+
+</j:Application>
\ No newline at end of file