Skip to Content

As I read through Mogens Enevoldsen’s post about Use SAP Flash Island/Adobe Cocomo to build a social network in SAP I was reminded of my own little experiment that I did while at TechED Bangalore but totally forgot to write about ….  

 

First a little context …

Flash Islands is a new feature in SAP Netweaver 7.0 Enhancement Pack 1 that allows you to embed Flash Movies inside Web Dynpro interfaces. The Web Dypro part of the interface can interact seamlessly with Flash and vice versa. This enables some very exciting ways of extending your SAP user interfaces. http://www.ribbit.com/platform/

Ribbit is a web service that enables making phone calls from a Flash client.    

 

As I sat through SDN Community Day Mentor Hands-On Workshop at TechED and learned about the new features coming in Web Dynpro .. I was very excited and felt this urge to get my hands dirty. So, next day morning, I sat at the Community Clubhouse and started writing my very first Flash Island …. an Island that would let you make phone calls from Web Dynpro apps using Ribbit. I can think of several workflows where it would make sense for a user to be able to call a number by just clicking a button in his SAP screen instead of having to to pick up the phone.  

 

http://www.ribbit.com/platform/

My limitation …

Before I could build this though, I had one limitation … No SAP system 🙂 … so no way to actually test what i was building .. so I decided I will have to finish building it before that day ends so that I can get one of the guys there at TechED to test it with Web Dynpro inside an SAP system. Now since Web Dynpro at runtime is HTML and JavaScript I created a simple JavaScript file to act as my test harness during development.  

 

Flash Islands from a Flex developer’s perspective

So what are Flash Islands? and how do I build one … here are a few observations I made as I got started …

         

  1. Web Dynpro at runtime is HTML+JavaScript
  2.      

  3. A Flash Island is a SWF embedded inside this HTML page
  4.      

  5. Since this is a SWF it can be a child of either Sprite or MovieClip
  6.      

  7. This SWF has to link in a library (SWC) provided by SAP to be able to communicate with the Web Dynpro container
  8.      

  9. This library, internally, I can assume uses Flash Player’s ExternalInterface to communicate with the Web Dynpro (HTML+JS) container
  10.      

  11. The first thing you have to do is register your SWF with Web Dynpro by calling …
    FlashIsland.register(this);

    The FlashIsland class is present in the SAP provided library that we linked in.

  12.      

  13. The SWF can fire events that the Web Dynpro container can listen to … these events are fired using …
    FlashIsland.fireEvent(this, "string_to_identify_event");
  14.      

  15. The container can set and read public properties of this SWFs document class
  16.      

  17. The callback mechanism available in ExternalInterface has not been used, so Web Dynpro can’t call methods of the SWF
  18.      

  19. Since Web Dynpro can’t call methods of the SWF I will have to use a setter of a public property to invoke things inside the SWF

I’ll not get into the details of how to use the Ribbit API, there is enough documentation on that at the Ribbit Developer Site

At this point I had enough to get started with writing code …  

 

Some fun in between ..

While I wrote my code sitting at the Community Clubhouse, Craig recorded the Live from Bangalore episode of Friday Morning Report .. he did mention what i was doing and you can even see a preview of the code working at around the 15th minute of the podcast.    

 

The first attempt that did not work …

View Source

Based on my observations above I started writing the Island as a pure ActionScript project with Sprite as the base class and everything seemed to work fine. As you can see in the podcast, the code was making phone calls. But, this was with my JavaScript test harness, later I showed the code to Thomas Jung, who very kindly agreed to help me test it in an SAP system.. at this point TechED had come to an end and I was kinda convinced that my code would work so I sent it to Thomas for trying out.

A few days later he emailed back saying that the code won’t work in the state that I had sent it to him.  FlashIsland.register method expects the document class of the SWF to be a Flex Application. I was slightly surprised to find this out since I can not figure out why FlashIsland would need to be dependent on mx.core.Application. FlashIsland needs ExternalInterface to make the communication with the Web Dynpro container happen and ExternalInterface is a flash player API and does not need the Flex framework. The only possible reasons I can guess are ..

         

  1. The debugging capabilities of FlashIslands that Thomas mentioned in his workshop are some how dependent on the Flex framework
  2.      

  3. Or, FlashIslands framework somehow uses the Binding capabilities of Flex

Both these reasons I don’t think justify the cost of including the Flex Framework .. I’m pretty sure this adds at least 200k to 300k to the size of the SWF.  I mentioned this to Thomas and he said he would discuss this with the Web Dynpro team. Even if there is a valid reason to be dependent on Flex I would really like it if SAP would release a light weight version of the SWC that does not use the Flex Framework.  

 

The Flex version …

Given the above limitation I later refactored the code to use mx.core.Application as the document class, I haven’t seen it work since I still don’t have access to an SAP system but Thomas told me that he was able to get it working with some tweaking. I’m sharing the source here hoping that it would help someone understand Flash Islands better and maybe someone would even use it in a real application. Please do let me know if you do that. The source is shared under the MIT license so please do feel free to use it in any way you find useful.

View Source 

A special thanks to Thomas Jung for his help.   

To report this post you need to login first.

3 Comments

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

  1. Marcelo Ramos
    Nice Blog Mrinal.

    I’ve been dedicating part of my free time to learn Flex and certainly this blog will be very useful !

    Greetings from Brazil

    Marcelo Ramos

    (0) 
  2. Rajiv Totlani
    Good into Mrinal. as a WD developer and someone who has used Flex independently (without WD) as a UI over SAP, this blog was extremely useful in understanding the bi-directional connectivity between the 2 UI technologies.

    Hope this thing takes wings as Enterprise UI 3.0 (enterprise ui missed 2.0)

    (0) 

Leave a Reply