Adobe

Products

Acrobat

Creative Cloud

Creative Suite

Digital Marketing Suite

Digital Publishing Suite

Elements

Photoshop

Touch Apps

Student and Teacher Editions

More products

Solutions

Creative tools for business

Digital marketing

Digital media

Education

Financial services

Government

Web Experience Management

Exploring Rich Island development with Flex Builder – Part 7: Creating an SAP application

by Trilemetry

Trilemetry, Inc.

Modified

3 August 2009

Requirements

Prerequisite knowledge

This tutorial is written for experienced Adobe Flex developers without previous SAP Netweaver ABAP experience.

To complete this tutorial, you first need to install the SAP NetWeaver 7.01 ABAP trial version by following the steps in the "Download the SAP installer and login" section of the tutorial, Embedding an Adobe Rich Island into an SAP Web Dynpro application.

User level

All

Required products

Flex Builder (Download trial)

Sample files

sap_ri_pt7_nugg_solution.zip (6 KB)

In Parts 1 through 6, SAP developers used Flex Builder to create the wagon assembly line shown in Figure 1. This is an interactive application that counts down the time until the assembly line shuts down due to lack of inventory. The inventory is reflected in three places: the quantity field of the Flex framework DataGrid control at the top of the screen, the numeric display in the colored bins, and the color of the bins which turn green, yellow, or red depending on the defined thresholds. If you change the quantity in either the DataGrid control or the colored bins, the application will respond accordingly by updating the clock shutdown time and determining bin color.

Figure 1. The finished application after the clock has counted down to zero based on inventory running out in the handles bin

In this part, Flex developers will install SAP NetWeaver 7.01 ABAP, create the Web Dynpro component, create an SAP UI table element to replace the DataGrid control, populate it with data, build a layout view and create attributes that will be used in the Rich Island. Overall, this is an opportunity for Flex developers to have a quick overview of the SAP technology.

Figure 2 shows the finished Web Dynpro application that you create in this tutorial series. It includes the Flex wagon assembly line with the clock and colored bins that SAP developers learned to create in Parts 1 through 6. It also includes the SAP table UI control that Flex developers learn to create in this tutorial. In Parts 8 and 9, you will integrate the SAP Web Dynpro application with the Flex application using Adobe Rich Islands technology.

Figure 2. The finished Web Dynpro application

You can watch the video to see the final application in action:

Creating a Web Dynpro component

Note: To complete this tutorial, you first need to install the SAP NetWeaver 7.01 ABAP trial version by following the steps in the "Download the SAP installer and login"section of the tutorial, Embedding an Adobe Rich Island into an SAP Web Dynpro application.

In this section, you will create the skeleton of the Web Dynpro component, naming the views and modeling the data that will be displayed both in the Web Dynpro Table UI element and the Rich Island component.

Log on to SAP.
Open the Object Navigator.
Select the Repository browser.
Ensure that you are viewing the Local Objects directory shown in Figure 3.

Figure 3. Display the Local Objects directory.

Right-click the $TMP BCUSER folder and select Create > Web Dynpro > Web DynproComponent (interface) (see Figure 4).

Figure 4. Create the Web Dynpro component.

Name the component Z_SHOP_FLOOR_BINS.
You must start a Web DynPro component with Z or Y.
Enter w_main for the Window Name.
Enter v_main for the View Name (see Figure 5).
v_main is the master view of the Web Dynpro component.

Figure 5. Web Dynpro: Component/Create Interface dialog box

Click the Check button.
In the Create Object Directory Entry window, click the Save button.

Creating a Data component

In this section, you will create a context node with attributes and create a method that populates the context node with data. The context nodes and attributes visually create the UI table element that holds the data. The method will populate the UI table element with data.

The context stores data used in the component or view. The data is managed in a hierarchical structure where each context has a root node and the data fields or attributes are stored in a tree structure. You create the tree structure according to the structure of your application starting with the context then adding attributes or nodes with attributes.

