You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2020/07/21 18:14:22 UTC
New Royale App in our official web app and source code avaialble too! :)
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:
https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
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! :)
--
Carlos Rovira
http://about.me/carlosrovira
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Piotr Zarzycki <pi...@gmail.com>.
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 <ca...@apache.org> 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:
> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>
> 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! :)
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: Adding Royale-html2pdf to Royale (was Re: New Royale App in our
official web app and source code avaialble too! :))
Posted by Carlos Rovira <ca...@apache.org>.
Hi Josh,
that was one of my drivers to make that project on codeoscopic repo and not
in royale. But after Piotrs suggestion that made me think I could be
wrong...
El mié., 22 jul. 2020 a las 18:15, Josh Tynjala (<jo...@bowlerhat.dev>)
escribió:
> > This could be a new repo for Royale that hosts that library and other
> extra things that are not so core but could be needed in some apps.
>
> I think that when anyone creates a library (or externs) for Royale, we
> should encourage the creation of external repos that aren't managed by
> Apache. Not everything needs to be bundled with Royale. Even committers/PMC
> should consider this. In my opinion, something like html2pdf feels like one
> of those things that should be managed externally.
>
> I'll add that one sign of a healthy ecosystem for a framework/SDK is a
> variety of external community projects. Royale doesn't have enough of
> those, I think.
>
> --
> Josh Tynjala
> Bowler Hat LLC <https://bowlerhat.dev>
>
>
> On Wed, Jul 22, 2020 at 3:33 AM Carlos Rovira <ca...@apache.org>
> wrote:
>
> > Hi,
> >
> > Piotr talked about moving the html2pdf lib I created and to some external
> > repo.
> >
> > This could be a new repo for Royale that hosts that library and other
> extra
> > things that are not so core but could be needed in some apps.
> > I think we could even segment and take this opportunity to clean a bit of
> > what we have, since I think we have many experiments that seem to not
> reach
> > a final usable point (i.e: createjs or flat), but have a cost currently
> in
> > our daily builds. Only people that need this one will need to build it.
> >
> > For example some segmentation could be:
> >
> > * extern libraries (html2pdf one will fall into this category, if create
> an
> > ECharts lib, that could be done here,...I expect this one will most
> needed
> > for royale developers)
> > * new royale libs that are create from scratch, but doesn't fit into some
> > core functionality (i.e: MDL UI Set)
> > * experiments (we could move here unfinished libs like createjs or flat
> > from asjs, so asjs one will benefit from building faster by moving things
> > not used to that one)
> >
> > I must say that probably I don't have the time to work on that now,
> since I
> > have other tasks for Royale in the near horizon, but we can see if this
> > makes sense and even see if others can take over.
> >
> > Thoughts?
> >
> >
> >
> > El mié., 22 jul. 2020 a las 11:48, Piotr Zarzycki (<
> > piotrzarzycki21@gmail.com>) escribió:
> >
> > > 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 <ca...@apache.org>
> > > napisał(a):
> > >
> > >> Thanks folks :)
> > >>
> > >> @Piotr Zarzycki <pi...@gmail.com> 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.
> > >>
> > >> [1] https://ekoopmans.github.io/html2pdf.js/#license
> > >>
> > >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Adding Royale-html2pdf to Royale (was Re: New Royale App in our
official web app and source code avaialble too! :))
Posted by Josh Tynjala <jo...@bowlerhat.dev>.
> This could be a new repo for Royale that hosts that library and other
extra things that are not so core but could be needed in some apps.
I think that when anyone creates a library (or externs) for Royale, we
should encourage the creation of external repos that aren't managed by
Apache. Not everything needs to be bundled with Royale. Even committers/PMC
should consider this. In my opinion, something like html2pdf feels like one
of those things that should be managed externally.
I'll add that one sign of a healthy ecosystem for a framework/SDK is a
variety of external community projects. Royale doesn't have enough of
those, I think.
--
Josh Tynjala
Bowler Hat LLC <https://bowlerhat.dev>
On Wed, Jul 22, 2020 at 3:33 AM Carlos Rovira <ca...@apache.org>
wrote:
> Hi,
>
> Piotr talked about moving the html2pdf lib I created and to some external
> repo.
>
> This could be a new repo for Royale that hosts that library and other extra
> things that are not so core but could be needed in some apps.
> I think we could even segment and take this opportunity to clean a bit of
> what we have, since I think we have many experiments that seem to not reach
> a final usable point (i.e: createjs or flat), but have a cost currently in
> our daily builds. Only people that need this one will need to build it.
>
> For example some segmentation could be:
>
> * extern libraries (html2pdf one will fall into this category, if create an
> ECharts lib, that could be done here,...I expect this one will most needed
> for royale developers)
> * new royale libs that are create from scratch, but doesn't fit into some
> core functionality (i.e: MDL UI Set)
> * experiments (we could move here unfinished libs like createjs or flat
> from asjs, so asjs one will benefit from building faster by moving things
> not used to that one)
>
> I must say that probably I don't have the time to work on that now, since I
> have other tasks for Royale in the near horizon, but we can see if this
> makes sense and even see if others can take over.
>
> Thoughts?
>
>
>
> El mié., 22 jul. 2020 a las 11:48, Piotr Zarzycki (<
> piotrzarzycki21@gmail.com>) escribió:
>
> > 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 <ca...@apache.org>
> > napisał(a):
> >
> >> Thanks folks :)
> >>
> >> @Piotr Zarzycki <pi...@gmail.com> 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.
> >>
> >> [1] https://ekoopmans.github.io/html2pdf.js/#license
> >>
> >
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Adding Royale-html2pdf to Royale (was Re: New Royale App in our
official web app and source code avaialble too! :))
Posted by Carlos Rovira <ca...@apache.org>.
Hi,
Piotr talked about moving the html2pdf lib I created and to some external
repo.
This could be a new repo for Royale that hosts that library and other extra
things that are not so core but could be needed in some apps.
I think we could even segment and take this opportunity to clean a bit of
what we have, since I think we have many experiments that seem to not reach
a final usable point (i.e: createjs or flat), but have a cost currently in
our daily builds. Only people that need this one will need to build it.
For example some segmentation could be:
* extern libraries (html2pdf one will fall into this category, if create an
ECharts lib, that could be done here,...I expect this one will most needed
for royale developers)
* new royale libs that are create from scratch, but doesn't fit into some
core functionality (i.e: MDL UI Set)
* experiments (we could move here unfinished libs like createjs or flat
from asjs, so asjs one will benefit from building faster by moving things
not used to that one)
I must say that probably I don't have the time to work on that now, since I
have other tasks for Royale in the near horizon, but we can see if this
makes sense and even see if others can take over.
Thoughts?
El mié., 22 jul. 2020 a las 11:48, Piotr Zarzycki (<
piotrzarzycki21@gmail.com>) escribió:
> 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 <ca...@apache.org>
> napisał(a):
>
>> Thanks folks :)
>>
>> @Piotr Zarzycki <pi...@gmail.com> 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.
>>
>> [1] https://ekoopmans.github.io/html2pdf.js/#license
>>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Piotr Zarzycki <pi...@gmail.com>.
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 <ca...@apache.org> napisał(a):
> Thanks folks :)
>
> @Piotr Zarzycki <pi...@gmail.com> 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.
>
> [1] https://ekoopmans.github.io/html2pdf.js/#license
>
> El mié., 22 jul. 2020 a las 10:04, Alina Kazi (<al...@apache.org>)
> escribió:
>
>> Hi Carlos,
>>
>> Great work.
>> Thank you for sharing with us.
>>
>> Alina Kazi
>>
>>
>> On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <ca...@apache.org>
>> 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:
>>> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
>>> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>>>
>>> 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! :)
>>>
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>>>
>>>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Piotr Zarzycki <pi...@gmail.com>.
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 <ca...@apache.org> napisał(a):
> Thanks folks :)
>
> @Piotr Zarzycki <pi...@gmail.com> 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.
>
> [1] https://ekoopmans.github.io/html2pdf.js/#license
>
> El mié., 22 jul. 2020 a las 10:04, Alina Kazi (<al...@apache.org>)
> escribió:
>
>> Hi Carlos,
>>
>> Great work.
>> Thank you for sharing with us.
>>
>> Alina Kazi
>>
>>
>> On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <ca...@apache.org>
>> 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:
>>> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
>>> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>>>
>>> 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! :)
>>>
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>>>
>>>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Carlos Rovira <ca...@apache.org>.
Thanks folks :)
@Piotr Zarzycki <pi...@gmail.com> 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.
[1] https://ekoopmans.github.io/html2pdf.js/#license
El mié., 22 jul. 2020 a las 10:04, Alina Kazi (<al...@apache.org>)
escribió:
> Hi Carlos,
>
> Great work.
> Thank you for sharing with us.
>
> Alina Kazi
>
>
> On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <ca...@apache.org>
> 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:
>> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
>> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>>
>> 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! :)
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
--
Carlos Rovira
http://about.me/carlosrovira
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Carlos Rovira <ca...@apache.org>.
Thanks folks :)
@Piotr Zarzycki <pi...@gmail.com> 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.
[1] https://ekoopmans.github.io/html2pdf.js/#license
El mié., 22 jul. 2020 a las 10:04, Alina Kazi (<al...@apache.org>)
escribió:
> Hi Carlos,
>
> Great work.
> Thank you for sharing with us.
>
> Alina Kazi
>
>
> On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <ca...@apache.org>
> 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:
>> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
>> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>>
>> 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! :)
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
--
Carlos Rovira
http://about.me/carlosrovira
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Alina Kazi <al...@apache.org>.
Hi Carlos,
Great work.
Thank you for sharing with us.
Alina Kazi
On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <ca...@apache.org>
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:
> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>
> 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! :)
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Piotr Zarzycki <pi...@gmail.com>.
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 <ca...@apache.org> 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:
> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>
> 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! :)
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: New Royale App in our official web app and source code avaialble
too! :)
Posted by Alina Kazi <al...@apache.org>.
Hi Carlos,
Great work.
Thank you for sharing with us.
Alina Kazi
On Tue, 21 Jul 2020, 11:26 pm Carlos Rovira, <ca...@apache.org>
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:
> https://twitter.com/Avant2Multi/status/1285511117712826369?s=20
> https://www.linkedin.com/feed/update/urn:li:activity:6691276788431130625
>
> 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! :)
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>