Exploring Rich Island development with Flex Builder – Part 5: Animating with ActionScript

Welcome to Part 5 of this tutorial series. In this part, you will create, style, and implement a custom clock component for the wagon assembly line application that is pictured in Figure 1. You will also implement the ActionScript Timer class to animate the clock and ensure that updates to the inventory quantities in the DataGrid control are properly reflected in the colored bins.

Note: Parts 1 through 6 focus on teaching Flex development to SAP developers. Part 7 teaches Flex developers how to create a Web Dynpro application. Parts 8 and 9 show both SAP and Flex developers how to integrate the Flex application as a Rich Island into the Web Dynpro application.

Figure 2 outlines the Flex framework controls and containers that you will use in this application. In this tutorial, you convert the clock display that you created in an earlier tutorial into a custom component by moving the Canvas container layout (the smaller image at the bottom right of Figure 2) from the main application file to a separate file.

Variables used

You used the following variables in previous tutorials:

• _wagonInventory: The inventory data that will populate the colored bins.
• _wagonProductionRate: The speed at which a complete wagon is assembled.
• _wagonYellowWarningAmount: The minimum number of wagons that can be created, based on the available inventory, when a bin turns yellow.
• _inventoryNeededForYellow: The number of parts needed in a bin to make the wagons for the _wagonYellowWarningAmount.
• _wagonRedWarningAmount: The minimum number of wagons that can be created, based on available inventory, when you want the bin to turn red and the assembly line to stop.
• _inventoryNeededForRed: The number of parts needed in the bin to make the wagons for the _wagonRedWarningAmount.
• _binPosition: The index of the data in the _wagonInventory ArrayCollection that populates the bin.

This tutorial introduces the following variables:

• _productionTimer: An instance of the Timer class that will generate timed events and animate the clock and bin displays based on the _wagonProductionRate.
• _secondsToCreateAvailableWagons: The number of seconds needed to create wagons based on the bin with the lowest amount of inventory. This value will change appropriately as inventory is used.
• _clockMinutes: The minutes calculated from the _secondsToCreateAvailableWagons for display in the clock.
• _clockSeconds: The remaining seconds (after the minutes are calculated) for display in the clock.
• _clockDisplay: An instance of the Date class that is used to create a time to display on the clock.
• currentTime: The string representation of the Date object that will display on the clock.

In this section, you will replace the clock code from the main application MXML file with an equivalent custom component.

1. In the Flex Builder Navigator view, right-click the components folder within the src folder of this project and select New > MXML Component.
2. Name the component ClockComponent.

   The component is based on the Canvas container.

3. Click Finish.
4. In the ClockComponent.mxml file, locate the opening Canvas tag and delete the width and height properties.
5. After the opening Canvas tag, create a Script block.
6. Open ShopFloorBins.mxml from the src folder of the ShopFloorBins project.
7. Locate the clockTitle Label control and the following timeLeftBackground Canvas container and its contents.
8. Cut them from the code.
9. Paste the code after the closing Script tag of the ClockComponent.mxml file.
10. Save the file.
11. Return to ShopFloorBins.mxml.
12. Locate the clockBase Canvas container and delete it.
13. Locate the assemblyLineBackground Canvas container and add the ClockComponent from the comp namespace before the first BinComponent component instance.

    Note: Remember that the comp namespace has been defined in the opening Application tag to point to all class files in the components directory of this Flex Builder project. Since ClockComponent.mxml is a class file within this directory, you can reference it from the namespace.

14. Add the following properties and values to the ClockComponent instance:

15. Save the file and run it.

    You should see the that clock is unformatted because the clockStyle styleName property has not been applied to ClockComponent.mxml.

16. Return to ClockComponent.mxml.
17. Between the Script block tags, declare a public variable named currentTime and data type it to the String class.

    The currentTime variable is the String used for the clock display. You are creating it as a public variable because it will be a property of the custom component that can be set in the ClockComponent instance of the main application.

18. Make the currentTime variable Bindable.

19. Locate the timeLeft Label control and change its id property value of 00 and bind the text property to currentTime.

You now create a variable to hold the time and display it in the clock.

20. Save the ClockComponent.mxml file.
21. Return to ShopFloorBins.mxml.
22. In the Script block below the other variable declarations, declare and instantiate a bindable private variable named _clockDisplay and data type it to the Date class.

    The _clockDisplay is an instance of the Date class that you will use to format and display the clock value. An instance of the Date class represents a particular point in time.

23. Locate the clock component instance and add a currentTime property with a value bound to _clockDisplay.

    Note: Remember the currentTime is the public property of the ClockComponent that you created earlier. You are binding the _clockDisplay Date object in the main application to it.

24. Save the file and run it.

You should see the time displayed as shown in Figure 4. The time has not been formatted yet as minutes and seconds.

In this section you will use the DateFormatter ActionScript class to properly format the clock display.

1. Return to ShopFloorBins.mxml.
2. After the Script block but before the Canvas container, add the DateFormatter component with its id property value set to clockFormatter and its formatString property value set to NN:SS.

   Note: NN:SS is a format mask where NN represents minutes in an hour and SS represents seconds in a minute. Check the Flex documentation for more information about the available masks.

