You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@royale.apache.org by gkk gb <mo...@comcast.net> on 2019/07/21 00:17:11 UTC
embed Royale web app into existing web page having corporate
header/footer?
The company I work for has a website that is created/maintained via Drupal templates, wherein all the web pages share the same header (navigation) and footer on every page.
If I create a "web app" in Royale, can it integrate inside a pair of <div> ... </div> tags or other way so that it just inserts into one part of the web page in a self-contained manner? If so, how does that work in practice?
Or, must I place the web app elsewhere on the website and then use an IFrame (I prefer not) to make it sit nicely inside an existing webpage with corporate header and footer around it? The Tour de Jewel "View States" example gives me hope...
Re: embed Royale web app into existing web page having corporate header/footer?
Posted by Carlos Rovira <ca...@apache.org>.
Hi,
I think I now understand better what you want to do. Is more to add the
Royale app to an existing Drupa site right?
In that case is something like we are doing in our own site. We are doing
that with iFrame. Since our site is Wordpress we have an iFrame plugin
to feed the Royale application, and as we publish it, the page loads the
Royale app in a iframe. All blog examples are working that way
* example:
https://royale.apache.org/using-external-javascript-libraries-in-apache-royale/
We are doing a similar thing for Royale docs, that are GitHub page docs. I
investigated how to include little royale apps to show code running in our
docs
and the only way I found to do that was as well with iframe (and I think
this was the recommended way to do it):
* example:
https://apache.github.io/royale-docs/component-sets/jewel/jewel-alert.html
El lun., 22 jul. 2019 a las 8:27, Alex Harui (<ah...@adobe.com>) escribió:
> How would you like it to work? Royale is really about encapsulating
> common patterns in building web apps/sites.
>
>
>
> The htmlTemplate options requires that you pass the compiler a file with a
> template like this one:
>
>
>
>
> https://raw.githubusercontent.com/apache/royale-asjs/develop/examples/royale/TourDeJewel/src/main/resources/jewel-example-index-template.html
>
>
>
> The compiler replaces the ${head} and ${body} tags with the appropriate
> output.
>
>
>
> But we can add the ability to do just about anything. If you want the app
> to search for an id or html element that can be done as well.
>
>
>
> -Alex
>
>
>
> *From: *gkk gb <mo...@comcast.net>
> *Reply-To: *"users@royale.apache.org" <us...@royale.apache.org>, gkk gb <
> modjklist@comcast.net>
> *Date: *Sunday, July 21, 2019 at 12:33 PM
> *To: *"users@royale.apache.org" <us...@royale.apache.org>
> *Subject: *Re: embed Royale web app into existing web page having
> corporate header/footer?
>
>
>
> I think the 2nd method (html:Div) enables one to inject HTML code into an
> existing Royale application, and isn't what I'm after (I'm trying to inject
> a small Royale application into a webpage of a very large existing Drupal
> website).
>
>
>
> I'm still not sure about the first method (htmlTemplate). Would I simply
> modify the Drupal-created index.html code to include the js or html file(s)
> generated by Royale, and then reference that file path in the section of
> the webpage where I want the Royale application to sit? [Yes, the
> Drupal-created code is outside of the Royale application code, and normal
> HTML or js is fine (I would expect HTML or js would be the only options
> supported by Drupal to inject anything created by Royale or anything else).]
>
> On July 21, 2019 at 12:11 PM Carlos Rovira <ca...@apache.org>
> wrote:
>
> htmlTemplate is a compiler directive. In that way you customize the
> index.html that loads you app. There's some tokens that compiler uses to
> inject the js code that will load the royale app, so you can decorate the
> html page. So this is "out" the application code and is normal html ok?
>
>
>
> In the other hand, html:Div is an MXML tag and that's Royale code that you
> can add as always using AS3/MXML in your code. You can combine it with
> states, bindings, and many other things. You can see uses of HTML tags in
> Tour de jewel too. So this way is normal Royale coding that happens
> "inside" the royale application.
>
>
>
>
>
>
>
>
>
> El dom., 21 jul. 2019 a las 20:46, gkk gb (< modjklist@comcast.net>)
> escribió:
>
> Thanks so much Carlos. Just to be sure, both methods below would work to
> insert into an existing website that was not created using Royale, right?
> That is, the Royale part of the web page (which can include view states,
> etc.) can get inserted within a set of tags, such as <htmlTemplate> or
> <html:Div> tags, directly into the Drupal-produced HTML code. Is that
> right?
>
> On July 21, 2019 at 11:17 AM Carlos Rovira < carlosrovira@apache.org>
> wrote:
>
> Hi,
>
>
>
> some options to do that:
>
>
>
> 1.- use htmlTemplate compiler option to add html to the html template that
> loads the app. Check Tour De Jewel. It uses it to setup fonts from google
>
>
>
> for example in Maven pom.xml you can see this line:
>
>
>
> < htmlTemplate >${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html
> </ htmlTemplate >
>
>
>
> 2.- you can use JS API inside royale with HTML.swc adding for example
> <html:Div> tag and more, and then using CSS to make those div change
> visuals
>
>
>
> maybe others could imagine more ways to do that...
>
>
>
> HTH
>
>
>
> Carlos
>
>
>
>
>
>
>
> El dom., 21 jul. 2019 a las 2:17, gkk gb (< modjklist@comcast.net>)
> escribió:
>
> The company I work for has a website that is created/maintained via Drupal
> templates, wherein all the web pages share the same header (navigation) and
> footer on every page.
>
>
>
> If I create a "web app" in Royale, can it integrate inside a pair of <div>
> ... </div> tags or other way so that it just inserts into one part of the
> web page in a self-contained manner? If so, how does that work in practice?
>
>
>
> Or, must I place the web app elsewhere on the website and then use an
> IFrame (I prefer not) to make it sit nicely inside an existing webpage with
> corporate header and footer around it? The Tour de Jewel "View States"
> example gives me hope...
>
>
>
>
> --
>
> Carlos Rovira
>
> http://about.me/carlosrovira
> <https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cbfddb7b5d148492f601b08d70e124312%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636993343964280829&sdata=sv7rSR3Ff8x3G6OZ2giAW9iP%2FPLEYnANatJ3wHncJRk%3D&reserved=0>
>
>
>
>
>
>
> --
>
> Carlos Rovira
>
> http://about.me/carlosrovira
> <https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cbfddb7b5d148492f601b08d70e124312%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636993343964280829&sdata=sv7rSR3Ff8x3G6OZ2giAW9iP%2FPLEYnANatJ3wHncJRk%3D&reserved=0>
>
>
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: embed Royale web app into existing web page having corporate
header/footer?
Posted by Alex Harui <ah...@adobe.com>.
How would you like it to work? Royale is really about encapsulating common patterns in building web apps/sites.
The htmlTemplate options requires that you pass the compiler a file with a template like this one:
https://raw.githubusercontent.com/apache/royale-asjs/develop/examples/royale/TourDeJewel/src/main/resources/jewel-example-index-template.html
The compiler replaces the ${head} and ${body} tags with the appropriate output.
But we can add the ability to do just about anything. If you want the app to search for an id or html element that can be done as well.
-Alex
From: gkk gb <mo...@comcast.net>
Reply-To: "users@royale.apache.org" <us...@royale.apache.org>, gkk gb <mo...@comcast.net>
Date: Sunday, July 21, 2019 at 12:33 PM
To: "users@royale.apache.org" <us...@royale.apache.org>
Subject: Re: embed Royale web app into existing web page having corporate header/footer?
I think the 2nd method (html:Div) enables one to inject HTML code into an existing Royale application, and isn't what I'm after (I'm trying to inject a small Royale application into a webpage of a very large existing Drupal website).
I'm still not sure about the first method (htmlTemplate). Would I simply modify the Drupal-created index.html code to include the js or html file(s) generated by Royale, and then reference that file path in the section of the webpage where I want the Royale application to sit? [Yes, the Drupal-created code is outside of the Royale application code, and normal HTML or js is fine (I would expect HTML or js would be the only options supported by Drupal to inject anything created by Royale or anything else).]
On July 21, 2019 at 12:11 PM Carlos Rovira <ca...@apache.org> wrote:
htmlTemplate is a compiler directive. In that way you customize the index.html that loads you app. There's some tokens that compiler uses to inject the js code that will load the royale app, so you can decorate the html page. So this is "out" the application code and is normal html ok?
In the other hand, html:Div is an MXML tag and that's Royale code that you can add as always using AS3/MXML in your code. You can combine it with states, bindings, and many other things. You can see uses of HTML tags in Tour de jewel too. So this way is normal Royale coding that happens "inside" the royale application.
El dom., 21 jul. 2019 a las 20:46, gkk gb (< modjklist@comcast.net<ma...@comcast.net>>) escribió:
Thanks so much Carlos. Just to be sure, both methods below would work to insert into an existing website that was not created using Royale, right? That is, the Royale part of the web page (which can include view states, etc.) can get inserted within a set of tags, such as <htmlTemplate> or <html:Div> tags, directly into the Drupal-produced HTML code. Is that right?
On July 21, 2019 at 11:17 AM Carlos Rovira < carlosrovira@apache.org<ma...@apache.org>> wrote:
Hi,
some options to do that:
1.- use htmlTemplate compiler option to add html to the html template that loads the app. Check Tour De Jewel. It uses it to setup fonts from google
for example in Maven pom.xml you can see this line:
< htmlTemplate >${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html </ htmlTemplate >
2.- you can use JS API inside royale with HTML.swc adding for example <html:Div> tag and more, and then using CSS to make those div change visuals
maybe others could imagine more ways to do that...
HTH
Carlos
El dom., 21 jul. 2019 a las 2:17, gkk gb (< modjklist@comcast.net<ma...@comcast.net>>) escribió:
The company I work for has a website that is created/maintained via Drupal templates, wherein all the web pages share the same header (navigation) and footer on every page.
If I create a "web app" in Royale, can it integrate inside a pair of <div> ... </div> tags or other way so that it just inserts into one part of the web page in a self-contained manner? If so, how does that work in practice?
Or, must I place the web app elsewhere on the website and then use an IFrame (I prefer not) to make it sit nicely inside an existing webpage with corporate header and footer around it? The Tour de Jewel "View States" example gives me hope...
--
Carlos Rovira
http://about.me/carlosrovira<https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cbfddb7b5d148492f601b08d70e124312%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636993343964280829&sdata=sv7rSR3Ff8x3G6OZ2giAW9iP%2FPLEYnANatJ3wHncJRk%3D&reserved=0>
--
Carlos Rovira
http://about.me/carlosrovira<https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cbfddb7b5d148492f601b08d70e124312%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636993343964280829&sdata=sv7rSR3Ff8x3G6OZ2giAW9iP%2FPLEYnANatJ3wHncJRk%3D&reserved=0>
Re: embed Royale web app into existing web page having corporate
header/footer?
Posted by gkk gb <mo...@comcast.net>.
I think the 2nd method (html:Div) enables one to inject HTML code into an existing Royale application, and isn't what I'm after (I'm trying to inject a small Royale application into a webpage of a very large existing Drupal website).
I'm still not sure about the first method (htmlTemplate). Would I simply modify the Drupal-created index.html code to include the js or html file(s) generated by Royale, and then reference that file path in the section of the webpage where I want the Royale application to sit? [Yes, the Drupal-created code is outside of the Royale application code, and normal HTML or js is fine (I would expect HTML or js would be the only options supported by Drupal to inject anything created by Royale or anything else).]
> On July 21, 2019 at 12:11 PM Carlos Rovira <ca...@apache.org> wrote:
>
> htmlTemplate is a compiler directive. In that way you customize the index.html that loads you app. There's some tokens that compiler uses to inject the js code that will load the royale app, so you can decorate the html page. So this is "out" the application code and is normal html ok?
>
> In the other hand, html:Div is an MXML tag and that's Royale code that you can add as always using AS3/MXML in your code. You can combine it with states, bindings, and many other things. You can see uses of HTML tags in Tour de jewel too. So this way is normal Royale coding that happens "inside" the royale application.
>
>
>
>
> El dom., 21 jul. 2019 a las 20:46, gkk gb (< modjklist@comcast.net mailto:modjklist@comcast.net >) escribió:
>
> > >
> > Thanks so much Carlos. Just to be sure, both methods below would work to insert into an existing website that was not created using Royale, right? That is, the Royale part of the web page (which can include view states, etc.) can get inserted within a set of tags, such as <htmlTemplate> or <html:Div> tags, directly into the Drupal-produced HTML code. Is that right?
> >
> > > > > On July 21, 2019 at 11:17 AM Carlos Rovira < carlosrovira@apache.org mailto:carlosrovira@apache.org > wrote:
> > >
> > > Hi,
> > >
> > > some options to do that:
> > >
> > > 1.- use htmlTemplate compiler option to add html to the html template that loads the app. Check Tour De Jewel. It uses it to setup fonts from google
> > >
> > > for example in Maven pom.xml you can see this line:
> > >
> > > < htmlTemplate >${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html </ htmlTemplate >
> > >
> > > 2.- you can use JS API inside royale with HTML.swc adding for example <html:Div> tag and more, and then using CSS to make those div change visuals
> > >
> > > maybe others could imagine more ways to do that...
> > >
> > > HTH
> > >
> > > Carlos
> > >
> > >
> > >
> > > El dom., 21 jul. 2019 a las 2:17, gkk gb (< modjklist@comcast.net mailto:modjklist@comcast.net >) escribió:
> > >
> > > > > > >
> > > > The company I work for has a website that is created/maintained via Drupal templates, wherein all the web pages share the same header (navigation) and footer on every page.
> > > >
> > > >
> > > > If I create a "web app" in Royale, can it integrate inside a pair of <div> ... </div> tags or other way so that it just inserts into one part of the web page in a self-contained manner? If so, how does that work in practice?
> > > >
> > > >
> > > > Or, must I place the web app elsewhere on the website and then use an IFrame (I prefer not) to make it sit nicely inside an existing webpage with corporate header and footer around it? The Tour de Jewel "View States" example gives me hope...
> > > >
> > > > > > >
> > >
> > > --
> > > Carlos Rovira
> > > http://about.me/carlosrovira
> > >
> > >
> > > > >
> > >
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
Re: embed Royale web app into existing web page having corporate header/footer?
Posted by Carlos Rovira <ca...@apache.org>.
htmlTemplate is a compiler directive. In that way you customize the
index.html that loads you app. There's some tokens that compiler uses to
inject the js code that will load the royale app, so you can decorate the
html page. So this is "out" the application code and is normal html ok?
In the other hand, html:Div is an MXML tag and that's Royale code that you
can add as always using AS3/MXML in your code. You can combine it with
states, bindings, and many other things. You can see uses of HTML tags in
Tour de jewel too. So this way is normal Royale coding that happens
"inside" the royale application.
El dom., 21 jul. 2019 a las 20:46, gkk gb (<mo...@comcast.net>)
escribió:
> Thanks so much Carlos. Just to be sure, both methods below would work to
> insert into an existing website that was not created using Royale, right?
> That is, the Royale part of the web page (which can include view states,
> etc.) can get inserted within a set of tags, such as <htmlTemplate> or
> <html:Div> tags, directly into the Drupal-produced HTML code. Is that
> right?
>
> On July 21, 2019 at 11:17 AM Carlos Rovira <ca...@apache.org>
> wrote:
>
> Hi,
>
> some options to do that:
>
> 1.- use htmlTemplate compiler option to add html to the html template that
> loads the app. Check Tour De Jewel. It uses it to setup fonts from google
>
> for example in Maven pom.xml you can see this line:
>
> < htmlTemplate >${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html
> </ htmlTemplate >
>
> 2.- you can use JS API inside royale with HTML.swc adding for example
> <html:Div> tag and more, and then using CSS to make those div change
> visuals
>
> maybe others could imagine more ways to do that...
>
> HTH
>
> Carlos
>
>
>
> El dom., 21 jul. 2019 a las 2:17, gkk gb (< modjklist@comcast.net>)
> escribió:
>
> The company I work for has a website that is created/maintained via Drupal
> templates, wherein all the web pages share the same header (navigation) and
> footer on every page.
>
>
> If I create a "web app" in Royale, can it integrate inside a pair of <div>
> ... </div> tags or other way so that it just inserts into one part of the
> web page in a self-contained manner? If so, how does that work in practice?
>
>
> Or, must I place the web app elsewhere on the website and then use an
> IFrame (I prefer not) to make it sit nicely inside an existing webpage with
> corporate header and footer around it? The Tour de Jewel "View States"
> example gives me hope...
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: embed Royale web app into existing web page having corporate
header/footer?
Posted by gkk gb <mo...@comcast.net>.
Thanks so much Carlos. Just to be sure, both methods below would work to insert into an existing website that was not created using Royale, right? That is, the Royale part of the web page (which can include view states, etc.) can get inserted within a set of tags, such as <htmlTemplate> or <html:Div> tags, directly into the Drupal-produced HTML code. Is that right?
> On July 21, 2019 at 11:17 AM Carlos Rovira <ca...@apache.org> wrote:
>
> Hi,
>
> some options to do that:
>
> 1.- use htmlTemplate compiler option to add html to the html template that loads the app. Check Tour De Jewel. It uses it to setup fonts from google
>
> for example in Maven pom.xml you can see this line:
>
> < htmlTemplate >${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html </ htmlTemplate >
>
> 2.- you can use JS API inside royale with HTML.swc adding for example <html:Div> tag and more, and then using CSS to make those div change visuals
>
> maybe others could imagine more ways to do that...
>
> HTH
>
> Carlos
>
>
>
> El dom., 21 jul. 2019 a las 2:17, gkk gb (< modjklist@comcast.net mailto:modjklist@comcast.net >) escribió:
>
> > >
> > The company I work for has a website that is created/maintained via Drupal templates, wherein all the web pages share the same header (navigation) and footer on every page.
> >
> >
> > If I create a "web app" in Royale, can it integrate inside a pair of <div> ... </div> tags or other way so that it just inserts into one part of the web page in a self-contained manner? If so, how does that work in practice?
> >
> >
> > Or, must I place the web app elsewhere on the website and then use an IFrame (I prefer not) to make it sit nicely inside an existing webpage with corporate header and footer around it? The Tour de Jewel "View States" example gives me hope...
> >
> > >
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
Re: embed Royale web app into existing web page having corporate header/footer?
Posted by Carlos Rovira <ca...@apache.org>.
Hi,
some options to do that:
1.- use htmlTemplate compiler option to add html to the html template that
loads the app. Check Tour De Jewel. It uses it to setup fonts from google
for example in Maven pom.xml you can see this line:
<htmlTemplate>
${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html
</htmlTemplate>
2.- you can use JS API inside royale with HTML.swc adding for example
<html:Div> tag and more, and then using CSS to make those div change
visuals
maybe others could imagine more ways to do that...
HTH
Carlos
El dom., 21 jul. 2019 a las 2:17, gkk gb (<mo...@comcast.net>) escribió:
> The company I work for has a website that is created/maintained via Drupal
> templates, wherein all the web pages share the same header (navigation) and
> footer on every page.
>
>
> If I create a "web app" in Royale, can it integrate inside a pair of <div>
> ... </div> tags or other way so that it just inserts into one part of the
> web page in a self-contained manner? If so, how does that work in practice?
>
>
> Or, must I place the web app elsewhere on the website and then use an
> IFrame (I prefer not) to make it sit nicely inside an existing webpage with
> corporate header and footer around it? The Tour de Jewel "View States"
> example gives me hope...
>
--
Carlos Rovira
http://about.me/carlosrovira