Adobe
Sign in My orders My Adobe

by Trilemetry

Trilemetry

Content

Modified

3 August 2009

Page tools

Flex 3 Flex Builder 3

Prerequisite knowledge

This tutorial is written for:

  • Experienced SAP Netweaver ABAP developers who have completedParts 1 through 6 and Part 8 of this series.
  • Experienced Adobe Flex developers without previous SAP NetweaverABAP experience who have completed Parts 7 and 8 of this series.

User level

All

Required products

Sample files

Additional Requirements

SAP NetWeaver 7.01 ABAP

  • Download trial version

Sample files:

Note: The ZIP files are Flex Builder project archives and the NUGG files are SAP archives. The starter archives are the completed files from Part 8 of this tutorial series. The solution archives contain the completed code and assets associated with this tutorial, Part 9. The latter is provided to you to compare against your own completed code.

Welcome to Part 9 of this tutorial series. In this part, you will learn how to map Web Dynpro attributes to Flex ActionScript variables. You also learn to create a Flex Builder release build of the Rich Island and import it into the Web Dynpro application. Lastly, you learn how to create a Web Dynpro event in ActionScript to pass data to the Web Dynpro application from the rich island.

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.

Creating ActionScript alias variables for Web Dynpro

In Part 7 you created a Web Dynpro entity that contained inventory data for display in the Web Dynpro table UI element. In Part 8, you prepared the Flex application to receive that complex data as an ActionScript ArrayCollection object. However, remember that the table UI element has three columns of data for bin name, bin quantity and the number of parts necessary to create a wagon. In order to refer to the columns of data in the Web Dynpro context from the Flex ActionScript code, you will need to create an equivalent ActionScript variable for each of the column names. In this section, you create the ActionScript alias variables.

  1. In Flex, open the ShopFloorBins.mxml file.
  2. In the Script block, create the following Bindable, public variables, and data type them to the String class:
    • mappedColumnNameForBinTitle
    • mappedColumnNameForBinQuantity
    • mappedColumnNameForBinParts
[Bindable] public var mappedColumnNameForBinTitle:String; [Bindable] public var mappedColumnNameForBinQuantity:String; [Bindable] public var mappedColumnNameForBinParts:String;

Mapping Web Dynpro attributes to ActionScript variables

In this section, you will map the three ActionScript alias variables that you created in the last section to the associated column names in the wagonInventory data of the Web Dynpro application.

Applying mappings to the UI table

Follow these steps:

  1. In the NetWeaver Web Dynpro Explorer, open the V_ISLANDFORSHOPFLOOR Layout view, right-click on ROOTUIELEMENTCONTAINER, and select INSERT DATA_SOURCE.

    You will select the location of the data in SAP by creating a binding to it. This binding will keep track of changes made to SHOP_FLOOR_DATA the same way a binding works in the Flex framework.

  2. Bind the dataSource property to SHOP_FLOOR_DATA by clicking the Binding button to the right of the dataSource property.
  3. The name of the dataSource is wagonInventory.

    The name value refers to the wagonInventory ArrayCollection in ActionScript to which you are mapping to the Web Dynpro SHOP_FLOOR_DATA data.

Properties for the GACDataSource
Figure 1. Properties for the GACDataSource
  1. Right-click on GACDATASOURCE [DataSources] and select INSERT PROPERTY (see Figure 2).

    You will create a mapping for each column in SHOP_FLOOR_DATA to the specific alias in ActionScript that you created earlier. Once mapped, the alias in ActionScript represents the column name in the Web Dynpro data source.

Insert a data source property.
Figure 2. Insert a data source property.
  1. Enter mappedColumnNameForBinTitle for the name property.

    You will use mappedColumnNameForBinTitle when referencing the bin title data in ActionScript.

  2. Click the Binding button for the value property, select BINTITLE (see Figure 3), and click the Check button.
