Tour of Heroes(Angular) of Royale version

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

Tour of Heroes(Angular) of Royale version

Taro.Yu
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding
5. j:TextInput change event will trigger after typed, but also triggered when focus out
6. j:HGroup itemsVerticalAlign not worked
7. j:List use beands j:HorizontalLayout itemsExpand, not worked and cause page blank.
8. How to use org.apache.royale.routing, does it use with j:Navigation
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.

Thanks. I like apache royale.






Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--


Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




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

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


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

Re: Tour of Heroes(Angular) of Royale version

Piotr Zarzycki
Hi Carlos,

In case of removing from ArrayList something and refreshing list - There are Beads for that purpose. Maybe it is a good subject for blog post. You should go through old examples in our repo.

Thanks,
Piotr

On Fri, Aug 17, 2018, 12:48 AM Carlos Rovira <[hidden email]> wrote:
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


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

Re: Tour of Heroes(Angular) of Royale version

Alex Harui-2
In reply to this post by Taro.Yu

Answers inline.

 

From: 芋頭爛 <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Thursday, August 16, 2018 at 10:10 AM
To: "[hidden email]" <[hidden email]>
Subject: Tour of Heroes(Angular) of Royale version

 

Hello,

 

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).

here is live demo 

 

It runs on Chrome well, but IE 11 no good... 

 

I find some issue when develop the tour of heroes.

  1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Try DataContainer.  I think it is used in the ASDoc example.

 

 

2. [Bindable]

    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);

    That will cause page blank....because "static"

    If I must use static, the ArrayList construct must be empty.

    private var static ary:ArrayList = new ArrayList();  // this work well

 

I thought this was working.  I will look more into it this weekend.  Did you try public vs private static var?

 

3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

Looks like Piotr answer this.

4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Can you show us in code what you want to do?  Keep in mind that Vector doesn’t really exist in JS so will be implemented as an Array.

 

5. j:TextInput change event will trigger after typed, but also triggered when focus out

Is this the way it is working now or the way you want it to work?  I don’t know that we have focus events working properly, but this sort of question is one reason where there are beads in Royale.  One kind of TextInput view/controller can dispatch change events on each change and another can dispatch change events only when focus out.

 

6. j:HGroup itemsVerticalAlign not worked

7. j:List use beands j:HorizontalLayout itemsExpand, not worked and cause page blank.

8. How to use org.apache.royale.routing, does it use with j:Navigation

 

There is to “automatic” routing.  We have classes that you can use to determine the route, but currently there is no code that knows what to do with the route.  What do you want to happen if there is a route specified?

 

9. If use typeNames attribute, compile debug is ok, but compile release will miss it.

I think that should work, although we do not recommend altering typeNames in application code.   Use className instead.  TypeNames is intended for component development.

 

HTH,

-Alex

 

 

Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Piotr Zarzycki
One of the more sophisticated example is in my TranspiledActionScript repository [1]. 


Thanks,
Piotr

On Fri, Aug 17, 2018, 8:37 AM Alex Harui <[hidden email]> wrote:

Answers inline.

 

From: 芋頭爛 <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Thursday, August 16, 2018 at 10:10 AM
To: "[hidden email]" <[hidden email]>
Subject: Tour of Heroes(Angular) of Royale version

 

Hello,

 

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).

here is live demo 

 

It runs on Chrome well, but IE 11 no good... 

 

I find some issue when develop the tour of heroes.

  1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Try DataContainer.  I think it is used in the ASDoc example.

 

 

2. [Bindable]

    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);

    That will cause page blank....because "static"

    If I must use static, the ArrayList construct must be empty.

    private var static ary:ArrayList = new ArrayList();  // this work well

 

I thought this was working.  I will look more into it this weekend.  Did you try public vs private static var?

 

3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

Looks like Piotr answer this.

4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Can you show us in code what you want to do?  Keep in mind that Vector doesn’t really exist in JS so will be implemented as an Array.

 

5. j:TextInput change event will trigger after typed, but also triggered when focus out

