converting components.

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

converting components.

Carlos Cruz

Hi,

I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.

 

All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.

 

Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?

Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)

 

I’m I on the right track?

 

Thanks!

Carlos

 

Reply | Threaded
Open this post in threaded view
|

Re: converting components.

Alex Harui-2
Hi Carlos,

ViewBase is too heavy.  UIBase is lighter than UIComponent, but might work.

Are your components in MXML or AS?  If MXML, we might need to create a new base class for you.

HTH,
-Alex

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Monday, November 13, 2017 at 8:29 PM
To: "[hidden email]" <[hidden email]>
Subject: converting components.

Hi,

I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.

 

All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.

 

Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?

Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)

 

I’m I on the right track?

 

Thanks!

Carlos

 

Reply | Threaded
Open this post in threaded view
|

Re: converting components.

Harbs
In reply to this post by Carlos Cruz
Here’s the strategy that we used. It worked very well.

1. We created intermediary “dummy” classes which were named the same as the Flex and Flash classes we used.
2. The dummy classes were based off the lightest-weight Royale classes that were usable. Start with UIBase and adjust as needed.
3. Go through your app and change the class paths from flash and flex to the Royale and “dummy” equivalents.
4. You will get lots of compile errors about missing properties and methods.
5. Use an IDE to make it easier to add stubs for the missing properties and methods to your dummy classes.
6. Continue this process until you have no compiler errors.
7. You will now have documentation of exactly which features you used in Flash and Flex classes.
8. Go through your dummy classes and either find the features in Royale which accomplish what you need or implement them as needed.
9. Remove the dummy classes as they are no longer needed.

We had very good separation between model and view. We first disconnected the view and went through this process in the model. Once we were done with the model, we reconnected the view and repeated the process there.

ArrayList is a pretty good replacement for ArrayCollection. We also needed sort, but I ended up just writing a sort function to sort the array directly. We needed to change a bit of the code because we were using refresh() on ArrayCollection, but the changes were pretty minor.

Mouse Events should mostly come along for free, but depending on what you are doing, the native moue events might or might not be good enough. We ended up using SVG components extensively and we had to write our own MouseManager class (due to browser bugs) to calculate all mouse events using matrix math.

HTH,
Harbs

On Nov 14, 2017, at 6:29 AM, Carlos Cruz <[hidden email]> wrote:

Hi,
I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.
 
All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.
 
Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?
Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)
 
I’m I on the right track?
 
Thanks!
Carlos
 

Reply | Threaded
Open this post in threaded view
|

RE: converting components.

Carlos Cruz
In reply to this post by Alex Harui-2

Hi Alex;

 

 

My “Component_Base” is an AS class. The component classes that super “Component_Base” dynamically create/instance visual components like TextInput,  DateField, DataGrid, etc. are also AS.

 

All Components also dynamically create an instances of the  PopUpWindow based components when state = “active” and when “double clicked” used as the editor to change properties like height, width and x and Y position.

 

The reason I was thinking I needed to use the ViewBase is because I need to add visual elements (if I understood the API correctly)

 

Is there any in-depth guide to help along with conversions? If not keeping in mind what I have said previously about my proficiencies would it be useful / helpful to journal my experiences with your help and make it available in some form to the Royale user base. If you say no my feelings will NOT be hurt.

 

 

Thx!

Carlos

 

From: Alex Harui [mailto:[hidden email]]
Sent: Tuesday, November 14, 2017 1:46 AM
To: [hidden email]
Subject: Re: converting components.

 

Hi Carlos,

 

ViewBase is too heavy.  UIBase is lighter than UIComponent, but might work.

 

Are your components in MXML or AS?  If MXML, we might need to create a new base class for you.

 

HTH,

-Alex

 

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Monday, November 13, 2017 at 8:29 PM
To: "[hidden email]" <[hidden email]>
Subject: converting components.

 

Hi,

I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.

 

All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.

 

Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?

Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)

 

I’m I on the right track?

 

Thanks!

Carlos

 

Reply | Threaded
Open this post in threaded view
|

Re: converting components.

Peter Ent
I might be able to help, too. I work with Alex. 

