Development Trends

In the good old days when the SAP Portal was brand new and everybody discussed what kind of content would/could be available in there in the near future, there was always one example which was demo’ed again and again: The Stock ticker or The list of preferred stocks and related updates. Although we knew that most customers did not have this “need”, the demo continued to survive – and it took a while  before there was a real proposal on serious content.

Will the same thing happen to SAP Flash Island?

…. will Google Maps examples and colour full Piechart examples be the “Stock ticker” for SAP Flash  Island?

Maybe… or maybe not… maybe there are a lot of inspiration to find in the Adobe Flex community, because there are already a lot of exising components and applications available – and a lot of different API’s are already supported by Adobe Flex. The inspiration might lead you to a ‘non-stock-ticker’ for SAP Flash Island.

If you visit Adobe.com/devnet you might find some inspiration to a new mashup – which could be a SAP Flash Island candidate  – just to mention a few:

• Component: Adobe Cocomo – read more
• API:  Google Analytics – read more
• API: Facebook – read more

For quite some time now SAP and Adobe has presented different methods and initiatives you could use if you would like to integrate Adobe Flex and SAP Netweaver.  I will try to summarize four different scenarios you could consider.

Using SAP Flash Island scenario

If you are using Netweaver 7.0 EhP1 or 7.1 then you can use the SAP Flash Island framework to integrate Adobe Flex with SAP (read more about SAP Flash Island here). The framework will create a ‘bridge’ between a SAP WebDynpro application and Flex. In order to ‘connect to this bridge/framework’ – you need to use a library from SAP in your Flex project – I have created a template project you can use for this purpose click here. Flash Islands are best suited for smaller applications/components – especially for areas where you are missing UI functionality in the WebDynpro, e.g. could be advanced graphics, interactive maps, graphs and statistics. Authentication, User and session management will be handled by the WebDynpro application.

Using SAP BSP and an embedded Adobe Flex component

So what do you do if your application is SAP is not based on WebDynpro – then you will be missing the framework and bridge which will make it easy to communicate with an Adobe Flex application – or ? Well in SAP BSP you can use <object><embed> … </embed><object> to include an SWF application in the application – read more here.  But the data binding and event handling you will have to handle yourself in the BSP and in the Flex application. This kind of integration is also meant for smaller applications/components – especially for areas where you are missing UI functionality in SAP BSP, e.g. again could be advanced graphics, interactive maps, graphs and statistics. Authentication, User and session management will be handled by the SAP BSP application.

Using an HTTP REST backend application in SAP BSP – and an Adobe Flex RIA as Frontend

So… what do we do if we want to build a larger application in Adobe Flex (RIA) which should be integrated with SAP Netweaver? Well.. One possibility would be to build a set of backend services in SAP BSP using the HTTP REST approach/architecture (read more here). In SAP you will then be building normal BSP’s which will receive the input parameters in a HTTP request – and send the reply to the calling application as XML. These services can be called from Adobe Flex using the HTTP-request object. The work could be divided in two parts: the work regarding the design and implementation in SAP and the work with the design and implementation of the RIA using Adobe Flex. In between you need to describe and design the implementation of the interface. User and session management could be handled by the SAP BSP application if it’s running as a state full application. Regarding Authentication you need to consider how you would implement this in the application.

Using WebService enabled SAP BAPI’s as backend application – and an Adobe RIA as Frontend

In the last method you could consider using Webservice enabled BAPI’s instead of having to write BSP’s to communicate with the frontend. From Netweaver 6.40 and onwards all BAPI’s in SAP could be webservice enabled – and from 7.0 the functionality has been improved. And it’s possible to call these webservice enabled BAPI’s directly from Adobe Flex. You can use standard BAPI’s and/or make custom development for your own specific BAPI requests. User and session management should be handled by the Adobe Flex application. Regarding Authentication you need to consider how you would implement this in the application.

With the introduction of SAP Flash Islands in Netweaver 7.0 EhP1- SAP will now also attract ressources from the Adobe Flex community together with SAP’s own developer community. Developers from both communities will be needed to make SAP Flash Islands a real success.

Flex developers will now have the possibility to use their existing skills from the Adobe Flex ‘world’ to develop and invent new SAP Flash Islands components which can be integrated easily with SAP Netweaver.

SAP developers on the other hand can focus on UI integration areas where advanced  e.g graphical components are needed and use the new SAP Flash Islands from the Adobe community to complete this kind of task.

Read more at:

Development Trend

Adobe – Developer Connection

SAP Community Network – a video about SAP Flash Island

SAP Flash Island – LinkedIn Group