3. Locate the clock component instance and use the format() function of the clockFormatter class to format the _clockDisplay property and bind it to the currentTime property of the custom component.

   The format() function returns a String representation of the information contained in the Date object.

4. Save the file and run it.

   As you can see in Figure 5, the clock component is not styled correctly.

5. Open ClockComponent.mxml and add the styleName property to the opening Canvas tag with a value of clockStyle.

   Note: Remember, the clockStyle is defined in the CSS file named ShopFloor.css in the assets folder. It was not applied to the ClockComponent when the code was transferred from the main application.

6. Save the file.
7. Return to ShopFloorBins.mxml.
8. Save the file and run it.

You should see that the clock is now properly formatted (see Figure 6).

In this section you calculate the count down time on the clock based on the available inventory in the bins. You will also use the ActionScript Timer class to animate the clock.

1. Return to ShopFloorBins.mxml.
2. Locate the _clockDisplay variable in the Script block and remove the assigned value.

   Note: Remember that this variable is a Date object that will hold the time, in minutes and seconds, for display in the clock. You need control as to when the value of currentTime is set which will happen in the function you create next.

Calculating bin with the lowest possible wagons

In this section, you calculate the total number of wagons that can be assembled based on the available inventory in each bin and the number of parts necessary from each bin to create a wagon.

1. Locate the clock component instance and delete the currentTime property from the instance.

   The currentTime property will be populated within ActionScript through the logic of the application.

2. In the Script block, create a bindable private variable named _secondsToCreateAvailableWagons and data type it to the uint class.

    

   This variable will hold the total number of seconds to make wagons based on available inventory. The DateFormatter object will also use this value to format the clock display. This variable will decrement as the clock counts down.

3. Create a bindable private variable named _wagonProductionRate, data type it to the uint class and give it a value of 6.

   The production rate represents how fast a wagon can be assembled. In this case, every 6 seconds a wagon is assembled.

4. In the Script block, create a private function named calculateMaxWagonsPossibleFromInventory() that takes no arguments and returns a void data type.
5. Within the function create a local variable named potentialWagonsFromCurrentBin and data type it to the uint class.

   Note: This variable will hold the total number of wagons that can be created from the current bin as it loops over each bin in the ArrayCollection data. Note that local variables are not declared with an access modifier such as private or public. Their scope is automatically restricted to the function in which they are created.

6. Create another local variable named lowestPotentialNumberOfWagons, data type it to the uint class.

   This variable will hold the value from the bin with the lowest number of possible wagons that can be created based on inventory.

7. After the local variables, create a for loop to loop over the _wagonInventory ArrayCollection. In the for statement, create an iterant named x and data type it to the uint class with a value of 0 (zero). While x is less than _wagonInventory.length, iterate the loop using the x++ syntax.

8. Within the loop, assign the result of the current index of the _wagonInventory Quantity divided by the current index of the _wagonInventory Parts to the potentialWagonsFromCurrentBin variable. Use the getItemAt() function.

   As you perform the loop, you will divide the available inventory by the number of parts necessary for each wagon. In other words, if you have 100 wheels (quantity) and you need 4 wheels per wagon (parts), then the potential number of wagons that you can create from the wheels bin is 25.

9. After the variable, create a conditional statement that tests whether x is equivalent to 0 (zero) or potentialWagonsFromCurrentBin is less than lowestPotentialNumberOfWagons.

   This is either the first time through the loop or the number of wagons that can be created from the current evaluated bin is less than the number of wagons that can be created from any previously evaluated bin.

   Note: Remember that the lowestPotentialNumberOfWagons variable will hold the lowest number of wagons that can be created from all of the bins. In other words, as you loop over each bin, this conditional check is asking, "Does this bin that I am currently evaluating have a lower number of potential wagons than the previous bins that I have already evaluated?"

10. If the conditional statement tests true, assign the potentialWagonsFromCurrentBin to lowestPotentialNumberOfWagons.

    This will set the number of wagons that can be created for this evaluated bin as the lowest possibility.

11. After the conditional statement but still inside the loop, create another conditional statement that tests whether the _wagonInventory quantity is less than the _wagonInventory parts. Use the getItemAt() function.

    This tests whether there are enough parts in the bin to create a full wagon.

12. If the conditional statement tests true, assign 0 (zero) to lowestPotentialNumberOfWagons.

If there are not enough parts to make a wagon, then you will set the lowestPotentialNumberOfWagons to zero.

Calculating the number of seconds to create possible wagons

In this section, you will use the result of the previous calculation to determine the number of seconds it will take to create the possible wagons.

1. After the loop but still inside the calculateMaxWagonsPossibleFromInventory() function, assign the result of lowestPotentialNumberOfWagons multiplied by _wagonProductionRate to the _secondsToCreateAvailableWagons variable.

   This calculates how many total seconds it takes to create all the wagons from the bin with the lowest inventory.

2. After this variable, call the setClockDisplay() function. You will create this function next.

You will call the setClockDisplay() function to display the countdown time in the clock component.

Creating the clock display based on the inventory