While you said your components are AS based, if you have any that are .mxml, then you need to use a base class in Royale that supports MXML children. You can use View or Group for that (you can also use Container, but on the Flash platform, that's a bit heavy).

For AS components, UIBase is the lowest level. If you need built-in layouts, then try Group and add in a layout bead, such as VerticalLayout. You can do that in the class constructor.

Let's say you have a component you've written that will display a text input field, a button ("Search") and a list below that to show search results. In Royale you can compose this a few ways, but one would be to use a Group as your base class and in the constructor add a VerticalLayout bead. Then create a another Group with a HorizontalLayout bead. Into this horizontal Group, add in your TextInput and Button using addElement(). Then create your DataGrid. Then use addElement() to add that horizontal group and DataGrid to your component. 

In Royale, the percentage widths/heights work like they do for HTML: they should add up to 100% but not more than that. In Flex, you could make the TextInput 100% and not size the button and Flex would make the TextInput fill the space not taken up by the Button. In Royale, the TextField and the Button both need to have percentage sizing (TextInput: 80%, Button: 20%). Or you can use a layout like FirstFlexibleChildHorizontalLayout which makes the first child (the TextInput in this case) take up all of the extra space and you do not need to specify a size for the button.

At the moment we don't have a lot of guides. You can try the now-old FlexJS (Royale's former name) Wiki. You may need to discount older articles. We are planning a migration of current articles. Just remember to replace "flexjs" with "royale" wherever you see it.

Regards,
Peter Ent
Adobe Systems/Apache Royale Project

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Tuesday, November 14, 2017 at 2:14 PM
To: "[hidden email]" <[hidden email]>
Subject: RE: converting components.

Hi Alex;

 

 

My “Component_Base” is an AS class. The component classes that super “Component_Base” dynamically create/instance visual components like TextInput,  DateField, DataGrid, etc. are also AS.

 

All Components also dynamically create an instances of the  PopUpWindow based components when state = “active” and when “double clicked” used as the editor to change properties like height, width and x and Y position.

 

The reason I was thinking I needed to use the ViewBase is because I need to add visual elements (if I understood the API correctly)

 

Is there any in-depth guide to help along with conversions? If not keeping in mind what I have said previously about my proficiencies would it be useful / helpful to journal my experiences with your help and make it available in some form to the Royale user base. If you say no my feelings will NOT be hurt.

 

 

Thx!

Carlos

 

From: Alex Harui [[hidden email]]
Sent: Tuesday, November 14, 2017 1:46 AM
To: [hidden email]
Subject: Re: converting components.

 

Hi Carlos,

 

ViewBase is too heavy.  UIBase is lighter than UIComponent, but might work.

 

Are your components in MXML or AS?  If MXML, we might need to create a new base class for you.

 

HTH,

-Alex

 

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Monday, November 13, 2017 at 8:29 PM
To: "[hidden email]" <[hidden email]>
Subject: converting components.

 

Hi,

I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.

 

All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.

 

Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?

Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)

 

I’m I on the right track?

 

Thanks!

Carlos

 

Reply | Threaded
Open this post in threaded view
|

Re: converting components.

Alex Harui-2
Couple of thoughts:

-I think all the committers are willing to help here.

-Maybe with your help, you can help us write that guide.  It is certainly hard for me to know what folks don't know, so feel free to ask questions and that will advise us on what we need to document better.

-In Royale, I am trying to make sure that Containers are distinguished from Controls in the following way.  IMO, a Control is something that probably has children, but doesn't have an arbitrary set of children.  Label, TextInput, NumericStepper, DateField, DataGrid are all controls.  They all subclass UIBase (more or less) and the View code adds the necessary children to the component via addElement calls.  It turns out that, the ASDoc for NumericStepper will therefore show that there is an addElement method, but the expectation is that the developer won't call addElement to add random children to the Control.

On the other hand, a Container is intended to have an arbitrary set of children.  View and ViewBase extend Container.

It sounds like you are building custom Controls, so starting with UIBase sounds right, but let us know if you run into any issues.

Thanks,
-Alex

From: Peter Ent <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Tuesday, November 14, 2017 at 11:36 AM
To: "[hidden email]" <[hidden email]>
Subject: Re: converting components.

I might be able to help, too. I work with Alex. 

