This is an automated email from the ASF dual-hosted git repository.
github-bot pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/royale-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 2091733a Deploy site
2091733a is described below
commit 2091733a0a3aaafd757695c043a426f90a0f4666
Author: GitHub Actions <[email protected]>
AuthorDate: Wed May 31 09:38:07 2023 +0000
Deploy site
---
blog/apache-royale-v0-9-10-released/index.html | 1 +
blog/index.html | 2 +-
blog/page/2/index.html | 88 +------------
blog/page/3/index.html | 166 ++++++++++++------------
blog/page/4/index.html | 103 +++++++++++----
blog/page/5/index.html | 149 ++++-----------------
blog/page/6/index.html | 172 ++++++++++++++++++-------
blog/page/7/index.html | 88 +++++++------
blog/page/8/index.html | 44 ++++++-
blog/page/9/index.html | 2 +-
feed/index.xml | 63 ++++++++-
index.html | 2 +-
12 files changed, 471 insertions(+), 409 deletions(-)
diff --git a/blog/apache-royale-v0-9-10-released/index.html
b/blog/apache-royale-v0-9-10-released/index.html
new file mode 100644
index 00000000..9b699101
--- /dev/null
+++ b/blog/apache-royale-v0-9-10-released/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale v0.9.10
released!</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel [...]
\ No newline at end of file
diff --git a/blog/index.html b/blog/index.html
index b3c7e931..395de1d4 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
\ No newline at end of file
diff --git a/blog/page/2/index.html b/blog/page/2/index.html
index d6a0d123..2e297d76 100644
--- a/blog/page/2/index.html
+++ b/blog/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
<j:TabBar localId="tabbar" width="100%"
selectedIndex="0" sameWidths="true"
itemRenderer="itemRenderers.TabBarVerticalIconItemRenderer">
<js:ArrayList>
@@ -76,88 +76,4 @@
<j:HSlider width="200" value="85"
minimum="50" maximum="150"
valueChange="tabbar.selectedIndex == 0 ? thl.columnWidth =
event.target.value : thll.columnWidth = event.target.value;"/>
</j:VGroup>
-</code></pre><p>We use the tabbar selectedIndex to affect the current selected
content layout and avoid changing the content layout in the other tab. Check
the final code example to see the rest of sliders since all are
similar.</p><p>And that's all! I hope you like this layout example in Royale.
As always, enjoy coding with Apache Royale!</p><h2>Where to go from
here</h2><ul><li><a
href="https://apache.github.io/royale-docs/features/data-binding";>Apache Royale
Data Binding documentation [...]
- <j:CardHeader>
- <html:H3 text="Working with vector graphics"
className="primary-normal"/>
- </j:CardHeader>
- <j:CardPrimaryContent itemsHorizontalAlign="itemsCentered">
-
- <!-- Here will have the bottle -->
-
- </j:CardPrimaryContent>
- <j:CardActions itemsHorizontalAlign="itemsRight"
itemsVerticalAlign="itemsCentered">
- <j:BarSection width="50%">
-
- <!-- Here will go the ToggleButton -->
-
- </j:BarSection>
- <j:BarSection width="50%"
itemsHorizontalAlign="itemsRight">
-
- <!-- Here will go the Slider -->
-
- </j:BarSection>
- </j:CardActions>
-</j:Card>
-</code></pre><p>With this code in place we can…</p><h2>Create the
bottle</h2><p>We use SVG graphics to assemble the flask, and
<strong>ActionScript 3</strong> code using the powerful <strong>Flash drawing
API</strong> to create and manage the liquid. We're using both to show you both
options so you have more weapons in your arsenal.</p><p>For the flask, I
created three SVG files using a design tool. You can use whatever tool you
prefer to draw vector art and export it in SVG format. I us [...]
-
- <!-- liquid -->
- <js:UIGraphicsBase localId="bgShape" width="400"
height="500"/>
-
- <!-- rule -->
- <j:Group>
- <svg:Rect localId="rule" x="180"
y="{bgShape.height - rule.height}" width="6"
height="350">
- <svg:fill>
- <js:SolidColor color="#ff0000"
alpha=".5"/>
- </svg:fill>
- </svg:Rect>
- </j:Group>
- <!-- fill mask -->
- <svg:Image 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:Container>
-</code></pre><p>Notice that the fluid is declared first so the other shapes
can hide the fluid that is outside the flask shape.</p><h2>Fluid
controls</h2><p>To provide some interactivity we add a
<strong>ToogleButton</strong> and an <strong>HSlider</strong>. The button lets
you show and hide the indicator line; move the slider to change the fluid level
from empty to full.</p><p>The <strong>ToogleButton</strong> has the following
code:</p><pre><code class="language-mxml"><j:ToggleButto [...]
- outlined="true" emphasis="emphasized"
- text="Hide Rule" selectedText="Show Rule"
selected="true">
- <j:icon>
- <js:ToggleFontIcon
text="{MaterialIconType.VISIBILITY_OFF}"
selectedText="{MaterialIconType.VISIBILITY}"
material="true"/>
- </j:icon>
-</j:ToggleButton>
-</code></pre><p>It uses an outlined style with emphasized coloring, and <a
href="https://www.material.io/resources/icons/?style=baseline";>material
icons</a> and texts for both selected and unselected states.</p><h2>Show and
Hide the indicator with binding</h2><p>We control the visibility of the red
indicator line with the <strong>data binding</strong> Royale
feature:</p><p>First add <strong>ApplicationDataBinding</strong> to the
application beads to make Royale support binding at that le [...]
-<j:Group visible="{ruleVisibility.selected}">
-</code></pre><p>When you run the application, click the button to show and
hide the red indicator.</p><h2>Add the slider</h2><p>We finish the action
controls part by adding a label and a slider in the last
<strong>BarSection</strong> of the <strong>CardActions</strong>. The slider
lets you change the fluid level.</p><pre><code
class="language-mxml"><j:Label text="Slide to fill"/>
-<j:HSlider localId="slider" value="0"
minimum="0" maximum="500"/>
-</code></pre><h2>Drawing the fluid</h2><p>Using the drawing API in Royale is
easy, and well-supported by both <strong>JavaScript</strong> and
<strong>SWF</strong>. We get the <strong>Graphics</strong> instance of the
<strong>UIGraphicsBase</strong> object in the following way:</p><pre><code
class="language-as3">var g:Graphics = Graphics.getInstanceFor(bgShape);
-</code></pre><p>Now we can use the graphics object to invoke drawing functions
like <strong>moveTo</strong>, <strong>lineTo</strong>, and more.</p><p>To draw
the fluid we use the following function using fills, lines and quadratic bezier
curves:</p><pre><code class="language-as3">/**
- * Draw the liquid to fill the bottle
- */
-private function drawLiquid(g:Graphics, color:Number, alpha:Number, x:int,
y:int, width:int, height:int, wave:int):void {
- if(y > height)
- y = height;
- g.beginFill(color, alpha);
- g.moveTo(x, height);
- g.lineTo(x, y);
- g.curveTo(width / 4, y - wave, width / 2, y);
- g.lineTo(width / 2, y)
- g.curveTo(width * 3 / 4, y + wave, width, y);
- g.lineTo(width, height);
- g.lineTo(x, height);
- g.endFill();
-}
-</code></pre><p>Then to join all the pieces we add a
<strong>valueChange</strong> event handler to the
<strong>HSlider</strong>:</p><pre><code class="language-mxml"><j:HSlider
localId="slider" value="0" minimum="0"
maximum="500" valueChange="changeFill(event)"/>
-</code></pre><p>The <strong>changeFill</strong> function is the
following:</p><pre><code class="language-as3">/**
- * Fill the bottle
- */
-private function changeFill(event:ValueChangeEvent):void {
- var g:Graphics = Graphics.getInstanceFor(bgShape);
- var newHeight:Number = transformValueFromRange(slider.value,
slider.minimum, slider.maximum, 0, rule.height);
- var newY:Number = fgShape.height - newHeight;
-
- g.clear();
- drawLiquid(g, liquidColor, .5, 0, newY, 400, 500, -15);
- drawLiquid(g, liquidColor, 1, 0, newY, 400, 500, 30);
-}
-</code></pre><p>When we change the <strong>HSlider</strong> position, the code
calls the function, gets the graphic object, calculates the new height value
based on the current container height (transforming ranges), clears all
drawings and redraws two different liquids with some displacement on X and
change on the wave length with the new values.</p><p>And that's all! I hope you
like this drawing feature in Royale. You'll be able to do many creative things
in your Royale applications wi [...]
\ No newline at end of file
+</code></pre><p>We use the tabbar selectedIndex to affect the current selected
content layout and avoid changing the content layout in the other tab. Check
the final code example to see the rest of sliders since all are
similar.</p><p>And that's all! I hope you like this layout example in Royale.
As always, enjoy coding with Apache Royale!</p><h2>Where to go from
here</h2><ul><li><a
href="https://apache.github.io/royale-docs/features/data-binding";>Apache Royale
Data Binding documentation [...]
\ No newline at end of file
diff --git a/blog/page/3/index.html b/blog/page/3/index.html
index 78af44e7..24ec9579 100644
--- a/blog/page/3/index.html
+++ b/blog/page/3/index.html
@@ -1,4 +1,88 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+ <j:CardHeader>
+ <html:H3 text="Working with vector graphics"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent itemsHorizontalAlign="itemsCentered">
+
+ <!-- Here will have the bottle -->
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight"
itemsVerticalAlign="itemsCentered">
+ <j:BarSection width="50%">
+
+ <!-- Here will go the ToggleButton -->
+
+ </j:BarSection>
+ <j:BarSection width="50%"
itemsHorizontalAlign="itemsRight">
+
+ <!-- Here will go the Slider -->
+
+ </j:BarSection>
+ </j:CardActions>
+</j:Card>
+</code></pre><p>With this code in place we can…</p><h2>Create the
bottle</h2><p>We use SVG graphics to assemble the flask, and
<strong>ActionScript 3</strong> code using the powerful <strong>Flash drawing
API</strong> to create and manage the liquid. We're using both to show you both
options so you have more weapons in your arsenal.</p><p>For the flask, I
created three SVG files using a design tool. You can use whatever tool you
prefer to draw vector art and export it in SVG format. I us [...]
+
+ <!-- liquid -->
+ <js:UIGraphicsBase localId="bgShape" width="400"
height="500"/>
+
+ <!-- rule -->
+ <j:Group>
+ <svg:Rect localId="rule" x="180"
y="{bgShape.height - rule.height}" width="6"
height="350">
+ <svg:fill>
+ <js:SolidColor color="#ff0000"
alpha=".5"/>
+ </svg:fill>
+ </svg:Rect>
+ </j:Group>
+ <!-- fill mask -->
+ <svg:Image 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:Container>
+</code></pre><p>Notice that the fluid is declared first so the other shapes
can hide the fluid that is outside the flask shape.</p><h2>Fluid
controls</h2><p>To provide some interactivity we add a
<strong>ToogleButton</strong> and an <strong>HSlider</strong>. The button lets
you show and hide the indicator line; move the slider to change the fluid level
from empty to full.</p><p>The <strong>ToogleButton</strong> has the following
code:</p><pre><code class="language-mxml"><j:ToggleButto [...]
+ outlined="true" emphasis="emphasized"
+ text="Hide Rule" selectedText="Show Rule"
selected="true">
+ <j:icon>
+ <js:ToggleFontIcon
text="{MaterialIconType.VISIBILITY_OFF}"
selectedText="{MaterialIconType.VISIBILITY}"
material="true"/>
+ </j:icon>
+</j:ToggleButton>
+</code></pre><p>It uses an outlined style with emphasized coloring, and <a
href="https://www.material.io/resources/icons/?style=baseline";>material
icons</a> and texts for both selected and unselected states.</p><h2>Show and
Hide the indicator with binding</h2><p>We control the visibility of the red
indicator line with the <strong>data binding</strong> Royale
feature:</p><p>First add <strong>ApplicationDataBinding</strong> to the
application beads to make Royale support binding at that le [...]
+<j:Group visible="{ruleVisibility.selected}">
+</code></pre><p>When you run the application, click the button to show and
hide the red indicator.</p><h2>Add the slider</h2><p>We finish the action
controls part by adding a label and a slider in the last
<strong>BarSection</strong> of the <strong>CardActions</strong>. The slider
lets you change the fluid level.</p><pre><code
class="language-mxml"><j:Label text="Slide to fill"/>
+<j:HSlider localId="slider" value="0"
minimum="0" maximum="500"/>
+</code></pre><h2>Drawing the fluid</h2><p>Using the drawing API in Royale is
easy, and well-supported by both <strong>JavaScript</strong> and
<strong>SWF</strong>. We get the <strong>Graphics</strong> instance of the
<strong>UIGraphicsBase</strong> object in the following way:</p><pre><code
class="language-as3">var g:Graphics = Graphics.getInstanceFor(bgShape);
+</code></pre><p>Now we can use the graphics object to invoke drawing functions
like <strong>moveTo</strong>, <strong>lineTo</strong>, and more.</p><p>To draw
the fluid we use the following function using fills, lines and quadratic bezier
curves:</p><pre><code class="language-as3">/**
+ * Draw the liquid to fill the bottle
+ */
+private function drawLiquid(g:Graphics, color:Number, alpha:Number, x:int,
y:int, width:int, height:int, wave:int):void {
+ if(y > height)
+ y = height;
+ g.beginFill(color, alpha);
+ g.moveTo(x, height);
+ g.lineTo(x, y);
+ g.curveTo(width / 4, y - wave, width / 2, y);
+ g.lineTo(width / 2, y)
+ g.curveTo(width * 3 / 4, y + wave, width, y);
+ g.lineTo(width, height);
+ g.lineTo(x, height);
+ g.endFill();
+}
+</code></pre><p>Then to join all the pieces we add a
<strong>valueChange</strong> event handler to the
<strong>HSlider</strong>:</p><pre><code class="language-mxml"><j:HSlider
localId="slider" value="0" minimum="0"
maximum="500" valueChange="changeFill(event)"/>
+</code></pre><p>The <strong>changeFill</strong> function is the
following:</p><pre><code class="language-as3">/**
+ * Fill the bottle
+ */
+private function changeFill(event:ValueChangeEvent):void {
+ var g:Graphics = Graphics.getInstanceFor(bgShape);
+ var newHeight:Number = transformValueFromRange(slider.value,
slider.minimum, slider.maximum, 0, rule.height);
+ var newY:Number = fgShape.height - newHeight;
+
+ g.clear();
+ drawLiquid(g, liquidColor, .5, 0, newY, 400, 500, -15);
+ drawLiquid(g, liquidColor, 1, 0, newY, 400, 500, 30);
+}
+</code></pre><p>When we change the <strong>HSlider</strong> position, the code
calls the function, gets the graphic object, calculates the new height value
based on the current container height (transforming ranges), clears all
drawings and redraws two different liquids with some displacement on X and
change on the wave length with the new values.</p><p>And that's all! I hope you
like this drawing feature in Royale. You'll be able to do many creative things
in your Royale applications wi [...]
├── package.json
├── main.js
└── index.html
@@ -262,82 +346,4 @@ ipcMain.on("mainMessageHandler", (event, arg)
=> {
var time = new Date().toLocaleTimeString();
win.webContents.send("rendererMessageHandler", "hello there.
it's " + time);
})
-</code></pre><p>Notice the <strong>rendererMessageHandler</strong>. We have
added a listener for this event in
<strong>HelloWorld.mxml</strong>.</p><p>Launch the application and click the
<strong>Hello World</strong> button.</p><p><img
src="/img/blog/hello-world-electron.png" alt=""></p><p><em>Hello World
message</em></p><h2>Debugging</h2><p>To debug the <strong>Renderer</strong>
process, <strong>HelloWorld.mxml</strong>, add a breakpoint in the button click
handler. Open the debug view [...]
- 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[
- public function loadModule():void
- {
- moduleLoader.loadModule();
- }
- ]]>
- </fx:Script>
-
- <j:beads>
- <js:ApplicationDataBinding />
- </j:beads>
-
- <j:initialView>
- <j:View>
- <j:beads>
- <j:HorizontalCenteredLayout/>
- </j:beads>
-
- <j:Card percentWidth="90">
- <html:H3 text="Dividing an Apache Royale application
with modules"/>
-
- <j:Label html="This example uses Modules to load parts
of the application"/>
-
- <j:ModuleLoader localId="moduleLoader"
autoLoad="false"
- modulePath="modules"
moduleName="JewelModule"/>
-
- <j:Button text="Load a Module"
emphasis="primary" click="loadModule()"/>
- </j:Card>
- </j:View>
- </j:initialView>
-</j:Application>
-</code></pre><p>As you can see, the <strong>ModuleLoader</strong> needs to
know the <strong>modulePath</strong> (the path where the module can be found)
and the <strong>moduleName</strong> (the name of the module to load). We set
<strong>autoLoad</strong> to false to avoid having the module load when
<strong>ModuleLoader</strong> is added to the application. The module loads
when a user pushes the button that calls
<strong>moduleLoader.loadModule()</strong>. That's all!</p><h2>The Sample [...]
- xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:js="library://ns.apache.org/royale/basic"
- initComplete="initModule()">
-
- <fx:Script>
- <![CDATA[
- private function initModule():void
- {
- trace("Initialize the module!");
- }
- ]]>
- </fx:Script>
-
- <j:beads>
- <js:ContainerDataBinding/>
- <j:VerticalLayout/>
- </j:beads>
-
- <j:valuesImpl>
- <js:SimpleCSSValuesImpl/>
- </j:valuesImpl>
-
- <j:HGroup gap="3">
- <j:IconTextInput>
- <j:beads>
- <j:TextPrompt prompt="Search..."/>
- <j:SizeControl size="xlarge"/>
- </j:beads>
- <j:icon>
- <js:FontIcon text="{MaterialIconType.SEARCH}"
material="true"/>
- </j:icon>
- </j:IconTextInput>
- <j:Button text="Search" emphasis="secondary">
- <j:beads>
- <j:SizeControl size="xlarge"/>
- </j:beads>
- </j:Button>
- </j:HGroup>
-
-</j:Module>
-</code></pre><p>We need to use the <strong>Module</strong> tag as the main
tag. This means that the module can't be loaded on its own. It needs to be
parented by an application and loaded by a ModuleLoader.</p><p>The content of
the module can be whatever code you want. In this case we are adding just a few
Jewel controls to show a big search box.</p><p>Notice that the module has an
<strong>initComplete</strong> handler where you can execute code you need to
initialize the module (in this [...]
\ No newline at end of file
+</code></pre><p>Notice the <strong>rendererMessageHandler</strong>. We have
added a listener for this event in
<strong>HelloWorld.mxml</strong>.</p><p>Launch the application and click the
<strong>Hello World</strong> button.</p><p><img
src="/img/blog/hello-world-electron.png" alt=""></p><p><em>Hello World
message</em></p><h2>Debugging</h2><p>To debug the <strong>Renderer</strong>
process, <strong>HelloWorld.mxml</strong>, add a breakpoint in the button click
handler. Open the debug view [...]
\ No newline at end of file
diff --git a/blog/page/4/index.html b/blog/page/4/index.html
index a53fe210..4d1e75f0 100644
--- a/blog/page/4/index.html
+++ b/blog/page/4/index.html
@@ -1,4 +1,82 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+ 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[
+ public function loadModule():void
+ {
+ moduleLoader.loadModule();
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ApplicationDataBinding />
+ </j:beads>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:HorizontalCenteredLayout/>
+ </j:beads>
+
+ <j:Card percentWidth="90">
+ <html:H3 text="Dividing an Apache Royale application
with modules"/>
+
+ <j:Label html="This example uses Modules to load parts
of the application"/>
+
+ <j:ModuleLoader localId="moduleLoader"
autoLoad="false"
+ modulePath="modules"
moduleName="JewelModule"/>
+
+ <j:Button text="Load a Module"
emphasis="primary" click="loadModule()"/>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+</j:Application>
+</code></pre><p>As you can see, the <strong>ModuleLoader</strong> needs to
know the <strong>modulePath</strong> (the path where the module can be found)
and the <strong>moduleName</strong> (the name of the module to load). We set
<strong>autoLoad</strong> to false to avoid having the module load when
<strong>ModuleLoader</strong> is added to the application. The module loads
when a user pushes the button that calls
<strong>moduleLoader.loadModule()</strong>. That's all!</p><h2>The Sample [...]
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ initComplete="initModule()">
+
+ <fx:Script>
+ <![CDATA[
+ private function initModule():void
+ {
+ trace("Initialize the module!");
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ <j:VerticalLayout/>
+ </j:beads>
+
+ <j:valuesImpl>
+ <js:SimpleCSSValuesImpl/>
+ </j:valuesImpl>
+
+ <j:HGroup gap="3">
+ <j:IconTextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Search..."/>
+ <j:SizeControl size="xlarge"/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}"
material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+ <j:Button text="Search" emphasis="secondary">
+ <j:beads>
+ <j:SizeControl size="xlarge"/>
+ </j:beads>
+ </j:Button>
+ </j:HGroup>
+
+</j:Module>
+</code></pre><p>We need to use the <strong>Module</strong> tag as the main
tag. This means that the module can't be loaded on its own. It needs to be
parented by an application and loaded by a ModuleLoader.</p><p>The content of
the module can be whatever code you want. In this case we are adding just a few
Jewel controls to show a big search box.</p><p>Notice that the module has an
<strong>initComplete</strong> handler where you can execute code you need to
initialize the module (in this [...]
//
// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements. See the NOTICE file distributed with
@@ -113,25 +191,4 @@ hljs["highlightBlock"](block);
</j:View>
</j:initialView>
</j:Application>
-</code></pre><p>In the example code you can see how we call the
<em>hljs.highlightBlock</em> method with the recommended dot syntax as with any
other ActionScript code, creating a seamless integration between your project
code and the external JavaScript code.</p><h2>Conclusion</h2><p>You can see how
simple and elegant it can be to use external JS code, while not compromising
the safe syntax you have when using the MXML and AS3 languages, to give you
more dynamic options for your applica [...]
-</code></pre><h2>Create a new project</h2><ol><li>Create a new, empty folder
for your project, and name it <em>HelloNode</em>.</li><li>Inside the new
project, create a new folder named <em>src</em>. This is where our ActionScript
classes will go.</li><li>Inside the <em>src</em> folder, create a file named
<em>HelloNode.as</em>, and add the following code:</li></ol><pre><code
class="language-as3">package
-{
- public class HelloNode
- {
- public function HelloNode()
- {
- console.log("Hello", process.release.name,
process.version);
- dns.lookup("localhost", null, dnsLookupCallback);
- }
-
- private function dnsLookupCallback(error:Object, address:String):void
- {
- console.log("The address of localhost is:", address);
- }
- }
-}
-</code></pre><p>In this class, we're doing two things. First, we're printing
the version of Node to the console. Then, we're using Node's built-in <a
href="https://nodejs.org/api/dns.html";><strong>dns</strong></a> module to look
up an IP address.</p><blockquote><p>It is not necessary to call
<code>require()</code> for built-in Node modules in ActionScript. The compiler
will detect when a module is used, and it will generate the appropriate call to
<code>require()</code> automatically whe [...]
-</code></pre><p>This will produce a folder named <em>bin</em> containing
<em>js-debug</em> and <em>js-release</em> folders. The <em>js-debug</em> folder
contains JavaScript that is easy to read, and each class is loaded at runtime
from a separate file. The <em>js-release</em> folder contains JavaScript that
has been concatenated and minified for production.</p><p>The project should now
contain the following files and folders:</p><p><img
src="/img/blog/[email protected]" alt="Scre [...]
-</code></pre><p>You should see the following output in your
console:</p><pre><code>Hello node v6.11.0
-The address of localhost is: 127.0.0.1
-</code></pre><p>(The Node version number might be different,
obviously!)</p><h2>What's Next?</h2><p>This is just a simple example, but it
gives you a glimpse of how developers can bring ActionScript server-side using
Apache Royale and Node.js. By using an established ecosystem like Node.js,
ActionScript developers can take advantage of all of the libraries published to
NPM and join a large, vibrant community.</p></div><a class="btn btn-quiet"
href="/blog/page/3/"><i class="fa fa-arrow-le [...]
\ No newline at end of file
+</code></pre><p>In the example code you can see how we call the
<em>hljs.highlightBlock</em> method with the recommended dot syntax as with any
other ActionScript code, creating a seamless integration between your project
code and the external JavaScript code.</p><h2>Conclusion</h2><p>You can see how
simple and elegant it can be to use external JS code, while not compromising
the safe syntax you have when using the MXML and AS3 languages, to give you
more dynamic options for your applica [...]
\ No newline at end of file
diff --git a/blog/page/5/index.html b/blog/page/5/index.html
index 3483a3c2..55a98c6c 100644
--- a/blog/page/5/index.html
+++ b/blog/page/5/index.html
@@ -1,4 +1,25 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+</code></pre><h2>Create a new project</h2><ol><li>Create a new, empty folder
for your project, and name it <em>HelloNode</em>.</li><li>Inside the new
project, create a new folder named <em>src</em>. This is where our ActionScript
classes will go.</li><li>Inside the <em>src</em> folder, create a file named
<em>HelloNode.as</em>, and add the following code:</li></ol><pre><code
class="language-as3">package
+{
+ public class HelloNode
+ {
+ public function HelloNode()
+ {
+ console.log("Hello", process.release.name,
process.version);
+ dns.lookup("localhost", null, dnsLookupCallback);
+ }
+
+ private function dnsLookupCallback(error:Object, address:String):void
+ {
+ console.log("The address of localhost is:", address);
+ }
+ }
+}
+</code></pre><p>In this class, we're doing two things. First, we're printing
the version of Node to the console. Then, we're using Node's built-in <a
href="https://nodejs.org/api/dns.html";><strong>dns</strong></a> module to look
up an IP address.</p><blockquote><p>It is not necessary to call
<code>require()</code> for built-in Node modules in ActionScript. The compiler
will detect when a module is used, and it will generate the appropriate call to
<code>require()</code> automatically whe [...]
+</code></pre><p>This will produce a folder named <em>bin</em> containing
<em>js-debug</em> and <em>js-release</em> folders. The <em>js-debug</em> folder
contains JavaScript that is easy to read, and each class is loaded at runtime
from a separate file. The <em>js-release</em> folder contains JavaScript that
has been concatenated and minified for production.</p><p>The project should now
contain the following files and folders:</p><p><img
src="/img/blog/[email protected]" alt="Scre [...]
+</code></pre><p>You should see the following output in your
console:</p><pre><code>Hello node v6.11.0
+The address of localhost is: 127.0.0.1
+</code></pre><p>(The Node version number might be different,
obviously!)</p><h2>What's Next?</h2><p>This is just a simple example, but it
gives you a glimpse of how developers can bring ActionScript server-side using
Apache Royale and Node.js. By using an established ecosystem like Node.js,
ActionScript developers can take advantage of all of the libraries published to
NPM and join a large, vibrant community.</p></div><h2 class="post-title"><a
href="/blog/loading-external-data-through-ht [...]
<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"
@@ -225,128 +246,4 @@
</j:initialView>
</j:Application>
-</code></pre><p>This example takes the <a
href="https://royale.apache.org/using-jewel-alert-control/";>Using the Jewel
Alert Control</a> example and uses the Royale API to add content and customize
some parts of the Alert.</p><p>The code is more complex than in some of our
other examples, for teaching purposes:</p><ul><li>In the
<strong>clickHandler</strong> method, we create an Alert control and create a
CheckBox to add to the Alert's content zone. Then we call the
<strong>expandButtons< [...]
-<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:models="models.*">
-
- <fx:Style>
- @namespace "http://www.w3.org/1999/xhtml";
- @namespace j "library://ns.apache.org/royale/jewel";
-
- .iconListItemRenderer
- {
- IItemRenderer:
ClassReference("itemRenderers.IconListItemRenderer");
- }
- .iconListItemRenderer .fonticon
- {
- margin-right: 24px;
- }
- </fx:Style>
-
- <j:model>
- <models:ListsModel id="listModel"/>
- </j:model>
-
- <j:initialView>
- <j:View>
- <j:beads>
- <j:VerticalCenteredLayout/>
- </j:beads>
-
- <j:Card width="340">
- <j:CardHeader>
- <html:H3 text="Jewel List With ItemRenderer"
className="primary-normal"/>
- </j:CardHeader>
- <j:CardPrimaryContent>
-
- <j:List width="100%" height="300"
className="iconListItemRenderer">
- <j:beads>
- <js:ConstantBinding
- sourceID="listModel"
- sourcePropertyName="iconListData"
-
destinationPropertyName="dataProvider"/>
- </j:beads>
- </j:List>
-
- </j:CardPrimaryContent>
- </j:Card>
- </j:View>
- </j:initialView>
-
-</j:Application>
-</code></pre><p>By default, Apache Royale Jewel List-based controls display
their data as plain text using <strong>ListItemRenderer</strong>. But Royale is
capable of much more, and you can extend ListItemRenderer to display the items
in your list in a pleasing and user-friendly way.</p><p>In this example we
created an <strong>IconListItemRenderer</strong> in mxml that extends
ListItemRenderer:</p><pre><code class="language-mxml"><?xml
version="1.0" encoding="utf-8"?>
-<j:ListItemRenderer 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[
- import vos.IconListVO;
-
- [Bindable("dataChange")]
- public function get iconList():IconListVO
- {
- return data as IconListVO;
- }
- ]]>
- </fx:Script>
-
- <j:beads>
- <js:ItemRendererDataBinding />
- <j:HorizontalLayout gap="3"
itemsVerticalAlign="itemsCenter"/>
- </j:beads>
-
- <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
visible="{iconList ? iconList.icon != null : false}"/>
-
- <html:Span text="{iconList ? iconList.label : ''}"/>
-
-</j:ListItemRenderer>
-</code></pre><p>The list gets its items from the data provider and passes them
through the item renderer. The item renderer models each item in a consistent
way: it adds a <strong>FontIcon</strong> to display an appropriate icon
(selected, in this case, from the Google Material Icons font) at the left, and
the text of the item in a Label to the right. To manage the components for each
list item, you can use absolute positioning, layout classes or CSS. We used CSS
in the <strong>fx:Style< [...]
-{
- import org.apache.royale.collections.ArrayList;
- import vos.IconListVO;
-
- public class ListsModel
- {
- /**
- * this is the dataProvider for the List
- */
- private var _iconListData:ArrayList = new ArrayList([
- new IconListVO("Alert", MaterialIconType.WEB_ASSET),
- new IconListVO("Button", MaterialIconType.CROP_7_5),
- new IconListVO("DropDownList",
MaterialIconType.CREDIT_CARD),
- new IconListVO("CheckBox", MaterialIconType.CHECK_BOX),
- new IconListVO("Label", MaterialIconType.LABEL),
- new IconListVO("List", MaterialIconType.LIST_ALT),
- new IconListVO("RadioButton",
MaterialIconType.RADIO_BUTTON_CHECKED),
- new IconListVO("Slider", MaterialIconType.STORAGE),
- new IconListVO("Text", MaterialIconType.SUBJECT),
- new IconListVO("TextInput",
MaterialIconType.TEXT_FIELDS)
- ]);
-
- public function get iconListData():ArrayList
- {
- return _iconListData;
- }
- }
-}
-</code></pre><p>The <strong>MaterialIconType</strong> class uses the icon
names as they appear in the Material Icons font for convenience and to avoid
typos. One additional benefit of using MaterialIconType in your code is that it
injects the font into your html directly, without you having to deal with that
step.</p><p>This class uses a data object (DOT, or POJO, depending on how you
name this kind of code), called <strong>IconListVO</strong> to instance each
piece of data that will app [...]
-{
- [Bindable]
- public class IconListVO
- {
- public var label:String;
- public var icon:String;
-
- public function IconListVO(label:String, icon:String = null)
- {
- this.label = label;
- this.icon = icon;
- }
- }
-}
-</code></pre><p>In the main file, note how we link the
<strong>ListsModel</strong> class through the <strong>model</strong> variable
accessible throughout Royale to make it easy to link a model as a
bead.</p><p>Finally, we link the model data to the list dataProvider using data
binding, with <strong>ApplicationDataBinding</strong> (since we are at the
Application level) and the <strong>ConstantBinding</strong> class that knows
where the data is located (<em>sourceID</em>), what property [...]
\ No newline at end of file
+</code></pre><p>This example takes the <a
href="https://royale.apache.org/using-jewel-alert-control/";>Using the Jewel
Alert Control</a> example and uses the Royale API to add content and customize
some parts of the Alert.</p><p>The code is more complex than in some of our
other examples, for teaching purposes:</p><ul><li>In the
<strong>clickHandler</strong> method, we create an Alert control and create a
CheckBox to add to the Alert's content zone. Then we call the
<strong>expandButtons< [...]
\ No newline at end of file
diff --git a/blog/page/6/index.html b/blog/page/6/index.html
index 56514b95..fc096bf1 100644
--- a/blog/page/6/index.html
+++ b/blog/page/6/index.html
@@ -1,4 +1,128 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<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:models="models.*">
+
+ <fx:Style>
+ @namespace "http://www.w3.org/1999/xhtml";
+ @namespace j "library://ns.apache.org/royale/jewel";
+
+ .iconListItemRenderer
+ {
+ IItemRenderer:
ClassReference("itemRenderers.IconListItemRenderer");
+ }
+ .iconListItemRenderer .fonticon
+ {
+ margin-right: 24px;
+ }
+ </fx:Style>
+
+ <j:model>
+ <models:ListsModel id="listModel"/>
+ </j:model>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalCenteredLayout/>
+ </j:beads>
+
+ <j:Card width="340">
+ <j:CardHeader>
+ <html:H3 text="Jewel List With ItemRenderer"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:List width="100%" height="300"
className="iconListItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconListData"
+
destinationPropertyName="dataProvider"/>
+ </j:beads>
+ </j:List>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
+</code></pre><p>By default, Apache Royale Jewel List-based controls display
their data as plain text using <strong>ListItemRenderer</strong>. But Royale is
capable of much more, and you can extend ListItemRenderer to display the items
in your list in a pleasing and user-friendly way.</p><p>In this example we
created an <strong>IconListItemRenderer</strong> in mxml that extends
ListItemRenderer:</p><pre><code class="language-mxml"><?xml
version="1.0" encoding="utf-8"?>
+<j:ListItemRenderer 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[
+ import vos.IconListVO;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ <j:HorizontalLayout gap="3"
itemsVerticalAlign="itemsCenter"/>
+ </j:beads>
+
+ <js:MaterialIcon text="{iconList ? iconList.icon : ''}"
visible="{iconList ? iconList.icon != null : false}"/>
+
+ <html:Span text="{iconList ? iconList.label : ''}"/>
+
+</j:ListItemRenderer>
+</code></pre><p>The list gets its items from the data provider and passes them
through the item renderer. The item renderer models each item in a consistent
way: it adds a <strong>FontIcon</strong> to display an appropriate icon
(selected, in this case, from the Google Material Icons font) at the left, and
the text of the item in a Label to the right. To manage the components for each
list item, you can use absolute positioning, layout classes or CSS. We used CSS
in the <strong>fx:Style< [...]
+{
+ import org.apache.royale.collections.ArrayList;
+ import vos.IconListVO;
+
+ public class ListsModel
+ {
+ /**
+ * this is the dataProvider for the List
+ */
+ private var _iconListData:ArrayList = new ArrayList([
+ new IconListVO("Alert", MaterialIconType.WEB_ASSET),
+ new IconListVO("Button", MaterialIconType.CROP_7_5),
+ new IconListVO("DropDownList",
MaterialIconType.CREDIT_CARD),
+ new IconListVO("CheckBox", MaterialIconType.CHECK_BOX),
+ new IconListVO("Label", MaterialIconType.LABEL),
+ new IconListVO("List", MaterialIconType.LIST_ALT),
+ new IconListVO("RadioButton",
MaterialIconType.RADIO_BUTTON_CHECKED),
+ new IconListVO("Slider", MaterialIconType.STORAGE),
+ new IconListVO("Text", MaterialIconType.SUBJECT),
+ new IconListVO("TextInput",
MaterialIconType.TEXT_FIELDS)
+ ]);
+
+ public function get iconListData():ArrayList
+ {
+ return _iconListData;
+ }
+ }
+}
+</code></pre><p>The <strong>MaterialIconType</strong> class uses the icon
names as they appear in the Material Icons font for convenience and to avoid
typos. One additional benefit of using MaterialIconType in your code is that it
injects the font into your html directly, without you having to deal with that
step.</p><p>This class uses a data object (DOT, or POJO, depending on how you
name this kind of code), called <strong>IconListVO</strong> to instance each
piece of data that will app [...]
+{
+ [Bindable]
+ public class IconListVO
+ {
+ public var label:String;
+ public var icon:String;
+
+ public function IconListVO(label:String, icon:String = null)
+ {
+ this.label = label;
+ this.icon = icon;
+ }
+ }
+}
+</code></pre><p>In the main file, note how we link the
<strong>ListsModel</strong> class through the <strong>model</strong> variable
accessible throughout Royale to make it easy to link a model as a
bead.</p><p>Finally, we link the model data to the list dataProvider using data
binding, with <strong>ApplicationDataBinding</strong> (since we are at the
Application level) and the <strong>ConstantBinding</strong> class that knows
where the data is located (<em>sourceID</em>), what property [...]
<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"
@@ -101,48 +225,4 @@ global {
</j:initialView>
</j:Application>
-</code></pre><p>The CheckBox is a two-state button control with the following
properties available:</p><ul><li><strong>text</strong>: The label description
for the CheckBox</li><li><strong>value</strong>: The internal value of the
CheckBox</li><li><strong>selected</strong>: If this is true it means that the
CheckBox is selected; it is false otherwise</li></ul><p>Each checkbox has
<strong>CLICK</strong> and <strong>CHANGE</strong> events.
<strong>CLICK</strong> is dispatched when the user [...]
-<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">
- <fx:Script>
- <![CDATA[
- private function textChanged(event:Event):void
- {
- result.text = "The textinput text value is: " +
textinput.text;
- }
- ]]>
- </fx:Script>
-
- <j:beads>
- <js:ApplicationDataBinding />
- </j:beads>
-
- <j:initialView>
- <j:View>
- <j:beads>
- <j:VerticalLayout gap="10"/>
- </j:beads>
-
- <j:Label text="Binding the text property of a Jewel
TextInput field to update a text Label"/>
-
- <j:TextInput id="textinput"
change="textChanged(event)">
- <j:beads>
- <j:TextPrompt prompt="Using change event"/>
- </j:beads>
- </j:TextInput>
-
- <j:Label id="result" text="The TextInput field
text value is: "/>
-
- <j:TextInput id="databinding_ti">
- <j:beads>
- <j:TextPrompt prompt="Using databinding"/>
- </j:beads>
- </j:TextInput>
-
- <j:Label text="The TextInput field text value is:
{databinding_ti.text}"/>
- </j:View>
- </j:initialView>
-
-</j:Application>
-</code></pre><p><strong>Data binding</strong> is a general technique that
binds together and synchonizes data from a provider, or source (in this case
the contents of the text property of a TextInput field), and a consumer (in
this case the text property of a Label). You can use data binding with many
controls, variables and components to provide a powerful user experience. You
can bind a List as the data provider for an ArrayList variable so the ArrayList
displays details of the item th [...]
\ No newline at end of file
+</code></pre><p>The CheckBox is a two-state button control with the following
properties available:</p><ul><li><strong>text</strong>: The label description
for the CheckBox</li><li><strong>value</strong>: The internal value of the
CheckBox</li><li><strong>selected</strong>: If this is true it means that the
CheckBox is selected; it is false otherwise</li></ul><p>Each checkbox has
<strong>CLICK</strong> and <strong>CHANGE</strong> events.
<strong>CLICK</strong> is dispatched when the user [...]
\ No newline at end of file
diff --git a/blog/page/7/index.html b/blog/page/7/index.html
index a76146eb..b4b11ae9 100644
--- a/blog/page/7/index.html
+++ b/blog/page/7/index.html
@@ -1,4 +1,48 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<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">
+ <fx:Script>
+ <![CDATA[
+ private function textChanged(event:Event):void
+ {
+ result.text = "The textinput text value is: " +
textinput.text;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ApplicationDataBinding />
+ </j:beads>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="10"/>
+ </j:beads>
+
+ <j:Label text="Binding the text property of a Jewel
TextInput field to update a text Label"/>
+
+ <j:TextInput id="textinput"
change="textChanged(event)">
+ <j:beads>
+ <j:TextPrompt prompt="Using change event"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Label id="result" text="The TextInput field
text value is: "/>
+
+ <j:TextInput id="databinding_ti">
+ <j:beads>
+ <j:TextPrompt prompt="Using databinding"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Label text="The TextInput field text value is:
{databinding_ti.text}"/>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
+</code></pre><p><strong>Data binding</strong> is a general technique that
binds together and synchonizes data from a provider, or source (in this case
the contents of the text property of a TextInput field), and a consumer (in
this case the text property of a Label). You can use data binding with many
controls, variables and components to provide a powerful user experience. You
can bind a List as the data provider for an ArrayList variable so the ArrayList
displays details of the item th [...]
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:html="library://ns.apache.org/royale/html">
@@ -78,44 +122,4 @@
</j:initialView>
</j:Application>
-</code></pre><p>In this example, the List is populated from an ArrayList
object that holds a basic array of the data. The ArrayList has all collection
methods to manage internal data, like addItem and addItemAt. We used Avengers
character names to showcase this example, but you'll see one character is
missing ;). For this example we used the Amethyst Jewel Theme to match movie
colors better.</p><p>When you select a row in the List a CHANGE event is fired.
We have the event call an event [...]
-<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:j="library://ns.apache.org/royale/jewel">
-
- <fx:Script>
- <![CDATA[
-
- private function clickHandler(event:MouseEvent):void
- {
- slider_w.value = 400;
- slider_h.value = 200;
- }
-
- private function onValueChange(event:Event):void
- {
- button.width = slider_w.value;
- button.height = slider_h.value;
- button.text = slider_w.value + "x" + slider_h.value;
- }
- ]]>
- </fx:Script>
-
- <j:initialView>
- <j:View>
- <j:beads>
- <j:VerticalLayout gap="10"/>
- </j:beads>
-
- <j:Slider id="slider_w" width="250"
value="250" minimum="100" maximum="500"
- valueChange="onValueChange(event)"/>
-
- <j:Slider id="slider_h" width="250"
value="80" minimum="40" maximum="300"
- valueChange="onValueChange(event)"/>
-
- <j:Button id="button" text="Slider to
400x200" width="250" height="80"
emphasis="secondary"
- click="clickHandler(event)"/>
- </j:View>
- </j:initialView>
-
-</j:Application>
-</code></pre><p>In this example, you can click the Jewel button to set up
slider values. When you do this the
<strong>ValueChangeEvent.VALUE_CHANGE</strong> will fire, calling the
<strong>onValueChange</strong> event handler and setting width, height and text
in the <strong>Button</strong>.</p><p>On the other hand, you can drag each
<strong>slider</strong> to change width and height in the Button, and function
to update value in <em>"onValueChange"</em> will be called continuou
[...]
\ No newline at end of file
+</code></pre><p>In this example, the List is populated from an ArrayList
object that holds a basic array of the data. The ArrayList has all collection
methods to manage internal data, like addItem and addItemAt. We used Avengers
character names to showcase this example, but you'll see one character is
missing ;). For this example we used the Amethyst Jewel Theme to match movie
colors better.</p><p>When you select a row in the List a CHANGE event is fired.
We have the event call an event [...]
\ No newline at end of file
diff --git a/blog/page/8/index.html b/blog/page/8/index.html
index a6c2851f..12a0c680 100644
--- a/blog/page/8/index.html
+++ b/blog/page/8/index.html
@@ -1,4 +1,44 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel">
+
+ <fx:Script>
+ <![CDATA[
+
+ private function clickHandler(event:MouseEvent):void
+ {
+ slider_w.value = 400;
+ slider_h.value = 200;
+ }
+
+ private function onValueChange(event:Event):void
+ {
+ button.width = slider_w.value;
+ button.height = slider_h.value;
+ button.text = slider_w.value + "x" + slider_h.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="10"/>
+ </j:beads>
+
+ <j:Slider id="slider_w" width="250"
value="250" minimum="100" maximum="500"
+ valueChange="onValueChange(event)"/>
+
+ <j:Slider id="slider_h" width="250"
value="80" minimum="40" maximum="300"
+ valueChange="onValueChange(event)"/>
+
+ <j:Button id="button" text="Slider to
400x200" width="250" height="80"
emphasis="secondary"
+ click="clickHandler(event)"/>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
+</code></pre><p>In this example, you can click the Jewel button to set up
slider values. When you do this the
<strong>ValueChangeEvent.VALUE_CHANGE</strong> will fire, calling the
<strong>onValueChange</strong> event handler and setting width, height and text
in the <strong>Button</strong>.</p><p>On the other hand, you can drag each
<strong>slider</strong> to change width and height in the Button, and function
to update value in <em>"onValueChange"</em> will be called continuou
[...]
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel">
@@ -28,4 +68,4 @@
</j:initialView>
</j:Application>
-</code></pre><p>In this example, the Jewel button adds a click handler that
will be in charge of showing the Alert control. When the user clicks the button
the Alert.show() static method is called. You can add a custom message, a
custom title and choose which buttons will be created for that instance of the
Alert.</p><p>Finally, the Alert instance adds an event listener to manage the
alert response when the dialog is closed. In this example we're changing the
label of the button accordin [...]
\ No newline at end of file
+</code></pre><p>In this example, the Jewel button adds a click handler that
will be in charge of showing the Alert control. When the user clicks the button
the Alert.show() static method is called. You can add a custom message, a
custom title and choose which buttons will be created for that instance of the
Alert.</p><p>Finally, the Alert instance adds an event listener to manage the
alert response when the dialog is closed. In this example we're changing the
label of the button accordin [...]
\ No newline at end of file
diff --git a/blog/page/9/index.html b/blog/page/9/index.html
index 7a9b2c8f..27749ed8 100644
--- a/blog/page/9/index.html
+++ b/blog/page/9/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale
Blog</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" [...]
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic">
diff --git a/feed/index.xml b/feed/index.xml
index 4c5227cd..a931caea 100644
--- a/feed/index.xml
+++ b/feed/index.xml
@@ -7,10 +7,71 @@
<atom:link href="https://royale.apache.org/feed/index.xml"; rel="self"
type="application/rss+xml" />
<link>https://royale.apache.org/</link>
<description>News and tutorials about Apache Royale™</description>
- <lastBuildDate>Wed, 30 Mar 2022 00:00:00 +0000</lastBuildDate>
+ <lastBuildDate>Wed, 31 May 2023 00:00:00 +0000</lastBuildDate>
<language>en-US</language>
+ <item>
+ <title>Apache Royale v0.9.10 released!</title>
+
<link>https://royale.apache.org/blog/apache-royale-v0-9-10-released/</link>
+ <pubDate>Wed, 31 May 2023 00:00:00 +0000</pubDate>
+ <dc:creator><![CDATA[Yishay Weiss]]></dc:creator>
+ <guid
isPermaLink="false">https://royale.apache.org/blog/apache-royale-v0-9-10-released/</guid>
+ <description><![CDATA[<p>The Apache Royale community is pleased to
announce the release of <strong>Apache Royale 0.9.10</strong>.</p>
+<p>The Apache Royale project is the next generation of the Apache Flex SDK. It
lets developers use <strong>MXML</strong> and <strong>ActionScript 3</strong>
to generate <strong>HTML/JS/CSS</strong> applications which can run natively in
browsers. The cross-compiled code can also run on platforms like
<strong>Electron</strong> or <strong>Apache Cordova</strong> (Adobe PhoneGap)
to build mobile applications.</p>
+<p>This release should be considered 'beta' quality, although <em>we're very
close to a 1.0 release</em> and <em>we have many applications in
production</em> at this point. The purpose of this release is to continue to
gather feedback about Royale's features and the project's implementation
strategies, and to recruit new contributors. We hope to grow the code base into
an SDK and tool chain that delivers the highest productivity when developing
applications that can run on many platforms [...]
+<h2>Changes in 0.9.10:</h2>
+<h3>Apache Royale Framework 0.9.10</h3>
+<ul>
+<li>RoyaleUnit
+<ul>
+<li>Added BDD-style expect() method for natural language assertions</li>
+<li>Added a number of new asserts, including checks for NaN, less than,
greater than, less or equal, greater or equal, within range, is of type, throws
exception, and matches regular expression.</li>
+</ul>
+</li>
+<li>MXRoyale
+<ul>
+<li>Various bug fixes</li>
+</ul>
+</li>
+<li>Jewel
+<ul>
+<li>Various bug fixes</li>
+</ul>
+</li>
+<li>Dozens of bugs reported, investigated, and squashed. For details of closed
bug reports see <a
href="https://github.com/apache/royale-asjs/issues?q=is%3Aissue+is%3Aclosed";>GitHub
Issues list</a>.</li>
+</ul>
+<h3>Apache Royale Compiler 0.9.10</h3>
+<ul>
+<li><strong>aslint</strong> is a new command line code linter for ActionScript
and MXML, with a programmatic API for use in editors and IDEs.</li>
+<li>compiler: Added <code>--watch</code> compiler option that keeps compiler
active and incrementally compiles when changes to <em>.as</em> and
<em>.mxml</em> files are detected. You may exit with Ctrl+C.</li>
+<li>compiler: Added support for <code>??</code> null coalescing operator to
ActionScript.</li>
+<li>compiler: Added support for <code>?.</code> null conditional operator to
ActionScript.</li>
+<li>compiler: Added support for <code>@""</code> verbatim strings to
ActionScript.</li>
+<li>compiler: Fix JS output for chained <code>Date</code> setter
initialization, like <code>date.minutes = date.seconds = 0</code>.</li>
+<li>compiler: Fix <code><![CDATA[]]></code> handling in MXML for
properties with <code>[CollapseWhiteSpace]</code> metadata.</li>
+<li>royaleunit-ant-tasks: The <code><royaleunit></code> Ant Task can now
use Playwright to run headless tests in HTML/JS. Set the <code>player</code> to
chromium, webkit, or firefox.</li>
+<li>royaleunit-ant-tasks: Added a new <code>commandArgs</code> attribute to
the <code><royaleunit></code> Ant Task. It may be used to pass extra
command line arguments to the executable specified in the <code>command</code>
attribute.</li>
+<li>formatter: Can load configuration options with
<code>-load-config+=path/to/file.xml</code>, similar to compiler.</li>
+<li>formatter: If a file named <em>asformat-config.xml</em> appears in the
current working directory, automatically load it with
<code>-load-config</code>. To disable this behavior, use
<code>-skip-local-config-file=true</code>.</li>
+<li>formatter: Fix issue where more than one new line might appear at the end
of a file.</li>
+<li>formatter: Fix indentation between opening and closing
parentheses/brackets on separate lines.</li>
+<li>formatter: Fix detection of <code>Script</code> elements in MXML when line
endings are CRLF.</li>
+<li>formatter: Fix exception when file starts with UTF BOM character.</li>
+<li>formatter: Fix issue where ternary operator inside <code>if</code>
condition was formatted incorrectly.</li>
+<li>formatter: Fix missing formatting for <code>finally</code> block.</li>
+<li>formatter: If a case or default clause in a <code>switch</code> contains
only a block, indent is not increased.</li>
+<li>formatter: If formatting is skipped because compiler errors are found,
display those compiler errors.</li>
+</ul>
+<p>For additional information on recent issues that have been closed, see <a
href="https://github.com/apache/royale-compiler/issues?q=is%3Aissue+is%3Aclosed";>Github
Issues List</a></p>
+<p>You can download a <a href="https://royale.apache.org/download/";>binary
distribution</a>, the <a href="https://royale.apache.org/source-code/";>source
code</a> or browse our <a
href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories";>GitHub
repositories</a>. If you're a NPM user you can check <a
href="https://www.npmjs.com/org/apache-royale";>Apache Royale at NPM</a>.</p>
+<p>As well, you can help us <a
href="https://github.com/apache/royale-asjs/issues";>filing bug reports for
issues you encounter in the framework</a> or <a
href="https://github.com/apache/royale-compiler/issues";>compiler</a>.</p>
+<p>For questions about how to use Royale, send email to <a
href="https://royale.apache.org/blog/apache-royale-v0-9-10-released/[email protected]";>mailto:[email protected]</a>.
For questions and feedback on the development of the source code in the
release, send email to <a
href="mailto:[email protected]";>[email protected]</a>.</p>
+<p>Enjoy! 🙂</p>
+]]></description>
+ </item>
+
+
<item>
<title>Apache Royale v0.9.9 released!</title>
<link>https://royale.apache.org/blog/apache-royale-v0-9-9-released/</link>
diff --git a/index.html b/index.html
index c3bd0f3a..62178b77 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,2 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta
http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"><meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta
http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache
Royale</title><link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";><link
rel="stylesheet" href [...]
-asjsc <path to <em>.as</em> file></code></pre></div></div><div
class="blog-preview-section"><div class="container"><h2><a href="/blog/">Latest
From Our Blog</a></h2><p>Stay up to date with all of the news, updates, and
tutorials</p><div class="grid grid-blog-preview"><div class="grid-item"><h3
class="post-title"><a href="/blog/apache-royale-v0-9-9-released/">Apache Royale
v0.9.9 released!</a></h3><div class="post-meta">by Yishay Weiss on March 30,
2022</div><div><p>The Apache Royal [...]
\ No newline at end of file
+asjsc <path to <em>.as</em> file></code></pre></div></div><div
class="blog-preview-section"><div class="container"><h2><a href="/blog/">Latest
From Our Blog</a></h2><p>Stay up to date with all of the news, updates, and
tutorials</p><div class="grid grid-blog-preview"><div class="grid-item"><h3
class="post-title"><a href="/blog/apache-royale-v0-9-10-released/">Apache
Royale v0.9.10 released!</a></h3><div class="post-meta">by Yishay Weiss on May
31, 2023</div><div><p>The Apache Royal [...]
\ No newline at end of file
