New Royale App in our official web app and source code avaialble too! :)

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

New Royale App in our official web app and source code avaialble too! :)

Carlos Rovira-2
Hi folks,

I'm happy to announce a mini app I was working last month for our Avant2 website at Codeoscopic.

It's a widget app that is embedded in our Wordpress based website. The purpose was to upgrade the old visualization we had, since our Avant2 product integrates lots of insurance products from many insurance companies. So the old one was very bloated and cumbersome since it was just composed of static galleries with images of company logos.

The new Royale version shows 3 views: One for products, that shows all companies that have that product available in the tool. One for companies, that shows all products available for them. And finally a grid or table visualization with products on X axis and companies on Y axis. There are some particularities about complementary products and more, but I don't think it is interesting for you :).

This was even posted in our Companies social networks. To show some:

Technically: I added some CPT (Custom Post Types) to our Wordpress backend to create the data structures and its relations. Since we integrate more products and companies each month, people in our staff need to add it vía WP admin console to make it easy for them. Then this data is exported via JSON WP Rest API and the Royale widget consumes it vía mx:HTTPService.

The widget uses Jewel as UI set (of course ;)), with some theme customization to make it close to avant2 website look and feel. I use Crux as well to handle event handling, IoC, and service (HTTPService) integration.

The widget shows the new Responsive additions I added lately, so if you access via Mobile, you should see how size for images and fonts decrease to make all fit nicely in your mobile device. Then for Tablet and Desktop images and fonts increase size to get the correct size.

More things! I added a new "extern" library called "royale-html2pdf" that uses the html2pdf js library and exposes it to Royale. The library is used to print the table of products in a PDF on the fly directly from the dynamically generated HTML. This was particularly challenging due to all the security things browsers do today to protect content. So getting the images to show in PDF was a bit challenging even with that library in place. I had to try many, many things to get it finally work.

Another thing worth mentioning is the use of "iFrameResizer", that makes the widget behave as if it's part of the page. I started applying scrolls to lists and table components inside the widget app, but that was not the best experience. The problem with iframes is that it is difficult to make it adapt to the host page as height changes, but this JS script does all the magic. So you can see how as you change views in the app, you never get scrollbars inside the iframe, and the rest of the page adapts correctly. The scrollbars are always in the host page. So the experience is more "natural" and the iframe is sized to the app content :).

You can check this app live here: https://avant2.es/productos-y-companias/

Also I want the source code be available to all that wants to check it and learn from it: https://github.com/codeoscopic/avant2-website

Finally I added the "Powered by" Royale logo at the end of the app, so people can know that was done with our beloved Royale and is in an official company's website.  ;-)

Also hope to add it to the Royale Showcase Page this summer (and will ask you for the info required to add more apps of course, along our TodoMVC, TDJ, and more!).

I still need to continue improving it with some things in the following days, since I detected some issues and as well I think others can be improved. For example I want to add BrowserRouter to it since I think it will be a very good example for it and will complete the example event better.

Anyway, today we decided to publish it, since it is in a sufficient good state now.

Hope you like it! :)

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

Re: New Royale App in our official web app and source code avaialble too! :)

Piotr Zarzycki
Hi Carlos,

App looks ace! Congrats! :) 

Maybe you could expose that PDF lib to external repository - it would be awesome :)

Thanks,
Piotr

wt., 21 lip 2020 o 20:26 Carlos Rovira <[hidden email]> napisał(a):
Hi folks,

I'm happy to announce a mini app I was working last month for our Avant2 website at Codeoscopic.

It's a widget app that is embedded in our Wordpress based website. The purpose was to upgrade the old visualization we had, since our Avant2 product integrates lots of insurance products from many insurance companies. So the old one was very bloated and cumbersome since it was just composed of static galleries with images of company logos.

The new Royale version shows 3 views: One for products, that shows all companies that have that product available in the tool. One for companies, that shows all products available for them. And finally a grid or table visualization with products on X axis and companies on Y axis. There are some particularities about complementary products and more, but I don't think it is interesting for you :).

This was even posted in our Companies social networks. To show some:

Technically: I added some CPT (Custom Post Types) to our Wordpress backend to create the data structures and its relations. Since we integrate more products and companies each month, people in our staff need to add it vía WP admin console to make it easy for them. Then this data is exported via JSON WP Rest API and the Royale widget consumes it vía mx:HTTPService.

