Exploring Rich Island development with Flex Builder – Part 1: Getting started

Welcome to Part 1 of this nine-part tutorial series. Parts 1 through 6 focus on teaching Flex development to SAP developers. Part 7 teaches Flex developers how to create a Web Dynpro application so that they have a passing familiarity with the environment. 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.

In this part, you will explore the finished sample application from the user's point of view, learn the application's architecture and set up a project in Adobe Flex Builder.

Note: Flex developers can skip ahead to Part 7.

Exploring the finished application

In this section, you will explore the Rich Island application that is built from scratch in this tutorial series.

Description of the application

In this tutorial series, you will create an SAP Web Dynpro application that contains a table UI element with inventory quantities to create a wagon. You will also create a Rich Island using Adobe Flex Builder to visually represent the wagon assembly line (see Figure 1).

The assembly line has a clock display that counts down the time until inventory is depleted in one bin. As the clock counts down, you can see inventory values decrease in each bin. When inventory in any of the bins reaches a minimum threshold value, the bin will turn yellow, indicating that it is running out of inventory. It will turn red when it is out of inventory.

You can replenish inventory by increasing the quantity values in the SAP table UI element or in the colored bins of the rich island. The application recalculates the clock based on the new inventory amounts and resumes the countdown.

The application in action

Watch the following video to see how the rich island that you build in this tutorial series works:

Video:

Understanding the architecture

In this section, you will learn about the basic structure of the application.

Introducing the application structure

ShopFloorBins.mxml file is the main Flex application file; this file:

• Imports the SAP libraries to communicate between the Rich Island and the Web Dynpro application
• Controls the animation and calculations for the clock
• Calculates the inventory bin values as wagons are created
• Tracks the threshold inventory in the bins

The application uses two child custom components (see Figure 2):

• ClockComponent.mxml: The digital clock display component
• BinComponent.mxml: A reusable component that is used five times to display the available parts inventory and color status

Introducing the variables used in the Flex application

This is a reference list of the variables you will create in this tutorial series.

• _wagonInventory: The inventory data that will populate the colored bins. This is the same data that populates the SAP table UI element.
• _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.
• _isWagonInventoryThereFlag: The indicator to alert whether the inventory data from SAP has arrived and is available for use.
• _binPosition: The index of the data in the ArrayCollection.
• _isProductionDataThereFlag: The indicator to alert whether the production rate data from SAP has arrived and is available for use.
• _isRedWarningDataThereFlag: The indicator to alert whether the red warning data from SAP has arrived and is available for use.
• _isYellowWarningDataThereFlag: The indicator to alert whether the yellow warning data from SAP has arrived and is available for use.
• _productionTimer: An instance of the Timer class that will generate timed events and animate the clock and bin displays based on the _wagonProductionRate.
• _applicationStarted: The indicator that alerts whether all data has been received and ensures the timer event is only initialized once.
• _productionRateCounter: A counter that will be used with the _wagonProductionRate to decrease the inventory in the bins.
• _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.
• mappedColumnNameForBinTitle: The ActionScript alias variable that is mapped to the Title column name in the SAP UI table element.
• mappedColumnNameForBinQuantity: The ActionScript alias variable that is mapped to the Quantity column name in the SAP UI table element.
• mappedColumnNameForBinParts: The ActionScript alias variable that is mapped to the Parts column name in the SAP UI table element.

Creating a Flex Builder project

In this section, you import and configure the starter Flex Builder project. You will use this project to create the Flex application that will become the Rich Island for the Web Dynpro application.

1. In Flex Builder, select File > Switch Workspace > Other.
2. In the dialog box, click the Browse button.
3. Navigate to the C drive and click the Make New Folder button (see Figure 3).

4. Name the new folder SAP_RichIslands.
5. Click OK.
6. Click OK to set the C:/SAP_RichIslands directory as the new workspace.

   Flex Builder will close and reopen in the new workspace.

7. After Flex Builder reopens, select File > New > Flex Project (see Figure 4).

8. Name the project ShopFloorBins and keep all the default values.
9. Click Finish.
10. Right-click on the ShopFloorBins project and select Properties.
11. In the menu on the left, select Flex Compiler.
12. For the Flex SDK version, choose Use a specific SDK then select Flex 2.0.1 Hotfix 3.
13. Click OK.

Where to go from here

In this tutorial you were introduced to the wagon assembly line rich island that you will create in this tutorial series. You also learned about the application's architecture and the variables used in the application. Lastly, you created a Flex Builder project.

If you are an SAP developer, proceed to Part 2, where you will create the layout that is the display foundation of the rich island.

If you are a Flex developer, proceed to Part 7, where you will learn the basics of creating a Web Dynpro application.

If you are interested in learning more about Flex Builder, refer to the following resources:

• Flex Builder features
• Flex Builder editor cheat sheet

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