The Properties window for the GACPROPERTY
Figure 3. The Properties window for the GACPROPERTY
  1. Right-click on GACDATASOURCE [DataSources] and select INSERT PROPERTY.
  2. Enter mappedColumnNameForBinQuantity for the name property. Click the Binding button for the value property, then select BINQUANTITY, and click the Check button.
  3. Right-click on GACDATASOURCE [DataSources] and select INSERT PROPERTY.
  4. Enter mappedColumnNameForBinParts for the name property. Click the Binding button for the value property, then select BINPARTS and click the Check button.
  5. Save the changes using the Save button on the top menu.

    If prompted to save your changes, select yes.

  6. Double-click the W_MAIN view in the Windows folder and go to the Windows tab.
  7. Expand the W_MAIN structure until the ISLANDS_CONTAINER is revealed.

    You will embed the V_ISLANDFORSHOPFLOOR view into the ISLANDS_CONTAINER allowing you to display both the V_ISLANDFORSHOPFLOOR view containing the rich island and the V_MAIN view containing the table UI element at the same time.

  8. From the Views folder on the left side of the screen, drag and drop the V_ISLANDFORSHOPFLOOR view into the ISLANDS_CONTAINER component on the right.
  9. Click the Check button to keep the default values when the Web Dynpro: Embed a View dialog box appears (see Figure 4).
The Web Dynpro: Embed a View dialog box.
Figure 4. The Web Dynpro: Embed a View dialog box.
  1. Expand ISLANDS_CONTAINER to reveal the V_ISLANDFORSHOPFLOOR view to verify the application's structure (see Figure 5).
V_ISLANDFORSHOPFLOOR inside the ISLANDS_CONTAINER
Figure 5. V_ISLANDFORSHOPFLOOR inside the ISLANDS_CONTAINER
  1. Select Window > Save to save your changes.

Applying mappings to the attributes

Follow these steps:

  1. Open the V_ISLANDFORSHOPFLOOR Layout view and select the ROOTUIELEMENTCONTAINER.
  2. Right-click on the ROOTUIELEMENTCONTAINER in the UI element hierarchy and choose INSERT PROPERTY.

    You will now set additional mappings that represent the threshold values for changing the bin colors and the assembly rate in ActionScript.

  3. Give the property an ID of REDWARNING and a name of wagonRedWarningAmount and then click the Bind button next to the value field.

    The ID property REDWARNING, is an internal name used in the Web Dynpro application structure. This is similar to the component id property in the Flex framework. The name wagonRedWarningAmount references the public variable created in ActionScript and holds the threshold value for when the bin should turn red.

Click the Bind button.
Figure 6. Click the Bind button.
  1. Select REDWARNING from the dialog box and click the Check button.
  2. Right-click on the ROOTUIELEMENTCONTAINER in the UI element hierarchy and choose INSERT PROPERTY.
  3. >Give the property an ID of YELLOWWARNING and a name of wagonYellowWarningAmount and then click the Bind button next to the value field.

    The wagonYellowWarningAmount references the public variable in ActionScript and holds the threshold value for when the bin should turn yellow.

  4. Select YELLOWWARNING from the dialog box and click the Check button.
  5. Right-click on the ROOTUIELEMENTCONTAINER in the UI element hierarchy and choose Insert Property.
  6. Give the property an ID of PRODUCTION and a name of wagonProductionRate and click the Bind button next to the value field.

    wagonProductionRate references the public variable in ActionScript and holds the value for the speed at which the wagons are assembled.

  7. Select PRODUCTION from the dialog box and click the check button.
  8. Double-click the Z_SHOP_FLOOR_BINS folder to stop editing the V_ISLANDFORSHOPFLOOR view.
  9. Right-click on the Z_SHOP_FLOOR_BINS folder, select Activate and activate all items.

Activating means to create new runtime objects which will include any changes you have made to the application. This is similar to recompiling an application in Flex Builder to see the changes made.

Changing the syntax of variables in functions

In the Flex application, the private variable that holds all of the data is _wagonInventory. It is an ArrayCollection data type with complex data passed from the Web Dynpro application (think of the table UI element). In the previous sections, you created alias variables in ActionScript that represent the column names (bin quantity, bin parts, bin title) for the Web Dynpro data. In this section, you will use the alias variables, and square bracket syntax, to access the specific data in the ArrayCollection. The square bracket syntax denotes a variable that needs to be evaluated. The alias variables will be evaluated to return the name of the associated Web Dynpro property.

  1. Return to ShopFloorBins.mxml in Flex Builder.
  2. Locate the calculateMaxWagonsPossibleFromInventory() function in the Script block.
  3. Locate each instance where the Quantity is retrieved from the _wagonInventory ArrayCollection and change the .Quantity string to [mappedColumnNameForBinQuantity]. There are two changes made in the function.