Is this the way it is working now or the way you want it to work?  I don’t know that we have focus events working properly, but this sort of question is one reason where there are beads in Royale.  One kind of TextInput view/controller can dispatch change events on each change and another can dispatch change events only when focus out.

 

6. j:HGroup itemsVerticalAlign not worked

7. j:List use beands j:HorizontalLayout itemsExpand, not worked and cause page blank.

8. How to use org.apache.royale.routing, does it use with j:Navigation

 

There is to “automatic” routing.  We have classes that you can use to determine the route, but currently there is no code that knows what to do with the route.  What do you want to happen if there is a route specified?

 

9. If use typeNames attribute, compile debug is ok, but compile release will miss it.

I think that should work, although we do not recommend altering typeNames in application code.   Use className instead.  TypeNames is intended for component development.

 

HTH,

-Alex

 

 

Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Taro.Yu
In reply to this post by Alex Harui-2
Hi Carlos
    I don't have website, and glad to publish it as a full article with the
code.
    and about another questions, i will reply soon.

Hi Piotr
    Thanks for the example, I'll study it to learn more about royale.

Hi Alex
    Thanks for your reply. following is my thought

    1. ...Try DataContainer.  I think it is used in the ASDoc example.
I can't find any example in ASDoc, does the ASDoc location  here
<http://royale.apache.org/asdoc/#!org.apache.royale.html/DataContainer>   ?

    2. ...I thought this was working.  I will look more into it this
weekend.  Did you try public vs private static var?
private is fine, public has error. and I will do more test case.

    3. ...ArrayList.removeAll().........Looks like Piotr answer this.
If removeAll() need to use another Beads, I think it is not intuitive for
developer.
Agree Beads is a good design, but databinding is why flex attracting me.
My thought is databinding is core value and should be easy to use. Beads
should be use for expand UI component additional functionality.
In fact, I do not like ApplicationDataBinding / ViewDataBinding /
ContaninerDataBinding / ItemRendererDataBinding
Because UI always handle data, almost all UI need to add DataBinding Beads
and need to know what kind to add.
I love flex because it's high produtivity, it is easy to use, that developer
can focus on their business logic.


    4. ...Can you show us in code what you want to do?  Keep in mind that
Vector doesn’t really exist in JS so will be implemented as an Array.
I know JS has no Vector. but my benchmark is TypeScript. TypeScript has
Generics. We need it in large application.

    5. ...Is this the way it is working now or the way you want it to work?
I don’t know that we have focus events working properly..
Haha.. Sorry for my pool english. I mean it is working now. following test
steps
Type a character --- trigger change event
Focus out --- trigger another change event (I think this is unreasonable)

    8. ...What do you want to happen if there is a route specified?..
The Use case will be some one call my application from a url link, and my
application can respond the right view

    9. ...I think that should work, although we do not recommend altering
typeNames in application code....
Yes, you are right, my mistake to use typeNames. I should use className.





--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Alex Harui-2
Hi,

Thanks again for the feedback. I may respond with more details later, but very quickly:  the ASDoc  example is in examples/royale/ASDoc.  It uses DataContainer and uses the routing classes.  You can see how to determine what the route was in that code.

HTH,
-Alex