In this section, you use the _secondsToCreateAvailableWagons value to calculate the minutes and seconds on the clock.

1. In the Script block of ShopFloorBins.mxml, create a bindable private variable named _clockMinutes and data type it to the uint class.

   This variable will hold the value of total number of minutes it takes to make all the wagons.

2. Create another bindable private variable named _clockSeconds and data type it to the uint class.

   This variable will hold the value of the remaining seconds after the minutes have been calculated.

3. Before the end of the Script block, create a private function named setClockDisplay() that takes no arguments and returns a void data type.

4. In the function, calculate the result of _secondsToCreateAvailableWagons divided by 60 using the Math.floor() function and assign the results to _clockMinutes.

   This calculates the number of minutes.

5. Next, assign the result of _secondsToCreateAvailableWagons mod (using %) 60 to _clockSeconds.

   This calculates the remaining number of seconds using the modulus (%) operator. Remember that the modulus operator divides the _secondsToCreateAvailableWagons variable value by 60 and returns the remainder.

6. Next, instantiate the _clockDisplay variable to the Date class.

7. Use the setMinutes() method of the Date class to populate the new Date object by passing _clockMinutes and _clockSeconds as the two arguments.

8. Using the clockFormatter.format() function to format _clockDisplay and assign it to the text property of clock.

   This uses the previously defined DateFormatter instance to format the Date object display.

9. Locate the startProduction() function in the Script block.
10. Before the ending curly brace, add the function call to calculateMaxWagonsPossibleFromInventory().

    This ensures that the possible number of wagons are calculated and that the clock is formatted with the correct number of minutes and seconds when the application is initialized.

11. Save the file and run it.

You should see the clock display a starting time based on the Handles bin because it has the lowest inventory. Change any of the bins to 50. Note that the clock time does not change.

Animating the clock

In this section, you animate the clock using the ActionScript Timer class.

1. Open ShopFloorBins.mxml.
2. In the Script block, import the Timer class from the flash.utils package.
3. Also import the TimerEvent class from the flash.events package.

4. After the other variable declarations in the Script block, create a private variable named _productionTimer and data type it to the Timer class.

This variable is an instance of the Timer class that you will use to animate the clock.

5. Locate the startProduction() function in the Script block.
6. After the current code in the function, instantiate _productionTimer to the Timer class and pass 1000 and 0 as arguments.

   This code instantiates a Timer instance that will dispatch every second (1000 milliseconds) and will not stop. The second argument, set to zero here, instructs the timer to not stop. If you set this value to a number, the timer will stop in that number of milliseconds.

7. Next, add an event listener to the _productionTimer instance that takes TimerEvent.TIMER and timerEventHandler as arguments.

   Note: Event listeners execute code in response to specific events. The first argument declares the type of event to be handled and the second argument declares the name of the function that will execute. You will create the timerEventHandler() function next.

8. Before the end of the Script block, create a private function named timerEventHandler() that takes one argument named event. Data type the argument to the TimerEvent class and set the function to return a void data type.

9. Within the function, decrement the _secondsToCreateAvailableWagons variable using -- syntax.

   When the timerEventHandler() function is called every second (1000 milliseconds), you will decrement the display on the clock by one second.

10. Next, call the setClockDisplay() function.

Now that there is one less second on the clock, you call the function that recalculates the minutes and seconds and changes the clock display, which animates the clock.

Starting and stopping the clock

Earlier you created the timer instance to never stop. This means that you must explicitly call the stop() and start() methods of the Timer class to control the instance. In this section, you create the function to start the timer when the application is initialized and the function to stop the timer when the clock counts down to zero.

1. Before the end of the Script block, create a private function named startTimer() that takes no arguments and returns a void data type.
2. Within the function, start the timer using the start() function of _productionTimer instance.

3. Locate the startProduction() function and call the startTimer() function before the closing curly brace.

   This will start the timer when the application initializes.

4. Save the file and run it.

   You should see the clock counting down. If you wait until the clock counts down to zero, you see that the TimerEvent event is still being dispatched so the clock never stops.

5. Below the startTimer() function, create a private function named stopTimer() that take no arguments and returns a void data type.
6. Within the function stop the timer using the stop() function of _productionTimer.

7. Locate the timerEventHandler() function in the Script block and delete the code in the function.
8. Within the function, create a conditional statement that tests if the value of _secondsToCreateAvailableWagons is equivalent to 0 (zero).
9. It the test is true, call the stopTimer() function.
10. Create an else statement to decrement the _secondsToCreateAvailableWagons variable if the conditional statement is false.
11. Still within the else statement, call the setClockDisplay() function.

12. Save the file and run it.

Let the clock count down to zero. You should see that the clock stops.

Where to go from here

In this tutorial, you created the custom clock component, styled it, and used it in the main application. You also used the ActionScript Timer class to animate the clock and the colored bins and stopped the clock when it reached zero.

If you are interested in learning more about the topics in this tutorial, refer to the following resources:

• Formatting data (6:09)
• Controlling time intervals

In Part 6, you will synchronize the clock with the wagon assembly so that, as the clock counts down, inventory will be removed from the colored bins based on the production rate.

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