The widget uses Jewel as UI set (of course ;)), with some theme customization to make it close to avant2 website look and feel. I use Crux as well to handle event handling, IoC, and service (HTTPService) integration.

The widget shows the new Responsive additions I added lately, so if you access via Mobile, you should see how size for images and fonts decrease to make all fit nicely in your mobile device. Then for Tablet and Desktop images and fonts increase size to get the correct size.

More things! I added a new "extern" library called "royale-html2pdf" that uses the html2pdf js library and exposes it to Royale. The library is used to print the table of products in a PDF on the fly directly from the dynamically generated HTML. This was particularly challenging due to all the security things browsers do today to protect content. So getting the images to show in PDF was a bit challenging even with that library in place. I had to try many, many things to get it finally work.

Another thing worth mentioning is the use of "iFrameResizer", that makes the widget behave as if it's part of the page. I started applying scrolls to lists and table components inside the widget app, but that was not the best experience. The problem with iframes is that it is difficult to make it adapt to the host page as height changes, but this JS script does all the magic. So you can see how as you change views in the app, you never get scrollbars inside the iframe, and the rest of the page adapts correctly. The scrollbars are always in the host page. So the experience is more "natural" and the iframe is sized to the app content :).

You can check this app live here: https://avant2.es/productos-y-companias/

Also I want the source code be available to all that wants to check it and learn from it: https://github.com/codeoscopic/avant2-website

Finally I added the "Powered by" Royale logo at the end of the app, so people can know that was done with our beloved Royale and is in an official company's website.  ;-)

Also hope to add it to the Royale Showcase Page this summer (and will ask you for the info required to add more apps of course, along our TodoMVC, TDJ, and more!).

I still need to continue improving it with some things in the following days, since I detected some issues and as well I think others can be improved. For example I want to add BrowserRouter to it since I think it will be a very good example for it and will complete the example event better.

Anyway, today we decided to publish it, since it is in a sufficient good state now.

Hope you like it! :)

--


--

Piotr Zarzycki 

Patreon: https://www.patreon.com/piotrzarzycki

Reply | Threaded
Open this post in threaded view
|

Re: New Royale App in our official web app and source code avaialble too! :)

Alina Kazi-3
In reply to this post by Carlos Rovira-2
Hi Carlos,

Great work.
Thank you for sharing with us.

Alina Kazi


On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <[hidden email]> wrote:
Hi folks,

I'm happy to announce a mini app I was working last month for our Avant2 website at Codeoscopic.

It's a widget app that is embedded in our Wordpress based website. The purpose was to upgrade the old visualization we had, since our Avant2 product integrates lots of insurance products from many insurance companies. So the old one was very bloated and cumbersome since it was just composed of static galleries with images of company logos.

The new Royale version shows 3 views: One for products, that shows all companies that have that product available in the tool. One for companies, that shows all products available for them. And finally a grid or table visualization with products on X axis and companies on Y axis. There are some particularities about complementary products and more, but I don't think it is interesting for you :).

This was even posted in our Companies social networks. To show some:

Technically: I added some CPT (Custom Post Types) to our Wordpress backend to create the data structures and its relations. Since we integrate more products and companies each month, people in our staff need to add it vía WP admin console to make it easy for them. Then this data is exported via JSON WP Rest API and the Royale widget consumes it vía mx:HTTPService.

The widget uses Jewel as UI set (of course ;)), with some theme customization to make it close to avant2 website look and feel. I use Crux as well to handle event handling, IoC, and service (HTTPService) integration.

The widget shows the new Responsive additions I added lately, so if you access via Mobile, you should see how size for images and fonts decrease to make all fit nicely in your mobile device. Then for Tablet and Desktop images and fonts increase size to get the correct size.

More things! I added a new "extern" library called "royale-html2pdf" that uses the html2pdf js library and exposes it to Royale. The library is used to print the table of products in a PDF on the fly directly from the dynamically generated HTML. This was particularly challenging due to all the security things browsers do today to protect content. So getting the images to show in PDF was a bit challenging even with that library in place. I had to try many, many things to get it finally work.