SAP Flash Island and Google Maps… – it’s so obvious – and therefore I had to try to build an example of how this could be done.  If you are familar with Google Maps – you might be thinking: JavaScript… ! and how could this be integrated with Flex… well.. Google has made it a little bit easier for Flex developers with the Google Maps API for Flash. All you need to do is to register in order to get an API Key and then download the SWC file: map_flex_1_6.swc and include it in the library path of your project. With the SWC file you will get access to the Google Maps interface library.

And why could it be helpfull to integrate Google Maps with SAP using Flash Islands? Well… it’s just one of those examples which illustrate some of the basic ideas of SAP Flash Island – you embed a powerfull UI with SAP which isn’t available in SAP Netweaver. And with this feature it’s suddenly easy to show e.g.:

• where your customers are located
• which installations needs a visit from a service technician
• where is the nearest truck
• and more…

You just need to pass either the GPS coordinate or the address of the location(s) to your Flash Island – and the Flash Island will handle the rest. The gecoding feature in Google will help you with the address conversions to GPS coordinates.

Remember to include the SAP Flash Island swc’s into your library path as well – see example here

Example source code below (marked with blue) – replace the parts marked with red.

if you want to try it without the SAP Flash lib – just remove:

• import sap.FlashIsland:
• FlashIsland.register(this)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    width="100%"

    height="100%"

    initialize="init()">

    <mx:Script >

        <![CDATA[
            import sap.FlashIsland;

            import mx.controls.Alert;

            import com.google.maps.controls.MapTypeControl;

            import com.google.maps.controls.ZoomControl;

            import com.google.maps.controls.PositionControlOptions;

            import com.google.maps.Map;

            import com.google.maps.MapEvent;

            import com.google.maps.MapType;

            import com.google.maps.LatLng;

            import com.google.maps.controls.PositionControl;

            import com.google.maps.overlays.Marker;

            import com.google.maps.overlays.MarkerOptions;

            import com.google.maps.styles.FillStyle;

            import com.google.maps.styles.StrokeStyle;

            import com.google.maps.InfoWindowOptions;

            import com.google.maps.MapMouseEvent;

            import com.google.maps.services.ClientGeocoder;

            import com.google.maps.services.GeocodingEvent;

            [Bindable]

            public var inputAddress:String;

            private var gMap:Map;

            private var MyCurrentLocation:String;

            private function init():void

            {
                FlashIsland.register(this);

                gMap = new Map();

                gMap.key = "enter your api key here - enter your api key here";

                gMap.width = 600;

                gMap.height = 400;

                gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

                mapContainer.addChild(gMap);

                if ( inputAddress == null )

                {

                    inputAddress = "your initial location"

                    addr1.text = inputAddress;

                }

            }

            private function mapReadyHandler(e:MapEvent):void

            {

                gMap.setCenter(new LatLng(55.999121,9.540081), 4 ,
                MapType.NORMAL_MAP_TYPE);

                gMap.setSize(new Point(mapContainer.width, mapContainer.height));

                gMap.addControl(new PositionControl());

                gMap.addControl(new ZoomControl());

                gMap.addControl(new MapTypeControl());

                FindMyLocation();

            }

            public function FindMyLocation():void

            {

                doGeocode();

            }

              private function doGeocode():void

              {

                var geocoder:ClientGeocoder = new ClientGeocoder("AU");

                geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,   
                function(event:GeocodingEvent):void

                {

                      var placemarks:Array = event.response.placemarks;

                      if (placemarks.length > 0)

                      {

                        gMap.setCenter(placemarks[0].point);

                        var marker:Marker = new Marker(placemarks[0].point);

                           marker.addEventListener(MapMouseEvent.CLICK,
                           function (event:MapMouseEvent):void

                           {

                               marker.openInfoWindow(new InfoWindowOptions(
                               {content: placemarks[0].address}));

                        });

                           marker.setOptions(new MarkerOptions({ strokeStyle:
                           new StrokeStyle({color: 0x987654}), fillStyle:
                           new FillStyle({color: 0x223344, alpha: 0.8}), radius: 12,
                           hasShadow: true }));

                        gMap.addOverlay(marker);

                      }

                });

                geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,
                function(event:GeocodingEvent):void

                {

                    Alert.show("Location not found");

                    trace(event);

                    trace(event.status);

                  });

                gMap.clearOverlays();

                geocoder.geocode(addr1.text);

              }

        ]]>

    </mx:Script>

    <mx:Label id="lab1" text="Find Functional Location.." />

    <mx:TextInput id="addr1" />

    <mx:Button id="geocoding" label="Search" click="FindMyLocation()" />

    <mx:UIComponent id="mapContainer" width="100%" height="90%"/>