_wagonInventory.getItemAt(x)[mappedColumnNameForBinQuantity]

Note that there is no period between the getItemAt() function and the alias variable notation. This is the syntax that must be used when using SAP mappings.

  1. Locate each instance where the Parts are retrieved from the _wagonInventory ArrayCollection and change the .Parts string to [mappedColumnNameForBinParts]. There are two changes made in the function.
  2. Locate the timerEventHandler() function and change the variables referencing Quantity and Parts to [mappedColumnNameForBinQuantity] and [mappedColumnNameForBinParts]. There are two changes for Quantity and one for Parts in the function.

Changing the bin component variable syntax

BINTITLE, BINQUANTITY, and BINPARTS are the names of the columns in the Web Dynpro table UI element and mappedColumnNameForBinTitle, mappedColumnNameForBinQuantity, and mappedColumnNameForBinParts are the alias variable that were mapped to the columns for referencing in the Flex application.

The mapped alias variables are created in the main Flex application file and therefore not available in the BinComponent custom component. In this section, you could create a setter function in the BinComponent custom component to accept these alias variables values as properties and then apply them using square bracket syntax as you did previously. However, for brevity's sake, you will instead directly hard-code the column names from the Web Dynpro table UI element.

  1. Open BinComponent.mxml and locate the calculateQuantity() function in the Script block.
  2. Locate each instance where the Parts is retrieved from _wagonInventory and change the Parts string to BINPARTS. There are two changes to be made.
_wagonInventory.getItemAt(_binPosition).BINPARTS;

Note that when using the SAP column names you do not use the bracket syntax, because there is no alias that must be evaluated.

  1. Locate the binColorHandler() function and change all the variables referencing Parts and Quantity to BINPARTS and BINQUANTITY. There are four changes for Quantity and one change for Parts.
  2. Locate the updateBinInventory() function and change the Quantity reference to BINQUANTITY.
  3. Locate the binTitle Label control and change the text property value referencing Title to BINTITLE.
  4. Locate the binData TextInput control and change the text property value referencing Quantity to BINQUANTITY.
  5. Locate the wagonInventory setter function.

    Call the binColorHandler() function to ensure the bins are updated when a change is made to the Web Dynpro table UI element.

  6. Save the file and run it.

The application will not work; however, you should not see any errors.

Creating a Flex Builder release build and importing it into SAP

In this section, you will create a release build of the ShopFloorBins application. The release build is a SWF file that you will import into SAP and then test.

  1. Select File > Export > Release Build.
  2. Ensure that the ShopFloorBins/bin-release folder is selected for the Export to folder option.
  3. Click Finish.

Uploading the Flex SWF file to the ABAP server

Follow these steps:

  1. Log on to SAP if needed and navigate to the NetWeaver Web Dynpro Repository Browser.
  2. Right-click on the Z_SHOP_FLOOR_BINS component and select Create > Mime Object > Import (see Figure 7).
Create a Mime Object with the component pop-up menu.
Figure 7. Create a Mime Object with the component pop-up menu.
  1. In the Open dialog box, navigate to the C:\SAP_RichIslands\ShopFloorBins\bin-release directory (see Figure 8). Select the ShopFloorBins.swf file and click Open.
Import a SWF file as a Mime Object.
Figure 8. Import a SWF file as a Mime Object.
  1. In the Create New Document dialog box, click the Save button.
  2. Enter $TMP as the package name if it is blank in the Create Object Directory dialog box and click the Save button.

The Flex Rich Island is now displayed in the MIME folder of the Web Dynpro Component and is available for integration into the Web Dynpro application.

Linking the Flex rich island file to the Z_SHOP_FLOOR_BINS application