Another thing worth mentioning is the use of "iFrameResizer", that makes the widget behave as if it's part of the page. I started applying scrolls to lists and table components inside the widget app, but that was not the best experience. The problem with iframes is that it is difficult to make it adapt to the host page as height changes, but this JS script does all the magic. So you can see how as you change views in the app, you never get scrollbars inside the iframe, and the rest of the page adapts correctly. The scrollbars are always in the host page. So the experience is more "natural" and the iframe is sized to the app content :).

You can check this app live here: https://avant2.es/productos-y-companias/

Also I want the source code be available to all that wants to check it and learn from it: https://github.com/codeoscopic/avant2-website

Finally I added the "Powered by" Royale logo at the end of the app, so people can know that was done with our beloved Royale and is in an official company's website.  ;-)

Also hope to add it to the Royale Showcase Page this summer (and will ask you for the info required to add more apps of course, along our TodoMVC, TDJ, and more!).

I still need to continue improving it with some things in the following days, since I detected some issues and as well I think others can be improved. For example I want to add BrowserRouter to it since I think it will be a very good example for it and will complete the example event better.

Anyway, today we decided to publish it, since it is in a sufficient good state now.

Hope you like it! :)

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

Re: New Royale App in our official web app and source code avaialble too! :)

Carlos Rovira-2
Thanks folks :)

[hidden email] the library is opened in the Codeoscopic repository, so it's available for all. But I'm open to moving to another place. Even we can host here in Royale since html2pdf is MIT. Or host royale-extras, if we consider it is not core but an "extra" that could be needed. So we can create a directory of external libraries that royale users can need at some point. The problem I see in royale-extras is that maybe will need some maven setup in order to release libs like this.


El mié., 22 jul. 2020 a las 10:04, Alina Kazi (<[hidden email]>) escribió:
Hi Carlos,

Great work.
Thank you for sharing with us.

Alina Kazi


On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <[hidden email]> wrote:
Hi folks,

I'm happy to announce a mini app I was working last month for our Avant2 website at Codeoscopic.

It's a widget app that is embedded in our Wordpress based website. The purpose was to upgrade the old visualization we had, since our Avant2 product integrates lots of insurance products from many insurance companies. So the old one was very bloated and cumbersome since it was just composed of static galleries with images of company logos.

The new Royale version shows 3 views: One for products, that shows all companies that have that product available in the tool. One for companies, that shows all products available for them. And finally a grid or table visualization with products on X axis and companies on Y axis. There are some particularities about complementary products and more, but I don't think it is interesting for you :).

This was even posted in our Companies social networks. To show some:

Technically: I added some CPT (Custom Post Types) to our Wordpress backend to create the data structures and its relations. Since we integrate more products and companies each month, people in our staff need to add it vía WP admin console to make it easy for them. Then this data is exported via JSON WP Rest API and the Royale widget consumes it vía mx:HTTPService.

The widget uses Jewel as UI set (of course ;)), with some theme customization to make it close to avant2 website look and feel. I use Crux as well to handle event handling, IoC, and service (HTTPService) integration.

The widget shows the new Responsive additions I added lately, so if you access via Mobile, you should see how size for images and fonts decrease to make all fit nicely in your mobile device. Then for Tablet and Desktop images and fonts increase size to get the correct size.

More things! I added a new "extern" library called "royale-html2pdf" that uses the html2pdf js library and exposes it to Royale. The library is used to print the table of products in a PDF on the fly directly from the dynamically generated HTML. This was particularly challenging due to all the security things browsers do today to protect content. So getting the images to show in PDF was a bit challenging even with that library in place. I had to try many, many things to get it finally work.

Another thing worth mentioning is the use of "iFrameResizer", that makes the widget behave as if it's part of the page. I started applying scrolls to lists and table components inside the widget app, but that was not the best experience. The problem with iframes is that it is difficult to make it adapt to the host page as height changes, but this JS script does all the magic. So you can see how as you change views in the app, you never get scrollbars inside the iframe, and the rest of the page adapts correctly. The scrollbars are always in the host page. So the experience is more "natural" and the iframe is sized to the app content :).

You can check this app live here: https://avant2.es/productos-y-companias/

Also I want the source code be available to all that wants to check it and learn from it: https://github.com/codeoscopic/avant2-website

Finally I added the "Powered by" Royale logo at the end of the app, so people can know that was done with our beloved Royale and is in an official company's website.  ;-)

Also hope to add it to the Royale Showcase Page this summer (and will ask you for the info required to add more apps of course, along our TodoMVC, TDJ, and more!).

