h3. *The big picture*
On the one hand, a Web Dynpro application, desperate to “sexify” a bit its presentation layer. On the other hand, a Flex component.
To integrate the two of them, we will use:
– a suspend/resume plug in the Web Dynpro ABAP application
– a small Business Server Pages application: it is the element that allows enough flexibility to bring the Flex component to the user’s browser (since Web Dynpro has – yet – no such capability). There might be other solutions but, being quite familiar with BSP, I chose BSP.
+ Figure 1. A “bird’s eye” view of the interaction+
Below, the Flex component. (if you do not see it, maybe you should download the latest Flash Player from Adobe).
Want to play a bit with the map. Try it live!
h3. *Developing a Flex component*
I am not an experienced Flex developer but there are enough tutorials, code samples… out there to help you realize small components in reasonable time and effort.
First of all, the map itself! I would recommend the Degrafa library as a (very good) starting point. Have look a this example for yourself.
[http://samples.degrafa.com/DegrafaMapSample/DegrafaMapDemo.html | http://samples.degrafa.com/DegrafaMapSample/DegrafaMapDemo.html]
I built my map on top of this “example” (thanks guys at Degrafa), got rid of parts of superfluous elements and made several improvements to the initial code:
– multiple selection
– sortable list of selected departments
The component has been developed with Flex Builder 3 (which is an Eclipse-based environment).
h3. *What about the map ?*
The Degrafa library uses coordinates the way SVG writes them.
The particular map that is drawn comes from Wikipedia and is licenced under the Creative Commons licence. I had to edit it and remove unecessary elements
+The coordinates are then used within the component itself. I know there is space for improvements here (why not being able to attach a map dynamically depending on user selection, then scaling it, … ?)+
There are plenty of maps available but you might have a hard time to find a free one.
h3. *Suspend/Resume plug*
As the iFrame element is deprecated, I resolve to using the suspend/resume plug.
Please, pay attention to the fact that is has consequences on the way the application behaves when integrated in a SAP Netweaver Portal ![
http://help.sap.com/saphelp_nw2004s/helpdata/en/43/6b972329d23d33e10000000a11466f/frameset.htm | http://help.sap.com/saphelp_nw2004s/helpdata/en/43/6b972329d23d33e10000000a11466f/frameset.htm]
h3. Detailed solution with code
Compared to the Figure 1., here is the real cinematic between the various components.