On 8/17/18, 7:55 AM, "Yu.Taro" <[hidden email]> wrote:

    Hi Carlos
        I don't have website, and glad to publish it as a full article with the
    code.
        and about another questions, i will reply soon.
   
    Hi Piotr
        Thanks for the example, I'll study it to learn more about royale.
   
    Hi Alex
        Thanks for your reply. following is my thought
   
        1. ...Try DataContainer.  I think it is used in the ASDoc example.
    I can't find any example in ASDoc, does the ASDoc location  here
    <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Froyale.apache.org%2Fasdoc%2F%23!org.apache.royale.html%2FDataContainer&amp;data=02%7C01%7Caharui%40adobe.com%7C434270923ebb4416063508d604516ac3%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636701145063554950&amp;sdata=6tTvV4HbyOAUwBFW%2FrHmzmQW2Drzig3hAxVW38iYK4s%3D&amp;reserved=0>   ?
   
        2. ...I thought this was working.  I will look more into it this
    weekend.  Did you try public vs private static var?
    private is fine, public has error. and I will do more test case.
   
        3. ...ArrayList.removeAll().........Looks like Piotr answer this.
    If removeAll() need to use another Beads, I think it is not intuitive for
    developer.
    Agree Beads is a good design, but databinding is why flex attracting me.
    My thought is databinding is core value and should be easy to use. Beads
    should be use for expand UI component additional functionality.
    In fact, I do not like ApplicationDataBinding / ViewDataBinding /
    ContaninerDataBinding / ItemRendererDataBinding
    Because UI always handle data, almost all UI need to add DataBinding Beads
    and need to know what kind to add.
    I love flex because it's high produtivity, it is easy to use, that developer
    can focus on their business logic.
   
   
        4. ...Can you show us in code what you want to do?  Keep in mind that
    Vector doesn’t really exist in JS so will be implemented as an Array.
    I know JS has no Vector. but my benchmark is TypeScript. TypeScript has
    Generics. We need it in large application.
   
        5. ...Is this the way it is working now or the way you want it to work?
    I don’t know that we have focus events working properly..
    Haha.. Sorry for my pool english. I mean it is working now. following test
    steps
    Type a character --- trigger change event
    Focus out --- trigger another change event (I think this is unreasonable)
   
        8. ...What do you want to happen if there is a route specified?..
    The Use case will be some one call my application from a url link, and my
    application can respond the right view
   
        9. ...I think that should work, although we do not recommend altering
    typeNames in application code....
    Yes, you are right, my mistake to use typeNames. I should use className.
   
   
   
   
   
    --
    Sent from: https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-royale-users.20374.n8.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C434270923ebb4416063508d604516ac3%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636701145063554950&amp;sdata=PYe3wUqx5Y3UgCGsU0c8Pgfql%2BdBL%2BMpdWYU2R5CbUg%3D&amp;reserved=0
   

Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Taro.Yu
In reply to this post by Alex Harui-2
Hi Alex

About Point 2

Alex Harui-2 wrote
> 2. [Bindable]
>     private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
>     That will cause page blank....because "static"
>     If I must use static, the ArrayList construct must be empty.
>     private var static ary:ArrayList = new ArrayList();  // this work well
>
> I thought this was working.  I will look more into it this weekend.  Did
> you try public vs private static var?

You can see my test code from  https://stackblitz.com/edit/royale-hero
<https://stackblitz.com/edit/royale-hero>   for details.

TestVO.js is a bindable ValueObject with id, name property
VOProvider has static method to get TestVO array
Main.mxml use VOProvider to get TestArray like below.
private var myList:ArrayList = new ArrayList(VOProvider.getTestArray());

the result will cause page blank. nothing output

if move the new ArrayList(...) code to applicationComplete event
the result will be ok.






--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Taro.Yu
In reply to this post by Carlos Rovira-2
Hi Carlos

I just test the sample code with nightly build #1180, that is not work

The j:HGroup output html source code is as below
<div class="jewel layout horizontal gap-3x3px">
still missing "itemsExpand" in class

About "itemsHorizontalExpand" and "itemsVerticalExpand" properties
did you mean that in this example
 if <j:HGroup itemsHorizontalExpand="true">
 then <j:Card> will background auto set width 100% if user not specified
width

It seems to me that is not suggesting...
In the common sense, attribute only effect the element self.
But if attribute can effect it's parent element, sounds a bit strange.

Most people understand "itemsExpand" absolutely base on container's width
and set the container's width by themselves.

These are my thoughts, thanks


Carlos Rovira-2 wrote

> I think I fixed Point 7
> Seems, container need width 100% for items to expand to fill all available
> width. This makes me think if we need to double properties and have
> "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?
>
> I added the property to HGroup as well.
>
> Try this with latest commit:
> <j:Card width="600">
> <html:H3 text="Test"/>
> <j:HGroup itemsExpand="true" gap="3">
> <j:Button text="Hello"/>
> <j:Button text="Apache"/>
> <j:Button text="Royale!!!!"/>
> </j:HGroup>
> </j:Card>
> HGroup fills all the Card space and then items fills all available space
> inside HGroup