While you said your components are AS based, if you have any that are .mxml, then you need to use a base class in Royale that supports MXML children. You can use View or Group for that (you can also use Container, but on the Flash platform, that's a bit heavy).

For AS components, UIBase is the lowest level. If you need built-in layouts, then try Group and add in a layout bead, such as VerticalLayout. You can do that in the class constructor.

Let's say you have a component you've written that will display a text input field, a button ("Search") and a list below that to show search results. In Royale you can compose this a few ways, but one would be to use a Group as your base class and in the constructor add a VerticalLayout bead. Then create a another Group with a HorizontalLayout bead. Into this horizontal Group, add in your TextInput and Button using addElement(). Then create your DataGrid. Then use addElement() to add that horizontal group and DataGrid to your component. 

In Royale, the percentage widths/heights work like they do for HTML: they should add up to 100% but not more than that. In Flex, you could make the TextInput 100% and not size the button and Flex would make the TextInput fill the space not taken up by the Button. In Royale, the TextField and the Button both need to have percentage sizing (TextInput: 80%, Button: 20%). Or you can use a layout like FirstFlexibleChildHorizontalLayout which makes the first child (the TextInput in this case) take up all of the extra space and you do not need to specify a size for the button.

At the moment we don't have a lot of guides. You can try the now-old FlexJS (Royale's former name) Wiki. You may need to discount older articles. We are planning a migration of current articles. Just remember to replace "flexjs" with "royale" wherever you see it.

Regards,
Peter Ent
Adobe Systems/Apache Royale Project

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Tuesday, November 14, 2017 at 2:14 PM
To: "[hidden email]" <[hidden email]>
Subject: RE: converting components.

Hi Alex;

 

 

My “Component_Base” is an AS class. The component classes that super “Component_Base” dynamically create/instance visual components like TextInput,  DateField, DataGrid, etc. are also AS.

 

All Components also dynamically create an instances of the  PopUpWindow based components when state = “active” and when “double clicked” used as the editor to change properties like height, width and x and Y position.

 

The reason I was thinking I needed to use the ViewBase is because I need to add visual elements (if I understood the API correctly)

 

Is there any in-depth guide to help along with conversions? If not keeping in mind what I have said previously about my proficiencies would it be useful / helpful to journal my experiences with your help and make it available in some form to the Royale user base. If you say no my feelings will NOT be hurt.

 

 

Thx!

Carlos

 

From: Alex Harui [[hidden email]]
Sent: Tuesday, November 14, 2017 1:46 AM
To: [hidden email]
Subject: Re: converting components.

 

Hi Carlos,

 

ViewBase is too heavy.  UIBase is lighter than UIComponent, but might work.

 

Are your components in MXML or AS?  If MXML, we might need to create a new base class for you.

 

HTH,

-Alex

 

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Monday, November 13, 2017 at 8:29 PM
To: "[hidden email]" <[hidden email]>
Subject: converting components.

 

Hi,

I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.

 

All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.

 

Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?

Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)

 

I’m I on the right track?

 

Thanks!

Carlos

 

Reply | Threaded
Open this post in threaded view
|

RE: converting components.

Carlos Cruz

Thanks Peter and Alex for the great info, when I said with “your” help I was not asking for coding help. From my perspective JavaScript is a step backwards and it’s really bending very old technology, older than Flash,  that was meant for something else is now being used for many purposes including to create browser based business solutions. Because JavaScript is evolving so quickly I also think it’s a very expensive technology to maintain especially for small software shops since the shelf life of software will be much shorter. But since I’m not king of the world I must follow the crowd.

 

I really like Flex and I would really like to stay with FlexJS, but I find for middle of the road developers like myself there’s not enough information resources yet. Because of differences in functionality between Flex and FlexJS classes developers will need to make difficult adjustments.

 

I would like to help in any way I can if my personal experience helps others I don’t mind bearing my abilities or lack of them, but I would want to make sure the information I’m sharing is accurate, and that’s what I meant by “your” help, I was responding to your response, but I guess I was really referring to anyone that knows more than me.

 

Thx!

Carlos

 

From: Alex Harui [mailto:[hidden email]]
Sent: Tuesday, November 14, 2017 5:39 PM
To: [hidden email]
Subject: Re: converting components.

 

Couple of thoughts:

 

-I think all the committers are willing to help here.

 

-Maybe with your help, you can help us write that guide.  It is certainly hard for me to know what folks don't know, so feel free to ask questions and that will advise us on what we need to document better.

 