Follow these steps:

  1. Under Views, double-click the V_ISLANDFORSHOPFLOOR component.
  2. Select the ROOTUIELEMENTCONTAINER. Ensure that it is listed as a FlashIsland in the Properties.
  3. Enter the following into the Properties window:
    • swfFile: ShopFloorBins.swf
    • width: 100%
    • height: 600px
Specify the ROOTUIELEMENTCONTAINER properties.
Figure 9. Specify the ROOTUIELEMENTCONTAINER properties.
  1. Select View > Save to save your changes.
  2. Double-click on the Z_SHOP_FLOOR_BINS folder to stop editing the V_ISLANDFORSHOPFLOOR component view.
  3. Right-click on the Z_SHOP_FLOOR_BINS folder, select Activate, and activate all items.

Creating a Web Dynro application

Follow these steps:

  1. If you have a Web Dynpro Applicat. folder, expand it and delete the Z_SHOP_FLOOR_BINS application.

    You cannot overwrite an existing application.

  2. Right-click on the Z_SHOP_FLOOR_BINS folder and select create > Web Dynpro Application.
  3. Click the check button to keep the default values in the Create Web Dynpro Application window.
  4. Using the File button on the top menu, save the application.
  5. Select Web Dynpro Application > Test > Execute from the header menu or F8 to run the application.

You should see the Flex Rich Island displayed below the table UI element in the application. Note that as the clock counts down the inventory in the bin decreases; however, the UI table element values never change. Change a bin amount. The clock time automatically adjusts. Change a bin quantity to zero in the Rich Island and you will see that the clock also changes to zero but, again, the Web Dynpro table UI element does not change. Now change the table UI element quantity where the bin inventory is zero in the Rich Island. You will see that the clock time adjusts and the bin inventory matches the UI table element value.

Creating a Web Dynpro event

In your testing you have noticed that data only flows from the Web Dynpro component to the Rich Island. The Web Dynpro component has no awareness of data changes taking place in the Rich Island. In this section, you will create a Web Dynpro component event that will be used to notify the component of data changes within the Rich Island. The event you will create accepts as parameters the bin index and the corresponding data from the ArrayCollection. This event is triggered by data changes in the Rich Island, thus creating a two-way communication.

  1. Return to the SAP Repository Browser and double-click the V_Main view in the Views folder of the Web Dynpro Explorer.
  2. Select the TABLE_BINTITLE_EDITOR within TABLE_BINTITLE to change the value of the onEnter property. Select the button next to the field.
  3. In the Create Action window, enter ONINPUTACTION in the Action field.
  4. Click the Check button.

    When a change is made to the table UI element's title column, the onEnter event is triggered and the event is handled by the ONINPUTACTION method. In this case, the method has no code and simply relays the value of the change to any bound elements. You are allowed to make changes to the title column as an illustration that text can also be modified.

  5. Select the TABLE_BINQUANTITY_EDITOR within TABLE_BINQUANTITY and from the field pop-up menu, change the value of the onEnter property to ONINPUTACTION.
  6. Using the File button on the top menu, save the V_Main view updates.
  7. Double-click the V_ISLANDFORSHOPFLOOR view in the Views folder.
  8. Navigate to the Layout tab and right-click on the ROOTUIELEMENTCONTAINER in the UI element hierarchy and choose Insert Event (see Figure 10).

    You will now create an event that listens for data changes from the Rich Island and calls a method that makes modifications to the table data.

Create an event.
Figure 10. Create an event.
  1. Name the event onNewInventory and click the button next to the onAction field (Figure 11).
Create an action.
Figure 11. Create an action.
  1. Enter ONNEWINVENTORY for the onAction field and click the Check button (see Figure 12).

    You are creating a new method named ONNEWINVENTORY that is triggered by the onNewInventory event.

Name the action.
Figure 12. Name the action.
  1. Select the Methods tab.
  2. Double-click on the newly created method ONNEWINVENTORY and paste the following code in the editor that opens up. Save the changes after copying the code.

    Note: This ABAP code will accept the bin index and bin quantity from the Rich Island as parameters. Using the bin index the code will update the corresponding row of the SAP data with the new quantity. Check the SAP Developer's Network for resources about ABAP programming.