Expand the Web Dynpro folder, then the Web Dynpro Components folder to reveal the Z_SHOP_FLOOR_BINS component.
Expand the Z_SHOP_FLOOR_BINS folder and double-click on COMPONENTCONTROLLER to open it for editing.
The Component Controller is the master controller for a Web Dynpro component and is automatically created when you made the Z_SHOP_FLOOR_BINS component. It is superior to all other controllers and controls the behavior of Z_SHOP_FLOOR_BINS.
Ensure the Context tab is selected. In the Context COMPONENTCONTROLLER window, right-click on CONTEXT.
Select Create > Node (see Figure 6).
If the Node is not selectable, use the Display<->Change button from the top menu. (The button with the pencil on it.)

Figure 6. Create a new Node.

Enter SHOP_FLOOR_DATA for the Node Name.
Change the Cardinality dropdown to 0..n (seeFigure 7).
The cardinality defines how many elements of this node areavailable at runtime. You are allowing a varying number of elements to beinstantiated since there is a possibility that the table could be empty—thatis, if all the bins are empty of inventory.

Figure 7. The Create Nodes dialog box

Click the first Check button.
Right-click on the new node and select Create > Attribute.
An attribute is a characteristic of a node in the same way a component has properties.
In the Create Attribute dialog box, enter BINTITLE for the Attribute Name.
The attributes you are creating—BINTITLE, BINQUANTITY, and BINPARTS—will be populated with the inventory data for each of the wagon pieces. As shown earlier, these values are currently stored in the Flex DataGrid control. You are creating the data here to bind to the SAP UI table element, and eventually, the Rich Island.
Enter String for the Type (see Figure 8).

Figure 8. The Create Attribute dialog box for BINTITLE

Click the Additional Attribute button.
Enter BINQUANTITY for the Attribute Name.
Enter I for the Type.
The letter I represents Integer.
Click the Additional Attribute button.
Enter BINPARTS for the Attribute Name.
Enter I for the Type.
Click the Check button.
Select the Methods tab of the Component Controller.
You are now adding code to the WDDOINIT method to populate the table UI element with data because this method is automatically called at runtime.
Double-click WDDOINIT to edit the method.
Below the end of the first statement, press the Enter key a few times to separate the start and end method statements.
Between the beginning and ending statements, add the following code to the WDDOINIT method of the Component Controller:

        method WDDOINIT .
  
DATA lo_nd_shop_floor_data TYPE REF
TO if_wd_context_node.
  
DATA lt_shop_floor_data TYPE
wd_this->elements_shop_floor_data.
  
lo_nd_shop_floor_data =
wd_context->get_child_node( name = wd_this->wdctx_shop_floor_data ).
  
FIELD-SYMBOLS <wa_data> LIKE
LINE OF lt_shop_floor_data.
APPEND INITIAL LINE TO
lt_shop_floor_data ASSIGNING <wa_data>.
<wa_data>-bintitle = 'TUBS'.
<wa_data>-binquantity = 120.
<wa_data>-binparts = 1.
  
APPEND INITIAL LINE TO
lt_shop_floor_data ASSIGNING <wa_data>.
<wa_data>-bintitle = 'AXELS'.
<wa_data>-binquantity = 190.
<wa_data>-binparts = 2.
  
APPEND INITIAL LINE TO
lt_shop_floor_data ASSIGNING <wa_data>.
<wa_data>-bintitle = 'WHEELS'.
<wa_data>-binquantity = 320.
<wa_data>-binparts = 4.
  
APPEND INITIAL LINE TO
lt_shop_floor_data ASSIGNING <wa_data>.
<wa_data>-bintitle = 'HANDLES'.
<wa_data>-binquantity = 61.
<wa_data>-binparts = 1.
  
APPEND INITIAL LINE TO
lt_shop_floor_data ASSIGNING <wa_data>.
<wa_data>-bintitle = 'BOXES'.
<wa_data>-binquantity = 400.
<wa_data>-binparts = 1.
  
*
lo_nd_shop_floor_data->bind_table(
new_items = lt_shop_floor_data set_initial_elements = abap_true ).
 
endmethod.
    

