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 8f51829 update BE0012
8f51829 is described below
commit 8f51829305a1dc6778a66f13ea654ac4fc0c88bd
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Aug 11 11:12:48 2020 +0200
update BE0012
---
.../index.html | 96 ++++++++++++----------
1 file changed, 51 insertions(+), 45 deletions(-)
diff --git a/using-external-javascript-libraries-in-apache-royale/index.html
b/using-external-javascript-libraries-in-apache-royale/index.html
index b719ed1..36306fe 100644
--- a/using-external-javascript-libraries-in-apache-royale/index.html
+++ b/using-external-javascript-libraries-in-apache-royale/index.html
@@ -459,30 +459,30 @@ Click the help icon above to learn more.
<div class="grve-main-content-wrapper clearfix">
- <article id="post-15987" class="grve-single-post post-15987 post
type-post status-publish format-standard has-post-thumbnail hentry
category-jewel-ui-set category-royale-examples tag-externs
tag-j-horizontalcenteredlayout tag-japplication tag-jbutton tag-jcard
tag-jhorizontallayout tag-jlabel tag-jscrollingviewport tag-jshttpservice"
itemscope itemtype="http://schema.org/BlogPosting";>
+ <article id="post-15987" class="grve-single-post post-15987 post
type-post status-publish format-standard has-post-thumbnail hentry
category-jewel-ui-set category-royale-examples tag-externs
tag-j-horizontalcenteredlayout tag-japplication tag-jbutton tag-jcard
tag-jhorizontallayout tag-jlabel tag-jscrollingviewport tag-jshttpservice"
itemscope itemType="http://schema.org/BlogPosting";>
<div id="grve-single-content">
- <h2 class="grve-hidden" itemprop="name headline">Using
external javascript libraries in Apache Royale</h2>
<span class="grve-hidden">
- <span class="grve-structured-data entry-title">Using
external javascript libraries in Apache Royale</span>
- <span class="grve-structured-data" itemprop="image"
itemscope itemtype="http://schema.org/ImageObject";>
- <span itemprop='url'
>//royale.apache.org/wp-content/uploads/2019/06/using-external-javascript-in-apache-royale.gif</span>
- <span itemprop='height' >762</span>
- <span itemprop='width' >622</span>
- </span>
- <span
class="grve-structured-data vcard author" itemprop="author" itemscope
itemtype="http://schema.org/Person";>
- <span itemprop="name" class="fn">Carlos
Rovira</span>
- </span>
- <span class="grve-structured-data" itemprop="publisher"
itemscope itemtype="http://schema.org/Organization";>
- <span itemprop='name'>Carlos Rovira</span>
- <span itemprop='logo' itemscope
itemtype='http://schema.org/ImageObject'>
- <span
itemprop='url'>https://secure.gravatar.com/avatar/67bc22088161c1b320e73f69ff5c310e?s=96&d=mm&r=g</span>
- </span>
- </span>
- <time
class="grve-structured-data date published" itemprop="datePublished"
datetime="2019-06-03T19:03:03+02:00">June 3, 2019</time>
- <time class="grve-structured-data date updated"
itemprop="dateModified" datetime="2019-12-16T13:54:09+01:00">December 16,
2019</time>
- <span class="grve-structured-data"
itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage";
itemid="//royale.apache.org/using-external-javascript-libraries-in-apache-royale/"></span>
- </span>
+ <h2 class="grve-hidden" itemprop="name headline">Using
external javascript libraries in Apache Royale</h2>
<span class="grve-hidden">
+ <span class="grve-structured-data entry-title">Using
external javascript libraries in Apache Royale</span>
+ <span class="grve-structured-data" itemprop="image"
itemscope itemtype="http://schema.org/ImageObject";>
+ <span itemprop='url'
>https://royale.codeoscopic.com/wp-content/uploads/2019/06/using-external-javascript-in-apache-royale.gif</span>
+ <span itemprop='height' >762</span>
+ <span itemprop='width' >622</span>
+ </span>
+ <span
class="grve-structured-data vcard author" itemprop="author" itemscope
itemtype="http://schema.org/Person";>
+ <span itemprop="name" class="fn">Carlos
Rovira</span>
+ </span>
+ <span class="grve-structured-data" itemprop="publisher"
itemscope itemtype="http://schema.org/Organization";>
+ <span itemprop='name'>Carlos Rovira</span>
+ <span itemprop='logo' itemscope
itemtype='http://schema.org/ImageObject'>
+ <span
itemprop='url'>https://secure.gravatar.com/avatar/67bc22088161c1b320e73f69ff5c310e?s=96&d=mm&r=g</span>
+ </span>
+ </span>
+ <time
class="grve-structured-data date published" itemprop="datePublished"
datetime="2019-06-03T19:03:03+02:00">June 3, 2019</time>
+ <time class="grve-structured-data date updated"
itemprop="dateModified" datetime="2020-08-11T10:38:18+02:00">August 11,
2020</time>
+ <span class="grve-structured-data"
itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage";
itemid="https://royale.codeoscopic.com/using-external-javascript-libraries-in-apache-royale/";></span>
+ </span>
<div itemprop="articleBody">
<div class="grve-container"><p>This example
shows how to use external JavaScript libraries in your Apache Royale
application. You can add quick functionality to your application by including
code that is not part of Apache Royale itself or is even not written in
ActionScript.</p>
<p>In this way <em>you get lots of libraries available for free in the
Internet to strengthen and extend your Apache Royale Application</em>.</p>
@@ -494,9 +494,9 @@ Click the help icon above to learn more.
<p>This method gives you robust access to JavaScript methods though
ActionScript with <em>dot access</em> syntax (and lets you use code hinting in
your IDE). But if you need to prototype something quickly, you can use dynamic
syntax with <em>bracket access</em> notation.</p>
<h3>Dot access</h3>
<p>This is the recommended way. You get all advantages of an object-oriented
language like ActionScript 3: type checking, compiler errors and warnings, and
code hinting and code completion in your favorite IDEs.</p>
-<p><img alt="" width="659" height="117"
data-src="/wp-content/uploads/2019/06/Captura-de-pantalla-2019-06-03-a-las-18.20.46.png"
class="aligncenter size-full wp-image-16102 lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
/><noscript><img
src="//royale.apache.org/wp-content/uploads/2019/06/Captura-de-pantalla-2019-06-03-a-las-18.20.46.png"
alt="" width="659" height="117" class="aligncenter size-full wp-image-16102"
/></noscript></p>
-<p>The code for this <a
href="https://github.com/apache/royale-asjs/blob/develop/examples/royale/TourDeJewel/src/main/royale/hljs.as";>hljs
as3 stub code</a> is located in the <strong>Jewel</strong> library, in the
<strong>@externs</strong> class definition for <strong>hljs</strong>:</p>
-<div class="codecolorer-container actionscript3 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 [...]
+<p><img alt="" width="659" height="117"
data-src="/wp-content/uploads/2019/06/Captura-de-pantalla-2019-06-03-a-las-18.20.46.png"
class="aligncenter size-full wp-image-16102 lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
/><noscript><img
src="/wp-content/uploads/2019/06/Captura-de-pantalla-2019-06-03-a-las-18.20.46.png"
alt="" width="659" height="117" class="aligncenter size-full wp-image-16102"
/></noscript></p>
+<p>The code for this <a target="_blank" rel="noopener noreferrer"
href="https://github.com/apache/royale-asjs/blob/develop/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale/src/main/royale/hljs.as";>hljs
as3 stub code</a> is located in this blog example project and is the
<strong>@externs</strong> class definition for <strong>hljs</strong>:</p>
+<div class="codecolorer-container actionscript3 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 [...]
<span class="co1">//</span><br />
<span class="co1">// Licensed to the Apache Software Foundation (ASF)
under one or more</span><br />
<span class="co1">// contributor license agreements. See the
NOTICE file distributed with</span><br />
@@ -519,23 +519,29 @@ Click the help icon above to learn more.
<span class="coMULTI">/**<br />
* @externs<br />
*/</span><br />
+ COMPILE<span class="sy0">::</span>JS<br />
<span class="kw1">public</span> <span class="kw4">class</span>
hljs<br />
<span class="br0">{</span><br />
<span class="coMULTI">/** <br />
- * <inject_html><br />
- * <script
src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script><br
/>
- * <link rel="stylesheet"
title="Atom One Dark"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"><br
/>
- * </inject_html><br />
+ * <inject_script><br />
+ * var script =
document.createElement("script");<br />
+ * script.setAttribute("src",
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js");<br
/>
+ * document.head.appendChild(script);<br />
+ * var link =
document.createElement("link");<br />
+ * link.setAttribute("rel",
"stylesheet");<br />
+ * link.setAttribute("type",
"text/css");<br />
+ * link.setAttribute("href",
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css");<br
/>
+ * document.head.appendChild(link);<br />
+ * </inject_script><br />
*/</span><br />
<span class="kw1">public</span> <span
class="kw3">function</span> hljs<span class="br0">(</span><span
class="br0">)</span><span class="br0">{</span><span
class="br0">}</span><br />
<br />
- COMPILE<span class="sy0">::</span>JS<br />
<span class="kw1">public</span> static <span
class="kw3">function</span> highlightBlock<span
class="br0">(</span>block<span class="sy0">:</span>Element<span
class="br0">)</span><span class="sy0">:</span><span class="kw1">void</span>
<span class="br0">{</span><span class="br0">}</span><br />
<span class="br0">}</span><br />
<span class="br0">}</span></div></td></tr></tbody></table></div>
<p>You can see two main things in this code:</p>
<ol>
-<li>An <strong>inject_html</strong> directive declared in the constructor adds
the following lines to the html template, so you do not need to add the lines
manually. If you use this library, Royale adds these references automatically,
and if you remove all references, Royale removes all dependencies to the
JavaScript library and nothing is output in the html file.
+<li>An <strong>inject_html</strong> directive declared in the constructor adds
the following lines to the html template, so you do not need to add the lines
manually. If you use this library, Royale adds these references automatically,
and if you remove all references, Royale removes the dependencies to the
JavaScript library and nothing is output in the html file.
</li>
<li>Use the <strong>highlightBlock</strong> static function, which you can
access as a normal method in the AS3 hljs class.</li>
</ol>
@@ -603,12 +609,12 @@ hljs<span class="br0">[</span><span
class="st0">"highlightBlock"</
<span
class="sc3"><span class="re1"><j:HorizontalCenteredLayout</span><span
class="re2">/></span></span><br />
<span class="sc3"><span
class="re1"></j:beads</span><span class="re2">></span></span><br />
<br />
- <span class="sc3"><span
class="re1"><j:Card</span> percentWidth=<span
class="st0">"90"</span><span class="re2">></span></span><br />
+ <span class="sc3"><span
class="re1"><j:Card</span> width=<span
class="st0">"90%"</span><span class="re2">></span></span><br />
<span
class="sc3"><span class="re1"><html:H</span><span class="nu0">3</span>
text=<span class="st0">"Using external Javascript
Libraries"</span><span class="re2">/></span></span><br />
<br />
<span
class="sc3"><span class="re1"><j:Label</span> html=<span
class="st0">"This example uses hljs library to highligh a piece of
code"</span><span class="re2">/></span></span><br />
<br />
- <span
class="sc3"><span class="re1"><html:Pre</span> height=<span
class="st0">"300"</span> percentWidth=<span
class="st0">"100"</span> style=<span
class="st0">"background-color: white"</span><span
class="re2">></span></span><br />
+ <span
class="sc3"><span class="re1"><html:Pre</span> height=<span
class="st0">"300"</span> width=<span
class="st0">"100%"</span> style=<span
class="st0">"background-color: white"</span><span
class="re2">></span></span><br />
<span
class="sc3"><span class="re1"><html:beads</span><span
class="re2">></span></span><br />
<span class="sc3"><span class="re1"><j:ScrollingViewport</span><span
class="re2">/></span></span><br />
<span
class="sc3"><span class="re1"></html:beads</span><span
class="re2">></span></span><br />
@@ -620,27 +626,27 @@ hljs<span class="br0">[</span><span
class="st0">"highlightBlock"</
<span class="sc3"><span
class="re1"></j:View</span><span class="re2">></span></span><br />
<span class="sc3"><span
class="re1"></j:initialView</span><span class="re2">></span></span><br />
<span class="sc3"><span class="re1"></j:Application</span><span
class="re2">></span></span></div></td></tr></tbody></table></div>
-<p>In the example code you can see how we call the hljs.highlightBlock method
with the recommended dot syntax as with any other ActionScript code, creating a
seamless integration between your project code and the external JavaScript
code.</p>
+<p>In the example code you can see how we call the
<em>hljs.highlightBlock</em> method with the recommended dot syntax as with any
other ActionScript code, creating a seamless integration between your project
code and the external JavaScript code.</p>
<h3>Conclusion</h3>
<p>You can see how simple and elegant it can be to use external JS code, while
not compromising the safe syntax you have when using the MXML and AS3
languages, to give you more dynamic options for your application at no cost.</p>
<h3>Where to go from here</h3>
<ul>
-<li><a
href="//github.com/apache/royale-asjs/blob/eaf2dbde05a3823e0c148ba806c025eb56388a7a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as#L225">Other
use of @externs in a Jewel Alert component</a></li>
-<li><a
href="//royale.apache.org/loading-external-data-through-httpservice/">Loading
external data through HTTPService</a></li>
-<li><a
href="//royale.apache.org/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/">Binding
the text property of a Jewel TextInput to update a text Label</a></li>
+<li><a target="_blank" rel="noopener noreferrer"
href="//github.com/apache/royale-asjs/blob/eaf2dbde05a3823e0c148ba806c025eb56388a7a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as#L225">Other
use of @externs in a Jewel Alert component</a></li>
+<li><a href="/loading-external-data-through-httpservice/">Loading external
data through HTTPService</a></li>
+<li><a
href="/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/">Binding
the text property of a Jewel TextInput to update a text Label</a></li>
</ul>
<p>The result of this code snippet is the following:</p>
-<style type="text/css">
- .errordiv { padding:10px; margin:10px; border: 1px solid #555555;color:
#000000;background-color: #f8f8f8; width:500px; }#advanced_iframe
{visibility:visible;opacity:1;vertical-align:top;}.ai-info-bottom-iframe {
position: fixed; z-index: 10000; bottom:0; left: 0; margin: 0px; text-align:
center; width: 100%; background-color: #ff9999; padding-left:
5px;padding-bottom: 5px; border-top: 1px solid #aaa
}#ai-layer-div-advanced_iframe p
{height:100%;margin:0;padding:0}</style><script [...]
-if (typeof aiReadyCallbacks === 'undefined') {
- var aiReadyCallbacks = [];
-} else if (!(aiReadyCallbacks instanceof Array)) {
- var aiReadyCallbacks = [];
-} function aiShowIframeId(id_iframe) {
jQuery("#"+id_iframe).css("visibility", "visible"); } function
aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe); }
function aiResizeIframeHeightId(height,width,id)
{aiResizeIframeHeightById(id,height);}</script><iframe id="advanced_iframe"
name="advanced_iframe" width="100%" height="600" marginwidth="10"
marginheight="10" frameborder="1" allowtransparency="true"
style=";width:100%;height:600px;" da [...]
+<style type="text/css">
+ .errordiv { padding:10px; margin:10px; border: 1px solid #555555;color:
#000000;background-color: #f8f8f8; width:500px; }#advanced_iframe
{visibility:visible;opacity:1;vertical-align:top;}.ai-info-bottom-iframe {
position: fixed; z-index: 10000; bottom:0; left: 0; margin: 0px; text-align:
center; width: 100%; background-color: #ff9999; padding-left:
5px;padding-bottom: 5px; border-top: 1px solid #aaa
}#ai-layer-div-advanced_iframe p
{height:100%;margin:0;padding:0}</style><script [...]
+if (typeof aiReadyCallbacks === 'undefined') {
+ var aiReadyCallbacks = [];
+} else if (!(aiReadyCallbacks instanceof Array)) {
+ var aiReadyCallbacks = [];
+} function aiShowIframeId(id_iframe) {
jQuery("#"+id_iframe).css("visibility", "visible"); } function
aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe); }
function aiResizeIframeHeightId(height,width,id)
{aiResizeIframeHeightById(id,height);}</script><iframe id="advanced_iframe"
name="advanced_iframe" width="100%" height="600" marginwidth="10"
marginheight="10" frameborder="1" allowtransparency="true"
style=";width:100%;height:600px;" da [...]
function resizeCallbackadvanced_iframe() {}function aiChangeUrl(loc)
{}</script><script type="text/javascript"></script>
-<p>(We’re using an iframe to host the compiled results of this example.
To see the example in a separate window click <a
href="//royale.apache.org/blog-examples/BE0012_Using_external_javascript_libraries_in_Apache_Royale/index.html"
rel="noopener noreferrer" target="_blank">this link</a>.)</p>
+<p>(We’re using an iframe to host the compiled results of this example.
To see the example in a separate window click <a
href="/blog-examples/BE0012_Using_external_javascript_libraries_in_Apache_Royale/index.html"
rel="noopener noreferrer" target="_blank">this link</a>.)</p>
<p>The full project with source code can be found <a
href="//github.com/apache/royale-asjs/tree/develop/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale"
target="_blank" rel="noopener noreferrer">here</a>:</p>
-<div style="text-align:center"><a
href="//github.com/apache/royale-asjs/tree/develop/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale"
target="_blank" class="grve-btn grve-btn-large grve-round grve-bg-primary-1
grve-bg-hover-black" style="margin-bottom: 20px;max-width: 300px;"
rel="noopener noreferrer"><span><i class="fa fa-github"></i>Project Source
Code</span></a></div>
+<div style="text-align:center"><a
href="//github.com/apache/royale-asjs/tree/develop/examples/blog/BE0012_Using_external_javascript_libraries_in_Apache_Royale"
target="_blank" class="grve-btn grve-btn-large grve-round grve-bg-primary-1
grve-bg-hover-black" style="margin-bottom: 20px;max-width: 300px;"
rel="noopener noreferrer"><span><i class="fa fa-github"></I>Project Source
Code</span></a></div>
</div> </div>
</div>
</article>
