Skip to Content
h3. Offer a rich user experience
Faced with the requirements of integrating a Flex 3 component in a Web Dynpro ABAP application, I had to do without Flash Islands (still in Ramp-up at the time). The specific requirement were to provide employees with a map to select “départements” (which are subdivisions of a region such as `Ile-de-France` or `Provence-Alpes-Côte d’Azur`) for an internal transfer process. Here is how I dealt with it. I am not saying it is the best solution, it is only the one I implemented and did the job.  🙂 The purpose of this blog is also to “demonstrate” the interest of using RIA in SAP applications and some very interesting Flex libraries that exist out there… !http://sites.google.com/site/guillaumegarcia13/repository/capture_WDA_Flex.png|alt=|src=http://sites.google.com/site/guillaumegarcia13/repository/capture_WDA_Flex.png! +  Image 1.++  The Web Dynpro ABAP application with the BSP as popup (the real solution opens the BSP “in place”, not as a popup) + h3. About Adobe Flahs Islands {code:html}Adobe Flash Islands{code} comes with NetWeaver 7.0 EhP1. It offers tight integration of Flex components within the Web Dynpro framework. We talk here about using context-binding, eventing… In the solution I expose here, there is a low integration between the Web Dynpro application and the Flex component (a map is called and user selection is returned). Context is passed using simple URL parameters, and eventing has to be written in Javascript. Besides, the Flex application is opened in another (BSP) page, whereas in Flash Islands, it is in the same Web Dynpro page (for the Flex component becomes a WD UI element). Undoubtedly, if you can use Adobe Flash Islands, then it is the best possible choice.  For further information, you might also want to have a look at this SDN forum post where Thomas Jung explains Adobe Flash Islands in details (along with the not SAP-supported iFrame solution): Web Dynpro Islands – questions…. (Web Dynpro Islands – questions….)

 

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.

 – few Javascript: it is the glue enabling communication between the BSP and the Flex component (and another reason to choose BSP over Web Dynpro in this particular case)

 

First approach

+  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

[http://commons.wikimedia.org/wiki/Image:D%C3%A9partements_et_r%C3%A9gions_de_France.svg | http://commons.wikimedia.org/wiki/Image:D%C3%A9partements_et_r%C3%A9gions_de_France.svg]

+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.

Cinematic

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Abesh Bhattacharjee
    Guillaume,
    An awesome example 🙂 I am really really amazed at what you have done and now plan to maybe do something like that myself 🙂
    Thanks a lot for sharing this with everyone 🙂
    Best
    Abesh
    (0) 
      1. Alvaro Tejada Galindo
        Guillaume:

        Agree with Abesh…This is an awesome example for two simple reasons…You’re using Flex and WebDynpro…Without Flash Islands! Also, you had explain things in a easy way…Great blog!

        Greetings,
        Blag.

        (0) 
  2. Jason Hawryluk
    Just wanted to say that this is an excellent use case for Degrafa and that full layout and transform possibilities are coming to Degrafa in Beta 3.

    We are always excited to see folks using it in various ways especially real world situations.

    Real nice work!

    Cheers

    Jason.

    (0) 
  3. Anonymous
    Hi,
    Can you give details regarding integrating blazeds into j2ee project in nwds.

    Thanks in advance

    (0) 
    1. Guillaume GARCIA Post author
      Hi,

      Unfortunately, I don’t have any details to provide about that part. The whole blog has been done with ABAP technologies from SAP and a “standalone” Flex component whose data come from URL parameters.

      I would advise you to ask in the forum SAP Netweaver AS Java.

      Best regards,
      Guillaume

      (0) 

Leave a Reply