--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
In reply to this post by Piotr Zarzycki
Hi Piotr,

thanks, can you provide more info about that bead or point me to the code in GitHub link so I can take a look?
thanks

El vie., 17 ago. 2018 a las 2:50, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

In case of removing from ArrayList something and refreshing list - There are Beads for that purpose. Maybe it is a good subject for blog post. You should go through old examples in our repo.

Thanks,
Piotr

On Fri, Aug 17, 2018, 12:48 AM Carlos Rovira <[hidden email]> wrote:
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


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

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
In reply to this post by Alex Harui-2
Hi Alex

El vie., 17 ago. 2018 a las 8:37, Alex Harui (<[hidden email]>) escribió:


9. If use typeNames attribute, compile debug is ok, but compile release will miss it.

I think that should work, although we do not recommend altering typeNames in application code.   Use className instead.  TypeNames is intended for component development.

 



Jewel make heavy use of class selectors through typeNames and layouts is a huge case. I found some issues with States functionality and typeNames, that I still need to look at, but this one maybe could be just an issue in the minify code that are stripping code. Need to take a look.

@yestaro, maybe can you take a look to both debug/release and report if in release the code is not there? if that happens, can you create an issue with the simplest code to reproduce?

thanks

 
Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
In reply to this post by Taro.Yu
Hi Yu Taro

El vie., 17 ago. 2018 a las 16:55, Yu.Taro (<[hidden email]>) escribió:
Hi Carlos
    I don't have website, and glad to publish it as a full article with the
code.

Great! we need to fix the issues you found and then we can go with the publishing task :)
 


    3. ...ArrayList.removeAll().........Looks like Piotr answer this.
If removeAll() need to use another Beads, I think it is not intuitive for
developer.
Agree Beads is a good design, but databinding is why flex attracting me.
My thought is databinding is core value and should be easy to use. Beads
should be use for expand UI component additional functionality.
In fact, I do not like ApplicationDataBinding / ViewDataBinding /
ContaninerDataBinding / ItemRendererDataBinding
Because UI always handle data, almost all UI need to add DataBinding Beads
and need to know what kind to add.
I love flex because it's high produtivity, it is easy to use, that developer
can focus on their business logic.

Royale is very modular and while Basic is the simplest expression, in Jewel like in Express we
can add beads by default. I'm trying to balance when add it or not...maybe binding beads can be added
directly in those jewel places where we use to have it. This is something I still need to think more about it
since is something that comes from the most common use cases. As you say binding use to be used in almost
all apps, so is probably logic to have it in Jewel directly available.
 
I know JS has no Vector. but my benchmark is TypeScript. TypeScript has
Generics. We need it in large application.

I'd love to have Generics in AS3 :)
That's not something where I can help since is not in my zone of expertise. Hope someone could work on this :)
 

    5. ...Is this the way it is working now or the way you want it to work?
I don’t know that we have focus events working properly..
Haha.. Sorry for my pool english. I mean it is working now. following test
steps
Type a character --- trigger change event
Focus out --- trigger another change event (I think this is unreasonable)

I think you're right. We must to look into that. If you can take a look and send PR that will help a lot, since there's many things on the plate
what do you think?
 
    8. ...What do you want to happen if there is a route specified?..
The Use case will be some one call my application from a url link, and my
application can respond the right view

We need to create a Routing.swc library. For my that's clear, it's just a matter of having time or contributors to get that.




--
Sent from: http://apache-royale-users.20374.n8.nabble.com/

--


Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
In reply to this post by Taro.Yu
Hi Taro,

El sáb., 18 ago. 2018 a las 7:16, Yu.Taro (<[hidden email]>) escribió:
Hi Carlos

I just test the sample code with nightly build #1180, that is not work

