You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/08/11 09:13:02 UTC
[royale-website] branch asf-site updated: update BE0012
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 <ca...@apache.org>
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>