Note: This is ABAP code that will populate the SAP table UI element and be used by the eventual Rich Island. ABAP is one of the programming languages used for Web Dynpro application development. Teaching you how to program in ABAP is beyond the scope of this project. Check out the SAP Developer's Network for more information.

Select Controller > Save from the top menu, save the Component Controller updates.

Building a View layout

In this section, you build a Web Dynpro view which is the layout of the application and includes the SAP table UI element that will display the data you created in the previous section.

Expand the Views menu of the Z_SHOP_FLOOR_BINS component.
Double-click the V_MAIN view to open the editor window and select the Context tab.
You will copy the data in the Component Controller to the view because the Component Controller has no visual interface and is not able to present any data directly to the user. You present the data through the view. This is similar to having an ArrayCollection and assigning it to the dataProvider property of a DataGrid control.
Drag and drop the SHOP_FLOOR_DATA node from the Context COMPONENTCONTROLLER to the Context V_MAIN (see Figure 9).

Figure 9. The V_MAIN context tab after dragging and dropping the SHOP_FLOOR_DATA node

Select the Layout tab for the V_MAIN view.
Right-click on the ROOTUIELEMENTCONTAINER and select Insert Element (see Figure 10).
Each view starts with an empty ROOTUIELEMENTCONTAINER where all UI elements are placed. This is similar to a container component in Flex.

Figure 10. ROOTUIELEMENT pop-up menu

Give the element an ID of table.
Select Table for the Typ option (see Figure10).

Figure 11. The Create element dialog box

Click the Check button.
Click the CAPTION [Header] for the table.
Select the text property of the header, enter the string Bin Data (see Figure 12), and press Enter.

Figure 12. Enter the text property for the Table element.

Right-click on the Table element and select Create Binding (see Figure 13).
A binding in the SAP programming language is the same as in Flex where any data changes are monitored and updated where the element is used.

Figure 13. Table element pop-up menu

In the Create Context Binding for Table "TABLE" dialog box, click the Context button located next to the Context Node field.
You are associating SHOP_FLOOR_DATA with the table UI element. Similar to providing the data for a DataGrid control in Flex.
Select SHOP_FLOOR_DATA to bind the table to that context (see Figure 14).

Figure 14. The Choose Context Element dialog box

Click the Check button.
In the Create Context Binding for Table "TABLE" window, change the Cell Editor of Table Column to InputField for the BINTITLE attribute.
This will allow the field in the table UI element to accept data. This is the same as a TextInput control in Flex or using the editable property in a DataGrid control. Otherwise the value is a TextView which only displays the data.
Change the Cell Editor of Table Column to InputField for the BINQUANTITY attribute (see Figure 15).

Create Context Binding for Table "TABLE" window

Figure 15. The Create Context Binding for Table "TABLE" dialog box

Click the Check button.
Select the TABLE_BINTITLE_HEADER in TABLE_BINTITLE.
Enter Title for the text property.
This provides a header name for column in the table UI element.

Figure 16. Change the text property.

Select the TABLE_BINQUANTITY_HEADER in TABLE_BINQUANTITY and enter Quantity for the text property.
Select the TABLE_BINPARTS_HEADER in TABLE_BINPARTS and enter Parts for the text property.
Using the View button on the top menu, save the V_Main view updates.

Creating the Flash Island view

In this section, you will create the view that will displaythe Adobe Rich Island component for the wagon assembly line.

Right-click the ROOTUIELEMENTCONTAINER and select Insert Element (see Figure 17).
Note: Remember all UI elements are placed in the ROOTUIELEMENTCONTAINER.The Flash Island UI element cannot be placed directly in the UI elementhierarchy. It must always be a node UI element of a View. Therefore, in V_MAIN,you can only reserve a place holder for the Flash Island view using aVIEWCONTAINERUIELEMENT. This is similar to placing controls in a containercomponent in Flex.

Figure 17. ROOTUIELEMENTCONTAINER pop-up menu

In the Create element dialog box, enter islands_container for the ID.
From the field pop-up menu, select ViewContainerUIElement for the Typ (see Figure 18).

