You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Maria Jose Esteve <mj...@iest.com> on 2022/03/17 11:27:27 UTC

Implementing JS renderer from Royale

Hi, I'm asking for guidance...
Lately I'm actively using several JS libraries in Royale and I find myself with a recurring need: custom renderers.
Depending on how the library is made there is the possibility to define the view of the component or some part of it.
I would like to be able to define "the renderer" in Royale, get its DOM and pass it to the library/component?

Am I crazy or is this feasible to do with Royale?
If it is possible, any example that I can see to guide me?

Thx.

Hiedra

Re: Implementing JS renderer from Royale

Posted by Alex Harui <ah...@adobe.com.INVALID>.
AFAIK, there is no current "Royale way" of generating some innerHTML to plug into some external library.   However, the whole point of Royale is to improve developer productivity for common patterns.  New patterns become popular every day and it is "just" a matter of identifying what parts of those patterns can be made easier via declarative syntax (MXML) or strong typing (AS) and updating Royale accordingly.  The same is true for a new pattern such as Progressive-Web-Apps (PWAs) and you'll see these same thoughts posted on that thread today as well.

And while the Basic and especially MXRoyale and SparkRoyale libraries are intended to emulate Flex patterns.  There is no requirement for all SWCs to emulate Flex patterns.  New patterns might require more compiler changes, but are possible.

Also, IMO, there are 3 "levels" of Royale integration for external libraries:  Full, partial, and none.  Full integration generally involves wrapping external in AS classes.  Most of the current SWCs do that.  An AS Class is instantiated and its APIs do things to some JS library.  That generally provides the most developer productivity because the library supports MXML (no constructor parameters, more get/set APIs instead of functions/methods) and AS (strong typing).  However, that means more code runs since you are essentially wrapping a library in a library.

Partial integration involves creating a few AS classes to talk to the JS library.  I think the ACE SWC does is an example of partial integration.

And "none" means that you are writing code that pretty much calls the typedefs directly.

As you can hopefully see, there is a tradeoff between how much work you put into wrapping up external libraries and how easy it is to then write code against it.  If you only need to do something once, then it might be easier to just hack something to talk to the typedefs.

From that perspective, it should be possible to render some MXML-based item renderer off-screen or with visible=false and grab the resulting innerHTML and hand it over to the library.  But if you want to do more sophisticated integration, then we should look at the library API more closely and discuss best ways to wrap it.  And a simple JS (no Royale) example would be a good starting point for that.

HTH,
-Alex

On 3/18/22, 8:49 AM, "Maria Jose Esteve" <mj...@iest.com> wrote:

    I wouldn't know how to give you an example Yishay, I haven't tried to create a "view" component in JS because I don't know where to start. 
    Let's adjourn this discussion. I don't want you to waste your time when I don't even know how to explain what I need.

    InspireTree is distributed in 2 separate packages: the main API, Tree, and a DOM rendering engine, TreeDOM (in my other post I called it "view") so that users, who prefer, can implement rendering in the framework of their choice (Angular, React, Vue,.... ROYALE), well, I want to do this "implement a custom rendering in Royale" BUT using the existing TreeDOM JS why modify the existing renderer and not create a new one? Because creating a new TreeDOMRoyale would cost me a lot more work than creating a new "Jewel Tree" control, although I may be wrong.

    Thanks Yishay, sorry for wasting your time.

    Hiedra

    -----Mensaje original-----
    De: Yishay Weiss <yi...@hotmail.com> 
    Enviado el: viernes, 18 de marzo de 2022 7:12
    Para: dev@royale.apache.org
    Asunto: RE: Implementing JS renderer from Royale

    Maybe if you gave an example of standard JS way versus what you are hoping to do in Royale I could comment. I'm still not clear what an InspireTree view is and how it would be used in Royale.

    From: Maria Jose Esteve<ma...@iest.com>
    Sent: Thursday, March 17, 2022 4:31 PM
    To: dev@royale.apache.org<ma...@royale.apache.org>
    Subject: RE: Implementing JS renderer from Royale

    Hi Yishay, yes of course,....
    Right now I have two cases:
    - DatePicker, from Mobiscroll
    - InspireTree JS

    In the DatePicker I have to customize the calendar header (our DateChooser) to put a series of options (Labels, buttons,..).
    This component allows me to customize the content of this header "DIV", as a HTML/DOM string. ("<div classname='class1'><a .... ") In this case, I can't do big things, because I have to stick to its component layout and CSS classes.

    With InspireTree I could create "a view", JS class/component, and connect it to the main tree that would act as a controller. (Similar to our views) In this case, it had occurred to me that, "maybe" I could use referencing a myclass class, as3, after being transpiled to JS; Call me crazy!!!!

    Hiedra

    -----Mensaje original-----
    De: Yishay Weiss <yi...@hotmail.com> Enviado el: jueves, 17 de marzo de 2022 13:54
    Para: dev@royale.apache.org
    Asunto: RE: Implementing JS renderer from Royale

    Do you have a concrete example?

    From: Maria Jose Esteve<ma...@iest.com>
    Sent: Thursday, March 17, 2022 1:27 PM
    To: dev@royale.apache.org<ma...@royale.apache.org>
    Subject: Implementing JS renderer from Royale

    Hi, I'm asking for guidance...
    Lately I'm actively using several JS libraries in Royale and I find myself with a recurring need: custom renderers.
    Depending on how the library is made there is the possibility to define the view of the component or some part of it.
    I would like to be able to define "the renderer" in Royale, get its DOM and pass it to the library/component?

    Am I crazy or is this feasible to do with Royale?
    If it is possible, any example that I can see to guide me?

    Thx.

    Hiedra

