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 2019/05/27 14:48:15 UTC
[royale-website] branch asf-site updated: fix disqus on new article
This is an automated email from the ASF dual-hosted git repository.
carlosrovira 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 583a70e fix disqus on new article
583a70e is described below
commit 583a70e6ac2ef4c4eae2209db476546b3821d5d1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon May 27 16:48:08 2019 +0200
fix disqus on new article
---
adding-an-item-to-a-jewel-list/index.html | 4 +-
apache-royale-v0-9-0-released/index.html | 4 +-
apache-royale-v0-9-1-released/index.html | 4 +-
apache-royale-v0-9-2-released/index.html | 4 +-
apache-royale-v0-9-4-released/index.html | 4 +-
.../index.html | 4 +-
blog/index.html | 2 +-
category/desktop/feed/index.xml | 7 +-
category/desktop/index.html | 2 +-
category/jewel-ui-set/feed/index.xml | 7 +-
category/jewel-ui-set/index.html | 2 +-
comments/feed/index.xml | 2 +-
creating-a-group-of-jewel-radiobuttons/index.html | 4 +-
creating-a-hello-world-in-apache-royale/index.html | 4 +-
customization-through-the-royale-api/index.html | 4 +-
feed/index.xml | 7 +-
.../index.html | 2 +-
.../feed/index.xml | 2 +-
.../index.html | 1700 ++++++++++----------
index.html | 8 +-
.../index.html | 4 +-
team/index.html | 4 +-
using-an-item-renderer-with-a-list/index.html | 4 +-
using-jewel-alert-control/index.html | 4 +-
using-the-jewel-slider-control/index.html | 4 +-
.../index.html | 4 +-
26 files changed, 907 insertions(+), 894 deletions(-)
diff --git a/adding-an-item-to-a-jewel-list/index.html b/adding-an-item-to-a-jewel-list/index.html
index 60377c5..5894805 100755
--- a/adding-an-item-to-a-jewel-list/index.html
+++ b/adding-an-item-to-a-jewel-list/index.html
@@ -633,7 +633,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef7cd2aa0" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6ccaa7b1" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -649,7 +649,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef7cd2dfd" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6ccaab12" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/apache-royale-v0-9-0-released/index.html b/apache-royale-v0-9-0-released/index.html
index 090a44c..dd6fa64 100755
--- a/apache-royale-v0-9-0-released/index.html
+++ b/apache-royale-v0-9-0-released/index.html
@@ -579,7 +579,7 @@ Click the help icon above to learn more.
- <div id="grve-post-related-15906-5cebef7ec2d4d" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15906-5cebf6cea098a" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-4-released/" target="_self">
<div class="grve-related-content">
@@ -595,7 +595,7 @@ Click the help icon above to learn more.
- <div id="grve-post-related-15546-5cebef7ec2f28" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15546-5cebf6cea0b6c" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-2-released/" target="_self">
<div class="grve-related-content">
diff --git a/apache-royale-v0-9-1-released/index.html b/apache-royale-v0-9-1-released/index.html
index 5ddd546..305e203 100755
--- a/apache-royale-v0-9-1-released/index.html
+++ b/apache-royale-v0-9-1-released/index.html
@@ -579,7 +579,7 @@ Click the help icon above to learn more.
- <div id="grve-post-related-15906-5cebef7587afb" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15906-5cebf6c52c5dd" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-4-released/" target="_self">
<div class="grve-related-content">
@@ -595,7 +595,7 @@ Click the help icon above to learn more.
- <div id="grve-post-related-15546-5cebef7587cd5" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15546-5cebf6c52c79d" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-2-released/" target="_self">
<div class="grve-related-content">
diff --git a/apache-royale-v0-9-2-released/index.html b/apache-royale-v0-9-2-released/index.html
index 5bd311f..52fcf4d 100755
--- a/apache-royale-v0-9-2-released/index.html
+++ b/apache-royale-v0-9-2-released/index.html
@@ -605,7 +605,7 @@ Click the help icon above to learn more.
- <div id="grve-post-related-15906-5cebef7502816" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15906-5cebf6c49d720" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-4-released/" target="_self">
<div class="grve-related-content">
@@ -621,7 +621,7 @@ Click the help icon above to learn more.
- <div id="grve-post-related-15520-5cebef75029e4" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15520-5cebf6c49d8fd" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-1-released/" target="_self">
<div class="grve-related-content">
diff --git a/apache-royale-v0-9-4-released/index.html b/apache-royale-v0-9-4-released/index.html
index bcdb51d..50d035b 100755
--- a/apache-royale-v0-9-4-released/index.html
+++ b/apache-royale-v0-9-4-released/index.html
@@ -600,7 +600,7 @@ The Apache Royale project is a continuation of the previous effort called FlexJS
- <div id="grve-post-related-15546-5cebef51c3aff" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15546-5cebf69fd8b0a" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-2-released/" target="_self">
<div class="grve-related-content">
@@ -616,7 +616,7 @@ The Apache Royale project is a continuation of the previous effort called FlexJS
- <div id="grve-post-related-15520-5cebef51c3e56" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15520-5cebf69fd8e60" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/apache-royale-v0-9-1-released/" target="_self">
<div class="grve-related-content">
diff --git a/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/index.html b/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/index.html
index e349a07..33ddd03 100755
--- a/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/index.html
+++ b/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/index.html
@@ -638,7 +638,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef60d9ed1" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6af40392" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -654,7 +654,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef60da187" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6af4071a" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/blog/index.html b/blog/index.html
index 83eaeba..50b00da 100755
--- a/blog/index.html
+++ b/blog/index.html
@@ -386,7 +386,7 @@ Click the help icon above to learn more.
</span>
</span>
<time class="grve-structured-data date published" itemprop="datePublished" datetime="2019-05-26T22:17:03+02:00">May 26, 2019</time>
- <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-26T22:43:11+02:00">May 26, 2019</time>
+ <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-27T16:34:29+02:00">May 27, 2019</time>
<span class="grve-structured-data" itemprop="mainEntityOfPage" itemscope itemtype="//schema.org/WebPage" itemid="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/"></span>
</span>
<div itemprop="articleBody">
diff --git a/category/desktop/feed/index.xml b/category/desktop/feed/index.xml
index e46b39e..48aeeb9 100755
--- a/category/desktop/feed/index.xml
+++ b/category/desktop/feed/index.xml
@@ -12,7 +12,7 @@
<atom:link href="//royale.apache.org/category/desktop/feed/" rel="self" type="application/rss+xml" />
<link>//royale.apache.org/</link>
<description>Code once. Run everywhere</description>
- <lastBuildDate>Sun, 26 May 2019 20:43:11 +0000</lastBuildDate>
+ <lastBuildDate>Mon, 27 May 2019 14:34:29 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
@@ -22,6 +22,7 @@
<item>
<title>How to create a Desktop Application with Royale and Electron</title>
<link>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/</link>
+ <comments>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/#respond</comments>
<pubDate>Sun, 26 May 2019 20:17:03 +0000</pubDate>
<dc:creator><![CDATA[Judah Frangipane]]></dc:creator>
<category><![CDATA[Desktop]]></category>
@@ -31,6 +32,8 @@
<description><![CDATA[<p>With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.</p>
<p>The post <a rel="nofollow" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">How to create a Desktop Application with Royale and Electron</a> appeared first on <a rel="nofollow" href="//royale.apache.org/">Apache Royale™</a>.</p>
]]></description>
- </item>
+ <wfw:commentRss>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/feed/</wfw:commentRss>
+ <slash:comments>0</slash:comments>
+ </item>
</channel>
</rss>
diff --git a/category/desktop/index.html b/category/desktop/index.html
index 6406272..ac85df1 100755
--- a/category/desktop/index.html
+++ b/category/desktop/index.html
@@ -373,7 +373,7 @@ Click the help icon above to learn more.
</span>
</span>
<time class="grve-structured-data date published" itemprop="datePublished" datetime="2019-05-26T22:17:03+02:00">May 26, 2019</time>
- <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-26T22:43:11+02:00">May 26, 2019</time>
+ <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-27T16:34:29+02:00">May 27, 2019</time>
<span class="grve-structured-data" itemprop="mainEntityOfPage" itemscope itemtype="//schema.org/WebPage" itemid="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/"></span>
</span>
<div itemprop="articleBody">
diff --git a/category/jewel-ui-set/feed/index.xml b/category/jewel-ui-set/feed/index.xml
index 29726dd..c90f302 100755
--- a/category/jewel-ui-set/feed/index.xml
+++ b/category/jewel-ui-set/feed/index.xml
@@ -12,7 +12,7 @@
<atom:link href="//royale.apache.org/category/jewel-ui-set/feed/" rel="self" type="application/rss+xml" />
<link>//royale.apache.org/</link>
<description>Code once. Run everywhere</description>
- <lastBuildDate>Sun, 26 May 2019 20:43:11 +0000</lastBuildDate>
+ <lastBuildDate>Mon, 27 May 2019 14:34:29 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
@@ -22,6 +22,7 @@
<item>
<title>How to create a Desktop Application with Royale and Electron</title>
<link>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/</link>
+ <comments>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/#respond</comments>
<pubDate>Sun, 26 May 2019 20:17:03 +0000</pubDate>
<dc:creator><![CDATA[Judah Frangipane]]></dc:creator>
<category><![CDATA[Desktop]]></category>
@@ -31,7 +32,9 @@
<description><![CDATA[<p>With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.</p>
<p>The post <a rel="nofollow" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">How to create a Desktop Application with Royale and Electron</a> appeared first on <a rel="nofollow" href="//royale.apache.org/">Apache Royale™</a>.</p>
]]></description>
- </item>
+ <wfw:commentRss>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/feed/</wfw:commentRss>
+ <slash:comments>0</slash:comments>
+ </item>
<item>
<title>Loading external data through HTTPService</title>
<link>//royale.apache.org/loading-external-data-through-httpservice/</link>
diff --git a/category/jewel-ui-set/index.html b/category/jewel-ui-set/index.html
index 495b893..4848c77 100755
--- a/category/jewel-ui-set/index.html
+++ b/category/jewel-ui-set/index.html
@@ -374,7 +374,7 @@ Click the help icon above to learn more.
</span>
</span>
<time class="grve-structured-data date published" itemprop="datePublished" datetime="2019-05-26T22:17:03+02:00">May 26, 2019</time>
- <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-26T22:43:11+02:00">May 26, 2019</time>
+ <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-27T16:34:29+02:00">May 27, 2019</time>
<span class="grve-structured-data" itemprop="mainEntityOfPage" itemscope itemtype="//schema.org/WebPage" itemid="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/"></span>
</span>
<div itemprop="articleBody">
diff --git a/comments/feed/index.xml b/comments/feed/index.xml
index 82e1105..41d211b 100755
--- a/comments/feed/index.xml
+++ b/comments/feed/index.xml
@@ -11,7 +11,7 @@
<atom:link href="//royale.apache.org/comments/feed/" rel="self" type="application/rss+xml" />
<link>//royale.apache.org/</link>
<description>Code once. Run everywhere</description>
- <lastBuildDate>2019-05-26 20:43:11</lastBuildDate>
+ <lastBuildDate>2019-05-27 14:34:29</lastBuildDate>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
diff --git a/creating-a-group-of-jewel-radiobuttons/index.html b/creating-a-group-of-jewel-radiobuttons/index.html
index 7198c4f..2ea4f6d 100755
--- a/creating-a-group-of-jewel-radiobuttons/index.html
+++ b/creating-a-group-of-jewel-radiobuttons/index.html
@@ -635,7 +635,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef616a2e7" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6afce8bb" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -651,7 +651,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef616a565" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6afcec1b" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/creating-a-hello-world-in-apache-royale/index.html b/creating-a-hello-world-in-apache-royale/index.html
index acc2ad1..b367317 100755
--- a/creating-a-hello-world-in-apache-royale/index.html
+++ b/creating-a-hello-world-in-apache-royale/index.html
@@ -608,7 +608,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef8272426" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6d2212ae" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
@@ -624,7 +624,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15751-5cebef8272750" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15751-5cebf6d2215e1" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/using-view-states-to-show-or-hide-content/" target="_self">
<div class="grve-related-content">
diff --git a/customization-through-the-royale-api/index.html b/customization-through-the-royale-api/index.html
index 158b065..5aae4ee 100755
--- a/customization-through-the-royale-api/index.html
+++ b/customization-through-the-royale-api/index.html
@@ -691,7 +691,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef5ea6e87" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6ace438c" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -707,7 +707,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15774-5cebef5ea71c8" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15774-5cebf6ace46e7" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/using-an-item-renderer-with-a-list/" target="_self">
<div class="grve-related-content">
diff --git a/feed/index.xml b/feed/index.xml
index 2107961..7df0fcb 100755
--- a/feed/index.xml
+++ b/feed/index.xml
@@ -12,7 +12,7 @@
<atom:link href="//royale.apache.org/feed/" rel="self" type="application/rss+xml" />
<link>//royale.apache.org/</link>
<description>Code once. Run everywhere</description>
- <lastBuildDate>Sun, 26 May 2019 20:43:11 +0000</lastBuildDate>
+ <lastBuildDate>Mon, 27 May 2019 14:34:29 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
@@ -22,6 +22,7 @@
<item>
<title>How to create a Desktop Application with Royale and Electron</title>
<link>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/</link>
+ <comments>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/#respond</comments>
<pubDate>Sun, 26 May 2019 20:17:03 +0000</pubDate>
<dc:creator><![CDATA[Judah Frangipane]]></dc:creator>
<category><![CDATA[Desktop]]></category>
@@ -31,7 +32,9 @@
<description><![CDATA[<p>With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.</p>
<p>The post <a rel="nofollow" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">How to create a Desktop Application with Royale and Electron</a> appeared first on <a rel="nofollow" href="//royale.apache.org/">Apache Royale™</a>.</p>
]]></description>
- </item>
+ <wfw:commentRss>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/feed/</wfw:commentRss>
+ <slash:comments>0</slash:comments>
+ </item>
<item>
<title>Apache Royale v0.9.4 released!</title>
<link>//royale.apache.org/apache-royale-v0-9-4-released/</link>
diff --git a/hello-node-how-to-transpile-actionscript-for-node-js/index.html b/hello-node-how-to-transpile-actionscript-for-node-js/index.html
index 33d1aff..f1e0678 100755
--- a/hello-node-how-to-transpile-actionscript-for-node-js/index.html
+++ b/hello-node-how-to-transpile-actionscript-for-node-js/index.html
@@ -636,7 +636,7 @@ The address of localhost is: 127.0.0.1
- <div id="grve-post-related-15834-5cebef52533cc" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6a06aec9" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
diff --git a/how-to-create-a-desktop-application-with-royale-and-electron/feed/index.xml b/how-to-create-a-desktop-application-with-royale-and-electron/feed/index.xml
index 695a495..9ca7c22 100755
--- a/how-to-create-a-desktop-application-with-royale-and-electron/feed/index.xml
+++ b/how-to-create-a-desktop-application-with-royale-and-electron/feed/index.xml
@@ -11,7 +11,7 @@
<atom:link href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/feed/" rel="self" type="application/rss+xml" />
<link>//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/</link>
<description>Code once. Run everywhere</description>
- <lastBuildDate>Sun, 26 May 2019 20:43:11 +0000</lastBuildDate>
+ <lastBuildDate>Mon, 27 May 2019 14:34:29 +0000</lastBuildDate>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
diff --git a/how-to-create-a-desktop-application-with-royale-and-electron/index.html b/how-to-create-a-desktop-application-with-royale-and-electron/index.html
index 5d32a85..75fccd7 100755
--- a/how-to-create-a-desktop-application-with-royale-and-electron/index.html
+++ b/how-to-create-a-desktop-application-with-royale-and-electron/index.html
@@ -10,129 +10,129 @@
<meta charset="UTF-8">
<!-- allow pinned sites -->
<link rel="pingback" href="//royale.apache.org/xmlrpc.php">
- <title>How to create a Desktop Application with Royale and Electron - Apache Royale™</title>
-
-<!-- This site is optimized with the Yoast SEO plugin v11.2.1 - //yoast.com/wordpress/plugins/seo/ -->
-<link rel="canonical" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/" />
-<meta property="og:locale" content="en_US" />
-<meta property="og:type" content="article" />
-<meta property="og:title" content="How to create a Desktop Application with Royale and Electron - Apache Royale™" />
-<meta property="og:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that." />
-<meta property="og:url" content="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/" />
-<meta property="og:site_name" content="Apache Royale™" />
-<meta property="article:publisher" content="//www.facebook.com/Apache-Royale-249305752259661/" />
-<meta property="article:section" content="Jewel UI Set" />
-<meta property="article:published_time" content="2019-05-26T20:17:03+00:00" />
-<meta property="article:modified_time" content="2019-05-26T20:43:11+00:00" />
-<meta property="og:updated_time" content="2019-05-26T20:43:11+00:00" />
-<meta property="fb:app_id" content="677150849390886" />
-<meta property="og:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png" />
-<meta property="og:image:secure_url" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png" />
-<meta property="og:image:width" content="600" />
-<meta property="og:image:height" content="338" />
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that." />
-<meta name="twitter:title" content="How to create a Desktop Application with Royale and Electron - Apache Royale™" />
-<meta name="twitter:site" content="@ApacheRoyale" />
-<meta name="twitter:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png" />
-<meta name="twitter:creator" content="@ApacheRoyale" />
-<script type='application/ld+json' class='yoast-schema-graph yoast-schema-graph--main'>{"@context":"//schema.org","@graph":[{"@type":"Organization","@id":"//royale.apache.org/#organization","name":"Apache","url":"//royale.apache.org/","sameAs":["//www.facebook.com/Apache-Royale-249305752259661/","//linkedin.com/groups/12118437","//en.wikipedia.org/wiki/Apache_Royale","//twitter.com/ApacheRoyale"],"logo":{"@type":"ImageObject","@id":"//royale.apache.org/#logo","url":"//royale.apache.org/w [...]
-<!-- / Yoast SEO plugin. -->
-
-<link rel='dns-prefetch' href='//fonts.googleapis.com' />
-<link rel='dns-prefetch' href='//s.w.org' />
-<link rel="alternate" type="application/rss+xml" title="Apache Royale™ » Feed" href="//royale.apache.org/feed/" />
-<link rel="alternate" type="application/rss+xml" title="Apache Royale™ » Comments Feed" href="//royale.apache.org/comments/feed/" />
-<link rel="alternate" type="application/rss+xml" title="Apache Royale™ » How to create a Desktop Application with Royale and Electron Comments Feed" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/feed/" />
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-<meta name="application-name" content="Apache Royale™">
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="How to create a Desktop Application with Royale and Electron">
-<meta name="twitter:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.">
-<meta name="twitter:url" content="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">
-<meta name="twitter:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png">
-<meta property="og:locale" content="en_US">
-<meta property="og:site_name" content="Apache Royale™">
-<meta property="og:type" content="article">
-<meta property="og:title" content="How to create a Desktop Application with Royale and Electron">
-<meta property="og:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.">
-<meta property="og:url" content="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">
-<meta property="og:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png">
- <script type="text/javascript">
- window._wpemojiSettings = {"baseUrl":"\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"\/\/royale.codeoscopic.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2.1"}};
- !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128 [...]
- </script>
- <style type="text/css">
-img.wp-smiley,
-img.emoji {
- display: inline !important;
- border: none !important;
- box-shadow: none !important;
- height: 1em !important;
- width: 1em !important;
- margin: 0 .07em !important;
- vertical-align: -0.1em !important;
- background: none !important;
- padding: 0 !important;
-}
-</style>
- <link rel='stylesheet' id='wp-block-library-css' href='//royale.apache.org/wp-includes/css/dist/block-library/style.min.css?ver=5.2.1' type='text/css' media='all' />
-<link rel='stylesheet' id='contact-form-7-css' href='//royale.apache.org/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.3' type='text/css' media='all' />
-<link rel='stylesheet' id='rs-plugin-settings-css' href='//royale.apache.org/wp-content/plugins/revslider/public/assets/css/settings.css?ver=5.4.8.3' type='text/css' media='all' />
-<style id='rs-plugin-settings-inline-css' type='text/css'>
-#rs-demo-id {}
-</style>
-<link rel='stylesheet' id='bodhi-svgs-attachment-css' href='//royale.apache.org/wp-content/plugins/svg-support/css/svgs-attachment.css?ver=5.2.1' type='text/css' media='all' />
-<link rel='stylesheet' id='movedo-grve-awesome-fonts-css' href='//royale.apache.org/wp-content/themes/movedo/css/font-awesome.min.css?ver=4.7.0' type='text/css' media='all' />
-<link rel='stylesheet' id='movedo-grve-theme-style-css' href='//royale.apache.org/wp-content/themes/movedo/css/theme-style.css?ver=3.0.4' type='text/css' media='all' />
-<link rel='stylesheet' id='movedo-grve-elements-css' href='//royale.apache.org/wp-content/themes/movedo/css/elements.css?ver=3.0.4' type='text/css' media='all' />
-<link rel='stylesheet' id='movedo-grve-custom-style-css' href='//royale.apache.org/wp-content/themes/movedo/css/responsive.css?ver=3.0.4' type='text/css' media='all' />
-<style id='movedo-grve-custom-style-inline-css' type='text/css'>
-.vc_custom_1498125713074{padding: 5% !important;background-color: #ffffff !important;border-radius: 10px !important;}.vc_custom_1498124537578{padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: #ffffff !important;border-radius: 5px !important;}
- body { font-size: 14px; font-family: "Hind Siliguri"; font-weight: 400; line-height: 24px; letter-spacing: 0px; } #grve-header .grve-logo.grve-logo-text a { font-family: Signika; font-weight: 700; font-style: normal; font-size: 36px; text-transform: none; letter-spacing: 0px; } .grve-main-menu .grve-wrapper > ul > li > a, .grve-main-menu .grve-wrapper > ul > li.megamenu > ul > li > a, .grve-toggle-hiddenarea .grve-label, .grve-main-menu .grve-wrapper > ul > li ul li.grve-goback a { font [...]
- a { color: #4393c3; } a:hover { color: #67011f; } .grve-container, #disqus_thread, #grve-content.grve-left-sidebar .grve-content-wrapper, #grve-content.grve-right-sidebar .grve-content-wrapper { max-width: 1170px; } @media only screen and (max-width: 1230px) { .grve-container, #disqus_thread, #grve-content.grve-left-sidebar .grve-content-wrapper, #grve-content.grve-right-sidebar .grve-content-wrapper { width: 90%; max-width: 1170px; } } @media only screen and (min-width: 960px) { #grve- [...]
-pre { font-weight:bold; } #grve-main-header.grve-dark, #grve-main-header.grve-dark .grve-header-elements, #grve-main-header.grve-header-default.grve-dark, #grve-main-header.grve-dark #grve-bottom-header { border-color: black; border-color: rgba(0, 0, 0, 0); } #grve-main-header.grve-light, #grve-main-header.grve-light .grve-header-elements, #grve-main-header.grve-header-default.grve-light, #grve-main-header.grve-light #grve-bottom-header { border-color: black; border-color: rgba(0, 0, 0, [...]
-.grve-modal input[type='submit']:not(.grve-custom-btn), #grve-theme-wrapper input[type='submit']:not(.grve-custom-btn), #grve-theme-wrapper input[type='reset']:not(.grve-custom-btn), #grve-theme-wrapper input[type='button']:not(.grve-custom-btn), #grve-theme-wrapper button:not(.grve-custom-btn):not(.vc_general), #grve-theme-wrapper .grve-search button[type='submit'], .grve-portfolio-details-btn.grve-btn:not(.grve-custom-btn) {-webkit-border-radius: 3px;border-radius: 3px;background-color [...]
-#grve-related-post .grve-related-title, .grve-nav-btn a, .grve-bar-socials li a, #grve-single-post-tags .grve-tags li a, #grve-single-post-categories .grve-categories li a, .widget.widget_tag_cloud a, #grve-body #grve-theme-wrapper .grve-newsletter input[type='email'], #grve-theme-wrapper .grve-search:not(.grve-search-modal) input[type='text'], #grve-socials-modal .grve-social li a, .grve-pagination ul li, .grve-dropcap span.grve-style-2 {-webkit-border-radius: 3px !important;border-radi [...]
-</style>
-<link rel='stylesheet' id='movedo-grve-style-css' href='//royale.apache.org/wp-content/themes/movedo-child/style.css?ver=3.0.4' type='text/css' media='all' />
-<!--[if lt IE 9]>
-<link rel='stylesheet' id='vc_lte_ie9-css' href='//royale.apache.org/wp-content/plugins/js_composer/assets/css/vc_lte_ie9.min.css?ver=6.0.2' type='text/css' media='screen' />
-<![endif]-->
-<link rel='stylesheet' id='redux-google-fonts-movedo_grve_options-css' href='//fonts.googleapis.com/css?family=Hind+Siliguri%3A400%2C300%7CSignika%3A700%2C600%2C400%7COswald%3A600%7COpen+Sans+Condensed%3A700%7CSource+Sans+Pro%3A600&ver=1558022367' type='text/css' media='all' />
-<link rel='stylesheet' id='codecolorer-css' href='//royale.apache.org/wp-content/plugins/codecolorer/codecolorer.css?ver=0.9.16' type='text/css' media='screen' />
-<script type='text/javascript' src='//royale.apache.org/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
-<script type='text/javascript' src='//royale.apache.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js?ver=5.4.8.3'></script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js?ver=5.4.8.3'></script>
-<script type='text/javascript'>
-/* <![CDATA[ */
-var cssTarget = "img.style-svg";
-var ForceInlineSVGActive = "false";
-/* ]]> */
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/svg-support/js/min/svgs-inline-min.js?ver=1.0.0'></script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/modernizr.custom.js?ver=2.8.3'></script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/advanced-iframe/js/ai.js?ver=452712'></script>
-<link rel='//api.w.org/' href='//royale.apache.org/wp-json/' />
-<link rel="EditURI" type="application/rsd+xml" title="RSD" href="//royale.apache.org/xmlrpc.php?rsd" />
-<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="//royale.apache.org/wp-includes/wlwmanifest.xml" />
-<meta name="generator" content="WordPress 5.2.1" />
-<link rel='shortlink' href='//royale.apache.org/?p=16012' />
-<link rel="alternate" type="application/json+oembed" href="//royale.apache.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2F//royale.apache.org%2Fhow-to-create-a-desktop-application-with-royale-and-electron%2F" />
-<meta name="generator" content="Powered by WPBakery Page Builder - drag and drop page builder for WordPress."/>
-<meta name="generator" content="Powered by Slider Revolution 5.4.8.3 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." />
+ <title>How to create a Desktop Application with Royale and Electron - Apache Royale™</title>
+
+<!-- This site is optimized with the Yoast SEO plugin v11.2.1 - //yoast.com/wordpress/plugins/seo/ -->
+<link rel="canonical" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:type" content="article" />
+<meta property="og:title" content="How to create a Desktop Application with Royale and Electron - Apache Royale™" />
+<meta property="og:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that." />
+<meta property="og:url" content="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/" />
+<meta property="og:site_name" content="Apache Royale™" />
+<meta property="article:publisher" content="//www.facebook.com/Apache-Royale-249305752259661/" />
+<meta property="article:section" content="Jewel UI Set" />
+<meta property="article:published_time" content="2019-05-26T20:17:03+00:00" />
+<meta property="article:modified_time" content="2019-05-27T14:34:29+00:00" />
+<meta property="og:updated_time" content="2019-05-27T14:34:29+00:00" />
+<meta property="fb:app_id" content="677150849390886" />
+<meta property="og:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png" />
+<meta property="og:image:secure_url" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png" />
+<meta property="og:image:width" content="600" />
+<meta property="og:image:height" content="338" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that." />
+<meta name="twitter:title" content="How to create a Desktop Application with Royale and Electron - Apache Royale™" />
+<meta name="twitter:site" content="@ApacheRoyale" />
+<meta name="twitter:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png" />
+<meta name="twitter:creator" content="@ApacheRoyale" />
+<script type='application/ld+json' class='yoast-schema-graph yoast-schema-graph--main'>{"@context":"//schema.org","@graph":[{"@type":"Organization","@id":"//royale.apache.org/#organization","name":"Apache","url":"//royale.apache.org/","sameAs":["//www.facebook.com/Apache-Royale-249305752259661/","//linkedin.com/groups/12118437","//en.wikipedia.org/wiki/Apache_Royale","//twitter.com/ApacheRoyale"],"logo":{"@type":"ImageObject","@id":"//royale.apache.org/#logo","url":"//royale.apache.org/w [...]
+<!-- / Yoast SEO plugin. -->
+
+<link rel='dns-prefetch' href='//fonts.googleapis.com' />
+<link rel='dns-prefetch' href='//s.w.org' />
+<link rel="alternate" type="application/rss+xml" title="Apache Royale™ » Feed" href="//royale.apache.org/feed/" />
+<link rel="alternate" type="application/rss+xml" title="Apache Royale™ » Comments Feed" href="//royale.apache.org/comments/feed/" />
+<link rel="alternate" type="application/rss+xml" title="Apache Royale™ » How to create a Desktop Application with Royale and Electron Comments Feed" href="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/feed/" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<meta name="application-name" content="Apache Royale™">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="How to create a Desktop Application with Royale and Electron">
+<meta name="twitter:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.">
+<meta name="twitter:url" content="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">
+<meta name="twitter:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png">
+<meta property="og:locale" content="en_US">
+<meta property="og:site_name" content="Apache Royale™">
+<meta property="og:type" content="article">
+<meta property="og:title" content="How to create a Desktop Application with Royale and Electron">
+<meta property="og:description" content="With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you'll learn how to do that.">
+<meta property="og:url" content="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/">
+<meta property="og:image" content="//royale.apache.org/wp-content/uploads/2019/05/apache-royale-electron.png">
+ <script type="text/javascript">
+ window._wpemojiSettings = {"baseUrl":"\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"\/\/royale.codeoscopic.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2.1"}};
+ !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128 [...]
+ </script>
+ <style type="text/css">
+img.wp-smiley,
+img.emoji {
+ display: inline !important;
+ border: none !important;
+ box-shadow: none !important;
+ height: 1em !important;
+ width: 1em !important;
+ margin: 0 .07em !important;
+ vertical-align: -0.1em !important;
+ background: none !important;
+ padding: 0 !important;
+}
+</style>
+ <link rel='stylesheet' id='wp-block-library-css' href='//royale.apache.org/wp-includes/css/dist/block-library/style.min.css?ver=5.2.1' type='text/css' media='all' />
+<link rel='stylesheet' id='contact-form-7-css' href='//royale.apache.org/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.3' type='text/css' media='all' />
+<link rel='stylesheet' id='rs-plugin-settings-css' href='//royale.apache.org/wp-content/plugins/revslider/public/assets/css/settings.css?ver=5.4.8.3' type='text/css' media='all' />
+<style id='rs-plugin-settings-inline-css' type='text/css'>
+#rs-demo-id {}
+</style>
+<link rel='stylesheet' id='bodhi-svgs-attachment-css' href='//royale.apache.org/wp-content/plugins/svg-support/css/svgs-attachment.css?ver=5.2.1' type='text/css' media='all' />
+<link rel='stylesheet' id='movedo-grve-awesome-fonts-css' href='//royale.apache.org/wp-content/themes/movedo/css/font-awesome.min.css?ver=4.7.0' type='text/css' media='all' />
+<link rel='stylesheet' id='movedo-grve-theme-style-css' href='//royale.apache.org/wp-content/themes/movedo/css/theme-style.css?ver=3.0.4' type='text/css' media='all' />
+<link rel='stylesheet' id='movedo-grve-elements-css' href='//royale.apache.org/wp-content/themes/movedo/css/elements.css?ver=3.0.4' type='text/css' media='all' />
+<link rel='stylesheet' id='movedo-grve-custom-style-css' href='//royale.apache.org/wp-content/themes/movedo/css/responsive.css?ver=3.0.4' type='text/css' media='all' />
+<style id='movedo-grve-custom-style-inline-css' type='text/css'>
+.vc_custom_1498125713074{padding: 5% !important;background-color: #ffffff !important;border-radius: 10px !important;}.vc_custom_1498124537578{padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: #ffffff !important;border-radius: 5px !important;}
+ body { font-size: 14px; font-family: "Hind Siliguri"; font-weight: 400; line-height: 24px; letter-spacing: 0px; } #grve-header .grve-logo.grve-logo-text a { font-family: Signika; font-weight: 700; font-style: normal; font-size: 36px; text-transform: none; letter-spacing: 0px; } .grve-main-menu .grve-wrapper > ul > li > a, .grve-main-menu .grve-wrapper > ul > li.megamenu > ul > li > a, .grve-toggle-hiddenarea .grve-label, .grve-main-menu .grve-wrapper > ul > li ul li.grve-goback a { font [...]
+ a { color: #4393c3; } a:hover { color: #67011f; } .grve-container, #disqus_thread, #grve-content.grve-left-sidebar .grve-content-wrapper, #grve-content.grve-right-sidebar .grve-content-wrapper { max-width: 1170px; } @media only screen and (max-width: 1230px) { .grve-container, #disqus_thread, #grve-content.grve-left-sidebar .grve-content-wrapper, #grve-content.grve-right-sidebar .grve-content-wrapper { width: 90%; max-width: 1170px; } } @media only screen and (min-width: 960px) { #grve- [...]
+pre { font-weight:bold; } #grve-main-header.grve-dark, #grve-main-header.grve-dark .grve-header-elements, #grve-main-header.grve-header-default.grve-dark, #grve-main-header.grve-dark #grve-bottom-header { border-color: black; border-color: rgba(0, 0, 0, 0); } #grve-main-header.grve-light, #grve-main-header.grve-light .grve-header-elements, #grve-main-header.grve-header-default.grve-light, #grve-main-header.grve-light #grve-bottom-header { border-color: black; border-color: rgba(0, 0, 0, [...]
+.grve-modal input[type='submit']:not(.grve-custom-btn), #grve-theme-wrapper input[type='submit']:not(.grve-custom-btn), #grve-theme-wrapper input[type='reset']:not(.grve-custom-btn), #grve-theme-wrapper input[type='button']:not(.grve-custom-btn), #grve-theme-wrapper button:not(.grve-custom-btn):not(.vc_general), #grve-theme-wrapper .grve-search button[type='submit'], .grve-portfolio-details-btn.grve-btn:not(.grve-custom-btn) {-webkit-border-radius: 3px;border-radius: 3px;background-color [...]
+#grve-related-post .grve-related-title, .grve-nav-btn a, .grve-bar-socials li a, #grve-single-post-tags .grve-tags li a, #grve-single-post-categories .grve-categories li a, .widget.widget_tag_cloud a, #grve-body #grve-theme-wrapper .grve-newsletter input[type='email'], #grve-theme-wrapper .grve-search:not(.grve-search-modal) input[type='text'], #grve-socials-modal .grve-social li a, .grve-pagination ul li, .grve-dropcap span.grve-style-2 {-webkit-border-radius: 3px !important;border-radi [...]
+</style>
+<link rel='stylesheet' id='movedo-grve-style-css' href='//royale.apache.org/wp-content/themes/movedo-child/style.css?ver=3.0.4' type='text/css' media='all' />
+<!--[if lt IE 9]>
+<link rel='stylesheet' id='vc_lte_ie9-css' href='//royale.apache.org/wp-content/plugins/js_composer/assets/css/vc_lte_ie9.min.css?ver=6.0.2' type='text/css' media='screen' />
+<![endif]-->
+<link rel='stylesheet' id='redux-google-fonts-movedo_grve_options-css' href='//fonts.googleapis.com/css?family=Hind+Siliguri%3A400%2C300%7CSignika%3A700%2C600%2C400%7COswald%3A600%7COpen+Sans+Condensed%3A700%7CSource+Sans+Pro%3A600&ver=1558022367' type='text/css' media='all' />
+<link rel='stylesheet' id='codecolorer-css' href='//royale.apache.org/wp-content/plugins/codecolorer/codecolorer.css?ver=0.9.16' type='text/css' media='screen' />
+<script type='text/javascript' src='//royale.apache.org/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js?ver=5.4.8.3'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js?ver=5.4.8.3'></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+var cssTarget = "img.style-svg";
+var ForceInlineSVGActive = "false";
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/svg-support/js/min/svgs-inline-min.js?ver=1.0.0'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/modernizr.custom.js?ver=2.8.3'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/advanced-iframe/js/ai.js?ver=452712'></script>
+<link rel='//api.w.org/' href='//royale.apache.org/wp-json/' />
+<link rel="EditURI" type="application/rsd+xml" title="RSD" href="//royale.apache.org/xmlrpc.php?rsd" />
+<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="//royale.apache.org/wp-includes/wlwmanifest.xml" />
+<meta name="generator" content="WordPress 5.2.1" />
+<link rel='shortlink' href='//royale.apache.org/?p=16012' />
+<link rel="alternate" type="application/json+oembed" href="//royale.apache.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2F//royale.apache.org%2Fhow-to-create-a-desktop-application-with-royale-and-electron%2F" />
+<meta name="generator" content="Powered by WPBakery Page Builder - drag and drop page builder for WordPress."/>
+<meta name="generator" content="Powered by Slider Revolution 5.4.8.3 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." />
<script type="text/javascript">function setREVStartSize(e){
try{ e.c=jQuery(e.c);var i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0;
if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeig [...]
}catch(d){console.log("Failure at Presize of Slider:"+d)}
- };</script>
- <style type="text/css" id="wp-custom-css">
- /*
-You can add your own CSS here.
-
-Click the help icon above to learn more.
-*/ </style>
+ };</script>
+ <style type="text/css" id="wp-custom-css">
+ /*
+You can add your own CSS here.
+
+Click the help icon above to learn more.
+*/ </style>
<style type="text/css" title="dynamic-css" class="options-output">#grve-body{background-color:#ffffff;}</style><noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript> </head>
@@ -194,12 +194,12 @@ Click the help icon above to learn more.
<!-- Main Menu -->
<nav id="grve-main-menu" class="grve-horizontal-menu grve-position-center grve-arrow grve-menu-type-classic grve-main-menu">
<div class="grve-wrapper">
- <ul id="menu-main" class="grve-menu"><li id="menu-item-15293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15293 grve-first-level"><a href="//royale.apache.org/features/"><span class="grve-item">Features</span></a></li>
-<li id="menu-item-16004" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16004 grve-first-level"><a href="//apache.github.io/royale-docs/get-started.html"><span class="grve-item">Get Started</span></a></li>
-<li id="menu-item-14341" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14341 grve-first-level"><a href="//royale.apache.org/download/"><span class="grve-item">Download</span></a></li>
-<li id="menu-item-14345" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14345 grve-first-level"><a href="//royale.apache.org/docs/"><span class="grve-item">Docs</span></a></li>
-<li id="menu-item-14342" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14342 grve-first-level"><a href="//royale.apache.org/blog/"><span class="grve-item">Blog</span></a></li>
-<li id="menu-item-14886" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14886 grve-first-level"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GitHub</span></a></li>
+ <ul id="menu-main" class="grve-menu"><li id="menu-item-15293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15293 grve-first-level"><a href="//royale.apache.org/features/"><span class="grve-item">Features</span></a></li>
+<li id="menu-item-16004" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16004 grve-first-level"><a href="//apache.github.io/royale-docs/get-started.html"><span class="grve-item">Get Started</span></a></li>
+<li id="menu-item-14341" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14341 grve-first-level"><a href="//royale.apache.org/download/"><span class="grve-item">Download</span></a></li>
+<li id="menu-item-14345" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14345 grve-first-level"><a href="//royale.apache.org/docs/"><span class="grve-item">Docs</span></a></li>
+<li id="menu-item-14342" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14342 grve-first-level"><a href="//royale.apache.org/blog/"><span class="grve-item">Blog</span></a></li>
+<li id="menu-item-14886" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14886 grve-first-level"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GitHub</span></a></li>
</ul> </div>
</nav>
<!-- End Main Menu -->
@@ -300,12 +300,12 @@ Click the help icon above to learn more.
<!-- Main Menu -->
<nav id="grve-movedo-sticky-menu" class="grve-horizontal-menu grve-position-center grve-main-menu grve-arrow grve-menu-type-classic">
<div class="grve-wrapper">
- <ul id="menu-main-1" class="grve-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15293 grve-first-level"><a href="//royale.apache.org/features/"><span class="grve-item">Features</span></a></li>
-<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16004 grve-first-level"><a href="//apache.github.io/royale-docs/get-started.html"><span class="grve-item">Get Started</span></a></li>
-<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14341 grve-first-level"><a href="//royale.apache.org/download/"><span class="grve-item">Download</span></a></li>
-<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14345 grve-first-level"><a href="//royale.apache.org/docs/"><span class="grve-item">Docs</span></a></li>
-<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14342 grve-first-level"><a href="//royale.apache.org/blog/"><span class="grve-item">Blog</span></a></li>
-<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14886 grve-first-level"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GitHub</span></a></li>
+ <ul id="menu-main-1" class="grve-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15293 grve-first-level"><a href="//royale.apache.org/features/"><span class="grve-item">Features</span></a></li>
+<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16004 grve-first-level"><a href="//apache.github.io/royale-docs/get-started.html"><span class="grve-item">Get Started</span></a></li>
+<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14341 grve-first-level"><a href="//royale.apache.org/download/"><span class="grve-item">Download</span></a></li>
+<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14345 grve-first-level"><a href="//royale.apache.org/docs/"><span class="grve-item">Docs</span></a></li>
+<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14342 grve-first-level"><a href="//royale.apache.org/blog/"><span class="grve-item">Blog</span></a></li>
+<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14886 grve-first-level"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GitHub</span></a></li>
</ul> </div>
</nav>
<!-- End Main Menu -->
@@ -329,10 +329,10 @@ Click the help icon above to learn more.
<div class="grve-title-content-wrapper grve-bg-none grve-align-left grve-content-large">
<div class="grve-subheading grve-title-categories clearfix grve-text-light">
- <ul class="grve-categories"> <li class="cat-item cat-item-92"><a href="//royale.apache.org/category/desktop/">Desktop</a>
-</li>
- <li class="cat-item cat-item-57"><a href="//royale.apache.org/category/jewel-ui-set/">Jewel UI Set</a>
-</li>
+ <ul class="grve-categories"> <li class="cat-item cat-item-92"><a href="//royale.apache.org/category/desktop/">Desktop</a>
+</li>
+ <li class="cat-item cat-item-57"><a href="//royale.apache.org/category/jewel-ui-set/">Jewel UI Set</a>
+</li>
</ul> </div>
<h1 class="grve-title grve-with-line grve-text-light"><span>How to create a Desktop Application with Royale and Electron</span></h1>
@@ -360,12 +360,12 @@ Click the help icon above to learn more.
<!-- MAIN CONTENT -->
<div id="grve-main-content">
<div class="grve-main-content-wrapper clearfix">
-
-
- <article id="post-16012" class="grve-single-post post-16012 post type-post status-publish format-standard has-post-thumbnail hentry category-desktop category-jewel-ui-set" itemscope itemtype="//schema.org/BlogPosting">
-
-
- <div id="grve-single-content">
+
+
+ <article id="post-16012" class="grve-single-post post-16012 post type-post status-publish format-standard has-post-thumbnail hentry category-desktop category-jewel-ui-set" itemscope itemtype="//schema.org/BlogPosting">
+
+
+ <div id="grve-single-content">
<h2 class="grve-hidden" itemprop="name headline">How to create a Desktop Application with Royale and Electron</h2> <span class="grve-hidden">
<span class="grve-structured-data entry-title">How to create a Desktop Application with Royale and Electron</span>
<span class="grve-structured-data" itemprop="image" itemscope itemtype="//schema.org/ImageObject">
@@ -383,151 +383,151 @@ Click the help icon above to learn more.
</span>
</span>
<time class="grve-structured-data date published" itemprop="datePublished" datetime="2019-05-26T22:17:03+02:00">May 26, 2019</time>
- <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-26T22:43:11+02:00">May 26, 2019</time>
+ <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-27T16:34:29+02:00">May 27, 2019</time>
<span class="grve-structured-data" itemprop="mainEntityOfPage" itemscope itemtype="//schema.org/WebPage" itemid="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/"></span>
</span>
- <div itemprop="articleBody">
- <div class="grve-container"><p>With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you’ll learn how to do that.</p>
-<p>The short version is to create an Electron project, create a Apache Royale project inside of that and then point the Electron app to the generated Apache Royale html page. You then communicate through the ipcRenderer. We’ll be using Visual Studio Code for this guide.</p>
-<h3><strong>Prerequisites:</strong></h3>
-<ul>
-<li>Install Visual Studio Code – <a href="//code.visualstudio.com">Link</a></li>
-<li>Install ActionScript & MXML plugin <em>(required – also included in the extension pack below)</em> – <a href="//marketplace.visualstudio.com/items?itemName=bowlerhatllc.vscode-nextgenas">Link</a></li>
-<li>Install Apache Flex SDK <em>(required – includes Apache Royale & necessary tools)</em> – Link</li>
-<li>Install npm <em>(required for parts of this guide)</em> – <a href="//blog.teamtreehouse.com/install-node-js-npm-mac">Link</a></li>
-<li>Install Electron plugin – <a href="//marketplace.visualstudio.com/items?itemName=kodetech.electron-debug">Link</a></li>
-<li>Install Firefox Debugger plugin – <a href="//marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug">Link</a></li>
-<li>Install Git – <a href="//git-scm.com/book/en/v2/Getting-Started-Installing-Git">Link</a></li>
-<li>*Extension pack that includes AS3 & MXML plugin, AS3 projects and AS3 snippets – <a href="//marketplace.visualstudio.com/items?itemName=neminovno.flex-and-actionscript-extension-pack">Link</a></li>
-</ul>
-<h3>Create an Electron project</h3>
-<p>A basic Electron application needs just these files:</p>
-<ul>
-<li><strong>package.json</strong> – This points to the app’s main file and lists its details and dependencies.</li>
-<li><strong>main.js</strong> – Starts the app and creates a browser window to render HTML. This is the app’s <em><strong>main process</strong>.</em></li>
-<li><strong>index.html</strong> – A web page to render. This is the app’s <strong>renderer process</strong>.</li>
-</ul>
-<p>You also need a reference to a Electron development instance. This can be in the form of a<strong> /node_modules</strong> directory in your project or a reference to another external location. We will show two ways to reference it.</p>
-<h3>Creating a New Project</h3>
-<p>Visual Studio Code doesn’t have a <strong>New Project</strong> menu option that you might be used to form using Flash Builder or other IDEs. Some extensions will setup new projects for you.</p>
-<p>Instead you create a folder and define configurations files in the folders. Visual Studio Code then looks for those settings and uses them to setup the environment and provide code intelligence.</p>
-<p>Open Visual Studio Code (or if open already create a new instance with Command + Shift + N or Control + Shift + N) and then click on Open Folder.</p>
-<p><img class="alignnone size-full wp-image-16013" src="//royale.apache.org/wp-content/uploads/2019/05/visual-studio-code-welcome.png" alt="Visual Studio Code Welcome Screen" width="2272" height="1760" />Create a new folder named “Electron-Royale”, select it and then click Open.</p>
-<p><img class="wp-image-16014 alignnone" src="//royale.apache.org/wp-content/uploads/2019/05/open-electron-royale.png" alt="Open Electron Royale Folder" width="510" height="302" /></p>
-<p>A new <strong>Explorer</strong> section will open.</p>
-<div id="attachment_16016" style="width: 2282px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16016" class="wp-image-16016 size-full" src="//royale.apache.org/wp-content/uploads/2019/05/new-blank-project.png" alt="New Visual Studio Project" width="2272" height="1760" /><p id="caption-attachment-16016" class="wp-caption-text">New Visual Studio Project (showing Welcome screen)</p></div>
-<p>On the right side of the screen (or left) you’ll see the <strong>Explorer</strong> section. Under that you’ll see “<strong>Electron-Royale</strong>” area. That is our project folder.</p>
-<p>Along the heading is the <strong>New File</strong>, <strong>New Folder</strong>, <strong>Refresh</strong> and <strong>Collapse</strong> buttons. They appear when you hover the mouse over the header area.</p>
-<div id="attachment_16017" style="width: 414px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16017" class="wp-image-16017" src="//royale.apache.org/wp-content/uploads/2019/05/project-folder.png" alt="Project Folder" width="404" height="145" /><p id="caption-attachment-16017" class="wp-caption-text">Project Folder</p></div>
-<p>Open files appear in the <strong>Open Editors</strong> view:</p>
-<div id="attachment_16024" style="width: 418px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16024" class="wp-image-16024" src="//royale.apache.org/wp-content/uploads/2019/05/open-editors.png" alt="Open Editors" width="408" height="53" /><p id="caption-attachment-16024" class="wp-caption-text">Open Editors area</p></div>
-<p>If the Welcome screen is still open click the X button to close it.</p>
-<p>For an Electron app we will create this folder structure:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="javascript codecolorer">your<span class="sy0">-</span>app<span class="sy0">/</span><br />
-├── package.<span class="me1">json</span><br />
-├── main.<span class="me1">js</span><br />
-└── index.<span class="me1">html</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>If you haven’t created an Electron app before read this short overview <a href="//electronjs.org/docs/tutorial/first-app">page</a> and then return here.</p>
-<p>There are extensions that create the project for us but we’re going to do it by hand for this guide. Why? You will be editing these options frequently until the project is setup.</p>
-<p>Create the <strong>package.json</strong> in the root directory by clicking on the <strong>New File</strong> button and add the following:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style codecolorer-noborder" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"electron-royale-app"</span><span class="sy0">,</span><br />
- <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"1.0.0"</span><span class="sy0">,</span><br />
- <span class="st0">"description"</span><span class="sy0">:</span> <span class="st0">"Electron and Royale"</span><span class="sy0">,</span><br />
- <span class="st0">"main"</span><span class="sy0">:</span> <span class="st0">"main.js"</span><span class="sy0">,</span><br />
- <span class="st0">"scripts"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"start"</span><span class="sy0">:</span> <span class="st0">"electron ."</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="st0">"devDependencies"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"electron"</span><span class="sy0">:</span> <span class="st0">"^5.0.1"</span><br />
- <span class="br0">}</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>You could also create the <strong>package.json</strong> project by using <strong>npm init </strong>command.</p>
-<p>Open a new Terminal window (built in to Visual Studio Code):</p>
-<div id="attachment_16018" style="width: 1452px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16018" class="size-full wp-image-16018" src="//royale.apache.org/wp-content/uploads/2019/05/terminal-window.png" alt="New Terminal Window" width="1442" height="610" /><p id="caption-attachment-16018" class="wp-caption-text">New Terminal Window</p></div>
-<p>In the Window that opens enter the follow command and follow the prompts:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style codecolorer-noborder" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">npm init</div></td></tr></tbody></table></div>
-
-</pre>
-<p>You can simply press enter multiple times and type in the values into the editor afterwards:</p>
-<div id="attachment_16021" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16021" class="wp-image-16021" src="//royale.apache.org/wp-content/uploads/2019/05/npm-init.png" alt="npm init" width="600" height="529" /><p id="caption-attachment-16021" class="wp-caption-text">Prompts from npm init</p></div>
-<p>Type <strong>yes</strong> to confirm. It will create a new <strong>package.json</strong> file in the root directory. A few of the values will be different so set them back to the values we have above.</p>
-<p>Now we create the main Electron js file <strong>main.js</strong>. Note: There are other examples that use <strong>index.js</strong>.</p>
-<p>Click the <strong>New File</strong> button and name it <strong>main.js</strong>:</p>
-<div id="attachment_16019" style="width: 418px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16019" class="wp-image-16019" src="//royale.apache.org/wp-content/uploads/2019/05/main-js.png" alt="Main Electron js" width="408" height="104" /><p id="caption-attachment-16019" class="wp-caption-text">Main js</p></div>
-<p>Again, read this <a href="//electronjs.org/docs/tutorial/first-app">overview page</a> and then return here.</p>
-<p>Enter the following for <strong>main.js</strong>:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style codecolorer-noborder" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />3 [...]
-<br />
-<span class="co1">// Keep a global reference of the window object, if you don't, the window will</span><br />
-<span class="co1">// be closed automatically when the JavaScript object is garbage collected.</span><br />
-let win<br />
-<br />
-<span class="kw1">function</span> createWindow <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br />
- <span class="co1">// Create the browser window.</span><br />
- win <span class="sy0">=</span> <span class="kw1">new</span> BrowserWindow<span class="br0">(</span><span class="br0">{</span><br />
- width<span class="sy0">:</span> <span class="nu0">800</span><span class="sy0">,</span><br />
- height<span class="sy0">:</span> <span class="nu0">600</span><span class="sy0">,</span><br />
- webPreferences<span class="sy0">:</span> <span class="br0">{</span><br />
- nodeIntegration<span class="sy0">:</span> <span class="kw2">true</span><br />
- <span class="br0">}</span><br />
- <span class="br0">}</span><span class="br0">)</span><br />
-<br />
- <span class="co1">// and load the index.html of the app.</span><br />
- win.<span class="me1">loadFile</span><span class="br0">(</span><span class="st0">'index.html'</span><span class="br0">)</span><br />
-<br />
- <span class="co1">// Open the DevTools.</span><br />
- <span class="co1">//win.webContents.openDevTools()</span><br />
-<br />
- <span class="co1">// Emitted when the window is closed.</span><br />
- win.<span class="me1">on</span><span class="br0">(</span><span class="st0">'closed'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=&</span>gt<span class="sy0">;</span> <span class="br0">{</span><br />
- <span class="co1">// Dereference the window object, usually you would store windows</span><br />
- <span class="co1">// in an array if your app supports multi windows, this is the time</span><br />
- <span class="co1">// when you should delete the corresponding element.</span><br />
- win <span class="sy0">=</span> <span class="kw2">null</span><br />
- <span class="br0">}</span><span class="br0">)</span><br />
-<span class="br0">}</span><br />
-<br />
-<span class="co1">// This method will be called when Electron has finished</span><br />
-<span class="co1">// initialization and is ready to create browser windows.</span><br />
-<span class="co1">// Some APIs can only be used after this event occurs.</span><br />
-app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'ready'</span><span class="sy0">,</span> createWindow<span class="br0">)</span><br />
-<br />
-<span class="co1">// Quit when all windows are closed.</span><br />
-app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'window-all-closed'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=&</span>gt<span class="sy0">;</span> <span class="br0">{</span><br />
- <span class="co1">// On macOS it is common for applications and their menu bar</span><br />
- <span class="co1">// to stay active until the user quits explicitly with Cmd + Q</span><br />
- <span class="kw1">if</span> <span class="br0">(</span>process.<span class="me1">platform</span> <span class="sy0">!==</span> <span class="st0">'darwin'</span><span class="br0">)</span> <span class="br0">{</span><br />
- app.<span class="me1">quit</span><span class="br0">(</span><span class="br0">)</span><br />
- <span class="br0">}</span><br />
-<span class="br0">}</span><span class="br0">)</span><br />
-<br />
-app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'activate'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=&</span>gt<span class="sy0">;</span> <span class="br0">{</span><br />
- <span class="co1">// On macOS it's common to re-create a window in the app when the</span><br />
- <span class="co1">// dock icon is clicked and there are no other windows open.</span><br />
- <span class="kw1">if</span> <span class="br0">(</span>win <span class="sy0">===</span> <span class="kw2">null</span><span class="br0">)</span> <span class="br0">{</span><br />
- createWindow<span class="br0">(</span><span class="br0">)</span><br />
- <span class="br0">}</span><br />
-<span class="br0">}</span><span class="br0">)</span><br />
-<br />
-<span class="co1">// In this file you can include the rest of your app's specific main process</span><br />
-<span class="co1">// code. You can also put them in separate files and require them here.</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>We then need to create an HTML page to display in our Electron app.</p>
-<p>Click the <strong>New File</strong> button, name it <strong>index.html</strong> and then enter the following value:</p>
+ <div itemprop="articleBody">
+ <div class="grve-container"><p>With Apache Royale and Electron you can publish your projects to desktop applications. In this guide you’ll learn how to do that.</p>
+<p>The short version is to create an Electron project, create a Apache Royale project inside of that and then point the Electron app to the generated Apache Royale html page. You then communicate through the ipcRenderer. We’ll be using Visual Studio Code for this guide.</p>
+<h3><strong>Prerequisites:</strong></h3>
+<ul>
+<li>Install Visual Studio Code – <a href="//code.visualstudio.com">Link</a></li>
+<li>Install ActionScript & MXML plugin <em>(required – also included in the extension pack below)</em> – <a href="//marketplace.visualstudio.com/items?itemName=bowlerhatllc.vscode-nextgenas">Link</a></li>
+<li>Install Apache Flex SDK <em>(required – includes Apache Royale & necessary tools)</em> – Link</li>
+<li>Install npm <em>(required for parts of this guide)</em> – <a href="//blog.teamtreehouse.com/install-node-js-npm-mac">Link</a></li>
+<li>Install Electron plugin – <a href="//marketplace.visualstudio.com/items?itemName=kodetech.electron-debug">Link</a></li>
+<li>Install Firefox Debugger plugin – <a href="//marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug">Link</a></li>
+<li>Install Git – <a href="//git-scm.com/book/en/v2/Getting-Started-Installing-Git">Link</a></li>
+<li>*Extension pack that includes AS3 & MXML plugin, AS3 projects and AS3 snippets – <a href="//marketplace.visualstudio.com/items?itemName=neminovno.flex-and-actionscript-extension-pack">Link</a></li>
+</ul>
+<h3>Create an Electron project</h3>
+<p>A basic Electron application needs just these files:</p>
+<ul>
+<li><strong>package.json</strong> – This points to the app’s main file and lists its details and dependencies.</li>
+<li><strong>main.js</strong> – Starts the app and creates a browser window to render HTML. This is the app’s <em><strong>main process</strong>.</em></li>
+<li><strong>index.html</strong> – A web page to render. This is the app’s <strong>renderer process</strong>.</li>
+</ul>
+<p>You also need a reference to a Electron development instance. This can be in the form of a<strong> /node_modules</strong> directory in your project or a reference to another external location. We will show two ways to reference it.</p>
+<h3>Creating a New Project</h3>
+<p>Visual Studio Code doesn’t have a <strong>New Project</strong> menu option that you might be used to form using Flash Builder or other IDEs. Some extensions will setup new projects for you.</p>
+<p>Instead you create a folder and define configurations files in the folders. Visual Studio Code then looks for those settings and uses them to setup the environment and provide code intelligence.</p>
+<p>Open Visual Studio Code (or if open already create a new instance with Command + Shift + N or Control + Shift + N) and then click on Open Folder.</p>
+<p><img class="alignnone size-full wp-image-16013" src="//royale.apache.org/wp-content/uploads/2019/05/visual-studio-code-welcome.png" alt="Visual Studio Code Welcome Screen" width="2272" height="1760" />Create a new folder named “Electron-Royale”, select it and then click Open.</p>
+<p><img class="wp-image-16014 alignnone" src="//royale.apache.org/wp-content/uploads/2019/05/open-electron-royale.png" alt="Open Electron Royale Folder" width="510" height="302" /></p>
+<p>A new <strong>Explorer</strong> section will open.</p>
+<div id="attachment_16016" style="width: 2282px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16016" class="wp-image-16016 size-full" src="//royale.apache.org/wp-content/uploads/2019/05/new-blank-project.png" alt="New Visual Studio Project" width="2272" height="1760" /><p id="caption-attachment-16016" class="wp-caption-text">New Visual Studio Project (showing Welcome screen)</p></div>
+<p>On the right side of the screen (or left) you’ll see the <strong>Explorer</strong> section. Under that you’ll see “<strong>Electron-Royale</strong>” area. That is our project folder.</p>
+<p>Along the heading is the <strong>New File</strong>, <strong>New Folder</strong>, <strong>Refresh</strong> and <strong>Collapse</strong> buttons. They appear when you hover the mouse over the header area.</p>
+<div id="attachment_16017" style="width: 414px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16017" class="wp-image-16017" src="//royale.apache.org/wp-content/uploads/2019/05/project-folder.png" alt="Project Folder" width="404" height="145" /><p id="caption-attachment-16017" class="wp-caption-text">Project Folder</p></div>
+<p>Open files appear in the <strong>Open Editors</strong> view:</p>
+<div id="attachment_16024" style="width: 418px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16024" class="wp-image-16024" src="//royale.apache.org/wp-content/uploads/2019/05/open-editors.png" alt="Open Editors" width="408" height="53" /><p id="caption-attachment-16024" class="wp-caption-text">Open Editors area</p></div>
+<p>If the Welcome screen is still open click the X button to close it.</p>
+<p>For an Electron app we will create this folder structure:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="javascript codecolorer">your<span class="sy0">-</span>app<span class="sy0">/</span><br />
+├── package.<span class="me1">json</span><br />
+├── main.<span class="me1">js</span><br />
+└── index.<span class="me1">html</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>If you haven’t created an Electron app before read this short overview <a href="//electronjs.org/docs/tutorial/first-app">page</a> and then return here.</p>
+<p>There are extensions that create the project for us but we’re going to do it by hand for this guide. Why? You will be editing these options frequently until the project is setup.</p>
+<p>Create the <strong>package.json</strong> in the root directory by clicking on the <strong>New File</strong> button and add the following:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style codecolorer-noborder" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"electron-royale-app"</span><span class="sy0">,</span><br />
+ <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"1.0.0"</span><span class="sy0">,</span><br />
+ <span class="st0">"description"</span><span class="sy0">:</span> <span class="st0">"Electron and Royale"</span><span class="sy0">,</span><br />
+ <span class="st0">"main"</span><span class="sy0">:</span> <span class="st0">"main.js"</span><span class="sy0">,</span><br />
+ <span class="st0">"scripts"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"start"</span><span class="sy0">:</span> <span class="st0">"electron ."</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="st0">"devDependencies"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"electron"</span><span class="sy0">:</span> <span class="st0">"^5.0.1"</span><br />
+ <span class="br0">}</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>You could also create the <strong>package.json</strong> project by using <strong>npm init </strong>command.</p>
+<p>Open a new Terminal window (built in to Visual Studio Code):</p>
+<div id="attachment_16018" style="width: 1452px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16018" class="size-full wp-image-16018" src="//royale.apache.org/wp-content/uploads/2019/05/terminal-window.png" alt="New Terminal Window" width="1442" height="610" /><p id="caption-attachment-16018" class="wp-caption-text">New Terminal Window</p></div>
+<p>In the Window that opens enter the follow command and follow the prompts:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style codecolorer-noborder" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">npm init</div></td></tr></tbody></table></div>
+
+</pre>
+<p>You can simply press enter multiple times and type in the values into the editor afterwards:</p>
+<div id="attachment_16021" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16021" class="wp-image-16021" src="//royale.apache.org/wp-content/uploads/2019/05/npm-init.png" alt="npm init" width="600" height="529" /><p id="caption-attachment-16021" class="wp-caption-text">Prompts from npm init</p></div>
+<p>Type <strong>yes</strong> to confirm. It will create a new <strong>package.json</strong> file in the root directory. A few of the values will be different so set them back to the values we have above.</p>
+<p>Now we create the main Electron js file <strong>main.js</strong>. Note: There are other examples that use <strong>index.js</strong>.</p>
+<p>Click the <strong>New File</strong> button and name it <strong>main.js</strong>:</p>
+<div id="attachment_16019" style="width: 418px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16019" class="wp-image-16019" src="//royale.apache.org/wp-content/uploads/2019/05/main-js.png" alt="Main Electron js" width="408" height="104" /><p id="caption-attachment-16019" class="wp-caption-text">Main js</p></div>
+<p>Again, read this <a href="//electronjs.org/docs/tutorial/first-app">overview page</a> and then return here.</p>
+<p>Enter the following for <strong>main.js</strong>:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style codecolorer-noborder" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />3 [...]
+<br />
+<span class="co1">// Keep a global reference of the window object, if you don't, the window will</span><br />
+<span class="co1">// be closed automatically when the JavaScript object is garbage collected.</span><br />
+let win<br />
+<br />
+<span class="kw1">function</span> createWindow <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><br />
+ <span class="co1">// Create the browser window.</span><br />
+ win <span class="sy0">=</span> <span class="kw1">new</span> BrowserWindow<span class="br0">(</span><span class="br0">{</span><br />
+ width<span class="sy0">:</span> <span class="nu0">800</span><span class="sy0">,</span><br />
+ height<span class="sy0">:</span> <span class="nu0">600</span><span class="sy0">,</span><br />
+ webPreferences<span class="sy0">:</span> <span class="br0">{</span><br />
+ nodeIntegration<span class="sy0">:</span> <span class="kw2">true</span><br />
+ <span class="br0">}</span><br />
+ <span class="br0">}</span><span class="br0">)</span><br />
+<br />
+ <span class="co1">// and load the index.html of the app.</span><br />
+ win.<span class="me1">loadFile</span><span class="br0">(</span><span class="st0">'index.html'</span><span class="br0">)</span><br />
+<br />
+ <span class="co1">// Open the DevTools.</span><br />
+ <span class="co1">//win.webContents.openDevTools()</span><br />
+<br />
+ <span class="co1">// Emitted when the window is closed.</span><br />
+ win.<span class="me1">on</span><span class="br0">(</span><span class="st0">'closed'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=&</span>gt<span class="sy0">;</span> <span class="br0">{</span><br />
+ <span class="co1">// Dereference the window object, usually you would store windows</span><br />
+ <span class="co1">// in an array if your app supports multi windows, this is the time</span><br />
+ <span class="co1">// when you should delete the corresponding element.</span><br />
+ win <span class="sy0">=</span> <span class="kw2">null</span><br />
+ <span class="br0">}</span><span class="br0">)</span><br />
+<span class="br0">}</span><br />
+<br />
+<span class="co1">// This method will be called when Electron has finished</span><br />
+<span class="co1">// initialization and is ready to create browser windows.</span><br />
+<span class="co1">// Some APIs can only be used after this event occurs.</span><br />
+app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'ready'</span><span class="sy0">,</span> createWindow<span class="br0">)</span><br />
+<br />
+<span class="co1">// Quit when all windows are closed.</span><br />
+app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'window-all-closed'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=&</span>gt<span class="sy0">;</span> <span class="br0">{</span><br />
+ <span class="co1">// On macOS it is common for applications and their menu bar</span><br />
+ <span class="co1">// to stay active until the user quits explicitly with Cmd + Q</span><br />
+ <span class="kw1">if</span> <span class="br0">(</span>process.<span class="me1">platform</span> <span class="sy0">!==</span> <span class="st0">'darwin'</span><span class="br0">)</span> <span class="br0">{</span><br />
+ app.<span class="me1">quit</span><span class="br0">(</span><span class="br0">)</span><br />
+ <span class="br0">}</span><br />
+<span class="br0">}</span><span class="br0">)</span><br />
+<br />
+app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'activate'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=&</span>gt<span class="sy0">;</span> <span class="br0">{</span><br />
+ <span class="co1">// On macOS it's common to re-create a window in the app when the</span><br />
+ <span class="co1">// dock icon is clicked and there are no other windows open.</span><br />
+ <span class="kw1">if</span> <span class="br0">(</span>win <span class="sy0">===</span> <span class="kw2">null</span><span class="br0">)</span> <span class="br0">{</span><br />
+ createWindow<span class="br0">(</span><span class="br0">)</span><br />
+ <span class="br0">}</span><br />
+<span class="br0">}</span><span class="br0">)</span><br />
+<br />
+<span class="co1">// In this file you can include the rest of your app's specific main process</span><br />
+<span class="co1">// code. You can also put them in separate files and require them here.</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>We then need to create an HTML page to display in our Electron app.</p>
+<p>Click the <strong>New File</strong> button, name it <strong>index.html</strong> and then enter the following value:</p>
<pre width="100%"><!DOCTYPE html>
<html>
<head>
@@ -541,176 +541,176 @@ app.<span class="me1">on</span><span class="br0">(</span><span class="st0">'
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
-</pre>
-<p>We have one last step before running our project. We need the Electron <strong>node_modules</strong> folder (or a reference to it).</p>
-<p>We can install this folder locally to our project or if we’ve installed the Electron plugin we can use that.</p>
-<p>Let’s use the extension first and then do it manually after.</p>
-<p>Install the Electron plugin above and then click on the <strong>Debug</strong> button. The debug button runs along the edge of Visual Studio Code. When you click it it opens the <strong>Debug</strong> view:</p>
-<div>
-<div><img class="alignnone wp-image-16029" src="//royale.apache.org/wp-content/uploads/2019/05/debug-view.png" alt="Debug View" width="401" height="268" /></div>
-</div>
-<div></div>
-<div>Here you can launch different tasks including debugging your application.</div>
-<div></div>
-<div>Click the <strong>No configurations</strong> dropdown list and you’ll see <strong>Add Configuration</strong>. Click that.</div>
-<div>
-<div id="attachment_16031" style="width: 220px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16031" class="wp-image-16031" src="//royale.apache.org/wp-content/uploads/2019/05/add-configuration.png" alt="Add Configuration option" width="210" height="67" /><p id="caption-attachment-16031" class="wp-caption-text">Add Configuration option</p></div>
-<p>This will show a list of options including one called <strong>Electron</strong>. Select this option.</p>
-</div>
-<div>
-<div id="attachment_16032" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16032" class="wp-image-16032" src="//royale.apache.org/wp-content/uploads/2019/05/electron-configuration.png" alt="Electron Launch Configuration" width="600" height="174" /><p id="caption-attachment-16032" class="wp-caption-text">Electron Launch Configuration</p></div>
-<p>When you select <strong>Electron</strong> from the dropdown list a <strong>launch.json</strong> file is created and placed in a <strong>.vscode</strong> folder in the root of your project and the <strong>launch.json</strong> file is opened in an editor tab.</p>
-<div id="attachment_16033" style="width: 2044px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16033" class="size-full wp-image-16033" src="//royale.apache.org/wp-content/uploads/2019/05/launch-json.png" alt="Launch Configuration" width="2034" height="664" /><p id="caption-attachment-16033" class="wp-caption-text">Launch Configuration</p></div>
-<p>You can see the configuration is a simple JSON string like our other configurations.</p>
-<p>Let’s update the name to <strong>Launch Electron</strong> and save the document. You can see the name updated in the Debug view:</p>
-<div id="attachment_16034" style="width: 340px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16034" class="wp-image-16034" src="//royale.apache.org/wp-content/uploads/2019/05/launch-electron.png" alt="Launch Electron config" width="330" height="65" /><p id="caption-attachment-16034" class="wp-caption-text">Launch Electron button</p></div>
-<p>Now, to launch your first Electron app you can use <strong>npm start</strong> from the Terminal view or you can click the <strong>Launch</strong> button in the Debug view. For this guide use the launch button.</p>
-<p>If everything went correctly your first Electron app will appear. Congratulations!</p>
-<div id="attachment_16035" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16035" class="size-full wp-image-16035" src="//royale.apache.org/wp-content/uploads/2019/05/hello-world.png" alt="Hello World" width="1824" height="1424" /><p id="caption-attachment-16035" class="wp-caption-text">Hello World in Electron</p></div>
-<p>Shortly after opening it it will show the Chrome dev tools:</p>
-<div id="attachment_16036" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16036" class="size-full wp-image-16036" src="//royale.apache.org/wp-content/uploads/2019/05/hello-world-tools.png" alt="Dev tools" width="1824" height="1424" /><p id="caption-attachment-16036" class="wp-caption-text">Dev tools</p></div>
-</div>
-<p>You can use the Dev tools to set breakpoints, inspect the page elements and more.</p>
-<p>Let’s prevent the dev tools from opening for now. You can reenable them later.</p>
-<p>Open <strong>main.js</strong> and find and comment out or remove the line below and save the document:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">win.<span class="me1">webContents</span>.<span class="me1">openDevTools</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>BTW when debugging a session in Visual Studio Code a debug bar will appear:</p>
-<div id="attachment_16037" style="width: 354px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16037" class="wp-image-16037" src="//royale.apache.org/wp-content/uploads/2019/05/debug-bar.png" alt="Debug bar" width="344" height="39" /><p id="caption-attachment-16037" class="wp-caption-text">Debug bar appearing</p></div>
-<p>You will use that to <strong>Pause</strong>, <strong>Continue</strong>, <strong>Step Over</strong>, <strong>Step Into</strong>, <strong>Step Out of</strong>, <strong>Reload</strong> or <strong>Stop</strong> your app. You can dock this bar through an option in the VSC preferences… <em>Code > Preferences > Settings > Tool bar location > docked</em>.</p>
-<h3>Install Electron in the Project</h3>
-<div>We can setup Electron manually as well and in this case we will install it inside the project folder.</div>
-<div></div>
-<div>The reason to install it in the project is so that we can switch between different versions and maintain control of our dependencies. The downside is that it has to download an electron instance and each project instance will take up additional space. If you work on a project on a team it’s recommended to keep the instance in your project but not to commit it into version control.</div>
-<div></div>
-<div>Note: We can have electron installed inside our project <em>and</em> use the electron install from the Electron plugin or reference another instance externally. Our launch configurations will allow that.</div>
-<div></div>
-<div>We are going to install Electron in to our root project directory.</div>
-<div></div>
-<div>Close the app if it is open by going to the menu and choosing Quit-your-app.</div>
-<div></div>
-<div>
-<div id="attachment_16039" style="width: 299px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16039" class="wp-image-16039" src="//royale.apache.org/wp-content/uploads/2019/05/app-quit-menu.png" alt="Quit menu" width="289" height="184" /><p id="caption-attachment-16039" class="wp-caption-text">Quit menu</p></div>
-<p>Open the built in Terminal and enter the following <strong>npm</strong> command:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">npm install <span class="sy0">--</span>save<span class="sy0">-</span>dev electron</div></td></tr></tbody></table></div>
-
-</pre>
-<p>Electron will begin downloading the <strong>node_modules</strong> and it’s progress will show in the Terminal view:</p>
-<div id="attachment_16040" style="width: 644px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16040" class="wp-image-16040" src="//royale.apache.org/wp-content/uploads/2019/05/downloading-electron-1.png" alt="Downloading locally" width="634" height="132" /><p id="caption-attachment-16040" class="wp-caption-text">Downloading…</p></div>
-<div id="attachment_16041" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16041" class="wp-image-16041" src="//royale.apache.org/wp-content/uploads/2019/05/downloading-electron-01.png" alt="Download Complete" width="600" height="200" /><p id="caption-attachment-16041" class="wp-caption-text">Download Complete</p></div>
-<p>When it’s complete you will see a new folder in your project called <strong>node_modules</strong>:</p>
-<div id="attachment_16042" style="width: 360px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16042" class="wp-image-16042" src="//royale.apache.org/wp-content/uploads/2019/05/node-module-folder.png" alt="Node module folder" width="350" height="199" /><p id="caption-attachment-16042" class="wp-caption-text">Node installed locally</p></div>
-<p>You will also see that <strong>npm install</strong> creates a <strong>package-lock.json</strong> file.</p>
-<p><strong>Package-lock.json</strong> is like a quick save for your project. Using it you or your teammates can restore the dependencies to a specific versioned state. It’s described more <a href="//stackoverflow.com/a/50868741/441016">here</a>, <a href="//stackoverflow.com/a/55606805/441016">here</a> and <a href="//stackoverflow.com/a/55318035/441016">here</a>. Commit this configuration instead of the <strong>node_modules</strong> directory when using version control.</p>
-<p>Once the node modules has been downloaded we may need to manually create the <strong>.vscode</strong> directory and the <strong>launch.json</strong> configuration. Create the <strong>.vscode</strong> directory and <strong>launch.json</strong> file and enter the value below:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"0.2.0"</span><span class="sy0">,</span><br />
- <span class="st0">"configurations"</span><span class="sy0">:</span> <span class="br0">[</span><br />
- <span class="br0">{</span><br />
- <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Debug Main Electron Process"</span><span class="sy0">,</span><br />
- <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"node"</span><span class="sy0">,</span><br />
- <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
- <span class="st0">"cwd"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}"</span><span class="sy0">,</span><br />
- <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron"</span><span class="sy0">,</span><br />
- <span class="st0">"windows"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron.cmd"</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="st0">"args"</span> <span class="sy0">:</span> <span class="br0">[</span><span class="st0">"."</span><span class="br0">]</span><span class="sy0">,</span><br />
- <span class="st0">"outputCapture"</span><span class="sy0">:</span> <span class="st0">"std"</span><br />
- <span class="br0">}</span><br />
- <span class="br0">]</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>Since the <strong>launch.json</strong> already exists we can <em><strong>add </strong></em>our new configuration settings to it.</p>
-<p>BTW Notice in the launch configuration above that the <strong>type</strong> is <strong>node</strong> and that <strong>runtimeExecutable</strong> options are defined.</p>
-<p>Let’s <em>add</em> our new manual configuration next to our existing extension created configuration. Open <strong>launch.json</strong> config and use the values below:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"0.2.0"</span><span class="sy0">,</span><br />
- <span class="st0">"configurations"</span><span class="sy0">:</span> <span class="br0">[</span><br />
- <span class="br0">{</span><br />
- <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"electron"</span><span class="sy0">,</span><br />
- <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
- <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Launch Electron"</span><span class="sy0">,</span><br />
- <span class="st0">"appDir"</span><span class="sy0">:</span> <span class="st0">"${workspaceFolder}"</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="br0">{</span><br />
- <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Debug Main Electron Process"</span><span class="sy0">,</span><br />
- <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"node"</span><span class="sy0">,</span><br />
- <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
- <span class="st0">"cwd"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}"</span><span class="sy0">,</span><br />
- <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron"</span><span class="sy0">,</span><br />
- <span class="st0">"windows"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron.cmd"</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="st0">"args"</span> <span class="sy0">:</span> <span class="br0">[</span><span class="st0">"."</span><span class="br0">]</span><span class="sy0">,</span><br />
- <span class="st0">"outputCapture"</span><span class="sy0">:</span> <span class="st0">"std"</span><br />
- <span class="br0">}</span><br />
- <span class="br0">]</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>You’ll see why we have both added later.</p>
-<p>I recommend you read about the Electron Architecture <a href="//electronjs.org/docs/tutorial/application-architecture">here</a> and then continue.</p>
-<p>You can read more here:</p>
-<ul>
-<li>Electron Quick Start – <a href="//electronjs.org/docs/tutorial/quick-start">link</a></li>
-<li>Electron Quick Start project – <a href="//github.com/electron/electron-quick-start">link</a></li>
-<li>Your first Electron project – <a href="//electronjs.org/docs/tutorial/first-app">link</a></li>
-<li>Electron Architecture – <a href="//electronjs.org/docs/tutorial/application-architecture">link</a></li>
-</ul>
-<h3>Create an Apache Royale project</h3>
-<p>Now we are going to create our Apache Royale project.</p>
-<p>Make sure you have the AS3 & MXML extension installed as mentioned above. This requires Java 1.8. An install page is listed <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/Install-the-ActionScript-and-MXML-extension-for-Visual-Studio-Code">here</a>.</p>
-<p>Once that is installed you need to point to the Apache Royale SDK in the project. We will do it manually and you can see how to have the extension do it at the <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/Install-the-ActionScript-and-MXML-extension-for-Visual-Studio-Code">link</a> provided earlier.</p>
-<p>Open the Explorer view and open the <strong>.vscode</strong> directory.</p>
-<p>In that directory create a <strong>settings.json</strong> file:</p>
-<div id="attachment_16047" style="width: 310px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16047" class="wp-image-16047" src="//royale.apache.org/wp-content/uploads/2019/05/settings.png" alt="Settings" width="300" height="222" /><p id="caption-attachment-16047" class="wp-caption-text">Apache Royale SDK settings.json</p></div>
-<p>Enter the following text:</p>
-</div>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"as3mxml.sdk.framework"</span><span class="sy0">:</span> <span class="st0">"/Users/user/Documents/Royale_SDK/apache-royale-0.9.4-bin-js/royale-asjs"</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<div>
-<p>That will not work as is. You need to enter the path to the directory where you downloaded and installed the Apache Royale SDK.</p>
-<p>There is a more in depth guide <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/Choose-an-ActionScript-SDK-for-the-current-workspace-in-Visual-Studio-Code">here</a> that shows how to setup the SDK with the help of the AS3 & Flex extension. You can use the information to confirm the SDK is available to your project.</p>
-<p>Once the SDK is setup you’ll need to add an <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/asconfig.json">asconfig.json</a> to your project. The <strong>asconfig.json</strong> file is used to add code intelligence to AS3 and MXML files.</p>
-</div>
-<p>Open the Explorer view, select the root project directory, and create a new file with the <strong>New File</strong> button. Name it <strong>asconfig.json</strong>.</p>
-<div id="attachment_16051" style="width: 360px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16051" class="wp-image-16051" src="//royale.apache.org/wp-content/uploads/2019/05/asconfig.png" alt="asconfig" width="350" height="236" /><p id="caption-attachment-16051" class="wp-caption-text">asconfig in project directory</p></div>
-<p>Open the <strong>asconfig.json</strong> file and enter the following:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"compilerOptions"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"source-map"</span><span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span><br />
- <span class="st0">"html-template"</span><span class="sy0">:</span> <span class="st0">"index.html"</span><span class="sy0">,</span><br />
- <span class="st0">"theme"</span><span class="sy0">:</span> <span class="st0">"${royalelib}/themes/JewelTheme/src/main/resources/defaults.css"</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="st0">"additionalOptions"</span><span class="sy0">:</span> <span class="st0">"-warn-public-vars=false"</span><span class="sy0">,</span><br />
- <span class="st0">"files"</span><span class="sy0">:</span><br />
- <span class="br0">[</span><br />
- <span class="st0">"src/HelloWorld.mxml"</span><br />
- <span class="br0">]</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>Notice the page we are pointing to in the <strong>html-template</strong> option. This is the Electron <strong>index.html</strong> page. We will use this as the Royale app <em>template page</em>.</p>
-<p>Note: We can use any page as a template but we need to update the page with special tokens that the Apache Royale compiler looks for.</p>
-<p>Open the <strong>index.html</strong> template and enter the following HTML:</p>
+</pre>
+<p>We have one last step before running our project. We need the Electron <strong>node_modules</strong> folder (or a reference to it).</p>
+<p>We can install this folder locally to our project or if we’ve installed the Electron plugin we can use that.</p>
+<p>Let’s use the extension first and then do it manually after.</p>
+<p>Install the Electron plugin above and then click on the <strong>Debug</strong> button. The debug button runs along the edge of Visual Studio Code. When you click it it opens the <strong>Debug</strong> view:</p>
+<div>
+<div><img class="alignnone wp-image-16029" src="//royale.apache.org/wp-content/uploads/2019/05/debug-view.png" alt="Debug View" width="401" height="268" /></div>
+</div>
+<div></div>
+<div>Here you can launch different tasks including debugging your application.</div>
+<div></div>
+<div>Click the <strong>No configurations</strong> dropdown list and you’ll see <strong>Add Configuration</strong>. Click that.</div>
+<div>
+<div id="attachment_16031" style="width: 220px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16031" class="wp-image-16031" src="//royale.apache.org/wp-content/uploads/2019/05/add-configuration.png" alt="Add Configuration option" width="210" height="67" /><p id="caption-attachment-16031" class="wp-caption-text">Add Configuration option</p></div>
+<p>This will show a list of options including one called <strong>Electron</strong>. Select this option.</p>
+</div>
+<div>
+<div id="attachment_16032" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16032" class="wp-image-16032" src="//royale.apache.org/wp-content/uploads/2019/05/electron-configuration.png" alt="Electron Launch Configuration" width="600" height="174" /><p id="caption-attachment-16032" class="wp-caption-text">Electron Launch Configuration</p></div>
+<p>When you select <strong>Electron</strong> from the dropdown list a <strong>launch.json</strong> file is created and placed in a <strong>.vscode</strong> folder in the root of your project and the <strong>launch.json</strong> file is opened in an editor tab.</p>
+<div id="attachment_16033" style="width: 2044px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16033" class="size-full wp-image-16033" src="//royale.apache.org/wp-content/uploads/2019/05/launch-json.png" alt="Launch Configuration" width="2034" height="664" /><p id="caption-attachment-16033" class="wp-caption-text">Launch Configuration</p></div>
+<p>You can see the configuration is a simple JSON string like our other configurations.</p>
+<p>Let’s update the name to <strong>Launch Electron</strong> and save the document. You can see the name updated in the Debug view:</p>
+<div id="attachment_16034" style="width: 340px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16034" class="wp-image-16034" src="//royale.apache.org/wp-content/uploads/2019/05/launch-electron.png" alt="Launch Electron config" width="330" height="65" /><p id="caption-attachment-16034" class="wp-caption-text">Launch Electron button</p></div>
+<p>Now, to launch your first Electron app you can use <strong>npm start</strong> from the Terminal view or you can click the <strong>Launch</strong> button in the Debug view. For this guide use the launch button.</p>
+<p>If everything went correctly your first Electron app will appear. Congratulations!</p>
+<div id="attachment_16035" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16035" class="size-full wp-image-16035" src="//royale.apache.org/wp-content/uploads/2019/05/hello-world.png" alt="Hello World" width="1824" height="1424" /><p id="caption-attachment-16035" class="wp-caption-text">Hello World in Electron</p></div>
+<p>Shortly after opening it it will show the Chrome dev tools:</p>
+<div id="attachment_16036" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16036" class="size-full wp-image-16036" src="//royale.apache.org/wp-content/uploads/2019/05/hello-world-tools.png" alt="Dev tools" width="1824" height="1424" /><p id="caption-attachment-16036" class="wp-caption-text">Dev tools</p></div>
+</div>
+<p>You can use the Dev tools to set breakpoints, inspect the page elements and more.</p>
+<p>Let’s prevent the dev tools from opening for now. You can reenable them later.</p>
+<p>Open <strong>main.js</strong> and find and comment out or remove the line below and save the document:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">win.<span class="me1">webContents</span>.<span class="me1">openDevTools</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>BTW when debugging a session in Visual Studio Code a debug bar will appear:</p>
+<div id="attachment_16037" style="width: 354px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16037" class="wp-image-16037" src="//royale.apache.org/wp-content/uploads/2019/05/debug-bar.png" alt="Debug bar" width="344" height="39" /><p id="caption-attachment-16037" class="wp-caption-text">Debug bar appearing</p></div>
+<p>You will use that to <strong>Pause</strong>, <strong>Continue</strong>, <strong>Step Over</strong>, <strong>Step Into</strong>, <strong>Step Out of</strong>, <strong>Reload</strong> or <strong>Stop</strong> your app. You can dock this bar through an option in the VSC preferences… <em>Code > Preferences > Settings > Tool bar location > docked</em>.</p>
+<h3>Install Electron in the Project</h3>
+<div>We can setup Electron manually as well and in this case we will install it inside the project folder.</div>
+<div></div>
+<div>The reason to install it in the project is so that we can switch between different versions and maintain control of our dependencies. The downside is that it has to download an electron instance and each project instance will take up additional space. If you work on a project on a team it’s recommended to keep the instance in your project but not to commit it into version control.</div>
+<div></div>
+<div>Note: We can have electron installed inside our project <em>and</em> use the electron install from the Electron plugin or reference another instance externally. Our launch configurations will allow that.</div>
+<div></div>
+<div>We are going to install Electron in to our root project directory.</div>
+<div></div>
+<div>Close the app if it is open by going to the menu and choosing Quit-your-app.</div>
+<div></div>
+<div>
+<div id="attachment_16039" style="width: 299px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16039" class="wp-image-16039" src="//royale.apache.org/wp-content/uploads/2019/05/app-quit-menu.png" alt="Quit menu" width="289" height="184" /><p id="caption-attachment-16039" class="wp-caption-text">Quit menu</p></div>
+<p>Open the built in Terminal and enter the following <strong>npm</strong> command:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">npm install <span class="sy0">--</span>save<span class="sy0">-</span>dev electron</div></td></tr></tbody></table></div>
+
+</pre>
+<p>Electron will begin downloading the <strong>node_modules</strong> and it’s progress will show in the Terminal view:</p>
+<div id="attachment_16040" style="width: 644px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16040" class="wp-image-16040" src="//royale.apache.org/wp-content/uploads/2019/05/downloading-electron-1.png" alt="Downloading locally" width="634" height="132" /><p id="caption-attachment-16040" class="wp-caption-text">Downloading…</p></div>
+<div id="attachment_16041" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16041" class="wp-image-16041" src="//royale.apache.org/wp-content/uploads/2019/05/downloading-electron-01.png" alt="Download Complete" width="600" height="200" /><p id="caption-attachment-16041" class="wp-caption-text">Download Complete</p></div>
+<p>When it’s complete you will see a new folder in your project called <strong>node_modules</strong>:</p>
+<div id="attachment_16042" style="width: 360px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16042" class="wp-image-16042" src="//royale.apache.org/wp-content/uploads/2019/05/node-module-folder.png" alt="Node module folder" width="350" height="199" /><p id="caption-attachment-16042" class="wp-caption-text">Node installed locally</p></div>
+<p>You will also see that <strong>npm install</strong> creates a <strong>package-lock.json</strong> file.</p>
+<p><strong>Package-lock.json</strong> is like a quick save for your project. Using it you or your teammates can restore the dependencies to a specific versioned state. It’s described more <a href="//stackoverflow.com/a/50868741/441016">here</a>, <a href="//stackoverflow.com/a/55606805/441016">here</a> and <a href="//stackoverflow.com/a/55318035/441016">here</a>. Commit this configuration instead of the <strong>node_modules</strong> directory when using version control.</p>
+<p>Once the node modules has been downloaded we may need to manually create the <strong>.vscode</strong> directory and the <strong>launch.json</strong> configuration. Create the <strong>.vscode</strong> directory and <strong>launch.json</strong> file and enter the value below:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"0.2.0"</span><span class="sy0">,</span><br />
+ <span class="st0">"configurations"</span><span class="sy0">:</span> <span class="br0">[</span><br />
+ <span class="br0">{</span><br />
+ <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Debug Main Electron Process"</span><span class="sy0">,</span><br />
+ <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"node"</span><span class="sy0">,</span><br />
+ <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
+ <span class="st0">"cwd"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}"</span><span class="sy0">,</span><br />
+ <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"windows"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron.cmd"</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="st0">"args"</span> <span class="sy0">:</span> <span class="br0">[</span><span class="st0">"."</span><span class="br0">]</span><span class="sy0">,</span><br />
+ <span class="st0">"outputCapture"</span><span class="sy0">:</span> <span class="st0">"std"</span><br />
+ <span class="br0">}</span><br />
+ <span class="br0">]</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>Since the <strong>launch.json</strong> already exists we can <em><strong>add </strong></em>our new configuration settings to it.</p>
+<p>BTW Notice in the launch configuration above that the <strong>type</strong> is <strong>node</strong> and that <strong>runtimeExecutable</strong> options are defined.</p>
+<p>Let’s <em>add</em> our new manual configuration next to our existing extension created configuration. Open <strong>launch.json</strong> config and use the values below:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"0.2.0"</span><span class="sy0">,</span><br />
+ <span class="st0">"configurations"</span><span class="sy0">:</span> <span class="br0">[</span><br />
+ <span class="br0">{</span><br />
+ <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
+ <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Launch Electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"appDir"</span><span class="sy0">:</span> <span class="st0">"${workspaceFolder}"</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="br0">{</span><br />
+ <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Debug Main Electron Process"</span><span class="sy0">,</span><br />
+ <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"node"</span><span class="sy0">,</span><br />
+ <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
+ <span class="st0">"cwd"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}"</span><span class="sy0">,</span><br />
+ <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"windows"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron.cmd"</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="st0">"args"</span> <span class="sy0">:</span> <span class="br0">[</span><span class="st0">"."</span><span class="br0">]</span><span class="sy0">,</span><br />
+ <span class="st0">"outputCapture"</span><span class="sy0">:</span> <span class="st0">"std"</span><br />
+ <span class="br0">}</span><br />
+ <span class="br0">]</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>You’ll see why we have both added later.</p>
+<p>I recommend you read about the Electron Architecture <a href="//electronjs.org/docs/tutorial/application-architecture">here</a> and then continue.</p>
+<p>You can read more here:</p>
+<ul>
+<li>Electron Quick Start – <a href="//electronjs.org/docs/tutorial/quick-start">link</a></li>
+<li>Electron Quick Start project – <a href="//github.com/electron/electron-quick-start">link</a></li>
+<li>Your first Electron project – <a href="//electronjs.org/docs/tutorial/first-app">link</a></li>
+<li>Electron Architecture – <a href="//electronjs.org/docs/tutorial/application-architecture">link</a></li>
+</ul>
+<h3>Create an Apache Royale project</h3>
+<p>Now we are going to create our Apache Royale project.</p>
+<p>Make sure you have the AS3 & MXML extension installed as mentioned above. This requires Java 1.8. An install page is listed <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/Install-the-ActionScript-and-MXML-extension-for-Visual-Studio-Code">here</a>.</p>
+<p>Once that is installed you need to point to the Apache Royale SDK in the project. We will do it manually and you can see how to have the extension do it at the <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/Install-the-ActionScript-and-MXML-extension-for-Visual-Studio-Code">link</a> provided earlier.</p>
+<p>Open the Explorer view and open the <strong>.vscode</strong> directory.</p>
+<p>In that directory create a <strong>settings.json</strong> file:</p>
+<div id="attachment_16047" style="width: 310px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16047" class="wp-image-16047" src="//royale.apache.org/wp-content/uploads/2019/05/settings.png" alt="Settings" width="300" height="222" /><p id="caption-attachment-16047" class="wp-caption-text">Apache Royale SDK settings.json</p></div>
+<p>Enter the following text:</p>
+</div>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"as3mxml.sdk.framework"</span><span class="sy0">:</span> <span class="st0">"/Users/user/Documents/Royale_SDK/apache-royale-0.9.4-bin-js/royale-asjs"</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<div>
+<p>That will not work as is. You need to enter the path to the directory where you downloaded and installed the Apache Royale SDK.</p>
+<p>There is a more in depth guide <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/Choose-an-ActionScript-SDK-for-the-current-workspace-in-Visual-Studio-Code">here</a> that shows how to setup the SDK with the help of the AS3 & Flex extension. You can use the information to confirm the SDK is available to your project.</p>
+<p>Once the SDK is setup you’ll need to add an <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki/asconfig.json">asconfig.json</a> to your project. The <strong>asconfig.json</strong> file is used to add code intelligence to AS3 and MXML files.</p>
+</div>
+<p>Open the Explorer view, select the root project directory, and create a new file with the <strong>New File</strong> button. Name it <strong>asconfig.json</strong>.</p>
+<div id="attachment_16051" style="width: 360px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16051" class="wp-image-16051" src="//royale.apache.org/wp-content/uploads/2019/05/asconfig.png" alt="asconfig" width="350" height="236" /><p id="caption-attachment-16051" class="wp-caption-text">asconfig in project directory</p></div>
+<p>Open the <strong>asconfig.json</strong> file and enter the following:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"compilerOptions"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"source-map"</span><span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span><br />
+ <span class="st0">"html-template"</span><span class="sy0">:</span> <span class="st0">"index.html"</span><span class="sy0">,</span><br />
+ <span class="st0">"theme"</span><span class="sy0">:</span> <span class="st0">"${royalelib}/themes/JewelTheme/src/main/resources/defaults.css"</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="st0">"additionalOptions"</span><span class="sy0">:</span> <span class="st0">"-warn-public-vars=false"</span><span class="sy0">,</span><br />
+ <span class="st0">"files"</span><span class="sy0">:</span><br />
+ <span class="br0">[</span><br />
+ <span class="st0">"src/HelloWorld.mxml"</span><br />
+ <span class="br0">]</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>Notice the page we are pointing to in the <strong>html-template</strong> option. This is the Electron <strong>index.html</strong> page. We will use this as the Royale app <em>template page</em>.</p>
+<p>Note: We can use any page as a template but we need to update the page with special tokens that the Apache Royale compiler looks for.</p>
+<p>Open the <strong>index.html</strong> template and enter the following HTML:</p>
<pre><!DOCTYPE html>
<html>
<head>
@@ -724,12 +724,12 @@ ${head}
<body>
${body}
</body>
-</html></pre>
-<p>Notice the <strong>head</strong> and <strong>body</strong> tokens.</p>
-<p>Now we need to create a new directory for our application.</p>
-<p>In the root of the project create a directory named <strong>src</strong> and create a MXML document in that directory named <strong>HelloWorld.mxml</strong>.</p>
-<div id="attachment_16057" style="width: 346px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16057" class="wp-image-16057" src="//royale.apache.org/wp-content/uploads/2019/05/src-hello-world.png" alt="Hello World" width="336" height="220" /><p id="caption-attachment-16057" class="wp-caption-text">HelloWorld.mxml</p></div>
-<p>In <strong>HelloWorld.mxml</strong> enter the following value:</p>
+</html></pre>
+<p>Notice the <strong>head</strong> and <strong>body</strong> tokens.</p>
+<p>Now we need to create a new directory for our application.</p>
+<p>In the root of the project create a directory named <strong>src</strong> and create a MXML document in that directory named <strong>HelloWorld.mxml</strong>.</p>
+<div id="attachment_16057" style="width: 346px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16057" class="wp-image-16057" src="//royale.apache.org/wp-content/uploads/2019/05/src-hello-world.png" alt="Hello World" width="336" height="220" /><p id="caption-attachment-16057" class="wp-caption-text">HelloWorld.mxml</p></div>
+<p>In <strong>HelloWorld.mxml</strong> enter the following value:</p>
<pre lang="xml" width="100%"><?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="//ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/express"
@@ -742,107 +742,107 @@ ${body}
</js:View>
</js:initialView>
</js:Application>
-</pre>
-<p>To compile our Royale application we need to create a compile task. We can use the AS3 & MXML extension to create a compile task or we can do it manually.</p>
-<p>Let’s create a compile task manually and then maybe later create it with the extension.</p>
-<p>In the <strong>.vscode</strong> directory create a <strong>tasks.json</strong>:</p>
-<div id="attachment_16052" style="width: 410px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16052" class="wp-image-16052" src="//royale.apache.org/wp-content/uploads/2019/05/tasks.png" alt="tasks" width="400" height="134" /><p id="caption-attachment-16052" class="wp-caption-text">Tasks</p></div>
-<p>In <strong>tasks.json</strong> add the following value:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"2.0.0"</span><span class="sy0">,</span><br />
- <span class="st0">"tasks"</span><span class="sy0">:</span> <span class="br0">[</span><br />
- <span class="br0">{</span><br />
- <span class="st0">"label"</span><span class="sy0">:</span> <span class="st0">"Compile"</span><span class="sy0">,</span> <br />
- <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"actionscript"</span><span class="sy0">,</span><br />
- <span class="st0">"debug"</span><span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span><br />
- <span class="st0">"group"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"kind"</span><span class="sy0">:</span> <span class="st0">"build"</span><span class="sy0">,</span><br />
- <span class="st0">"isDefault"</span><span class="sy0">:</span> <span class="kw2">true</span><br />
- <span class="br0">}</span><br />
- <span class="br0">}</span><br />
- <span class="br0">]</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>For documentation about the <strong>tasks.json</strong> format go <a href="//go.microsoft.com/fwlink/?LinkId=733558">here</a>.</p>
-<p>Notice the <strong>label</strong> property. It is named <strong>Compile</strong>. We can name it anything but for now name it <strong>Compile</strong>. We’ll refer to this task by name later as a <strong>prelaunchTask</strong>.</p>
-<p>Before we can launch our Apache Royale app we need to build it. Building it compiles the MXML and ActionScript into HTML and JS.</p>
-<p>We can build it from the <strong>Run Build Task</strong> in the Visual Studio Code menu.</p>
-<p>In the menu go to <strong>Terminal</strong> and choose <strong>Run Build Task</strong>.</p>
-<div id="attachment_16054" style="width: 260px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16054" class="wp-image-16054" src="//royale.apache.org/wp-content/uploads/2019/05/run-build-task.png" alt="Run Build Task" width="250" height="271" /><p id="caption-attachment-16054" class="wp-caption-text">Run Build Task</p></div>
-<p>You can also use Command + Shift + B or CTRL + Shift + B.</p>
-<p>That will open Terminal and show you messages from the Apache Royale compiler. Check these messages for any errors and information about the project.</p>
-<p>When that is complete you’ll see a “compile successful” message:</p>
-<div id="attachment_16055" style="width: 1960px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16055" class="size-full wp-image-16055" src="//royale.apache.org/wp-content/uploads/2019/05/compiled.png" alt="Compile Successful" width="1950" height="704" /><p id="caption-attachment-16055" class="wp-caption-text">Compile Successful</p></div>
-<p>Congratulations! You will also see a new directory in your project named <strong>/bin</strong>:</p>
-<div id="attachment_16058" style="width: 350px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16058" class="wp-image-16058" src="//royale.apache.org/wp-content/uploads/2019/05/bin.png" alt="bin directory" width="340" height="225" /><p id="caption-attachment-16058" class="wp-caption-text">Exported to bin directory</p></div>
-<p>We could open this index page in a browser using the Firefox debugger but for our Electron app we are not done yet.</p>
-<p>If we launched our Electron app now, not the Royale app, it would open the template page because it is still pointing to the index page in the root of our project.</p>
-<div id="attachment_16064" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16064" class="size-full wp-image-16064" src="//royale.apache.org/wp-content/uploads/2019/05/index-template.png" alt="Pointing to the template" width="1824" height="1424" /><p id="caption-attachment-16064" class="wp-caption-text">Pointing to the template</p></div>
-<p>The actual Royale application is in <strong>bin/js-debug/index.html</strong> that is created after we compile <strong>HelloWorld.mxml</strong>. So we need our Electron app to load in the application page and not the template.</p>
-<p>Open <strong>main.js</strong> and find the line that loads in <strong>index.html</strong>:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer"><span class="co1">// load the index.html of the app.</span><br />
-win.<span class="me1">loadFile</span><span class="br0">(</span><span class="st0">'index.html'</span><span class="br0">)</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>Change it to point to our exported Royale application:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer"><span class="co1">// load the Apache Royale index.html</span><br />
-win.<span class="me1">loadFile</span><span class="br0">(</span><span class="st0">'bin/js-debug/index.html'</span><span class="br0">)</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>Note: We can easily load in different pages in Electron using the loadFile() method.</p>
-<p>If you’ve compiled the Royale project successfully and changed the path to load the index.html page in the bin directory then we are ready to start our Electron project.</p>
-<p>Open the <strong>Debug</strong> view and start <strong>Launch Electron</strong>. Since everything always goes well on the first try you should have a running application:</p>
-<div id="attachment_16065" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16065" class="size-full wp-image-16065" src="//royale.apache.org/wp-content/uploads/2019/05/royale-hello-world.png" alt="Royale Hello World" width="1824" height="1424" /><p id="caption-attachment-16065" class="wp-caption-text">Royale Hello World</p></div>
-<p>Note: If we make changes to our application and then run the <strong>Launch Electron</strong> task again we may not see our changes.</p>
-<p>In Flash Builder there was an option to Build Automatically that was enabled by default. So your projects were built automatically when you saved the document. Building the application also provided warnings and error messages in the problems view. We can do something similar with a prelaunch task.</p>
-<p>Let’s add a prelaunch task to build our application before we launch it.</p>
-<p>Remember how we named our compile task earlier? We are are going to tell our Electron launch configuration to run the Royale compile task before starting the application.</p>
-<p>Open <strong>launch.json</strong> and add a prelaunch task property and set it to our <strong>Compile</strong> build task (mentioned in the <strong>tasks.json</strong> file). The <strong>launch.json</strong> should look like the following:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
- <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"0.2.0"</span><span class="sy0">,</span><br />
- <span class="st0">"configurations"</span><span class="sy0">:</span> <span class="br0">[</span><br />
- <span class="br0">{</span><br />
- <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Launch Electron"</span><span class="sy0">,</span><br />
- <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"electron"</span><span class="sy0">,</span><br />
- <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
- <span class="st0">"preLaunchTask"</span><span class="sy0">:</span> <span class="st0">"Compile"</span><span class="sy0">,</span><br />
- <span class="st0">"appDir"</span><span class="sy0">:</span> <span class="st0">"${workspaceFolder}"</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="br0">{</span><br />
- <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Debug Main Electron Process"</span><span class="sy0">,</span><br />
- <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"node"</span><span class="sy0">,</span><br />
- <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
- <span class="st0">"cwd"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}"</span><span class="sy0">,</span><br />
- <span class="st0">"preLaunchTask"</span><span class="sy0">:</span> <span class="st0">"Compile"</span><span class="sy0">,</span><br />
- <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron"</span><span class="sy0">,</span><br />
- <span class="st0">"windows"</span><span class="sy0">:</span> <span class="br0">{</span><br />
- <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron.cmd"</span><br />
- <span class="br0">}</span><span class="sy0">,</span><br />
- <span class="st0">"args"</span> <span class="sy0">:</span> <span class="br0">[</span><span class="st0">"."</span><span class="br0">]</span><span class="sy0">,</span><br />
- <span class="st0">"outputCapture"</span><span class="sy0">:</span> <span class="st0">"std"</span><br />
- <span class="br0">}</span><br />
- <span class="br0">]</span><br />
-<span class="br0">}</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>Make sure the name is the same. It is case sensitive. We can, of course, add more launch configurations with or without these options at any time.</p>
-<p>FYI You can learn about the possible launch attributes and their values by hovering your mouse over them or by going <a href="//go.microsoft.com/fwlink/?linkid=830387">here</a>.</p>
-<p>Now launch the application again using either of the two launch configurations.</p>
-<p>You’ll see that the Royale application is built right before the Electron application is launched. If there are any errors in your Royale app the Electron app will not launch.</p>
-<h3>Communicating with the Main Process</h3>
-<p>Electron apps have two main processes. The <strong>Main</strong> process and the <strong>Renderer</strong> process. The Royale application runs in the <strong>Renderer</strong> process and the Electron application runs in the <strong>Main</strong> process.</p>
-<p>Although they are separate you can communicate between them using a variety of methods. Read more about this <a href="//electronjs.org/docs/tutorial/application-architecture">here</a> and then continue.</p>
-<p>For this guide we’ll send messages.</p>
-<p>Open your Hello World mxml application and add in a script block:</p>
+</pre>
+<p>To compile our Royale application we need to create a compile task. We can use the AS3 & MXML extension to create a compile task or we can do it manually.</p>
+<p>Let’s create a compile task manually and then maybe later create it with the extension.</p>
+<p>In the <strong>.vscode</strong> directory create a <strong>tasks.json</strong>:</p>
+<div id="attachment_16052" style="width: 410px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16052" class="wp-image-16052" src="//royale.apache.org/wp-content/uploads/2019/05/tasks.png" alt="tasks" width="400" height="134" /><p id="caption-attachment-16052" class="wp-caption-text">Tasks</p></div>
+<p>In <strong>tasks.json</strong> add the following value:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"2.0.0"</span><span class="sy0">,</span><br />
+ <span class="st0">"tasks"</span><span class="sy0">:</span> <span class="br0">[</span><br />
+ <span class="br0">{</span><br />
+ <span class="st0">"label"</span><span class="sy0">:</span> <span class="st0">"Compile"</span><span class="sy0">,</span> <br />
+ <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"actionscript"</span><span class="sy0">,</span><br />
+ <span class="st0">"debug"</span><span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span><br />
+ <span class="st0">"group"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"kind"</span><span class="sy0">:</span> <span class="st0">"build"</span><span class="sy0">,</span><br />
+ <span class="st0">"isDefault"</span><span class="sy0">:</span> <span class="kw2">true</span><br />
+ <span class="br0">}</span><br />
+ <span class="br0">}</span><br />
+ <span class="br0">]</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>For documentation about the <strong>tasks.json</strong> format go <a href="//go.microsoft.com/fwlink/?LinkId=733558">here</a>.</p>
+<p>Notice the <strong>label</strong> property. It is named <strong>Compile</strong>. We can name it anything but for now name it <strong>Compile</strong>. We’ll refer to this task by name later as a <strong>prelaunchTask</strong>.</p>
+<p>Before we can launch our Apache Royale app we need to build it. Building it compiles the MXML and ActionScript into HTML and JS.</p>
+<p>We can build it from the <strong>Run Build Task</strong> in the Visual Studio Code menu.</p>
+<p>In the menu go to <strong>Terminal</strong> and choose <strong>Run Build Task</strong>.</p>
+<div id="attachment_16054" style="width: 260px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16054" class="wp-image-16054" src="//royale.apache.org/wp-content/uploads/2019/05/run-build-task.png" alt="Run Build Task" width="250" height="271" /><p id="caption-attachment-16054" class="wp-caption-text">Run Build Task</p></div>
+<p>You can also use Command + Shift + B or CTRL + Shift + B.</p>
+<p>That will open Terminal and show you messages from the Apache Royale compiler. Check these messages for any errors and information about the project.</p>
+<p>When that is complete you’ll see a “compile successful” message:</p>
+<div id="attachment_16055" style="width: 1960px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16055" class="size-full wp-image-16055" src="//royale.apache.org/wp-content/uploads/2019/05/compiled.png" alt="Compile Successful" width="1950" height="704" /><p id="caption-attachment-16055" class="wp-caption-text">Compile Successful</p></div>
+<p>Congratulations! You will also see a new directory in your project named <strong>/bin</strong>:</p>
+<div id="attachment_16058" style="width: 350px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16058" class="wp-image-16058" src="//royale.apache.org/wp-content/uploads/2019/05/bin.png" alt="bin directory" width="340" height="225" /><p id="caption-attachment-16058" class="wp-caption-text">Exported to bin directory</p></div>
+<p>We could open this index page in a browser using the Firefox debugger but for our Electron app we are not done yet.</p>
+<p>If we launched our Electron app now, not the Royale app, it would open the template page because it is still pointing to the index page in the root of our project.</p>
+<div id="attachment_16064" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16064" class="size-full wp-image-16064" src="//royale.apache.org/wp-content/uploads/2019/05/index-template.png" alt="Pointing to the template" width="1824" height="1424" /><p id="caption-attachment-16064" class="wp-caption-text">Pointing to the template</p></div>
+<p>The actual Royale application is in <strong>bin/js-debug/index.html</strong> that is created after we compile <strong>HelloWorld.mxml</strong>. So we need our Electron app to load in the application page and not the template.</p>
+<p>Open <strong>main.js</strong> and find the line that loads in <strong>index.html</strong>:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer"><span class="co1">// load the index.html of the app.</span><br />
+win.<span class="me1">loadFile</span><span class="br0">(</span><span class="st0">'index.html'</span><span class="br0">)</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>Change it to point to our exported Royale application:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer"><span class="co1">// load the Apache Royale index.html</span><br />
+win.<span class="me1">loadFile</span><span class="br0">(</span><span class="st0">'bin/js-debug/index.html'</span><span class="br0">)</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>Note: We can easily load in different pages in Electron using the loadFile() method.</p>
+<p>If you’ve compiled the Royale project successfully and changed the path to load the index.html page in the bin directory then we are ready to start our Electron project.</p>
+<p>Open the <strong>Debug</strong> view and start <strong>Launch Electron</strong>. Since everything always goes well on the first try you should have a running application:</p>
+<div id="attachment_16065" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16065" class="size-full wp-image-16065" src="//royale.apache.org/wp-content/uploads/2019/05/royale-hello-world.png" alt="Royale Hello World" width="1824" height="1424" /><p id="caption-attachment-16065" class="wp-caption-text">Royale Hello World</p></div>
+<p>Note: If we make changes to our application and then run the <strong>Launch Electron</strong> task again we may not see our changes.</p>
+<p>In Flash Builder there was an option to Build Automatically that was enabled by default. So your projects were built automatically when you saved the document. Building the application also provided warnings and error messages in the problems view. We can do something similar with a prelaunch task.</p>
+<p>Let’s add a prelaunch task to build our application before we launch it.</p>
+<p>Remember how we named our compile task earlier? We are are going to tell our Electron launch configuration to run the Royale compile task before starting the application.</p>
+<p>Open <strong>launch.json</strong> and add a prelaunch task property and set it to our <strong>Compile</strong> build task (mentioned in the <strong>tasks.json</strong> file). The <strong>launch.json</strong> should look like the following:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br /></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br />
+ <span class="st0">"version"</span><span class="sy0">:</span> <span class="st0">"0.2.0"</span><span class="sy0">,</span><br />
+ <span class="st0">"configurations"</span><span class="sy0">:</span> <span class="br0">[</span><br />
+ <span class="br0">{</span><br />
+ <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Launch Electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
+ <span class="st0">"preLaunchTask"</span><span class="sy0">:</span> <span class="st0">"Compile"</span><span class="sy0">,</span><br />
+ <span class="st0">"appDir"</span><span class="sy0">:</span> <span class="st0">"${workspaceFolder}"</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="br0">{</span><br />
+ <span class="st0">"name"</span><span class="sy0">:</span> <span class="st0">"Debug Main Electron Process"</span><span class="sy0">,</span><br />
+ <span class="st0">"type"</span><span class="sy0">:</span> <span class="st0">"node"</span><span class="sy0">,</span><br />
+ <span class="st0">"request"</span><span class="sy0">:</span> <span class="st0">"launch"</span><span class="sy0">,</span><br />
+ <span class="st0">"cwd"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}"</span><span class="sy0">,</span><br />
+ <span class="st0">"preLaunchTask"</span><span class="sy0">:</span> <span class="st0">"Compile"</span><span class="sy0">,</span><br />
+ <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron"</span><span class="sy0">,</span><br />
+ <span class="st0">"windows"</span><span class="sy0">:</span> <span class="br0">{</span><br />
+ <span class="st0">"runtimeExecutable"</span><span class="sy0">:</span> <span class="st0">"${workspaceRoot}/node_modules/.bin/electron.cmd"</span><br />
+ <span class="br0">}</span><span class="sy0">,</span><br />
+ <span class="st0">"args"</span> <span class="sy0">:</span> <span class="br0">[</span><span class="st0">"."</span><span class="br0">]</span><span class="sy0">,</span><br />
+ <span class="st0">"outputCapture"</span><span class="sy0">:</span> <span class="st0">"std"</span><br />
+ <span class="br0">}</span><br />
+ <span class="br0">]</span><br />
+<span class="br0">}</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>Make sure the name is the same. It is case sensitive. We can, of course, add more launch configurations with or without these options at any time.</p>
+<p>FYI You can learn about the possible launch attributes and their values by hovering your mouse over them or by going <a href="//go.microsoft.com/fwlink/?linkid=830387">here</a>.</p>
+<p>Now launch the application again using either of the two launch configurations.</p>
+<p>You’ll see that the Royale application is built right before the Electron application is launched. If there are any errors in your Royale app the Electron app will not launch.</p>
+<h3>Communicating with the Main Process</h3>
+<p>Electron apps have two main processes. The <strong>Main</strong> process and the <strong>Renderer</strong> process. The Royale application runs in the <strong>Renderer</strong> process and the Electron application runs in the <strong>Main</strong> process.</p>
+<p>Although they are separate you can communicate between them using a variety of methods. Read more about this <a href="//electronjs.org/docs/tutorial/application-architecture">here</a> and then continue.</p>
+<p>For this guide we’ll send messages.</p>
+<p>Open your Hello World mxml application and add in a script block:</p>
<pre><fx:Script>
<![CDATA[
@@ -869,71 +869,68 @@ win.<span class="me1">loadFile</span><span class="br0">(</span><span class="
]]>
</fx:Script>
-</pre>
-<p>In the button add a click handler:</p>
+</pre>
+<p>In the button add a click handler:</p>
<pre><j:Button id="helloButton" text="Hello" x="20" y="20" click="clickHandler(event)"/>
-</pre>
-<p>When we are running in an Electron app the <strong>Renderer</strong> process, or the browser window, makes additional objects available. The main ones are <strong>electron</strong> and <strong>ipcRenderer</strong>. We will use these for communication.</p>
-<p>Sending a message is somewhat like dispatching an event. We can send synchronous and asynchronous messages.</p>
-<p>The following example code will dispatch a “sayHello” message with a “hello” value:</p>
-<pre>
-
-<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer"> <span class="co1">// example code</span><br />
- <span class="kw1">const</span> electron <span class="sy0">=</span> window<span class="br0">[</span><span class="st0">"require"</span><span class="br0">]</span><span class="br0">(</span><span class="st0">"electron"</span><span class="br0">)</span><span class="sy0">;</span><br />
- <span class="kw1">const</span> ipcRenderer <span class="sy0">=</span> electron.<span class="me1">ipcRenderer</span><span class="sy0">;</span><br />
-<br />
- ipcRenderer.<span class="me1">send</span><span class="br0">(</span><span class="st0">"sayHello"</span><span class="sy0">,</span> <span class="st0">"hello"</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
-
-</pre>
-<p>We are sending a string but we could send an object. Read more <a href="//electronjs.org/docs/api/ipc-main">here</a> before continuing.</p>
-<p>In our <strong>main.js</strong> we will add a listener to handle this event. At the end of the <strong>main.js</strong> document add the following:</p>
+</pre>
+<p>When we are running in an Electron app the <strong>Renderer</strong> process, or the browser window, makes additional objects available. The main ones are <strong>electron</strong> and <strong>ipcRenderer</strong>. We will use these for communication.</p>
+<p>Sending a message is somewhat like dispatching an event. We can send synchronous and asynchronous messages.</p>
+<p>The following example code will dispatch a “sayHello” message with a “hello” value:</p>
+<pre>
+
+<div class="codecolorer-container javascript solarized-dark royale-style" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer"> <span class="co1">// example code</span><br />
+ <span class="kw1">const</span> electron <span class="sy0">=</span> window<span class="br0">[</span><span class="st0">"require"</span><span class="br0">]</span><span class="br0">(</span><span class="st0">"electron"</span><span class="br0">)</span><span class="sy0">;</span><br />
+ <span class="kw1">const</span> ipcRenderer <span class="sy0">=</span> electron.<span class="me1">ipcRenderer</span><span class="sy0">;</span><br />
+<br />
+ ipcRenderer.<span class="me1">send</span><span class="br0">(</span><span class="st0">"sayHello"</span><span class="sy0">,</span> <span class="st0">"hello"</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
+
+</pre>
+<p>We are sending a string but we could send an object. Read more <a href="//electronjs.org/docs/api/ipc-main">here</a> before continuing.</p>
+<p>In our <strong>main.js</strong> we will add a listener to handle this event. At the end of the <strong>main.js</strong> document add the following:</p>
<pre>const { ipcMain } = require('electron')
ipcMain.on("mainMessageHandler", (event, arg) => {
console.log(arg);
var time = new Date().toLocaleTimeString();
win.webContents.send("rendererMessageHander", "hello there. it's " + time);
})
-</pre>
-<p>Notice the <strong>rendererMessageHander</strong>. We have added a listener for this event in <strong>HelloWorld.mxml</strong>.</p>
-<p>Launch the application and click the Hello World button.</p>
-<div id="attachment_16066" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16066" class="size-full wp-image-16066" src="//royale.apache.org/wp-content/uploads/2019/05/hello-world-electron.png" alt="Hello World message" width="1824" height="1424" /><p id="caption-attachment-16066" class="wp-caption-text">Hello World message</p></div>
-<h3></h3>
-<h3>Debugging</h3>
-<p>To debug the <strong>Renderer</strong> process, <strong>HelloWorld.mxml</strong>, add a breakpoint in the click handler. Open the debug view and click on <strong>Launch Electron</strong>. When you click on the Hello button the debugger opens at that point.</p>
-<div id="attachment_16068" style="width: 2282px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16068" class="size-full wp-image-16068" src="//royale.apache.org/wp-content/uploads/2019/05/debug-hello-world.png" alt="Debug Hello World" width="2272" height="1760" /><p id="caption-attachment-16068" class="wp-caption-text">Debug Hello World</p></div>
-<p>To debug the Main process, <strong>main.js</strong>, add a breakpoint in the <strong>mainMessageHandler</strong>. Open the debug view and click on <strong>Debug main Electron process</strong>.</p>
-<div id="attachment_16069" style="width: 2282px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16069" class="size-full wp-image-16069" src="//royale.apache.org/wp-content/uploads/2019/05/debug-main-process.png" alt="Debug Main" width="2272" height="1760" /><p id="caption-attachment-16069" class="wp-caption-text">Debug Main</p></div>
-<p>We use the first one to debug the <strong>Renderer</strong> process and the second to debug the <strong>Main</strong> process. You can also use the integrated Chrome dev tools mentioned earlier.</p>
-<div id="attachment_16076" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16076" class="size-full wp-image-16076" src="//royale.apache.org/wp-content/uploads/2019/05/chrome-debugger-1.png" alt="Chrome devtools" width="1824" height="1424" /><p id="caption-attachment-16076" class="wp-caption-text">Chrome dev tools</p></div>
-<p>Open <strong>launch.json</strong>. In the first launch configuration notice the <strong>type</strong> says <strong>electron</strong>. In the second launch configuration notice the <strong>type</strong> is <strong>node</strong>.</p>
-<p>Note: This author has not found a way to hit both breakpoints for the Royale application and the Electron app in one session in Visual Studio Code. However, using a combination of the integrated Chrome dev tools (shown above) to set breakpoints you can use the second configuration, <strong>Debug main Electron process</strong>, to break on both the Royale and Electron processes but the break occurs in the Chrome Dev tools. You could also debug the Royale instance only using the Firefox [...]
-<h3>Summary</h3>
-<p>In this guide you’ve created a desktop application using Royale and Electron. You’ve sent a message to the Main process and sent that message back to Renderer process. You’ve set a break point in the debugger.</p>
-<p>The example project is attached here <a href="//royale.apache.org/wp-content/uploads/2019/05/ApacheRoyaleElectron_1.0.0.zip">Apache Royale Electron zip</a></p>
-<h3>Next Steps</h3>
-<ul>
-<li>Read through the Wiki at AS3 & MXML <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki">here</a></li>
-<li>Read up on Electron <a href="//electronjs.org/docs/tutorial">here</a> and <a href="//electronjs.org/docs/">here</a></li>
-<li>Sample Electron apps <a href="//github.com/hokein/electron-sample-apps">here</a> and here</li>
-<li><a href="//electronjs.org/docs/api/ipc-main">ipcMain</a> and <a href="//electronjs.org/docs/api/ipc-renderer">ipcRenderer</a></li>
-<li>Apache Royale Getting Started <a href="//apache.github.io/royale-docs/Get%20Started.html">here</a></li>
-<li>Install the <a href="//marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug">Firefox Debugger</a> and debug Royale in the browser</li>
-<li>Electron Hello World Walkthrough on YouTube <a href="//www.youtube.com/playlist?list=PLYxzS__5yYQmocPoLUiEAfD1cJNjhdQar">here</a></li>
-<li>Apache Royale Tour of Jewel <a href="//royale.apache.org/tourdejewel">here</a></li>
-</ul>
-<h3>Contributions</h3>
-<p>This was made possible from the work of numerous individuals and projects. Support Apache Royale.</p>
-</div> </div>
- </div>
- </article>
-
+</pre>
+<p>Notice the <strong>rendererMessageHander</strong>. We have added a listener for this event in <strong>HelloWorld.mxml</strong>.</p>
+<p>Launch the application and click the Hello World button.</p>
+<div id="attachment_16066" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16066" class="size-full wp-image-16066" src="//royale.apache.org/wp-content/uploads/2019/05/hello-world-electron.png" alt="Hello World message" width="1824" height="1424" /><p id="caption-attachment-16066" class="wp-caption-text">Hello World message</p></div>
+<h3></h3>
+<h3>Debugging</h3>
+<p>To debug the <strong>Renderer</strong> process, <strong>HelloWorld.mxml</strong>, add a breakpoint in the click handler. Open the debug view and click on <strong>Launch Electron</strong>. When you click on the Hello button the debugger opens at that point.</p>
+<div id="attachment_16068" style="width: 2282px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16068" class="size-full wp-image-16068" src="//royale.apache.org/wp-content/uploads/2019/05/debug-hello-world.png" alt="Debug Hello World" width="2272" height="1760" /><p id="caption-attachment-16068" class="wp-caption-text">Debug Hello World</p></div>
+<p>To debug the Main process, <strong>main.js</strong>, add a breakpoint in the <strong>mainMessageHandler</strong>. Open the debug view and click on <strong>Debug main Electron process</strong>.</p>
+<div id="attachment_16069" style="width: 2282px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16069" class="size-full wp-image-16069" src="//royale.apache.org/wp-content/uploads/2019/05/debug-main-process.png" alt="Debug Main" width="2272" height="1760" /><p id="caption-attachment-16069" class="wp-caption-text">Debug Main</p></div>
+<p>We use the first one to debug the <strong>Renderer</strong> process and the second to debug the <strong>Main</strong> process. You can also use the integrated Chrome dev tools mentioned earlier.</p>
+<div id="attachment_16076" style="width: 1834px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-16076" class="size-full wp-image-16076" src="//royale.apache.org/wp-content/uploads/2019/05/chrome-debugger-1.png" alt="Chrome devtools" width="1824" height="1424" /><p id="caption-attachment-16076" class="wp-caption-text">Chrome dev tools</p></div>
+<p>Open <strong>launch.json</strong>. In the first launch configuration notice the <strong>type</strong> says <strong>electron</strong>. In the second launch configuration notice the <strong>type</strong> is <strong>node</strong>.</p>
+<p>Note: This author has not found a way to hit both breakpoints for the Royale application and the Electron app in one session in Visual Studio Code. However, using a combination of the integrated Chrome dev tools (shown above) to set breakpoints you can use the second configuration, <strong>Debug main Electron process</strong>, to break on both the Royale and Electron processes but the break occurs in the Chrome Dev tools. You could also debug the Royale instance only using the Firefox [...]
+<h3>Summary</h3>
+<p>In this guide you’ve created a desktop application using Royale and Electron. You’ve sent a message to the Main process and sent that message back to Renderer process. You’ve set a break point in the debugger.</p>
+<p>The example project is attached here <a href="//royale.apache.org/wp-content/uploads/2019/05/ApacheRoyaleElectron_1.0.0.zip">Apache Royale Electron zip</a></p>
+<h3>Next Steps</h3>
+<ul>
+<li>Read through the Wiki at AS3 & MXML <a href="//github.com/BowlerHatLLC/vscode-as3mxml/wiki">here</a></li>
+<li>Read up on Electron <a href="//electronjs.org/docs/tutorial">here</a> and <a href="//electronjs.org/docs/">here</a></li>
+<li>Sample Electron apps <a href="//github.com/hokein/electron-sample-apps">here</a> and here</li>
+<li><a href="//electronjs.org/docs/api/ipc-main">ipcMain</a> and <a href="//electronjs.org/docs/api/ipc-renderer">ipcRenderer</a></li>
+<li>Apache Royale Getting Started <a href="//apache.github.io/royale-docs/Get%20Started.html">here</a></li>
+<li>Install the <a href="//marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug">Firefox Debugger</a> and debug Royale in the browser</li>
+<li>Electron Hello World Walkthrough on YouTube <a href="//www.youtube.com/playlist?list=PLYxzS__5yYQmocPoLUiEAfD1cJNjhdQar">here</a></li>
+<li>Apache Royale Tour of Jewel <a href="//royale.apache.org/tourdejewel">here</a></li>
+</ul>
+<h3>Contributions</h3>
+<p>This was made possible from the work of numerous individuals and projects. Support Apache Royale.</p>
+</div> </div>
+ </div>
+ </article>
+
<div class="grve-container">
-
-
-
-
+<div id="disqus_thread"></div>
</div>
</div>
</div>
@@ -982,94 +979,94 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
</li>
</ul>
- </div><div id="archives-2" class="grve-widget widget widget_archive"><div class="grve-widget-title">Archives</div> <label class="screen-reader-text" for="archives-dropdown-2">Archives</label>
- <select id="archives-dropdown-2" name="archive-dropdown">
-
- <option value="">Select Month</option>
- <option value='//royale.apache.org/2019/05/'> May 2019 </option>
- <option value='//royale.apache.org/2018/12/'> December 2018 </option>
- <option value='//royale.apache.org/2018/10/'> October 2018 </option>
- <option value='//royale.apache.org/2018/09/'> September 2018 </option>
- <option value='//royale.apache.org/2018/08/'> August 2018 </option>
- <option value='//royale.apache.org/2018/07/'> July 2018 </option>
- <option value='//royale.apache.org/2018/06/'> June 2018 </option>
- <option value='//royale.apache.org/2018/05/'> May 2018 </option>
- <option value='//royale.apache.org/2018/04/'> April 2018 </option>
- <option value='//royale.apache.org/2018/03/'> March 2018 </option>
- <option value='//royale.apache.org/2018/02/'> February 2018 </option>
- <option value='//royale.apache.org/2018/01/'> January 2018 </option>
- <option value='//royale.apache.org/2017/10/'> October 2017 </option>
-
- </select>
-
-<script type='text/javascript'>
-/* <![CDATA[ */
-(function() {
- var dropdown = document.getElementById( "archives-dropdown-2" );
- function onSelectChange() {
- if ( dropdown.options[ dropdown.selectedIndex ].value !== '' ) {
- document.location.href = this.options[ this.selectedIndex ].value;
- }
- }
- dropdown.onchange = onSelectChange;
-})();
-/* ]]> */
-</script>
-
- </div><div id="categories-2" class="grve-widget widget widget_categories"><div class="grve-widget-title">Categories</div> <ul>
- <li class="cat-item cat-item-53"><a href="//royale.apache.org/category/announcements/">Announcements</a>
-</li>
- <li class="cat-item cat-item-91"><a href="//royale.apache.org/category/asnodec/">asnodec</a>
-</li>
- <li class="cat-item cat-item-65"><a href="//royale.apache.org/category/basic-ui-set/">Basic UI Set</a>
-</li>
- <li class="cat-item cat-item-92"><a href="//royale.apache.org/category/desktop/">Desktop</a>
-</li>
- <li class="cat-item cat-item-1"><a href="//royale.apache.org/category/general/">General</a>
-</li>
- <li class="cat-item cat-item-57"><a href="//royale.apache.org/category/jewel-ui-set/">Jewel UI Set</a>
-</li>
- <li class="cat-item cat-item-89"><a href="//royale.apache.org/category/node-js/">Node.js</a>
-</li>
- <li class="cat-item cat-item-52"><a href="//royale.apache.org/category/releases/">Releases</a>
-</li>
- <li class="cat-item cat-item-48"><a href="//royale.apache.org/category/royale-examples/">Royale Examples</a>
-</li>
- </ul>
- </div><div id="tag_cloud-2" class="grve-widget widget widget_tag_cloud"><div class="grve-widget-title">Tags</div><div class="tagcloud"><a href="//royale.apache.org/tag/applicationdatabinding/" class="tag-cloud-link tag-link-76 tag-link-position-1" style="font-size: 8pt;" aria-label="ApplicationDataBinding (1 item)">ApplicationDataBinding</a>
-<a href="//royale.apache.org/tag/binding/" class="tag-cloud-link tag-link-67 tag-link-position-2" style="font-size: 8pt;" aria-label="Binding (1 item)">Binding</a>
-<a href="//royale.apache.org/tag/constantbinding/" class="tag-cloud-link tag-link-77 tag-link-position-3" style="font-size: 8pt;" aria-label="ConstantBinding (1 item)">ConstantBinding</a>
-<a href="//royale.apache.org/tag/fonticon/" class="tag-cloud-link tag-link-78 tag-link-position-4" style="font-size: 8pt;" aria-label="FontIcon (1 item)">FontIcon</a>
-<a href="//royale.apache.org/tag/horizontalcenteredlayout/" class="tag-cloud-link tag-link-75 tag-link-position-5" style="font-size: 8pt;" aria-label="HorizontalCenteredLayout (1 item)">HorizontalCenteredLayout</a>
-<a href="//royale.apache.org/tag/itemrenderer/" class="tag-cloud-link tag-link-74 tag-link-position-6" style="font-size: 8pt;" aria-label="ItemRenderer (1 item)">ItemRenderer</a>
-<a href="//royale.apache.org/tag/jalert/" class="tag-cloud-link tag-link-60 tag-link-position-7" style="font-size: 13.675675675676pt;" aria-label="j:Alert (3 items)">j:Alert</a>
-<a href="//royale.apache.org/tag/jalertview/" class="tag-cloud-link tag-link-79 tag-link-position-8" style="font-size: 8pt;" aria-label="j:AlertView (1 item)">j:AlertView</a>
-<a href="//royale.apache.org/tag/japplication/" class="tag-cloud-link tag-link-58 tag-link-position-9" style="font-size: 22pt;" aria-label="j:Application (10 items)">j:Application</a>
-<a href="//royale.apache.org/tag/jbutton/" class="tag-cloud-link tag-link-59 tag-link-position-10" style="font-size: 21.243243243243pt;" aria-label="j:Button (9 items)">j:Button</a>
-<a href="//royale.apache.org/tag/jcard/" class="tag-cloud-link tag-link-73 tag-link-position-11" style="font-size: 11.405405405405pt;" aria-label="j:Card (2 items)">j:Card</a>
-<a href="//royale.apache.org/tag/j-checkbox/" class="tag-cloud-link tag-link-82 tag-link-position-12" style="font-size: 8pt;" aria-label="j: CheckBox (1 item)">j: CheckBox</a>
-<a href="//royale.apache.org/tag/jcheckbox/" class="tag-cloud-link tag-link-70 tag-link-position-13" style="font-size: 8pt;" aria-label="j:CheckBox (1 item)">j:CheckBox</a>
-<a href="//royale.apache.org/tag/jcontrolbar/" class="tag-cloud-link tag-link-80 tag-link-position-14" style="font-size: 8pt;" aria-label="j:ControlBar (1 item)">j:ControlBar</a>
-<a href="//royale.apache.org/tag/jdisabled/" class="tag-cloud-link tag-link-71 tag-link-position-15" style="font-size: 8pt;" aria-label="j:Disabled (1 item)">j:Disabled</a>
-<a href="//royale.apache.org/tag/j-horizontalcenteredlayout/" class="tag-cloud-link tag-link-81 tag-link-position-16" style="font-size: 11.405405405405pt;" aria-label="j: HorizontalCenteredLayout (2 items)">j: HorizontalCenteredLayout</a>
-<a href="//royale.apache.org/tag/jhorizontallayout/" class="tag-cloud-link tag-link-84 tag-link-position-17" style="font-size: 11.405405405405pt;" aria-label="j:HorizontalLayout (2 items)">j:HorizontalLayout</a>
-<a href="//royale.apache.org/tag/jlabel/" class="tag-cloud-link tag-link-88 tag-link-position-18" style="font-size: 8pt;" aria-label="j:Label (1 item)">j:Label</a>
-<a href="//royale.apache.org/tag/jlist/" class="tag-cloud-link tag-link-62 tag-link-position-19" style="font-size: 11.405405405405pt;" aria-label="j:List (2 items)">j:List</a>
-<a href="//royale.apache.org/tag/jradiobutton/" class="tag-cloud-link tag-link-63 tag-link-position-20" style="font-size: 8pt;" aria-label="j:RadioButton (1 item)">j:RadioButton</a>
-<a href="//royale.apache.org/tag/jscrollingviewport/" class="tag-cloud-link tag-link-87 tag-link-position-21" style="font-size: 8pt;" aria-label="j:ScrollingViewport (1 item)">j:ScrollingViewport</a>
-<a href="//royale.apache.org/tag/jslider/" class="tag-cloud-link tag-link-61 tag-link-position-22" style="font-size: 11.405405405405pt;" aria-label="j:Slider (2 items)">j:Slider</a>
-<a href="//royale.apache.org/tag/jstate/" class="tag-cloud-link tag-link-72 tag-link-position-23" style="font-size: 8pt;" aria-label="j:State (1 item)">j:State</a>
-<a href="//royale.apache.org/tag/jtextinput/" class="tag-cloud-link tag-link-66 tag-link-position-24" style="font-size: 8pt;" aria-label="j:TextInput (1 item)">j:TextInput</a>
-<a href="//royale.apache.org/tag/jtextprompt/" class="tag-cloud-link tag-link-69 tag-link-position-25" style="font-size: 8pt;" aria-label="j:TextPrompt (1 item)">j:TextPrompt</a>
-<a href="//royale.apache.org/tag/jverticallayout/" class="tag-cloud-link tag-link-83 tag-link-position-26" style="font-size: 8pt;" aria-label="j:VerticalLayout (1 item)">j:VerticalLayout</a>
-<a href="//royale.apache.org/tag/jview/" class="tag-cloud-link tag-link-68 tag-link-position-27" style="font-size: 8pt;" aria-label="j:View (1 item)">j:View</a>
-<a href="//royale.apache.org/tag/jsapplication/" class="tag-cloud-link tag-link-55 tag-link-position-28" style="font-size: 8pt;" aria-label="js:Application (1 item)">js:Application</a>
-<a href="//royale.apache.org/tag/jshttpservice/" class="tag-cloud-link tag-link-85 tag-link-position-29" style="font-size: 8pt;" aria-label="js:HTTPService (1 item)">js:HTTPService</a>
-<a href="//royale.apache.org/tag/jslabel/" class="tag-cloud-link tag-link-50 tag-link-position-30" style="font-size: 8pt;" aria-label="js:Label (1 item)">js:Label</a>
-<a href="//royale.apache.org/tag/jsview/" class="tag-cloud-link tag-link-56 tag-link-position-31" style="font-size: 20.297297297297pt;" aria-label="js:View (8 items)">js:View</a>
-<a href="//royale.apache.org/tag/json/" class="tag-cloud-link tag-link-86 tag-link-position-32" style="font-size: 11.405405405405pt;" aria-label="JSON (2 items)">JSON</a>
-<a href="//royale.apache.org/tag/node-js/" class="tag-cloud-link tag-link-90 tag-link-position-33" style="font-size: 8pt;" aria-label="Node.js (1 item)">Node.js</a>
-<a href="//royale.apache.org/tag/releases/" class="tag-cloud-link tag-link-54 tag-link-position-34" style="font-size: 15.567567567568pt;" aria-label="releases (4 items)">releases</a></div>
+ </div><div id="archives-2" class="grve-widget widget widget_archive"><div class="grve-widget-title">Archives</div> <label class="screen-reader-text" for="archives-dropdown-2">Archives</label>
+ <select id="archives-dropdown-2" name="archive-dropdown">
+
+ <option value="">Select Month</option>
+ <option value='//royale.apache.org/2019/05/'> May 2019 </option>
+ <option value='//royale.apache.org/2018/12/'> December 2018 </option>
+ <option value='//royale.apache.org/2018/10/'> October 2018 </option>
+ <option value='//royale.apache.org/2018/09/'> September 2018 </option>
+ <option value='//royale.apache.org/2018/08/'> August 2018 </option>
+ <option value='//royale.apache.org/2018/07/'> July 2018 </option>
+ <option value='//royale.apache.org/2018/06/'> June 2018 </option>
+ <option value='//royale.apache.org/2018/05/'> May 2018 </option>
+ <option value='//royale.apache.org/2018/04/'> April 2018 </option>
+ <option value='//royale.apache.org/2018/03/'> March 2018 </option>
+ <option value='//royale.apache.org/2018/02/'> February 2018 </option>
+ <option value='//royale.apache.org/2018/01/'> January 2018 </option>
+ <option value='//royale.apache.org/2017/10/'> October 2017 </option>
+
+ </select>
+
+<script type='text/javascript'>
+/* <![CDATA[ */
+(function() {
+ var dropdown = document.getElementById( "archives-dropdown-2" );
+ function onSelectChange() {
+ if ( dropdown.options[ dropdown.selectedIndex ].value !== '' ) {
+ document.location.href = this.options[ this.selectedIndex ].value;
+ }
+ }
+ dropdown.onchange = onSelectChange;
+})();
+/* ]]> */
+</script>
+
+ </div><div id="categories-2" class="grve-widget widget widget_categories"><div class="grve-widget-title">Categories</div> <ul>
+ <li class="cat-item cat-item-53"><a href="//royale.apache.org/category/announcements/">Announcements</a>
+</li>
+ <li class="cat-item cat-item-91"><a href="//royale.apache.org/category/asnodec/">asnodec</a>
+</li>
+ <li class="cat-item cat-item-65"><a href="//royale.apache.org/category/basic-ui-set/">Basic UI Set</a>
+</li>
+ <li class="cat-item cat-item-92"><a href="//royale.apache.org/category/desktop/">Desktop</a>
+</li>
+ <li class="cat-item cat-item-1"><a href="//royale.apache.org/category/general/">General</a>
+</li>
+ <li class="cat-item cat-item-57"><a href="//royale.apache.org/category/jewel-ui-set/">Jewel UI Set</a>
+</li>
+ <li class="cat-item cat-item-89"><a href="//royale.apache.org/category/node-js/">Node.js</a>
+</li>
+ <li class="cat-item cat-item-52"><a href="//royale.apache.org/category/releases/">Releases</a>
+</li>
+ <li class="cat-item cat-item-48"><a href="//royale.apache.org/category/royale-examples/">Royale Examples</a>
+</li>
+ </ul>
+ </div><div id="tag_cloud-2" class="grve-widget widget widget_tag_cloud"><div class="grve-widget-title">Tags</div><div class="tagcloud"><a href="//royale.apache.org/tag/applicationdatabinding/" class="tag-cloud-link tag-link-76 tag-link-position-1" style="font-size: 8pt;" aria-label="ApplicationDataBinding (1 item)">ApplicationDataBinding</a>
+<a href="//royale.apache.org/tag/binding/" class="tag-cloud-link tag-link-67 tag-link-position-2" style="font-size: 8pt;" aria-label="Binding (1 item)">Binding</a>
+<a href="//royale.apache.org/tag/constantbinding/" class="tag-cloud-link tag-link-77 tag-link-position-3" style="font-size: 8pt;" aria-label="ConstantBinding (1 item)">ConstantBinding</a>
+<a href="//royale.apache.org/tag/fonticon/" class="tag-cloud-link tag-link-78 tag-link-position-4" style="font-size: 8pt;" aria-label="FontIcon (1 item)">FontIcon</a>
+<a href="//royale.apache.org/tag/horizontalcenteredlayout/" class="tag-cloud-link tag-link-75 tag-link-position-5" style="font-size: 8pt;" aria-label="HorizontalCenteredLayout (1 item)">HorizontalCenteredLayout</a>
+<a href="//royale.apache.org/tag/itemrenderer/" class="tag-cloud-link tag-link-74 tag-link-position-6" style="font-size: 8pt;" aria-label="ItemRenderer (1 item)">ItemRenderer</a>
+<a href="//royale.apache.org/tag/jalert/" class="tag-cloud-link tag-link-60 tag-link-position-7" style="font-size: 13.675675675676pt;" aria-label="j:Alert (3 items)">j:Alert</a>
+<a href="//royale.apache.org/tag/jalertview/" class="tag-cloud-link tag-link-79 tag-link-position-8" style="font-size: 8pt;" aria-label="j:AlertView (1 item)">j:AlertView</a>
+<a href="//royale.apache.org/tag/japplication/" class="tag-cloud-link tag-link-58 tag-link-position-9" style="font-size: 22pt;" aria-label="j:Application (10 items)">j:Application</a>
+<a href="//royale.apache.org/tag/jbutton/" class="tag-cloud-link tag-link-59 tag-link-position-10" style="font-size: 21.243243243243pt;" aria-label="j:Button (9 items)">j:Button</a>
+<a href="//royale.apache.org/tag/jcard/" class="tag-cloud-link tag-link-73 tag-link-position-11" style="font-size: 11.405405405405pt;" aria-label="j:Card (2 items)">j:Card</a>
+<a href="//royale.apache.org/tag/j-checkbox/" class="tag-cloud-link tag-link-82 tag-link-position-12" style="font-size: 8pt;" aria-label="j: CheckBox (1 item)">j: CheckBox</a>
+<a href="//royale.apache.org/tag/jcheckbox/" class="tag-cloud-link tag-link-70 tag-link-position-13" style="font-size: 8pt;" aria-label="j:CheckBox (1 item)">j:CheckBox</a>
+<a href="//royale.apache.org/tag/jcontrolbar/" class="tag-cloud-link tag-link-80 tag-link-position-14" style="font-size: 8pt;" aria-label="j:ControlBar (1 item)">j:ControlBar</a>
+<a href="//royale.apache.org/tag/jdisabled/" class="tag-cloud-link tag-link-71 tag-link-position-15" style="font-size: 8pt;" aria-label="j:Disabled (1 item)">j:Disabled</a>
+<a href="//royale.apache.org/tag/j-horizontalcenteredlayout/" class="tag-cloud-link tag-link-81 tag-link-position-16" style="font-size: 11.405405405405pt;" aria-label="j: HorizontalCenteredLayout (2 items)">j: HorizontalCenteredLayout</a>
+<a href="//royale.apache.org/tag/jhorizontallayout/" class="tag-cloud-link tag-link-84 tag-link-position-17" style="font-size: 11.405405405405pt;" aria-label="j:HorizontalLayout (2 items)">j:HorizontalLayout</a>
+<a href="//royale.apache.org/tag/jlabel/" class="tag-cloud-link tag-link-88 tag-link-position-18" style="font-size: 8pt;" aria-label="j:Label (1 item)">j:Label</a>
+<a href="//royale.apache.org/tag/jlist/" class="tag-cloud-link tag-link-62 tag-link-position-19" style="font-size: 11.405405405405pt;" aria-label="j:List (2 items)">j:List</a>
+<a href="//royale.apache.org/tag/jradiobutton/" class="tag-cloud-link tag-link-63 tag-link-position-20" style="font-size: 8pt;" aria-label="j:RadioButton (1 item)">j:RadioButton</a>
+<a href="//royale.apache.org/tag/jscrollingviewport/" class="tag-cloud-link tag-link-87 tag-link-position-21" style="font-size: 8pt;" aria-label="j:ScrollingViewport (1 item)">j:ScrollingViewport</a>
+<a href="//royale.apache.org/tag/jslider/" class="tag-cloud-link tag-link-61 tag-link-position-22" style="font-size: 11.405405405405pt;" aria-label="j:Slider (2 items)">j:Slider</a>
+<a href="//royale.apache.org/tag/jstate/" class="tag-cloud-link tag-link-72 tag-link-position-23" style="font-size: 8pt;" aria-label="j:State (1 item)">j:State</a>
+<a href="//royale.apache.org/tag/jtextinput/" class="tag-cloud-link tag-link-66 tag-link-position-24" style="font-size: 8pt;" aria-label="j:TextInput (1 item)">j:TextInput</a>
+<a href="//royale.apache.org/tag/jtextprompt/" class="tag-cloud-link tag-link-69 tag-link-position-25" style="font-size: 8pt;" aria-label="j:TextPrompt (1 item)">j:TextPrompt</a>
+<a href="//royale.apache.org/tag/jverticallayout/" class="tag-cloud-link tag-link-83 tag-link-position-26" style="font-size: 8pt;" aria-label="j:VerticalLayout (1 item)">j:VerticalLayout</a>
+<a href="//royale.apache.org/tag/jview/" class="tag-cloud-link tag-link-68 tag-link-position-27" style="font-size: 8pt;" aria-label="j:View (1 item)">j:View</a>
+<a href="//royale.apache.org/tag/jsapplication/" class="tag-cloud-link tag-link-55 tag-link-position-28" style="font-size: 8pt;" aria-label="js:Application (1 item)">js:Application</a>
+<a href="//royale.apache.org/tag/jshttpservice/" class="tag-cloud-link tag-link-85 tag-link-position-29" style="font-size: 8pt;" aria-label="js:HTTPService (1 item)">js:HTTPService</a>
+<a href="//royale.apache.org/tag/jslabel/" class="tag-cloud-link tag-link-50 tag-link-position-30" style="font-size: 8pt;" aria-label="js:Label (1 item)">js:Label</a>
+<a href="//royale.apache.org/tag/jsview/" class="tag-cloud-link tag-link-56 tag-link-position-31" style="font-size: 20.297297297297pt;" aria-label="js:View (8 items)">js:View</a>
+<a href="//royale.apache.org/tag/json/" class="tag-cloud-link tag-link-86 tag-link-position-32" style="font-size: 11.405405405405pt;" aria-label="JSON (2 items)">JSON</a>
+<a href="//royale.apache.org/tag/node-js/" class="tag-cloud-link tag-link-90 tag-link-position-33" style="font-size: 8pt;" aria-label="Node.js (1 item)">Node.js</a>
+<a href="//royale.apache.org/tag/releases/" class="tag-cloud-link tag-link-54 tag-link-position-34" style="font-size: 15.567567567568pt;" aria-label="releases (4 items)">releases</a></div>
</div> </div>
</aside>
<!-- End Sidebar -->
@@ -1110,38 +1107,38 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
<div class="grve-widget-area">
<div class="grve-container grve-padding-top-2x grve-padding-bottom-1x">
<div class="grve-row grve-columns-gap-30">
- <div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="nav_menu-3" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Apache Royale</div><div class="menu-royale-container"><ul id="menu-royale" class="menu"><li id="menu-item-14334" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14334"><a href="//royale.apache.org/">Home</a></li>
-<li id="menu-item-14330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14330"><a href="//royale.apache.org/features/">Features</a></li>
-<li id="menu-item-14333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14333"><a href="//royale.apache.org/try-it-now/">Try it now</a></li>
-<li id="menu-item-14356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14356"><a href="//royale.apache.org/download/">Download</a></li>
-<li id="menu-item-15613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15613"><a href="//royale.apache.org/ides/">IDEs</a></li>
-<li id="menu-item-15453" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15453"><a href="//www.npmjs.com/org/apache-royale">NPM</a></li>
-<li id="menu-item-14331" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14331"><a href="//royale.apache.org/showcase/">Showcase</a></li>
-<li id="menu-item-14355" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14355"><a href="//royale.apache.org/blog/">Blog</a></li>
-<li id="menu-item-14877" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14877"><a href="//royale.apache.org/team/">Team</a></li>
-<li id="menu-item-15562" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15562"><a href="//royale.apache.org/thanks-to/">Thanks To</a></li>
-<li id="menu-item-14912" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14912"><a target="_blank" href="//www.apache.org/licenses/"><i class="grve-menu-icon fa fa-external-link-square"></i>Apache License v2.0</a></li>
-</ul></div></div></div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="nav_menu-4" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Documentation</div><div class="menu-documentation-container"><ul id="menu-documentation" class="menu"><li id="menu-item-16003" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16003"><a href="//apache.github.io/royale-docs/get-started.h [...]
-<li id="menu-item-14347" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14347"><a href="//royale.apache.org/docs/">Docs</a></li>
-<li id="menu-item-14351" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14351"><a target="_blank" href="//royale.apache.org/asdoc/">Reference</a></li>
-<li id="menu-item-14348" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14348"><a target="_blank" href="//github.com/apache/royale-asjs/wiki"><i class="grve-menu-icon fa fa-github"></i>Wiki</a></li>
-<li id="menu-item-16009" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16009"><a href="//stackoverflow.com/questions/tagged/apache-royale"><i class="grve-menu-icon fa fa-stack-overflow"></i>StackOverFlow Tag</a></li>
-</ul></div></div><div id="nav_menu-6" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Community</div><div class="menu-community-container"><ul id="menu-community" class="menu"><li id="menu-item-14323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14323"><a href="//royale.apache.org/get-involved/">Get Involved</a></li>
-<li id="menu-item-14325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14325"><a href="//royale.apache.org/mailing-lists/">Mailing Lists</a></li>
-<li id="menu-item-14349" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14349"><a href="//royale.apache.org/faq/">FAQ</a></li>
-</ul></div></div><div id="nav_menu-5" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Development</div><div class="menu-development-container"><ul id="menu-development" class="menu"><li id="menu-item-14359" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14359"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="grve-menu-icon fa fa-github"></i>GitHub</a></li>
-<li id="menu-item-14327" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14327"><a href="//royale.apache.org/source-code/">Source Code</a></li>
-<li id="menu-item-14353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14353"><a target="_blank" href="//github.com/apache/royale-asjs/issues"><i class="grve-menu-icon fa fa-github"></i>Issues</a></li>
-</ul></div></div></div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="nav_menu-8" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Social</div><div class="menu-social-networks-container"><ul id="menu-social-networks" class="menu"><li id="menu-item-15714" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15714"><a target="_blank" href="//twitter.com/apacheroyale">Twi [...]
-<li id="menu-item-15715" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15715"><a target="_blank" href="//facebook.com/ApacheRoyaleSDK/">Facebook</a></li>
-<li id="menu-item-15717" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15717"><a target="_blank" href="//www.linkedin.com/groups/12118437">LinkedIn</a></li>
-<li id="menu-item-15718" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15718"><a target="_blank" href="//royale.apache.org/feed/">RSS</a></li>
-</ul></div></div><div id="nav_menu-7" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Apache</div><div class="menu-apache-container"><ul id="menu-apache" class="menu"><li id="menu-item-14062" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14062"><a target="_blank" href="//www.apache.org/"><i class="grve-menu-icon fa fa-external-link-square"></i>Apache</a></li>
-<li id="menu-item-14063" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14063"><a target="_blank" href="//www.apache.org/foundation/contributing.html"><i class="grve-menu-icon fa fa-external-link-square"></i>Donations</a></li>
-<li id="menu-item-15659" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15659"><a target="_blank" href="//www.apache.org/events/current-event"><i class="grve-menu-icon fa fa-external-link-square"></i>Events</a></li>
-<li id="menu-item-14064" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14064"><a target="_blank" href="//www.apache.org/foundation/sponsorship.html"><i class="grve-menu-icon fa fa-external-link-square"></i>Sponsorship</a></li>
-<li id="menu-item-14065" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14065"><a target="_blank" href="//www.apache.org/foundation/thanks.html"><i class="grve-menu-icon fa fa-external-link-square"></i>Thanks!</a></li>
-<li id="menu-item-15352" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15352"><a target="_blank" href="//www.apache.org/security/">Security</a></li>
+ <div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="nav_menu-3" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Apache Royale</div><div class="menu-royale-container"><ul id="menu-royale" class="menu"><li id="menu-item-14334" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14334"><a href="//royale.apache.org/">Home</a></li>
+<li id="menu-item-14330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14330"><a href="//royale.apache.org/features/">Features</a></li>
+<li id="menu-item-14333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14333"><a href="//royale.apache.org/try-it-now/">Try it now</a></li>
+<li id="menu-item-14356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14356"><a href="//royale.apache.org/download/">Download</a></li>
+<li id="menu-item-15613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15613"><a href="//royale.apache.org/ides/">IDEs</a></li>
+<li id="menu-item-15453" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15453"><a href="//www.npmjs.com/org/apache-royale">NPM</a></li>
+<li id="menu-item-14331" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14331"><a href="//royale.apache.org/showcase/">Showcase</a></li>
+<li id="menu-item-14355" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14355"><a href="//royale.apache.org/blog/">Blog</a></li>
+<li id="menu-item-14877" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14877"><a href="//royale.apache.org/team/">Team</a></li>
+<li id="menu-item-15562" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15562"><a href="//royale.apache.org/thanks-to/">Thanks To</a></li>
+<li id="menu-item-14912" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14912"><a target="_blank" href="//www.apache.org/licenses/"><i class="grve-menu-icon fa fa-external-link-square"></i>Apache License v2.0</a></li>
+</ul></div></div></div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="nav_menu-4" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Documentation</div><div class="menu-documentation-container"><ul id="menu-documentation" class="menu"><li id="menu-item-16003" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16003"><a href="//apache.github.io/royale-docs/get-started.h [...]
+<li id="menu-item-14347" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14347"><a href="//royale.apache.org/docs/">Docs</a></li>
+<li id="menu-item-14351" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14351"><a target="_blank" href="//royale.apache.org/asdoc/">Reference</a></li>
+<li id="menu-item-14348" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14348"><a target="_blank" href="//github.com/apache/royale-asjs/wiki"><i class="grve-menu-icon fa fa-github"></i>Wiki</a></li>
+<li id="menu-item-16009" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16009"><a href="//stackoverflow.com/questions/tagged/apache-royale"><i class="grve-menu-icon fa fa-stack-overflow"></i>StackOverFlow Tag</a></li>
+</ul></div></div><div id="nav_menu-6" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Community</div><div class="menu-community-container"><ul id="menu-community" class="menu"><li id="menu-item-14323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14323"><a href="//royale.apache.org/get-involved/">Get Involved</a></li>
+<li id="menu-item-14325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14325"><a href="//royale.apache.org/mailing-lists/">Mailing Lists</a></li>
+<li id="menu-item-14349" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14349"><a href="//royale.apache.org/faq/">FAQ</a></li>
+</ul></div></div><div id="nav_menu-5" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Development</div><div class="menu-development-container"><ul id="menu-development" class="menu"><li id="menu-item-14359" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14359"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="grve-menu-icon fa fa-github"></i>GitHub</a></li>
+<li id="menu-item-14327" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14327"><a href="//royale.apache.org/source-code/">Source Code</a></li>
+<li id="menu-item-14353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14353"><a target="_blank" href="//github.com/apache/royale-asjs/issues"><i class="grve-menu-icon fa fa-github"></i>Issues</a></li>
+</ul></div></div></div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="nav_menu-8" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Social</div><div class="menu-social-networks-container"><ul id="menu-social-networks" class="menu"><li id="menu-item-15714" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15714"><a target="_blank" href="//twitter.com/apacheroyale">Twi [...]
+<li id="menu-item-15715" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15715"><a target="_blank" href="//facebook.com/ApacheRoyaleSDK/">Facebook</a></li>
+<li id="menu-item-15717" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15717"><a target="_blank" href="//www.linkedin.com/groups/12118437">LinkedIn</a></li>
+<li id="menu-item-15718" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15718"><a target="_blank" href="//royale.apache.org/feed/">RSS</a></li>
+</ul></div></div><div id="nav_menu-7" class="grve-widget widget widget_nav_menu"><div class="grve-widget-title">Apache</div><div class="menu-apache-container"><ul id="menu-apache" class="menu"><li id="menu-item-14062" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14062"><a target="_blank" href="//www.apache.org/"><i class="grve-menu-icon fa fa-external-link-square"></i>Apache</a></li>
+<li id="menu-item-14063" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14063"><a target="_blank" href="//www.apache.org/foundation/contributing.html"><i class="grve-menu-icon fa fa-external-link-square"></i>Donations</a></li>
+<li id="menu-item-15659" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15659"><a target="_blank" href="//www.apache.org/events/current-event"><i class="grve-menu-icon fa fa-external-link-square"></i>Events</a></li>
+<li id="menu-item-14064" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14064"><a target="_blank" href="//www.apache.org/foundation/sponsorship.html"><i class="grve-menu-icon fa fa-external-link-square"></i>Sponsorship</a></li>
+<li id="menu-item-14065" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14065"><a target="_blank" href="//www.apache.org/foundation/thanks.html"><i class="grve-menu-icon fa fa-external-link-square"></i>Thanks!</a></li>
+<li id="menu-item-15352" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15352"><a target="_blank" href="//www.apache.org/security/">Security</a></li>
</ul></div></div></div></div><div class="wpb_column grve-column grve-column-1-4 grve-tablet-column-1-2"><div class="grve-column-wrapper"><div id="custom_html-2" class="widget_text grve-widget widget widget_custom_html"><div class="grve-widget-title">About Us</div><div class="textwidget custom-html-widget"><div class="info-content-left">
<img alt="Apache Royale Logo Footer" class="grve-align-left" src="//royale.apache.org/wp-content/uploads/2017/10/apache-royale-logo-footer-circle-grey.svg" width="100"/>
<span class="royale-about-us"><a href="//royale.apache.org/">Apache Royale™</a> is a highly productive open source application technology for building expressive frontend applications that outputs to different formats and deploys consistently on all major browsers, desktops and devices.</span>
@@ -1195,12 +1192,12 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
<div class="grve-hiddenarea-content">
<div id="grve-hidden-menu-wrapper" class="grve-menu-wrapper">
- <ul id="menu-main-2" class="grve-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15293 grve-first-level"><a href="//royale.apache.org/features/"><span class="grve-item">Features</span></a></li>
-<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16004 grve-first-level"><a href="//apache.github.io/royale-docs/get-started.html"><span class="grve-item">Get Started</span></a></li>
-<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14341 grve-first-level"><a href="//royale.apache.org/download/"><span class="grve-item">Download</span></a></li>
-<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14345 grve-first-level"><a href="//royale.apache.org/docs/"><span class="grve-item">Docs</span></a></li>
-<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14342 grve-first-level"><a href="//royale.apache.org/blog/"><span class="grve-item">Blog</span></a></li>
-<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14886 grve-first-level"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GitHub</span></a></li>
+ <ul id="menu-main-2" class="grve-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15293 grve-first-level"><a href="//royale.apache.org/features/"><span class="grve-item">Features</span></a></li>
+<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16004 grve-first-level"><a href="//apache.github.io/royale-docs/get-started.html"><span class="grve-item">Get Started</span></a></li>
+<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14341 grve-first-level"><a href="//royale.apache.org/download/"><span class="grve-item">Download</span></a></li>
+<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14345 grve-first-level"><a href="//royale.apache.org/docs/"><span class="grve-item">Docs</span></a></li>
+<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-14342 grve-first-level"><a href="//royale.apache.org/blog/"><span class="grve-item">Blog</span></a></li>
+<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14886 grve-first-level"><a target="_blank" href="//github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><span class="grve-item"><i class="grve-menu-icon fa fa-github"></i>GitHub</span></a></li>
</ul> </div>
<div class="grve-header-responsive-elements">
@@ -1261,25 +1258,25 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
<div class="grve-modal-content">
<div class="grve-modal-form">
<div class="grve-modal-item">
- <div role="form" class="wpcf7" id="wpcf7-f4-p16012-o1" lang="en-US" dir="ltr">
-<div class="screen-reader-response"></div>
-<form action="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/#wpcf7-f4-p16012-o1" method="post" class="wpcf7-form" novalidate="novalidate">
-<div style="display: none;">
-<input type="hidden" name="_wpcf7" value="4" />
-<input type="hidden" name="_wpcf7_version" value="5.1.3" />
-<input type="hidden" name="_wpcf7_locale" value="en_US" />
-<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f4-p16012-o1" />
-<input type="hidden" name="_wpcf7_container_post" value="16012" />
-</div>
-<p><label> Your Name (required)<br />
- <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
-<p><label> Your Email (required)<br />
- <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
-<p><label> Subject<br />
- <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
-<p><label> Your Message<br />
- <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
-<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
+ <div role="form" class="wpcf7" id="wpcf7-f4-p16012-o1" lang="en-US" dir="ltr">
+<div class="screen-reader-response"></div>
+<form action="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/#wpcf7-f4-p16012-o1" method="post" class="wpcf7-form" novalidate="novalidate">
+<div style="display: none;">
+<input type="hidden" name="_wpcf7" value="4" />
+<input type="hidden" name="_wpcf7_version" value="5.1.3" />
+<input type="hidden" name="_wpcf7_locale" value="en_US" />
+<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f4-p16012-o1" />
+<input type="hidden" name="_wpcf7_container_post" value="16012" />
+</div>
+<p><label> Your Name (required)<br />
+ <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
+<p><label> Your Email (required)<br />
+ <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
+<p><label> Subject<br />
+ <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
+<p><label> Your Message<br />
+ <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
+<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div> </div>
</div>
</div>
@@ -1299,53 +1296,53 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
<div class="grve-modal-wrapper">
<div class="grve-modal-content">
<div class="grve-modal-item">
-
- <div class="grve-login-modal">
-
- <!-- Login form -->
- <div class="grve-login-form grve-login-form-item grve-align-center">
-
- <div class="grve-login-form-title grve-h3 grve-with-line grve-align-center">Login to Apache Royale™</div>
-
- <form id="grve_login_form" action="//royale.apache.org/" method="post">
-
- <div class="grve-form-field">
- <input class="grve-form-control required" name="grve_user_login" type="text" placeholder="Username *"/>
- </div>
- <div class="grve-form-field">
- <input class="grve-form-control required" name="grve_user_pass" id="grve_user_pass" type="password" placeholder="Password *"/>
- </div>
- <div class="grve-form-field">
- <input type="hidden" name="action" value="movedo_grve_login_user"/>
- <button class="btn grve-fullwidth-btn" data-loading-text="Loading..." type="submit">Login</button>
- <a class="grve-reset-password-form-btn grve-link-text grve-text-hover-primary-1" href="#">Lost Password?</a>
- </div>
- <input type="hidden" id="_movedo_grve_nonce_login" name="_movedo_grve_nonce_login" value="e66e4fa257" /><input type="hidden" name="_wp_http_referer" value="/how-to-create-a-desktop-application-with-royale-and-electron/" /> </form>
- <div class="grve-form-errors grve-align-center grve-text-primary-1 grve-link-text"></div>
- </div>
-
- <!-- Lost Password form -->
- <div class="grve-reset-password-form grve-login-form-item grve-align-center">
-
- <div class="grve-login-form-title grve-h3 grve-with-line grve-align-center">Reset Password</div>
- <span class="grve-login-form-description grve-link-text">Enter the username or e-mail you used in your profile. A password reset link will be sent to you by email.</span>
-
- <form id="grve_reset_password_form" action="//royale.apache.org/" method="post">
- <div class="grve-form-field">
- <input class="grve-form-control required" name="grve_user_or_email" id="grve_user_or_email" type="text" placeholder="Username or E-mail"/>
- </div>
- <div class="grve-form-field">
- <input type="hidden" name="action" value="movedo_grve_reset_password_user"/>
- <button class="btn grve-fullwidth-btn" data-loading-text="Loading..." type="submit">Get new password</button>
- </div>
- <div class="grve-form-field">
- <span class="grve-login-link grve-link-text">Already have an account? <a class="grve-text-hover-primary-1 grve-login-form-btn" href="#">Login</a>
- </span>
- </div>
- <input type="hidden" id="_movedo_grve_nonce_password" name="_movedo_grve_nonce_password" value="e66e4fa257" /><input type="hidden" name="_wp_http_referer" value="/how-to-create-a-desktop-application-with-royale-and-electron/" /> </form>
- <div class="grve-form-errors grve-align-center grve-text-primary-1 grve-link-text"></div>
- </div>
- </div>
+
+ <div class="grve-login-modal">
+
+ <!-- Login form -->
+ <div class="grve-login-form grve-login-form-item grve-align-center">
+
+ <div class="grve-login-form-title grve-h3 grve-with-line grve-align-center">Login to Apache Royale™</div>
+
+ <form id="grve_login_form" action="//royale.apache.org/" method="post">
+
+ <div class="grve-form-field">
+ <input class="grve-form-control required" name="grve_user_login" type="text" placeholder="Username *"/>
+ </div>
+ <div class="grve-form-field">
+ <input class="grve-form-control required" name="grve_user_pass" id="grve_user_pass" type="password" placeholder="Password *"/>
+ </div>
+ <div class="grve-form-field">
+ <input type="hidden" name="action" value="movedo_grve_login_user"/>
+ <button class="btn grve-fullwidth-btn" data-loading-text="Loading..." type="submit">Login</button>
+ <a class="grve-reset-password-form-btn grve-link-text grve-text-hover-primary-1" href="#">Lost Password?</a>
+ </div>
+ <input type="hidden" id="_movedo_grve_nonce_login" name="_movedo_grve_nonce_login" value="e66e4fa257" /><input type="hidden" name="_wp_http_referer" value="/how-to-create-a-desktop-application-with-royale-and-electron/" /> </form>
+ <div class="grve-form-errors grve-align-center grve-text-primary-1 grve-link-text"></div>
+ </div>
+
+ <!-- Lost Password form -->
+ <div class="grve-reset-password-form grve-login-form-item grve-align-center">
+
+ <div class="grve-login-form-title grve-h3 grve-with-line grve-align-center">Reset Password</div>
+ <span class="grve-login-form-description grve-link-text">Enter the username or e-mail you used in your profile. A password reset link will be sent to you by email.</span>
+
+ <form id="grve_reset_password_form" action="//royale.apache.org/" method="post">
+ <div class="grve-form-field">
+ <input class="grve-form-control required" name="grve_user_or_email" id="grve_user_or_email" type="text" placeholder="Username or E-mail"/>
+ </div>
+ <div class="grve-form-field">
+ <input type="hidden" name="action" value="movedo_grve_reset_password_user"/>
+ <button class="btn grve-fullwidth-btn" data-loading-text="Loading..." type="submit">Get new password</button>
+ </div>
+ <div class="grve-form-field">
+ <span class="grve-login-link grve-link-text">Already have an account? <a class="grve-text-hover-primary-1 grve-login-form-btn" href="#">Login</a>
+ </span>
+ </div>
+ <input type="hidden" id="_movedo_grve_nonce_password" name="_movedo_grve_nonce_password" value="e66e4fa257" /><input type="hidden" name="_wp_http_referer" value="/how-to-create-a-desktop-application-with-royale-and-electron/" /> </form>
+ <div class="grve-form-errors grve-align-center grve-text-primary-1 grve-link-text"></div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -1386,7 +1383,7 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
<div class="grve-column-inner wpb_column grve-column-1">
<div class="grve-column-wrapper-inner">
<div class="grve-element grve-text grve-leader-text">
- <p style="text-align: center;">You can be part of Apache Royale and start using and contributing to this project. We need your skills to make this great technology reach the next step. You can start by joining us in our mailing list.</p>
+ <p style="text-align: center;">You can be part of Apache Royale and start using and contributing to this project. We need your skills to make this great technology reach the next step. You can start by joining us in our mailing list.</p>
</div>
<div class="grve-empty-space grve-height-1x" style=""></div><div class="grve-element grve-align-center grve-animated-item grve-fade-in grve-duration-normal" data-delay="200"><a href="//royale.apache.org/mailing-lists/" class="grve-btn grve-btn-extralarge grve-extra-round grve-bg-primary-1 grve-bg-hover-primary-2"><span><i class="fa fa-user-plus"></i>Join Us</span></a></div>
@@ -1398,45 +1395,52 @@ ipcMain.on("mainMessageHandler", (event, arg) => {
</div>
</div> <!-- end #grve-theme-wrapper -->
- <link rel='stylesheet' id='js_composer_front-css' href='//royale.apache.org/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=6.0.2' type='text/css' media='all' />
-<script type='text/javascript'>
-/* <![CDATA[ */
-var wpcf7 = {"apiSettings":{"root":"\/\/royale.codeoscopic.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};
-/* ]]> */
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.3'></script>
-<script type='text/javascript'>
-/* <![CDATA[ */
-var countVars = {"disqusShortname":"royale-apache-org"};
-/* ]]> */
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/disqus-comment-system/public/js/comment_count.js?ver=3.0.17'></script>
-<script type='text/javascript'>
-/* <![CDATA[ */
-var movedo_grve_fullpage_data = {"fullpage":"0"};
-var movedo_grve_piling_data = {"piling":"0"};
-var movedo_grve_smoothscroll_data = {"smoothscrolling":""};
-/* ]]> */
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/plugins.js?ver=3.0.4'></script>
-<script type='text/javascript'>
-/* <![CDATA[ */
-var movedo_grve_main_data = {"siteurl":"\/\/royale.codeoscopic.com\/wp-content\/themes\/movedo","ajaxurl":"\/\/royale.codeoscopic.com\/wp-admin\/admin-ajax.php","wp_gallery_popup":"0","device_animations":"0","device_hover_single_tap":"0","responsive_thershold":"1024","back_top_top":"1","string_weeks":"Weeks","string_days":"Days","string_hours":"Hours","string_minutes":"Min","string_seconds":"Sec","nonce_likes":"7ba3800c2f"};
-/* ]]> */
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/main.js?ver=3.0.4'></script>
-<script type='text/javascript'>
-var screen_width = Math.max( screen.width, screen.height );var devicePixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;document.cookie = 'resolution=' + screen_width + ',' + devicePixelRatio + '; path=/';
-function grveReadCookie(name) {var nameEQ = name + '=';var ca = document.cookie.split(';');for(var i=0;i < ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') c = c.substring(1,c.length);if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);}return null;}function grvePrivacyCookieConsent( cookie_name, cookie_days ) {var privacyAgreement = jQuery('.grve-privacy-agreement');privacyAgreement.on( 'click', function() {var theDate = new Date();var later = new Date( theDate [...]
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-includes/js/wp-embed.min.js?ver=5.2.1'></script>
-<script type='text/javascript'>
-/* <![CDATA[ */
-var grve_form = {"ajaxurl":"\/\/royale.codeoscopic.com\/wp-admin\/admin-ajax.php","redirect_url":""};
-/* ]]> */
-</script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/ajax-login.js?ver=3.0.4'></script>
-<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/js_composer/assets/js/dist/js_composer_front.min.js?ver=6.0.2'></script>
+ <link rel='stylesheet' id='js_composer_front-css' href='//royale.apache.org/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=6.0.2' type='text/css' media='all' />
+<script type='text/javascript'>
+/* <![CDATA[ */
+var wpcf7 = {"apiSettings":{"root":"\/\/royale.codeoscopic.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.3'></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+var countVars = {"disqusShortname":"royale-apache-org"};
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/disqus-comment-system/public/js/comment_count.js?ver=3.0.17'></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+var embedVars = {"disqusConfig":{"integration":"wordpress 3.0.17"},"disqusIdentifier":"16012 \/\/royale.codeoscopic.com\/?p=16012","disqusShortname":"royale-apache-org","disqusTitle":"How to create a Desktop Application with Royale and Electron","disqusUrl":"https:\/\/royale.codeoscopic.com\/how-to-create-a-desktop-application-with-royale-and-electron\/","postId":"16012"};
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/disqus-comment-system/public/js/comment_embed.js?ver=3.0.17'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-includes/js/comment-reply.min.js?ver=5.2.1'></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+var movedo_grve_fullpage_data = {"fullpage":"0"};
+var movedo_grve_piling_data = {"piling":"0"};
+var movedo_grve_smoothscroll_data = {"smoothscrolling":""};
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/plugins.js?ver=3.0.4'></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+var movedo_grve_main_data = {"siteurl":"\/\/royale.codeoscopic.com\/wp-content\/themes\/movedo","ajaxurl":"\/\/royale.codeoscopic.com\/wp-admin\/admin-ajax.php","wp_gallery_popup":"0","device_animations":"0","device_hover_single_tap":"0","responsive_thershold":"1024","back_top_top":"1","string_weeks":"Weeks","string_days":"Days","string_hours":"Hours","string_minutes":"Min","string_seconds":"Sec","nonce_likes":"7ba3800c2f"};
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/main.js?ver=3.0.4'></script>
+<script type='text/javascript'>
+var screen_width = Math.max( screen.width, screen.height );var devicePixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;document.cookie = 'resolution=' + screen_width + ',' + devicePixelRatio + '; path=/';
+function grveReadCookie(name) {var nameEQ = name + '=';var ca = document.cookie.split(';');for(var i=0;i < ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') c = c.substring(1,c.length);if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);}return null;}function grvePrivacyCookieConsent( cookie_name, cookie_days ) {var privacyAgreement = jQuery('.grve-privacy-agreement');privacyAgreement.on( 'click', function() {var theDate = new Date();var later = new Date( theDate [...]
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-includes/js/wp-embed.min.js?ver=5.2.1'></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+var grve_form = {"ajaxurl":"\/\/royale.codeoscopic.com\/wp-admin\/admin-ajax.php","redirect_url":""};
+/* ]]> */
+</script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/themes/movedo/js/ajax-login.js?ver=3.0.4'></script>
+<script type='text/javascript' src='//royale.apache.org/wp-content/plugins/js_composer/assets/js/dist/js_composer_front.min.js?ver=6.0.2'></script>
</body>
diff --git a/index.html b/index.html
index b2b5092..e9e52f1 100755
--- a/index.html
+++ b/index.html
@@ -353,9 +353,9 @@ Click the help icon above to learn more.
<p style="text-align: center;">Jewel is a new UI component set, created with design and responsiveness in mind. Apache Royale provides themes to use with Jewel out of the box. Jewel themes support up to 12 colors, light/dark, and flat/normal modes.</p>
</div>
- <div class="grve-element grve-align-center"><a href="//royale.apache.org/tourdejewel" target="_blank" class="grve-btn grve-btn-medium grve-round grve-bg-primary-1 grve-bg-hover-primary-1 grve-btn-line"><span><i class="vc_li vc_li-diamond"></i>Try Tour de Jewel</span></a></div></div></div></div></div><div class="grve-background-wrapper"></div></div><div class="grve-section grve-row-section grve-fullwidth-background grve-padding-top-3x grve-padding-bottom-3x grve-bg-parallax grve-headings [...]
- jQuery(function($){ $("#grve-typed-item-5cebef352022f").appear(function() {
- $("#grve-typed-item-5cebef352022f").typed({
+ <div class="grve-element grve-align-center"><a href="//royale.apache.org/tourdejewel" target="_blank" class="grve-btn grve-btn-medium grve-round grve-bg-primary-1 grve-bg-hover-primary-1 grve-btn-line"><span><i class="vc_li vc_li-diamond"></i>Try Tour de Jewel</span></a></div></div></div></div></div><div class="grve-background-wrapper"></div></div><div class="grve-section grve-row-section grve-fullwidth-background grve-padding-top-3x grve-padding-bottom-3x grve-bg-parallax grve-headings [...]
+ jQuery(function($){ $("#grve-typed-item-5cebf6838b119").appear(function() {
+ $("#grve-typed-item-5cebf6838b119").typed({
strings: ["npm install @apache-royale/royale-js -g"],
typeSpeed: 100,
backSpeed: 80,
@@ -405,7 +405,7 @@ Click the help icon above to learn more.
</span>
</span>
<time class="grve-structured-data date published" itemprop="datePublished" datetime="2019-05-26T22:17:03+02:00">May 26, 2019</time>
- <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-26T22:43:11+02:00">May 26, 2019</time>
+ <time class="grve-structured-data date updated" itemprop="dateModified" datetime="2019-05-27T16:34:29+02:00">May 27, 2019</time>
<span class="grve-structured-data" itemprop="mainEntityOfPage" itemscope itemtype="//schema.org/WebPage" itemid="//royale.apache.org/how-to-create-a-desktop-application-with-royale-and-electron/"></span>
</span>
<ul class="grve-post-meta">
diff --git a/selecting-options-from-a-group-of-jewel-checkbox-controls/index.html b/selecting-options-from-a-group-of-jewel-checkbox-controls/index.html
index 624dc32..8af201f 100755
--- a/selecting-options-from-a-group-of-jewel-checkbox-controls/index.html
+++ b/selecting-options-from-a-group-of-jewel-checkbox-controls/index.html
@@ -643,7 +643,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef6054ece" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6aea397b" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -659,7 +659,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef605517d" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6aea3c72" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/team/index.html b/team/index.html
index e05d8c6..3d5587d 100755
--- a/team/index.html
+++ b/team/index.html
@@ -578,7 +578,7 @@ Click the help icon above to learn more.
<img width="190" height="190" src="//royale.apache.org/wp-content/uploads/2018/02/awsweater.gif" class="attachment-full size-full" alt="Andrew Wetmore" /> </div>
<figcaption>
<ul class="grve-team-social grve-align-center">
- <li><a href="//www.facebook.com/andrew.wetmore1" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-facebook"></i></a></li><li><a href="//twitter.com/cottage14" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-twitter"></i></a></li><li><a href="//www.linkedin.com/in/andrewwetmore/" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle">< [...]
+ <li><a href="//www.facebook.com/andrew.wetmore1" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-facebook"></i></a></li><li><a href="//twitter.com/cottage14" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-twitter"></i></a></li><li><a href="//www.linkedin.com/in/andrewwetmore/" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle">< [...]
</figcaption>
</figure>
<div class="grve-team-description grve-align-center">
@@ -595,7 +595,7 @@ Click the help icon above to learn more.
<img width="711" height="711" src="//royale.apache.org/wp-content/uploads/2018/04/alina-kazi.png" class="attachment-full size-full" alt="" srcset="//royale.apache.org/wp-content/uploads/2018/04/alina-kazi.png 711w, //royale.apache.org/wp-content/uploads/2018/04/alina-kazi-150x150.png 150w, //royale.apache.org/wp-content/uploads/2018/04/alina-kazi-300x300.png 300w, //royale.apache.org/wp-content/uploads/2018/04/alina-kazi-560x560.png 560w" sizes="(max-width: 711px) 100vw, 711px" /> [...]
<figcaption>
<ul class="grve-team-social grve-align-center">
- <li><a href="//www.facebook.com/alinakaziqureshi" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-facebook"></i></a></li><li><a href="//twitter.com/alinakazi1990" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-twitter"></i></a></li><li><a href="//www.linkedin.com/in/aleena-kazi-47428b100/" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white g [...]
+ <li><a href="//www.facebook.com/alinakaziqureshi" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-facebook"></i></a></li><li><a href="//twitter.com/alinakazi1990" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white grve-circle"><i class="fa fa-twitter"></i></a></li><li><a href="//www.linkedin.com/in/aleena-kazi-47428b100/" target="_blank" class="grve-text-hover-primary-1 grve-box-item grve-bg-white g [...]
</figcaption>
</figure>
<div class="grve-team-description grve-align-center">
diff --git a/using-an-item-renderer-with-a-list/index.html b/using-an-item-renderer-with-a-list/index.html
index 98ec2c0..39901ae 100755
--- a/using-an-item-renderer-with-a-list/index.html
+++ b/using-an-item-renderer-with-a-list/index.html
@@ -721,7 +721,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef5f3acaa" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6ad7ee61" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -737,7 +737,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef5f3af53" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6ad7f103" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/using-jewel-alert-control/index.html b/using-jewel-alert-control/index.html
index 28467c9..f4cc207 100755
--- a/using-jewel-alert-control/index.html
+++ b/using-jewel-alert-control/index.html
@@ -619,7 +619,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef80e2f5a" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6d09bcfb" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -635,7 +635,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef80e32ba" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6d09c065" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/using-the-jewel-slider-control/index.html b/using-the-jewel-slider-control/index.html
index 7259083..9771aac 100755
--- a/using-the-jewel-slider-control/index.html
+++ b/using-the-jewel-slider-control/index.html
@@ -630,7 +630,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef7d639f4" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6cd3da39" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -646,7 +646,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef7d63ca0" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6cd3dd01" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">
diff --git a/using-view-states-to-show-or-hide-content/index.html b/using-view-states-to-show-or-hide-content/index.html
index 014a863..c95db40 100755
--- a/using-view-states-to-show-or-hide-content/index.html
+++ b/using-view-states-to-show-or-hide-content/index.html
@@ -653,7 +653,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15834-5cebef5fc0cff" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15834-5cebf6ae165a3" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/loading-external-data-through-httpservice/" target="_self">
<div class="grve-related-content">
@@ -669,7 +669,7 @@ function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc) {}</script>
- <div id="grve-post-related-15806-5cebef5fc0fad" class="grve-related-item grve-image-hover">
+ <div id="grve-post-related-15806-5cebf6ae16862" class="grve-related-item grve-image-hover">
<a href="//royale.apache.org/customization-through-the-royale-api/" target="_self">
<div class="grve-related-content">