method ONACTIONONNEWINVENTORY . *create local variables with their types DATA lo_nd_shop_floor_data TYPE REF TO if_wd_context_node. DATA lo_el_shop_floor_data TYPE REF TO if_wd_context_element. DATA ls_shop_floor_data TYPE wd_this->element_shop_floor_data. DATA lv_binQuantity TYPE wd_this->element_shop_floor_data-binquantity. DATA lv_binNumber TYPE I. * navigate from <CONTEXT> to <SHOP_FLOOR_DATA> via lead selection lo_nd_shop_floor_data = wd_context->get_child_node( name = wd_this->wdctx_shop_floor_data ). * assign the value from binPosition to local variable lv_binNumber lv_binNumber = wdevent->get_String('binPosition'). * increment lv_binNumber lv_binNumber = lv_binNumber + 1. * get datagrid data at index lv_binNumber lo_el_shop_floor_data = lo_nd_shop_floor_data->get_element( index = lv_binNumber ). * do nothing if there is no data IF lo_el_shop_floor_data IS INITIAL. ENDIF. * assign the value from newInventoryAmount to local variable lv_ binQuantity lv_binQuantity = wdevent->get_String('newInventoryAmount'). * assign lv_binQuantity to BINQUANTITY in the shopfloor datagrid lo_el_shop_floor_data->set_attribute( name = 'BINQUANTITY' value = lv_binQuantity ). ENDMETHOD.

Now you will create the required parameters for the event.

  1. Go to the Layout tab and right-click on the new event and select INSERT EVENT_PARAMETER, and then add the following properties for the event parameter:
    • ID: NEWVALUEINBIN
    • name: newInventoryAmount

    The NEWVALUEIN ID is the internal Web Dynpro name of the parameter in the application structure. The newInventoryAmount name is the argument name you will use in ActionScript when passing the value to the Web Dynpro application. The value is used to update the Web Dynpro table UI element.

  2. Insert another Event_Parameter with the following properties (see Figure 13):
    • ID: POSITIONOFBIN
    • name: binPosition

    The name, binPosition, will contain the index of the row to update in the Web Dynpro table UI element.

Create parameters.
Figure 13. Create parameters.
  1. Save the application.

Dispatching Rich Island events to the Web Dynpro component

In this section, you will dispatch an event from the Rich Island to the Web Dynpro component using the FlashIsland.fireEvent() method. This method is available in the FlashIsland library SWC that you imported into your SAP application in Part 8.

  1. Return to BinComponent.mxml and import the FlashIsland class from the sap package into the Script block.
import sap.FlashIsland;
  1. Locate the updateBinInventory() method and after the code in the function, use the fireEvent() method of the FlashIsland class to dispatch an event.
FlashIsland.fireEvent();

This event takes three arguments: the component, the literal Web Dynpro event name that you created in the last section, and the parameters that are being updated.

  1. As the first argument of the FlashIsland.fireEvent() method, type this.

    The value, this, represent the source of the event which in this case is the application itself.

  2. For the second argument, reference the onNewInventory event that you created earlier in NetWeaver. Place double-quotes around the value.
FlashIsland.fireEvent(this, "onNewInventory");
  1. Create an object using curly braces for the third argument and type newInventoryAmount to reference the first piece of data required by the event and give it a value of binData.text. Separate the name and value with a colon.

    The value comes from the text property of the binData TextInput control.

  2. After a comma to separate the two pairs of data, type binPosition with a value of _binPosition.

    Remember, newInventoryAmount and binPosition were the parameters you created in the Web Dynpro event.

FlashIsland.fireEvent(this, "onNewInventory", {newInventoryAmount: binData.text, binPosition: _binPosition});
  1. Save the file and export a release SWF file.

Updating the SWF file in the Web Dynpro component