RE: Implementing JS renderer from Royale

Posted by Maria Jose Esteve <mj...@iest.com>.
I wouldn't know how to give you an example Yishay, I haven't tried to create a "view" component in JS because I don't know where to start. 
Let's adjourn this discussion. I don't want you to waste your time when I don't even know how to explain what I need.

InspireTree is distributed in 2 separate packages: the main API, Tree, and a DOM rendering engine, TreeDOM (in my other post I called it "view") so that users, who prefer, can implement rendering in the framework of their choice (Angular, React, Vue,.... ROYALE), well, I want to do this "implement a custom rendering in Royale" BUT using the existing TreeDOM JS why modify the existing renderer and not create a new one? Because creating a new TreeDOMRoyale would cost me a lot more work than creating a new "Jewel Tree" control, although I may be wrong.

Thanks Yishay, sorry for wasting your time.

Hiedra

-----Mensaje original-----
De: Yishay Weiss <yi...@hotmail.com> 
Enviado el: viernes, 18 de marzo de 2022 7:12
Para: dev@royale.apache.org
Asunto: RE: Implementing JS renderer from Royale

Maybe if you gave an example of standard JS way versus what you are hoping to do in Royale I could comment. I'm still not clear what an InspireTree view is and how it would be used in Royale.

From: Maria Jose Esteve<ma...@iest.com>
Sent: Thursday, March 17, 2022 4:31 PM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: RE: Implementing JS renderer from Royale

Hi Yishay, yes of course,....
Right now I have two cases:
- DatePicker, from Mobiscroll
- InspireTree JS

In the DatePicker I have to customize the calendar header (our DateChooser) to put a series of options (Labels, buttons,..).
This component allows me to customize the content of this header "DIV", as a HTML/DOM string. ("<div classname='class1'><a .... ") In this case, I can't do big things, because I have to stick to its component layout and CSS classes.

With InspireTree I could create "a view", JS class/component, and connect it to the main tree that would act as a controller. (Similar to our views) In this case, it had occurred to me that, "maybe" I could use referencing a myclass class, as3, after being transpiled to JS; Call me crazy!!!!

Hiedra

-----Mensaje original-----
De: Yishay Weiss <yi...@hotmail.com> Enviado el: jueves, 17 de marzo de 2022 13:54
Para: dev@royale.apache.org
Asunto: RE: Implementing JS renderer from Royale

Do you have a concrete example?

From: Maria Jose Esteve<ma...@iest.com>
Sent: Thursday, March 17, 2022 1:27 PM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Implementing JS renderer from Royale

Hi, I'm asking for guidance...
Lately I'm actively using several JS libraries in Royale and I find myself with a recurring need: custom renderers.
Depending on how the library is made there is the possibility to define the view of the component or some part of it.
I would like to be able to define "the renderer" in Royale, get its DOM and pass it to the library/component?

Am I crazy or is this feasible to do with Royale?
If it is possible, any example that I can see to guide me?

Thx.

Hiedra

RE: Implementing JS renderer from Royale

