Flash Island Communication – Flight Routes

Two way communication between a flash island and its webdynpro container is possible and you can achieve it in more than one way.

The webdynpro part of Flight Routes has a single window containing three views. v_main displaying flight results table and controlling the layout for the other two views via ViewContainerUIElements. v_island containing the flex Google Map. v_search_form containing all search form elements.
Similar to the flex part, we have two main context nodes: flight_list and current_flight. They get updated based on user interaction in both flex map and webdynpro controls. In addition, we also have a third context node search_options responsible for holding data needed to populate the airline, cityfrom, city dropdownbykey webdynpro controls.

All three nodes are in the main component controller context because they’re used at least by two views. Instead of having one view accessing another view context directly I rather have it via main controller. Lots easier to debug or expand this way. Each view gets what it needs from the main controller via context mapping and all acess and modify the same data. All you need is drag-and-drop the needed nodes from component controller context to view controller context.

Adding a flex swf file to the webdynpro component.
External files are added into a webdynpro component via MIMEs. Right click on component’s name, create->Mime object->Import and select the swf file you want to include. In webdynpro layout, each swf file needs to be represented by a flash island and a flash island can only be a RootUIElementContainer. This means that for each swf file you want to embed you need to create a new view, right click on RootUIElementContainer, Swap root element, select flash island.

Webdynpro to flex communication.
With the flash island selected, via right click you can add webdynpro data sources (nodes and properties). If you have the same names and structure in Flex, the Flex variables will get updated with the webdynpro values. If the readOnly checkbox is unchecked Flex can also modify them in addition to reading them. That’s one way of achieving two way communication, without dispatching events of any kind.

Flex to Webdynpro communication.
By integrating the WDIslandLibrary30.swc (version may vary) library into the flex project, you get to acess sap.FlashIsland class required for establishing communication with the webdynpro container. First step is to initialize it via FlashIsland.register(islandInstance). islandInstance can be any component in your flex project that you want to hold the webdynpro variables, it will also be responsible for dispatching events back to webdynpro. You can dispatch an event using FlashIsland.fireEvent(source, eventType, eventParam). source is the flashIsland instance, eventType is a string, eventParam is an object. You’re now dispatching an event identified by eventType having attached to it additional data via eventParam object. Webdynpro doesn’t know what to do with it at this moment. You need to select the flash island in webdynpro, right click and select Insert event. You can now define eventName (equal with flex eventType) and its parameters as well as the method responsible for handling the event. That’s the other way of achieving two way communication.

Handling a flex dispatched event in webdynpro.
For example, flex signals a new route has been selected after the user clicks on a map flight route. eventParam object contains a CONNID property used to update the selected flight in webdynpro.
FlashIsland.fireEvent(this, "routeSelect", {CONNID: flightMapRoute.connId})
In webdynpro, the method you’ve created for handling the event will have a WDEVENT importing parameter. You can access the sent CONNID values with:
wdevent->get_string( name = 'CONNID' ).

This post is part of Flight Routes.

Leave a Reply

Your email address will not be published. Required fields are marked *