Continuing from where we left on Using Flex DateField and DataGrid elements in WebDynpro Java with FlashIslands - Part 1 , in this part of the blog, I will explain the webdynpro project needed for our application to work. 

I will explain the Webdynpro part considering that you are already familiar with basic webdynpro java concepts. If you are not, it would be a good idea to try out some of the webdynpro tutorials here. Even though these are for Netweaver 7.0, you should get a hang of things, and will easily be able to adapt to NWCE 7.1

This is what I am doing in my webdynpro project:

1. I have created a model for a custom BAPI. This BAPI takes fromDate, toDate and username as input, and returns the records corresponding to the selection. I added this model as a Used Model.

2. I created a Custom controller to call this model. I used Apply template -> service controller and added the necessary input and output parameters.

3. Mapped the context of Component controller to the custom controller, which in turn is mapped to the model.

4. Mapped the context of the view controller to the component controller.

5. In the component controller, I created a node "SearchParams" with Collection Cardinality 1..1, and within this I have added 3 attributes: fromDate (of Type date), toDate (of Type date) and userName (of Type string). This will hold the value we enter in the runtime.

6. Mapped this node to both the custom controller and view controller. This is what my component looks like:

This is what the Context for all the controllers looks like:

Custom Controller:

Component Controller:

View Controller:

7. I create a method "executeCUSTfuie" in the Component controller to call the execute method in Custom controller.

public void executeCUSTfuie( )  {

    //@@begin executeCUSTfuie()

            wdThis.wdGetCUSTfuieController().executeZ_Get_User_Reqs_Input();

    //@@end

  }

8. This is what the execute method in the Custom Controller looks like:

  public void executeZ_Get_User_Reqs_Input( )  {

    //@@begin executeZ_Get_User_Reqs_Input()

    //$$begin Service Controller(-1052249833)

              Z_Get_User_Reqs_Input input = new Z_Get_User_Reqs_Input();

              wdContext.nodeZ_Get_User_Reqs_Input().bind(input);

              input.setUser(wdContext.nodeSearchParams().currentSearchParamsElement().getUserName().toUpperCase());

              input.setDate_From(wdContext.nodeSearchParams().currentSearchParamsElement().getFromDate());

              input.setDate_To(wdContext.nodeSearchParams().currentSearchParamsElement().getToDate());

    try

    {

          input.execute();

      wdContext.nodeOutput().invalidate();

    }

    catch(Exception e)

    {

      wdComponentAPI.getMessageManager().reportException(e.getMessage());

    }

    //$$end

    //@@end

  }

9. Now lets go to the VIEW controller, and make the necessary changes for the FlashIsland to work:

a) Replace the RootElement with a FlashIsland as shown below:

Set the height to 500px and width to 100% in the properties. Set the swfFile property to the swf filename of your flex project. In our case this is "FlexUIElements.swf".

b) Copy the FlexUIElements.swf file from the Flex Project -> bin-release folder and paste it to your mimes folder (src/mimes/Components/<component name>). This step has to be done everytime you make a change to the Flex project.

Tip: To make it simpler to make changes in flex and copy it to mimes folder, when you do an export release build of your flex project, select the output folder as your mimes folder.

c) After replacing the Root Element with the FlashIsland, you need to add the necessary properties, datasource and events. These will interact with the Flex UI.

Add the following to the FlashIsland by right clicking on the Root Element, and selecting Insert Property/DataSource/Event:

Insert Property

Id:fDate

Name: fDate

Value: SearchParams.fromDate

Insert Property

Id:tDate

Name: tDate

Value: SearchParams.toDate

Insert Property

Id:userName

Name: userName

Value: SearchParams.userName

Insert DataSource

Id:records

Name: records

Value: Z_Get...Input.Output.Requisitions

Typically when you create a DataSource, you also need to create the properties within the datasource to reflect the context node you have assigned it to. In our case this is the ‘Requisitions' node.

But it can be tedious to add individual properties, if the node has many attributes. So in here, I am dynamically adding these properties to the datasource. What I do is, I add the following code in the wdDoModifyView of the View controller, which adds properties to the ‘records' datasource, and also binds the attribute info.

  public void wdDoModifyView(com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)

  {

    //@@begin wdDoModifyView

            if (firstTime)

            {

                     IWDGACDataSource ds = (IWDGACDataSource)view.getElement("records");

                     java.util.Iterator i = wdContext.nodeRequisitions().getNodeInfo().iterateAttributes();

                     while (i.hasNext())

                     {

                               IWDGACProperty prop = view.createElement(IWDGACProperty.class);

                               IWDAttributeInfo attrInfo = (IWDAttributeInfo) i.next();

                               String s = attrInfo.getName();

                               prop.bindValue(attrInfo);

                               prop.setName(s);

                               ds.addProperty(prop);

                     }

            }

    //@@end

  }

Insert Event

Id: getrecords

Name: getrecords

onAction: GetRecords

When you create an event, you need to assign it to an Action. In here I have created a new action "GetRecords". This has the following code:

  public void onActionGetRecords(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionGetRecords(ServerEvent)

            wdThis.wdGetCOMPfuieController().executeCUSTfuie();

    //@@end

  }

Now before we forget:

Like I had mentioned before starting the WebDynpro project, we have to make some changes in the DataGrid element of the Flex project for the data to be displayed in the DataGrid.

Go to Flex Development perspective, open your mxml file and make the following change to the mx:DataGrid

                   <mx:DataGrid x="10"

                                                 y="127"

                                                 width="575"

                                                 height="287"

                                                 dataProvider="{records}">

                             <mx:columns>

                                      <mx:DataGridColumn headerText="Request Number"

                                                                                dataField="Reqno"/>

                                      <mx:DataGridColumn headerText="Value of the Item"

                                                                                dataField="Value"/>

                                      <mx:DataGridColumn headerText="Currency"

                                                                                dataField="Currency"/>

                             </mx:columns>

                   </mx:DataGrid>

The dataField property should have the same name as the context attribute of the node the datasource is holding.

In our case, the DataGrid is displaying "records" arraycollection, which is bound to "records" datasource in the View controller RootElement. This datasource is in turn bound to "Requisitions" context node which has the following context attributes:

We will just be displaying Currency, Reqno and Value in our DataGrid. So these are mentioned in the dataField property (case-sensitive) of the mx:DataGridColumn. headerText is the column header, and we can enter any text we want here.

Now that we have made this change, Export Release Build your flex project and copy the swf file to your webdynpro mimes folder.

Deploy and Run:

Finally create a WebDynpro Application for your WebDynpro component, then Deploy and Run your WebDynpro application.

I enter the from date, to date and username, click on Get Records button. The data from the backend BAPI is correctly displayed in the Flex screen.

In the future blogs, I plan to talk about FlashIsland eventlisteners and how they allow us to manipulate the data before displaying it.