Figure 18. The Create element dialog box

Click the Check button.
In the Z_SHOP_FLOOR_BINS component, right-click on Views and select Create (see Figure 19).
If prompted to save V_Main, select Yes.

Figure 19. Open the Create View dialog box.

In the Create View dialog box, enter v_IslandForShopFloor for theView property.
Enter Island Placeholder for the Description (see Figure 20).

Figure 20. The Create View dialog box

Click the Check button.
If you don't see the new view, use the Save button at the top menu to save the changes.
Select the Context tab for the V_ISLANDSHOPFLOOR view.
In the Context tag, drag and drop the SHOP_FLOOR_DATA node from the Context COMPONENTCONTROLLER window to the Context V_ISLANDFORSHOPFLOOR window (see Figure 21).

Figure 21. The Context tab of the V_ISLANDFORSHOPFLOOR view

Selectthe Layout tab of the V_ISLANDFORSHOPFLOOR view.
Right-clickon ROOTUIELEMENTCONTAINER and select Swap Root Element (see Figure 22).
The FlashIsland UI element must be the ROOT UI Element.Therefore, Web Dynpro has a feature that lets you swap the UI Element of theROOTUIELEMENTCONTAINER.

Figure 22. The ROOTUIELEMENTCONTAINER pop-up menu

In the Create element dialog box, from the field pop-up menu, select FlashIsland for the Type (see Figure 23).

Figure 23. The Create element dialog box

Click the Check button.
Using the Save button on the top menu, save the V_ISLANDFORSHOPFLOOR view updates.

Creating Web Dynpro attributes

In this section, you will add three more attributes of data in the Web Dynpro component. You will use these attributes in later tutorials to define the threshholds for the bin color changes and to determine the speed of wagon creation.

Select the Context tab of the V_ISLANDFORSHOPFLOOR view.
You will be adding more data to the context. This is the same context you created for SHOP_FLOOR_DATA. Remember the context stores data for the component or the view.
Right-click on the CONTEXT and select Create > Attribute.
Enter REDWARNING for the Attribute Name, enter I for the Type, select Yes for Read-only, and give the attribute a Default Value of 0 (see Figure 24).
You have set the REDWARNING attribute value to zero. With this setting you are declaring that you would like the colored inventory bin to turn red when there are 0 wagons left to build.

Figure 24. The Create Attribute dialog box

Click the Additional Attribute button.
Enter YELLOWWARNING for the Attribute Name, enter I for the Type, select Yes for Read-only, and give the attribute a Default Value of 50.
You have set the YELLOWWARNING attribute to a default value of 50. With this setting, you are declaring that you would like inventory bins to turn yellow when there are 50 wagons left to build.
Click the Additional Attribute button.
Enter PRODUCTION for the Attribute Name, enter I for the Type, select Yes for Read-only, and give the attribute a Default Value of 6.
Click the Check button.
You have set the PRODUCTION attribute to 6. This value declares that one wagon is assembled every 6 seconds.
Using the Save button on the top menu, save the COMPONENTCONTROLLER updates.
In the Object Navigator, double-click the Z_SHOP_FLOOR_BINS component to select it.
Right-click on the Z_SHOP_FLOOR_BINS component and select Activate to activate all objects.
You are creating runtime objects that include the changes you made so your program has access to it. This is similar to recompiling an application in Flex to see the changes made.
Right-click on the Z_SHOP_FLOOR_BINS folder and select Create > Web Dynpro Application.
Click the Check button to keep the default values in the Create Web Dynpro application window.
Using the Save button on the top menu, save the application.
Select Web Dynpro Application > Test > Execute from the SAP header menu or use F8 to run the application (see Figure 25). You should see the UI table element populated with data.

Figure 25. The Web Dynpro UI table element

Where to go from here

In this tutorial you created the Web Dynpro component, defined data, created a view layout with a UI table element, and created a view that will eventually hold the Rich Island that was explained in Parts 1 through 6 using Flex Builder.

In Part 8, you will modify the Flex application to become a Rich Island for the Web Dynpro application.