Converting a Flex application to HTML/JS

Converting a Flex application to HTMLJS

In this blog series, we started with identifying the need for handling and converting Flash applications and saw Apache Royale as one of the main options where the MXML and ActionScript code remains and some part of it can be reused, also the code gets transpiled to HTML/JS to be run on the browser.

In this last blog of this series, we will look at how this conversion from Flex to Royale can be done using an example.

In order to convert an existing flex project, we can manually copy the flex project files (MXML and as ) into the src folder of our newly created Royale Project.

For this exercise, we picked a simple flex file displaying a Data Grid.

To start with the conversion, the following are the steps which need to perform for the migration to Royale:

  • Namespace: In every MXML file we need to make the following updates:

From the flex namespace as below:

Update to the royale namespace as below:

  • Flash Components: To start with, we will have to comment out all the imported flash components. Later we will have to see if the flash functionality is required separately and if it is covered by a Royale emulation component. If not then this may require some extra component enhancement/development.
  • Flex Components: The flex components will be replaced by the Royale emulation components for the same functionality. 

We will try this out for a flex application using a simple Grid as below:

The following steps were followed to build this simple flex application.

    1. Created a flex project by choosing the new flex browse project in Moonshine IDE.
    1.  Made use of js and fx  tags from flex libraries and other local packages which are required to run the application.
  1. Used datagrid and array of collection to show the data in a grid and used click events to add the data into the grid calling the required function in the script tag.

The flex code for this grid comprises of Flex_grid_project.mxml code(in the src folder) as below:

By following the approach of migration explained, we were able to convert the flex grid to Apache Royale as below.

The following steps were followed:

    • Created a royale project by choosing the new royale browse project in Moonshine IDE 
    • Used js, fx tags  from royale libraries and other local packages which are required to run the application 
    • The application was divided into three parts as
        1.  valuesImpl – To handle simple CSS values
        1. Product Model – To handle the data
      1.  InitialView – To take care of the view 
  • in InitialView( MyInitialView.mxml) – This is the code which is viewed in the browser with all the required functionality imported into the MXML file 

Here we created a dynamic grid so that while firing on the event on the button it will add the data dynamically into the grid.

Below is the code:

Below is the data grid in the corresponding Royale grid project. You can view the complete project code here.

   https://github.com/nagarjunaAdapa/royaleproject.git

During the process of conversion, we realised that some of the functionalities were not implemented in the Apache Royale Framework code and would require further enhancement of the framework.

Conclusion

We concluded our exercise of the evaluation of Apache Royale as the approach for migration of flex with the following observations:

    1. The Royale emulation components are available and functional for simple components like button, label, checkbox, dropdowns, radio buttons etc. to build simple forms. The framework code includes some examples showing the use of these basic components. In most cases, these examples are able to generate outputs and can be converted.
    1. The complex UI components like Grid exist for basic functionality, but advanced features like dynamic column inclusion are not fully supported.
    1. The complex UI components for charts like Pie charts, Bar charts, line charts etc., though included in the examples do not produce any results and give errors indicating they have not been implemented completely by the framework, which would require further drill-down and investigation of the framework code.
    1. The community support is not wide due to a smaller user base of this open-source, due to which you do not get much help on the errors, even on Google search.
  1. Unavailability of ready-to-use and fully functional components and incompleteness of docs makes the overall progress slower.

Apache Royale will be the recommended approach if you are looking to migrate the simple components with not very complex UI. For complex UI components, this will be a time taking proposition as the current code is in not very stable status and absence of completely implemented UI Components. 

With time, Apache Royale will definitely mature and become more stable and ready to use.

Leave a comment

Translate »