-In Royale, I am trying to make sure that Containers are distinguished from Controls in the following way.  IMO, a Control is something that probably has children, but doesn't have an arbitrary set of children.  Label, TextInput, NumericStepper, DateField, DataGrid are all controls.  They all subclass UIBase (more or less) and the View code adds the necessary children to the component via addElement calls.  It turns out that, the ASDoc for NumericStepper will therefore show that there is an addElement method, but the expectation is that the developer won't call addElement to add random children to the Control.

 

On the other hand, a Container is intended to have an arbitrary set of children.  View and ViewBase extend Container.

 

It sounds like you are building custom Controls, so starting with UIBase sounds right, but let us know if you run into any issues.

 

Thanks,

-Alex

 

From: Peter Ent <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Tuesday, November 14, 2017 at 11:36 AM
To: "[hidden email]" <[hidden email]>
Subject: Re: converting components.

 

I might be able to help, too. I work with Alex. 

 

While you said your components are AS based, if you have any that are .mxml, then you need to use a base class in Royale that supports MXML children. You can use View or Group for that (you can also use Container, but on the Flash platform, that's a bit heavy).

 

For AS components, UIBase is the lowest level. If you need built-in layouts, then try Group and add in a layout bead, such as VerticalLayout. You can do that in the class constructor.

 

Let's say you have a component you've written that will display a text input field, a button ("Search") and a list below that to show search results. In Royale you can compose this a few ways, but one would be to use a Group as your base class and in the constructor add a VerticalLayout bead. Then create a another Group with a HorizontalLayout bead. Into this horizontal Group, add in your TextInput and Button using addElement(). Then create your DataGrid. Then use addElement() to add that horizontal group and DataGrid to your component. 

 

In Royale, the percentage widths/heights work like they do for HTML: they should add up to 100% but not more than that. In Flex, you could make the TextInput 100% and not size the button and Flex would make the TextInput fill the space not taken up by the Button. In Royale, the TextField and the Button both need to have percentage sizing (TextInput: 80%, Button: 20%). Or you can use a layout like FirstFlexibleChildHorizontalLayout which makes the first child (the TextInput in this case) take up all of the extra space and you do not need to specify a size for the button.

 

At the moment we don't have a lot of guides. You can try the now-old FlexJS (Royale's former name) Wiki. You may need to discount older articles. We are planning a migration of current articles. Just remember to replace "flexjs" with "royale" wherever you see it.

 

Regards,

Peter Ent

Adobe Systems/Apache Royale Project

 

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Tuesday, November 14, 2017 at 2:14 PM
To: "[hidden email]" <[hidden email]>
Subject: RE: converting components.

 

Hi Alex;

 

 

My “Component_Base” is an AS class. The component classes that super “Component_Base” dynamically create/instance visual components like TextInput,  DateField, DataGrid, etc. are also AS.

 

All Components also dynamically create an instances of the  PopUpWindow based components when state = “active” and when “double clicked” used as the editor to change properties like height, width and x and Y position.

 

The reason I was thinking I needed to use the ViewBase is because I need to add visual elements (if I understood the API correctly)

 

Is there any in-depth guide to help along with conversions? If not keeping in mind what I have said previously about my proficiencies would it be useful / helpful to journal my experiences with your help and make it available in some form to the Royale user base. If you say no my feelings will NOT be hurt.

 

 

Thx!

Carlos

 

From: Alex Harui [[hidden email]]
Sent: Tuesday, November 14, 2017 1:46 AM
To: [hidden email]
Subject: Re: converting components.

 

Hi Carlos,

 

ViewBase is too heavy.  UIBase is lighter than UIComponent, but might work.

 

Are your components in MXML or AS?  If MXML, we might need to create a new base class for you.

 

HTH,

-Alex

 

From: Carlos Cruz <[hidden email]>
Reply-To: "[hidden email]" <[hidden email]>
Date: Monday, November 13, 2017 at 8:29 PM
To: "[hidden email]" <[hidden email]>
Subject: converting components.

 

Hi,

I have a few hundred custom components (i.e. a city selector)  to convert from Flex to Royale I was wondering if  I could get some input or confirmation my approach will be OK.

 

All the components I want to convert are made up of a custom base component using the Flex UIComponent Class that holds the properties and an ArrayCollection to hold special properties and 1 Flex image component.

 

Is the ViewBase class the base class to create visual components in Royale (I realize I will have to add functionality like mouse events)?

Then I’m thinking of using the ArrayList to replace the ArrayCollection component (I do need sort and filters)

 

I’m I on the right track?

 

Thanks!

Carlos