The j:HGroup output html source code is as below
<div class="jewel layout horizontal gap-3x3px">
still missing "itemsExpand" in class


I tried it in JewelExample and this is the code

<j:Card width="600">
        <html:H3 text="items expand test"/>

        <j:HGroup itemsExpand="true" gap="3">
            <j:Button text="Hello"/>
            <j:Button text="Apache"/>
            <j:Button text="Royale!!!!"/>
        </j:HGroup>
    </j:Card>

 output:

<div class="jewel card layout vertical gap-3x3px" style="width: 600px;"><h3 class="">items expand test</h3><div class="jewel layout horizontal itemsExpand gap-3x3px"><button type="button" class="jewel button">Hello</button><button type="button" class="jewel button">Apache</button><button type="button" class="jewel button">Royale!!!!</button></div></div>

screeshot:


This is with code already committed, so maybe the your local build is not refreshing right?
 

About "itemsHorizontalExpand" and "itemsVerticalExpand" properties
did you mean that in this example
 if <j:HGroup itemsHorizontalExpand="true">
 then <j:Card> will background auto set width 100% if user not specified
width

mmm, no, I think the width or height 100% affects the HGroup and the the CSS rule affects all Childs
now is:

.layout.itemsExpand {
width: 100%;
}
This is applied to HGroup

.layout.itemsExpand > * {
flex: 1 0 auto !important;
} 
This is applied to all childrens

What I'm thinking while I write is that "itemsExpand" should be the only one property, but the rules maybe could be different depending on Horizontal and Vertical Layout, in horzontal will use "width" but in vertical will use "height"... Is something I could try...



It seems to me that is not suggesting...
In the common sense, attribute only effect the element self.
But if attribute can effect it's parent element, sounds a bit strange.

Most people understand "itemsExpand" absolutely base on container's width
and set the container's width by themselves.

right


Reply | Threaded
Open this post in threaded view
|

Re: Tour of Heroes(Angular) of Royale version

Piotr Zarzycki
In reply to this post by Carlos Rovira-2
Hi Carlos,

All those beads are part of our repository. They should work with Jewel as well [1]


Thanks,
Piotr

On Sat, Aug 18, 2018, 11:15 AM Carlos Rovira <[hidden email]> wrote:
Hi Piotr,

thanks, can you provide more info about that bead or point me to the code in GitHub link so I can take a look?
thanks

El vie., 17 ago. 2018 a las 2:50, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

In case of removing from ArrayList something and refreshing list - There are Beads for that purpose. Maybe it is a good subject for blog post. You should go through old examples in our repo.

Thanks,
Piotr

On Fri, Aug 17, 2018, 12:48 AM Carlos Rovira <[hidden email]> wrote:
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


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

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
Hi Piotr,

ok that's what I'm using in Jewel. I thought you were talking about something I was not aware of. So, since it's not working I'll take a look and what can be the problem
thanks

Carlos


El sáb., 18 ago. 2018 a las 14:27, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

All those beads are part of our repository. They should work with Jewel as well [1]


Thanks,
Piotr

On Sat, Aug 18, 2018, 11:15 AM Carlos Rovira <[hidden email]> wrote:
Hi Piotr,

thanks, can you provide more info about that bead or point me to the code in GitHub link so I can take a look?
thanks

El vie., 17 ago. 2018 a las 2:50, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

In case of removing from ArrayList something and refreshing list - There are Beads for that purpose. Maybe it is a good subject for blog post. You should go through old examples in our repo.

Thanks,
Piotr

On Fri, Aug 17, 2018, 12:48 AM Carlos Rovira <[hidden email]> wrote:
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


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

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
ok, my fault I was not aware of that beads, I confuse that beads with others. I'll take a look
thanks!

El sáb., 18 ago. 2018 a las 17:20, Carlos Rovira (<[hidden email]>) escribió:
Hi Piotr,

ok that's what I'm using in Jewel. I thought you were talking about something I was not aware of. So, since it's not working I'll take a look and what can be the problem
thanks

Carlos


El sáb., 18 ago. 2018 a las 14:27, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

