embed Royale web app into existing web page having corporate header/footer?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

embed Royale web app into existing web page having corporate header/footer?

gkk gb

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... 

Reply | Threaded
Open this post in threaded view
|

Re: embed Royale web app into existing web page having corporate header/footer?

Carlos Rovira-2
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 (<[hidden email]>) 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... 



--
Reply | Threaded
Open this post in threaded view
|

Re: embed Royale web app into existing web page having corporate header/footer?

gkk gb

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 <[hidden email]> 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 (< [hidden email]>) 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... 



--
Reply | Threaded
Open this post in threaded view
|

Re: embed Royale web app into existing web page having corporate header/footer?

Carlos Rovira-2
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 (<[hidden email]>) 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 <[hidden email]> 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 (< [hidden email]>) 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... 



--


--
Reply | Threaded
Open this post in threaded view
|

Re: embed Royale web app into existing web page having corporate header/footer?

gkk gb

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 <[hidden email]> 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 (< [hidden email]>) 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 < [hidden email]> 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 (< [hidden email]>) 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... 



--


--
Reply | Threaded
Open this post in threaded view
|

Re: embed Royale web app into existing web page having corporate header/footer?

Alex Harui-2

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 <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>, gkk gb <[hidden email]>
Date: Sunday, July 21, 2019 at 12:33 PM
To: "[hidden email]" <[hidden email]>
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 <[hidden email]> 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 (< [hidden email]>) 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 < [hidden email]> 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 (< [hidden email]>) 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

 


 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

Re: embed Royale web app into existing web page having corporate header/footer?

Carlos Rovira-2
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


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):




El lun., 22 jul. 2019 a las 8:27, Alex Harui (<[hidden email]>) 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 <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>, gkk gb <[hidden email]>
Date: Sunday, July 21, 2019 at 12:33 PM
To: "[hidden email]" <[hidden email]>
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 <[hidden email]> 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 (< [hidden email]>) 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 < [hidden email]> 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 (< [hidden email]>) 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

 


 

--

Carlos Rovira

 



--