Posted by Yishay Weiss <yi...@hotmail.com>.
Maybe if you gave an example of standard JS way versus what you are hoping to do in Royale I could comment. I’m still not clear what an InspireTree view is and how it would be used in Royale.

From: Maria Jose Esteve<ma...@iest.com>
Sent: Thursday, March 17, 2022 4:31 PM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: RE: Implementing JS renderer from Royale

Hi Yishay, yes of course,....
Right now I have two cases:
- DatePicker, from Mobiscroll
- InspireTree JS

In the DatePicker I have to customize the calendar header (our DateChooser) to put a series of options (Labels, buttons,..).
This component allows me to customize the content of this header "DIV", as a HTML/DOM string. ("<div classname='class1'><a .... ")
In this case, I can't do big things, because I have to stick to its component layout and CSS classes.

With InspireTree I could create "a view", JS class/component, and connect it to the main tree that would act as a controller. (Similar to our views)
In this case, it had occurred to me that, "maybe" I could use referencing a myclass class, as3, after being transpiled to JS; Call me crazy!!!!

Hiedra

-----Mensaje original-----
De: Yishay Weiss <yi...@hotmail.com>
Enviado el: jueves, 17 de marzo de 2022 13:54
Para: dev@royale.apache.org
Asunto: RE: Implementing JS renderer from Royale

Do you have a concrete example?

From: Maria Jose Esteve<ma...@iest.com>
Sent: Thursday, March 17, 2022 1:27 PM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Implementing JS renderer from Royale

Hi, I'm asking for guidance...
Lately I'm actively using several JS libraries in Royale and I find myself with a recurring need: custom renderers.
Depending on how the library is made there is the possibility to define the view of the component or some part of it.
I would like to be able to define "the renderer" in Royale, get its DOM and pass it to the library/component?

Am I crazy or is this feasible to do with Royale?
If it is possible, any example that I can see to guide me?

Thx.

Hiedra

RE: Implementing JS renderer from Royale

Posted by Maria Jose Esteve <mj...@iest.com>.
Hi Yishay, yes of course,....
Right now I have two cases:
- DatePicker, from Mobiscroll
- InspireTree JS

In the DatePicker I have to customize the calendar header (our DateChooser) to put a series of options (Labels, buttons,..).
This component allows me to customize the content of this header "DIV", as a HTML/DOM string. ("<div classname='class1'><a .... ")
In this case, I can't do big things, because I have to stick to its component layout and CSS classes.

With InspireTree I could create "a view", JS class/component, and connect it to the main tree that would act as a controller. (Similar to our views)
In this case, it had occurred to me that, "maybe" I could use referencing a myclass class, as3, after being transpiled to JS; Call me crazy!!!!

Hiedra

-----Mensaje original-----
De: Yishay Weiss <yi...@hotmail.com> 
Enviado el: jueves, 17 de marzo de 2022 13:54
Para: dev@royale.apache.org
Asunto: RE: Implementing JS renderer from Royale

Do you have a concrete example?

From: Maria Jose Esteve<ma...@iest.com>
Sent: Thursday, March 17, 2022 1:27 PM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Implementing JS renderer from Royale

Hi, I'm asking for guidance...
Lately I'm actively using several JS libraries in Royale and I find myself with a recurring need: custom renderers.
Depending on how the library is made there is the possibility to define the view of the component or some part of it.
I would like to be able to define "the renderer" in Royale, get its DOM and pass it to the library/component?

Am I crazy or is this feasible to do with Royale?
If it is possible, any example that I can see to guide me?

Thx.

Hiedra

RE: Implementing JS renderer from Royale

Posted by Yishay Weiss <yi...@hotmail.com>.
Do you have a concrete example?

From: Maria Jose Esteve<ma...@iest.com>
Sent: Thursday, March 17, 2022 1:27 PM
To: dev@royale.apache.org<ma...@royale.apache.org>
Subject: Implementing JS renderer from Royale

Hi, I'm asking for guidance...
Lately I'm actively using several JS libraries in Royale and I find myself with a recurring need: custom renderers.
Depending on how the library is made there is the possibility to define the view of the component or some part of it.
I would like to be able to define "the renderer" in Royale, get its DOM and pass it to the library/component?

Am I crazy or is this feasible to do with Royale?
If it is possible, any example that I can see to guide me?

Thx.

Hiedra