I still need to continue improving it with some things in the following days, since I detected some issues and as well I think others can be improved. For example I want to add BrowserRouter to it since I think it will be a very good example for it and will complete the example event better.

Anyway, today we decided to publish it, since it is in a sufficient good state now.

Hope you like it! :)

--


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

Re: New Royale App in our official web app and source code avaialble too! :)

Piotr Zarzycki
Yeah it is, but I need to checkout your whole website in order to get that library. It would be great to checkout only that and have it. - That was my point. ;) 

śr., 22 lip 2020 o 11:39 Carlos Rovira <[hidden email]> napisał(a):
Thanks folks :)

[hidden email] the library is opened in the Codeoscopic repository, so it's available for all. But I'm open to moving to another place. Even we can host here in Royale since html2pdf is MIT. Or host royale-extras, if we consider it is not core but an "extra" that could be needed. So we can create a directory of external libraries that royale users can need at some point. The problem I see in royale-extras is that maybe will need some maven setup in order to release libs like this.


El mié., 22 jul. 2020 a las 10:04, Alina Kazi (<[hidden email]>) escribió:
Hi Carlos,

Great work.
Thank you for sharing with us.

Alina Kazi


On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <[hidden email]> wrote:
Hi folks,

I'm happy to announce a mini app I was working last month for our Avant2 website at Codeoscopic.

It's a widget app that is embedded in our Wordpress based website. The purpose was to upgrade the old visualization we had, since our Avant2 product integrates lots of insurance products from many insurance companies. So the old one was very bloated and cumbersome since it was just composed of static galleries with images of company logos.

The new Royale version shows 3 views: One for products, that shows all companies that have that product available in the tool. One for companies, that shows all products available for them. And finally a grid or table visualization with products on X axis and companies on Y axis. There are some particularities about complementary products and more, but I don't think it is interesting for you :).

This was even posted in our Companies social networks. To show some:

Technically: I added some CPT (Custom Post Types) to our Wordpress backend to create the data structures and its relations. Since we integrate more products and companies each month, people in our staff need to add it vía WP admin console to make it easy for them. Then this data is exported via JSON WP Rest API and the Royale widget consumes it vía mx:HTTPService.

The widget uses Jewel as UI set (of course ;)), with some theme customization to make it close to avant2 website look and feel. I use Crux as well to handle event handling, IoC, and service (HTTPService) integration.

The widget shows the new Responsive additions I added lately, so if you access via Mobile, you should see how size for images and fonts decrease to make all fit nicely in your mobile device. Then for Tablet and Desktop images and fonts increase size to get the correct size.

More things! I added a new "extern" library called "royale-html2pdf" that uses the html2pdf js library and exposes it to Royale. The library is used to print the table of products in a PDF on the fly directly from the dynamically generated HTML. This was particularly challenging due to all the security things browsers do today to protect content. So getting the images to show in PDF was a bit challenging even with that library in place. I had to try many, many things to get it finally work.

Another thing worth mentioning is the use of "iFrameResizer", that makes the widget behave as if it's part of the page. I started applying scrolls to lists and table components inside the widget app, but that was not the best experience. The problem with iframes is that it is difficult to make it adapt to the host page as height changes, but this JS script does all the magic. So you can see how as you change views in the app, you never get scrollbars inside the iframe, and the rest of the page adapts correctly. The scrollbars are always in the host page. So the experience is more "natural" and the iframe is sized to the app content :).

You can check this app live here: https://avant2.es/productos-y-companias/

Also I want the source code be available to all that wants to check it and learn from it: https://github.com/codeoscopic/avant2-website

Finally I added the "Powered by" Royale logo at the end of the app, so people can know that was done with our beloved Royale and is in an official company's website.  ;-)

Also hope to add it to the Royale Showcase Page this summer (and will ask you for the info required to add more apps of course, along our TodoMVC, TDJ, and more!).

I still need to continue improving it with some things in the following days, since I detected some issues and as well I think others can be improved. For example I want to add BrowserRouter to it since I think it will be a very good example for it and will complete the example event better.

Anyway, today we decided to publish it, since it is in a sufficient good state now.

Hope you like it! :)

--


--


--

Piotr Zarzycki 

Patreon: https://www.patreon.com/piotrzarzycki