All those beads are part of our repository. They should work with Jewel as well [1]


Thanks,
Piotr

On Sat, Aug 18, 2018, 11:15 AM Carlos Rovira <[hidden email]> wrote:
Hi Piotr,

thanks, can you provide more info about that bead or point me to the code in GitHub link so I can take a look?
thanks

El vie., 17 ago. 2018 a las 2:50, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

In case of removing from ArrayList something and refreshing list - There are Beads for that purpose. Maybe it is a good subject for blog post. You should go through old examples in our repo.

Thanks,
Piotr

On Fri, Aug 17, 2018, 12:48 AM Carlos Rovira <[hidden email]> wrote:
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


--


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

Re: Tour of Heroes(Angular) of Royale version

Carlos Rovira-2
Hi Taro,

I just uploaded the removeAll() example to JewelExample so you can check the code for how to do it. I'll check if we need some more bead of that kind.


El sáb., 18 ago. 2018 a las 17:27, Carlos Rovira (<[hidden email]>) escribió:
ok, my fault I was not aware of that beads, I confuse that beads with others. I'll take a look
thanks!

El sáb., 18 ago. 2018 a las 17:20, Carlos Rovira (<[hidden email]>) escribió:
Hi Piotr,

ok that's what I'm using in Jewel. I thought you were talking about something I was not aware of. So, since it's not working I'll take a look and what can be the problem
thanks

Carlos


El sáb., 18 ago. 2018 a las 14:27, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

All those beads are part of our repository. They should work with Jewel as well [1]


Thanks,
Piotr

On Sat, Aug 18, 2018, 11:15 AM Carlos Rovira <[hidden email]> wrote:
Hi Piotr,

thanks, can you provide more info about that bead or point me to the code in GitHub link so I can take a look?
thanks

El vie., 17 ago. 2018 a las 2:50, Piotr Zarzycki (<[hidden email]>) escribió:
Hi Carlos,

In case of removing from ArrayList something and refreshing list - There are Beads for that purpose. Maybe it is a good subject for blog post. You should go through old examples in our repo.

Thanks,
Piotr

On Fri, Aug 17, 2018, 12:48 AM Carlos Rovira <[hidden email]> wrote:
I think I fixed Point 7
Seems, container need width 100% for items to expand to fill all available width. This makes me think if we need to double properties and have "itemsHorizontalExpand" and "itemsVerticalExpand" ? what do you think?

I added the property to HGroup as well.

Try this with latest commit:

<j:Card width="600">
<html:H3 text="Test"/>
<j:HGroup itemsExpand="true" gap="3">
<j:Button text="Hello"/>
<j:Button text="Apache"/>
<j:Button text="Royale!!!!"/>
</j:HGroup>
</j:Card>

HGroup fills all the Card space and then items fills all available space inside HGroup

Best

Carlos



El vie., 17 ago. 2018 a las 0:30, Carlos Rovira (<[hidden email]>) escribió:
I forgot to ask you an important question: Comparing with Angular:

*could you let us know you thoughts about both versions? 
* do you think Royale needs something you miss from working with Angular? (taking into account that we are still bringing more components and features, but I mean from a pure technology - framework point comparison).
*Are you happy with what Royale gives you?
*Will you recommend Royale to others thinking in use Angular, React, Vue...?

I think this kind of questionary will throw great information since you work with both and will give us extremely valuable information! :)

Thanks

Carlos



El vie., 17 ago. 2018 a las 0:00, Carlos Rovira (<[hidden email]>) escribió:
Hi,

amazing! Thanks for sharing this work and point us the issues! This will be of great help to see the issues you found and personally is great to see something done with Jewel finally due the amount of work I invested on this UI set in the last months :))