In order to see the changes you just made, you will need to replace the SWF rich island file in the Web Dynpro application.

  1. In the Web Dynpro Explorer, expand the MIME folder and remove the ShopFloorBins.swf file by right-clicking it and selecting Delete.

    You have a new SWF file and it will not overwrite the old SWF file so you must delete it.

  2. Right-click on the Z_SHOP_FLOOR_BINS component and choose Create > Mime Object > Import.
  3. Choose the completed Flex SWF file from the Flex Builder project workspace and save the MIME Object using the default document settings.
  4. Activate the change by right-clicking on the Z_SHOP_FLOOR_BINS component and selecting Activate.

    You have made changes that you want used in the application.

  5. Right-click on the current Z_SHOP_FLOOR_BINS application listed under the Web Dynpro Application. folder and delete it.

    You want to generate a new application. If you have not made changes to your application, you can just import a new SWF file without generating a new application version.

  6. Right click on the Z_SHOP_FLOOR_BINS component and select Create > Web Dynpro Application.
  7. Click the Check button in the dialog box.
  8. Save the Z_SHOP_FLOOR_BINS component by using Ctrl+S or the Save button.

    It is very important that you save the component, otherwise you will not see the application you just generated.

  9. When the dialog box appears click the Local Object button.
  10. Press F8 on your keyboard or click the Text/Execute button to launch the application.

Use these steps to view updates to the Rich Island when asked, "Compile a release build SWF from Flex Builder, import it into SAP, and view it in a browser."

Change the data in a colored bin in the Rich Island and press Enter; note that the number you changed is now reflected in the Web Dynpro UI table element. Also note that the clock time adjusted but as it counts down, the table UI column values do not change.

Dispatching events from the main application

You now need to synchronize the bin inventory quantity in the Web Dynpro UI table element with the clock countdown from the Rich Island. You will dispatch the FlashIsland event from the timerEventHandler() function in the Rich Island to the Web Dynpro component.

  1. In Flex Builder return to the ShopFloorBins.mxml file.
  2. Locate the timerEventHandler() function in the Script block.
  3. Before the declaration of the partsLeftInBin local variable, create a new local variable named newQuantity and data type it to the uint class.
  4. In the conditional statement that tests if the _productionRateCounter is a multiple of 6 but after the for loop, create another for loop that loops over the _wagonInventory ArrayCollection. Use the variable y to iterate.

    You want to use this loop to send events to SAP after all the changes have been made to the _wagonInventory ArrayCollection, otherwise the bin display will not appear to be in sync with the table UI element.

for (var y:uint = 0; y < _wagonInventory.length; y++) { }
  1. Within the loop, _wagonInventory.getItemAt(y)[mappedColumnNameForBinQuantity] and assign it to the newQuantity variable.
newQuantity = _wagonInventory.getItemAt(y)[mappedColumnNameForBinQuantity];
  1. Dispatch the FlashIsland .fireEvent() event with the three arguments: this, "onNewInventory", {newInventoryAmount: newQuantity, binPosition: y}.

    The first argument, this, represents the application as the source of the event, the second argument represents the event name, and the last argument represents the data.

FlashIsland.fireEvent(this, "onNewInventory", {newInventoryAmount: newQuantity, binPosition: y});
  1. Save the file and compile a release build SWF file from Flex Builder, import it into SAP, and view it in a browser (see Figure 14).

As the clock counts down, notice that the inventory changes are reflected in the UI table element. Change the naumber in any bin. You should see the clock time adjust and the UI table element change. When the clock reaches 0 or you change a bin to 0, note that the clock stops and the bin turns red.

The finished Web Dynpro application
Figure 14. The finished Web Dynpro application

Where to go from here

In this tutorial you learned how to map Web Dynpro attributes to ActionScript variables and how to use these alias variables in ActionScript. You also learned how to create and use a Web Dynpro event to provide two-way communication between a Web Dynpro component and a Rich Island.

To review the concepts you've learned in Parts 8 and 9 of this tutorial series about creating Adobe Rich Islands for Web Dynpro applications, watch the following videos:

Seeing the working application (2:28)
Creating your first Web Dynpro component (2:33)
Understanding the SAP Rich Islands libraries (5:07)
Mapping simple data between Flex and Web Dynpro (9:25)
Passing complex data from Web Dynpro to Flex (9:25)
Dispatching and handling events (3:33)
Asynchronous data handling (2:23)

Exploring Rich Island development with Flex Builder

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

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement