Exploring Rich Island development with Flex Builder – Part 8: Creating a Rich Island and handling data

Welcome to Part 8 of this tutorial series. In this part, you will transform the Flex application that you built in Parts 1 through 6 into a Rich Island and integrate it into the Web Dynpro application from Part 7. If you did not step through those tutorials, you can download the finished Flex Builder project archive and the SAP nugget archive from the Requirements section below.

First you will add the Rich Islands library to the Flex Builder project. This ActionScript library is needed for the data translation between Flex and SAP. Then you will create setter and getter functions to create properties and handle the asynchronous data from SAP.

In this section you will download the Rich Islands ActionScript library and add it to the Flex Builder project. This allows the application to access the Rich Islands features that handle the data translation between Flex and SAP.

1. Download the WDIslandLibrary.swc file from the following URL:https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/30bf8904-04a8-2b10-ca90-fc17f7a73355

   View the following video to better understand how SAP has implemented the Rich Islands functionality:

   Video:

2. Save the ZIP file in the C:\SAP_RichIslands\ShopFloorBins\libs folder.
3. Extract the contents of the downloaded ZIP file to the same folder.
4. In Flex Builder, select Project > Properties > Flex Build Path and select the Library Path tab.
5. Click the Add SWC button.

6. Browse to C:\SAP_RichIslands\ShopFloorBins\libs\WDIslandLibrary.swc.
7. Click OK.

8. In the left menu, select Flex Compiler.

   The WDIslandLibrary.swc is strictly for Flex 2.0.1. If you plan to use Flex 3.0, you will need to use the WDIslandLibrary30.swc which, at the time of this writing, has not been released by SAP. See the following video to understand how these different versions of the SWC coordinate with the NetWeaver 7.01 ABAP trial version:

   Video:

9. For the Flex SDK version, choose Use a specific SDK then select Flex 2.0.1 Hotfix 3.

10. Click OK.

In this section, you will transform this wagon assembly line Flex application into a Rich Island for SAP. This will require importing the FlashIsland class to access Rich Island functionality, creating additional getter and setter functions to detect the asynchronous data changes between Flex and the Web Dynpro application, and making general syntax changes.

1. In the Script block of the ShopFloorBins.mxml file, import the FlashIsland class from the sap package.

This gives the application access to the methods that are necessary to interact with SAP.

2. Before the end of the Script block, create a private function named init that takes no arguments and returns a void data type.
3. In the function, call the register() method of the FlashIsland package and pass this as an argument.

   The this keyword is an object self-reference, and in this case registers this Flex application as a Rich Island using the register() method of the FlashIsland class.

4. Locate the opening Application tag and change the initialize property value to init().

This registers the entire Flex application with the Rich Islands framework when the application initializes. Now it can be used as a UI element in the Web Dynpro component.

5. Locate the DataGrid control and delete it.

In Part 7 you created the Web Dynpro component with a table UI element. You are removing the Flex framework DataGrid control so that it can be functionally replaced by the table UI element to display the inventory data.

Creating setter and getter functions

In this section, you will create setter and getter functions for ActionScript properties that will be passed from the Web Dynpro application. The data from the Web Dynpro application is set asynchronously, which means that the Flex Rich Island cannot expect the data to arrive at a consistent time. A setter function will run when the data arrives, which allows you to predictably run code only when the data is present.

1. In the Script block, locate the populateData() function and delete it.

   The populateData() function creates the dummy data for the Flex application. You are deleting it because you will replace it with data from the Web Dynpro application.

2. Locate the startProduction() function and delete the populateData() function call.
3. In the Script block, using the set keyword, create a public function named wagonInventory that takes one argument named _wagonInventory with a data type of the ArrayCollection class and has a return type of void.

   Note: Remember that it is common convention to name the private class variable, which is associated with the public variable, using a leading underscore (_) character. In an earlier tutorial, you created the private _wagonInventory property. The wagon inventory data that populates the table UI element in the Web Dynpro context is also passed to the equivalent public variable in Flex. You created that context in Part 7. You are now setting the public variable to the private variable.

4. In the function assign _wagonInventory to this.wagonInventory.

   Note: Remember that the this keyword is a self reference. In this case, this._wagonInventory refers to the _wagonInventory private variable for this application. The _wagonInventory reference in the value statement refers to the one attribute of data defined in the set function and passed from the Web Dynpro application to the rich island.

5. Using the get keyword, create a public function named wagonInventory that takes no arguments and returns an ArrayCollection class data type.
6. In the function using the return keyword, return the _wagonInventory variable.

7. _wagonYellowWarningAmount

The rest of the getter and setter functions you will create now will accept equivalent Web Dynpro attributes that you created in Tutorial 7 in the component controller context.

8. Using the set keyword, create a public function named wagonYellowWarningAmount that takes one argument named _wagonYellowWarningAmount with a data type of the uint class. The function returns a void data type.
9. In the function assign _wagonYellowWarningAmount to this._wagonYellowWarningAmount.

10. Using the get keyword, create a public function named wagonYellowWarningAmount that takes no arguments and returns a uint data type.
11. In the function using the return keyword, return the _wagonYellowWarningAmount variable.

12. Locate the _wagonRedWarningAmount variable and remove the value assignment.

13. Using the set keyword, create a public function named wagonRedWarningAmount that takes one argument named _wagonRedWarningAmount and data type it to the uint class. The function returns a void data type.
14. Wtihin the function assign _wagonRedWarningAmount to this._wagonRedWarningAmount.

15. Using the get keyword, create a public function named wagonRedWarningAmount that takes no arguments and returns a uint data type.
16. In the function using the return keyword, return the _wagonRedWarningAmount variable.

17. Locate the _wagonProductionRate variable and remove the value assignment.

18. Using the set keyword, create a public function named wagonProductionRate that takes one argument named _wagonProductionRate and data type it to the uint class. The function returns a void data type.
19. Wtihin the function assign _wagonProductionRate to this._wagonProductionRate.

20. Using the get keyword, create a public function named wagonProductionRate that takes no arguments and returns a uint data type.
21. In the function using the return keyword, return the _wagonProductionRate variable.

The private _wagonInventory, _wagonRedWarningAmount, _wagonYellowWarningAmount, and _wagonProductionRate variables are populated through the associated ActionScript public setter functions with data from the Web Dynpro application. Since Flex executes asynchronously, your Rich Island may try to process these variables before the data has been retrieved. Additionally, you need all of the values to be available before you can use any of them in the wagon assembly line calculations. In this section, you create Boolean flags for each variable that you will evaluate to track whether all data has been received.

1. In the Script block, create a private variable named _isWagonInventoryThereFlag and data type it to the Boolean class. Assign a value of false.

2. Create three private variables named _isYellowWarningDataThereFlag, _isRedWarningDataThereFlag, and _isProductionDataThereFlag and data type them to the Boolean class. Assign the value of false to all the variables.

Adding each flag to the corresponding setter function

In each setter function, you will add the corresponding flag variable and assign its value as true signifying that the data was received by the setter function.

1. Locate the wagonInventory() setter function and after the current code, add the _isWagonInventoryThereFlag and set the value to true.

2. Locate the wagonYellowWarningAmount() setter function and after the current code, add the _isYellowWarningDataThereFlag and set the value to true.
3. Locate the _wagonRedWarningAmount() setter function and after the current code, add the _isRedWarningDataThereFlag and set the value to true.
4. Locate the wagonProductionRate() setter function and after the current code, add the _isProductionDataThereFlag and set the value to true.

Creating a function to determine if all the data is available

You will create a function to check if all the data has arrived in order to start the application.

1. In the Script block, create a private function named isDataLoaded() that takes no arguments and returns a void data type.
2. In the function, create a conditional statement that checks that all Boolean flags are true. Use the ampersand (&&) operator for the AND statements.

   Once the conditional statement is true, you have all the data you need to populate the bin values, calculate the clock values and initialize the Timer object.

Applying the new function to the setter functions

Each setter function runs independently of the others and will set its Boolean flag to true only when it receives the data from the Web Dynpro application. By calling the isDataLoaded() function from each setter function you can test whether all the data is present even if the Rich Island receives data in a different order each time.

3. Locate the wagonInventory() setter function, and after the current code in the function add a isDataLoaded() function.

4. Add the isDataLoaded() function to the wagonYellowWarningAmount(), wagonRedWarningAmount(), and wagonProductionRate() setter functions.

Modifying the isDataLoaded() function

Once the application starts, if the data changes, the appropriate setter function will call the isDataLoaded() function which will call the startProduction() function. However you will only want to call the startProduction() function once because the _productionTimer variable is meant be instantiated only once, when the application is first initialized. As you recall from Part 5, the _productionTimer variable is instantiated as the Timer object that is used to animate the application. Instantiating it each time the data changes will make the Timer object reset which will cause the clock time to behave oddly.

1. After the _isYellowWarningDataThereFlag variable is declared in the Script block, create a private variable named _applicationStarted and data type it to the Boolean class and assign false to it.

   This flag is set to false until the application is started and then will be set to true so that another application start is not attempted.

2. Locate the startProduction() function and after the code in the function add the _applicationStarted variable and assign it a value of true.

3. Locate the isDataLoaded() function and in the conditional statement create another conditional statement using the NOT (!) operator to test whether the _applicationStarted variable value is false.
4. If the conditional statement confirms that the application has not started, call the startProduction() function.

Recalculating the clock display when bin quantities are modified by the user

Thus far you have accounted for initial loading of data from the Web Dynpro application to the Rich Island. However, the wagon inventory data can change while the application is running if the user edits the inventory quantities in the Web Dynpro table UI element. In this case you need the Rich Island clock display, bin colors and bin quantities to update appropriately.

1. Locate the wagonInventory() setter function.
2. After the current code in the function add a condition statement that tests whether the application has started using the _applicationStarted Boolean value.

You must ensure that the application recalculates if the data changes. But you only want to call the recalculate() function after the application has been initialized because of the code sequence that must happen during this process.

3. Open BinComponent.mxml.
4. Delete the creationComplete property from the opening VBox tag.
5. In the Script block, locate the init() function and delete it.

   The component will be initialized when data is passed from the main application.

6. Locate the _wagonInventory ArrayCollection variable and remove the set value.

7. Save the file and return to ShopFloorBins.mxml and run it.

You should see the application is not populated with data.

Where to go from here

In this tutorial you learned how to prepare a Flex application to be a Rich Island in a Web Dynpro application and how to handle asynchronous data in this scenario.

If you are interested in learning more about the topics in this tutorial, refer to About library paths in the Flex documentation.

In Part 9 you will learn how to map Web Dynpro attributes to Flex ActionScript variables. You will also learn how to create two-way communication between SAP and the rich island using a Web Dynpro event.

Exploring Rich Island development with Flex Builder

For your reference, here are all the parts in this series:

• SAP developers: Build an interactive Flex application from scratch
  • Part 1: Getting started
  • Part 2: Laying out and styling visual elements
  • Part 3: Handling data and binding it to controls
  • Part 4: Creating a custom component
  • Part 5: Animating with ActionScript
  • Part 6: Synchronizing data in components
• Flex developers: Create a Web Dynpro application
  • Part 7: Creating an SAP application
• Flex and SAP developers: Create a working Rich Island
  • Part 8: Creating a Rich Island and handling data
  • Part 9: Communicating between a Rich Island and a Web Dynpro application