For others, I think the Angular version direct link is this (If I'm wrong let us know): https://stackblitz.com/angular/xvljjerybxj

About the issues. I'll try to answer some of them and hope others join us to analyze over what I could say:

El jue., 16 ago. 2018 a las 19:10, 芋頭爛 (<[hidden email]>) escribió:
Hello,

I use royale 0.9.3(nightly) to implement Tour of Heroes(Angular).
here is live demo 

It runs on Chrome well, but IE 11 no good... 

I find some issue when develop the tour of heroes.
1. Does royale have something like mx:Repeater or s:DataGroup, now I always use j:List, but the UI does not need rollover, selected....etc

Yes, DataGroup is in Core swc. Repeater, I think doesn't exists, but since the later is from Flex 3, I think is not missed.
In Royale, DataGroup is a ContainerContentArea and can be added to a component as a IContentView vía CSS, so components will use DataGroup or other component you create.
DataGroup is based on ItemRenderers to paint the data you set in dataProvider.
For example the new Jewel Table that I'm working on this days uses a TBodyContentArea that is in essence like a DataGroup and implements its API. In Table the tbody part (the body of the table)
is the component part that uses the dataProvider to paint the data. Then we have optional parts that are the Chrome (thead and tfoot) both implements IChrome. 
the IContentView as well can be a ViewPort so it can be scrollable (ScrollingViewPort).
The ItemRenderers and the data provider mapper you use will be responsible of transform the data into visual pieces. Coming back to table the TableItemRenderer is the renderer that is used in table (and probably I'll do others to avoid rollover or selection), and TableItemRendererForCollectionView is the mapper that loops over the dataProvider and create the item renderers.
I think with that you can have all things you need.
 
2. [Bindable]
    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);
    That will cause page blank....because "static"
    If I must use static, the ArrayList construct must be empty.
    private var static ary:ArrayList = new ArrayList();  // this work well

Ok here, maybe Alex or Harbs could give some light on this
 
 
3. When call ArrayList.removeAll(), the j:List does not refresh. Must call ArrayList.removeItemAt() for each.

I didn't test that part, so maybe is a bug, could you try to fix it and send us a pull request to review it? Let me know if you can. Thanks in advance!
 
4. Seems Royale has no VectorList, So I can't use Vector.<> for databinding

Again something for others to comment on this.
 
5. j:TextInput change event will trigger after typed, but also triggered when focus out

mmm...I think change trigger after type is ok, in focus out I'm not sure, hope others could let us know what they think about it.
 
6. j:HGroup itemsVerticalAlign not worked

I just fixed this in a commit just now based on your report
try this code:

<j:HGroup itemsVerticalAlign="itemsCentered">
<j:Button height="200"/>
<j:Button height="50"/>
<j:Button height="100"/>
</j:HGroup>

 
7. j:List use beads j:HorizontalLayout itemsExpand, not worked and cause page blank.

I'll check it, and report, maybe that property is not fully implemented in all layouts.

8. How to use org.apache.royale.routing, does it use with j:Navigation

I still couldn't see routing code
I think routing was done by Alex and maybe he can share some docs or how is done so we can try it. Routing is something many people want us to provide, is just a matter to finish other things and reach to it, or even provide some pull request to make it happen now :)
 
9. If use typeNames attribute, compile debug is ok, but compile release will miss it.


great, I think maybe this can be related to some problems I found with typeNames, I'll investigate it
 
Thanks. I like apache royale.

Thanks for using it to make this! :) 

Maybe we could solve the problems you find and prepare it a bit more to publish on website? We're open, so let us know what you prefer. You can write an article so we can publish it as a full article with the code and example. As well if you have a website and want to publish, we can point to your article. As you prefer! :)

Thanks!

--




--


--


--


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

Re: Tour of Heroes(Angular) of Royale version

Alex Harui-2

Hi Yu Taro,

 

2. [Bindable]

    private var static ary:ArrayList = new ArrayList(["AA","BB","CC"]);

    That will cause page blank....because "static"

    If I must use static, the ArrayList construct must be empty.

    private var static ary:ArrayList = new ArrayList();  // this work well

 

I tried this and it worked correctly for me.  Make sure you have the latest nightly build and if it still is a problem, open a GitHub Issue and post the .JS file that contains this code.  Also see if there is any related error reports in the browser console.

 

Thanks,

-Alex