</mx:Application>

It’s always nice with a small template project, which will contain the basic setup needed in order to get started with a new kind of development – in this case SAP Flash Island (Adobe Flex). I have therefore made a description of how to create your own SAP Flash Island template project.

The template will cover an Flex 3.0 project (Netweaver 7.1):

1. Download the following files from the MIME repository in SAP (path: public/bc/ur/nw7/flashislands)
   • WDIslandsLibrary30.swc
   • WDIslandsLibrary30-debug.swc
2. Save the two files on your PC
3. Create a new Flex 3.0 project – just with the initial mxml sourcecode
4. Include the two SWC files in the Flex project using the following procedure:
   • Right click at the projectname in Flex Navigator
   • Select ‘Properties’
   • Choose ‘Flex Build Path’
   • Select the tab ‘Library path’
   • Press ‘Add SWC’  and upload the two files
5. Copy/paste the source code below (marked with blue) – and save the project
6. You now have a template for an SAP Flash Island project

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    initialize="initApp()" >

    <mx:Script>
        <![CDATA[

            import sap.FlashIsland;

            [Bindable]
            public var MyInput:String;
            [Bindable]
            public var MyOutput:String;

            public function initApp():void
            {
                FlashIsland.register(this);
            }

            public function FireEvent():void
            {
                MyOutput = exinput1 as String;
                FlashIsland.fireEvent(this, "Event1");
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="exinput1" />
    <mx:TextInput id="exinput2" text="{MyInput}" />
    <mx:Button id="fevent" label="Fire Event" click="FireEvent()" />

</mx:Application>

You do not need to rewrite the function “initApp” – it’s already completed. It will register the Island in the Web Dynpro UI.

The two bindable Strings (MyInput and MyOutput) defines the variables which will pass data to the Flash Island and back. It’s important that they are bindable and public. If you want to pass arrays of data you should use an ArrayCollection. But be aware that the datatypes in WebDynpro and Flex is not always available/compatible – in SAP you can use e.g. Integers, REAL and dates – they are not available in Flex in the same format.

The function “FireEvent” will trigger an event which will be caught by the webdynpro – and the value of MyOutput will be sent back together with the event to actionhandler in SAP. You can define more event triggers in your Flex Application and define the associated Action handlers in your web  dynpro.

When you have completed your Flash Island – you will need to export an release build and import the swf in the MIME of the web dynpro project and make the binding of data and events.

In this blog I will try to describe how you can get started with Adobe Flex development. It will be an ongoing process – and I will post some of my Flex projects/examples in here as well. I have been working with SAP ABAP development since 1994 – and within the last 5 years I have been working with B2B projects using SAP BSP development.

So how do you as an ABAP developer get started with Adobe Flex development? And are there any of the development skills from SAP you can reuse in Adobe Flex?

I decided to start with some e-learning material from TotalTraining (http://www.totaltraining.com/prod/adobe/flex3_riaa.asp) – and decided to focus on FLEX3 – even though SAP Flash Islands will be built in FLEX2 (the major difference is more Object Oriented focus and better performance).

Today, I realized a free alternative to e-learning - Adobe has launched ‘Flex in a Week’ – here you will find a lot of materials, exercices and videos which will guide you through the FLEX3 development process (http://www.adobe.com/devnet/flex/videotraining/) 

Another place to start – is buying the book ‘Developing SAP Applications with Adobe Flex’ at SAPPRESS (http://www.sappress.com/product.cfm?account=&product=H1951) – this book will guide you through the basic of FLEX and how to integrate this with SAP. The only ‘problem’ I have with this book, is the method used to integrate SAP and FLEX – all examples is based on custom-made SAP BSP pages which will communicate with FLEX using XML. This will work fine – but FLEX has the possibility to use SOAP directly, which means you can use all existing BAPI’s – no customcode needed (it will just require that you decide to web-service enable them). I will describe this in a separate blog later.

In SAP NetWeaver 7.0 EhP1 – a new UI feature is made available. The new Flash Island UI element makes it possible to use Adobe Flash Island in the SAP Web Dynpro framework. The Adobe Islands will be developed in the Adobe Flex Builder and loaded into the MIME repository. With Adobe Island it will be possible to create rich Internet components which will be embedded in SAP Web Dynpro’s.

Click here to see example (Source: SAP Developer Network, http://sdn.sap.com)
Click here to see eLearning example (Source: SAP Developer Network, http://sdn.sap.com)