Development Trends

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.

A couple of weeks ago I went to the SAP CRM course CR580 – SAP CRM User Interface in London – a course about the new UI in SAP CRM 2007 – and it was quite an interesting course.

One feature you will notice rigth away – is the improvements to the user interface. I guess you could say that SAP CRM has been ‘AJAX’ified’   and suddenly you start dreaming about more RIA in SAP. And all the screen flikering is gone – and the UI works quite well.  It’s actually quite impressing…

But during the course something happend which confused me a bit – because I thought SAP had a quite clear Web UI Strategy in generel. In connection with the introduction of the course, the instructor told us about SAP’s considerations regarding the underlying development framework to use when building SAP CRM 2007. The CRM team were looking at a Web UI technology which was: stable, with a good performance, and a framework which offered a flexible and extendable user interface…    so thinking about the SAP Web UI strategy – you might think you have already guessed the answer… it could only be SAP WebDynpro… No?

SAP CRM 2007 is built in SAP BSP !! – and let me just underline I have no specific preferences to either BSP and WebDynpro (I love both of them) and I have done a lot of development with both frameworks, but I cannot understand why SAP decides to use BSP when the chosen Web UI strategy is WebDynpro? When I read about WebDynpro, SAP uses a lot of time to explain why we should use Webdynpro – and so far I haven’t seen them claim that WebDynpro should be less stable than BSP, perform worse compared to BSP and that WebDynpro should be less flexiable and harder to extend compared to BSP. So why SAP – why was BSP a better choice for SAP CRM 2007?

And how well will this match some of the other initiatives targeted towards WebDynpro? E.g – we are all looking forward to start using SAP Flash Islands. In order to do this – the underlying framework should be WebDynpro. And I guess SAP CRM could be quite an interesting platform for SAP Flash Island? I know it’s possible to embed Adobe Flash in BSP directly, but you will be missing the smart integration from the ‘real’ Flash Islands.

Seen from a development point of view – there is a new tool available together with SAP CRM 2007: “The BSP Component Workbench”. With this new tool you can extend your CRM solution without making modification to SAP standard, and this tool is so cool that I am already missing it in SAP ERP.

If you are doing Web development using SAP WebDynpro in Netweaver – you might find the fact that you cannot use Javascript in the UI a little bit annoying… so what do you do if you would like to use e.g. Google Analytics to monitor the usage of your WebDynpro application…? in order to do this you need to add a small Javascripts snippet to your webpages, and this is not possible in WebDynpro… or…. (btw: the same Javascript idea applies to other kinds of third party app’s.. not only Google apps)

Well.. I ran into a couple of links – and it gave me a good idea, that might help you embed Google Analytics.

1. First of all your development platform need to support SAP Flash Islands (min. SAP NetWeaver 7.0 EhP1)
2. Then you need to goto Google Analytics Tracking for Adobe Flash – in order to get the analytics.swc file
3. Create a Google Analytics account in order to get an account-id for tracking
4. Create a new SAP Flash Island application (click here to see an SAP Flash Island template)- and add the analytics.swc to the Flex build path/Library path – the Island should not display much… maybe just a company logo etc.
5. The new SAP Flash Island application should take an url as an input parameter and pass this url to Google Analytics using the Google Analytics Tracking tool for Flash/Flex (see example) using the command: ”

   tracker.trackPageview( the input url parameter );"

6. Place the new SAP Flash Island application on each of the WebDynpro pages you want to track (the visual size of the Island could but small or covered by a company log – you just need it somewhere on the page) – and pass the actual url of the WebDynpro Application parameter to the Island. You actually just use SAP Flash Island to call Google Analytics, so from a display point of view the output of the Island is not that interesting in this example
7. And you will be able to start collecting the WebDynpro Usage in Google Analytics
8. Remember to check the terms of service

Happy programming…

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

In my previous blog I described how you could find descriptions and inspirations on how to get started with Adobe FLEX development.

In this blog, I will focus a little bit more at some Adobe FLEX examples. But before we go into details, you need to get Adobe FLEX installed. There are two possibilities, you can either download the free Flex 3 SDK – with this download you will get the Flex Framework and the Flex compiler, which will enable you to develop and deploy Flex applications. But you will miss an IDE which is not part of the package. If you want to go for the full package you will have to download the Flex Builder 3 – Adobe has a trial download available. My ‘How-to-get-started’ examples will be based on Flex Builder 3.

After you have installed Flex Builder 3, you are ready to get started with the traditional ‘Hello world’ application:

• Start Flex Builder 3
• Choose ‘File -> New -> Flex Project’
• Enter a project name ‘SAPSDNdemo1′
• Application Type ‘Web Application (runs in Flash Player)

The Application type will determine whether the Flex application will run in a browser as a web application or as a desktop Adobe AIR application.

• Copy/paste the sourcecode below (marked with blue) into the ‘Source’ tab:

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

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

    <mx:Script>

        <![CDATA[

        import mx.controls.Alert;

        public function Button1Clicked():void

        {

            Alert.show('This is demo1', 'How to get started', mx.controls.Alert.OK);

        }

        ]]>

    </mx:Script>
    <mx:Label text="Hello - SAP Community Network"/>

    <mx:Button id="button1" label="Press me" click="Button1Clicked()" />

</mx:Application>

• ‘Save’ the project
• Choose ‘Run’

The ‘Hello world’ project will start in your browser (see/try the example below)

The sourcecode contains two types of elements:

• MXML: Multimedia eXtensible Markup Language (mx: tag’s)
• ActionScript

MXML is a markup language and is used to define the layout of the FLEX application and the binding between UI components. A large number of Flex UI components are available in Flex Builder.

ActionScript is used for the implementation of the application logic. ActionScript could be quite complex and built using OO.

In the example above, I have used mx-tag’s to define:

• The general attributes of the application with mx:application
• A label with ‘mx:label’
• A button with ‘mx:button’
• and a script block with ‘mx:script’

In the Script block you will find a public function definition which will display the popup message (button1clicked). In the mx:button tag you will see how the button event is linked to this function.

In the next blog (part III) I will implement an example where we use Google Maps in a Flex Application… could this be a candidate for the first Flash Island? And I will demonstrate how build MVC applications using Adobe Flex…

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 Enhp1 a new xml rendering technology is introduced. The xml rendering is called xBCML – Extensible Business Client Markup Language. The xml will contain the description of the UI elements and their properties which is send to the client using HTTP(S). The purpose of this new protocol is to be able to send rendering information to Smart clients built in e.g FLEX, Silverlight or SAP’s own Business Client. Does this mean that existing WebDynpro applications should be changed? The answer is no – existing WebDynpro application can also be rendered using xBCML without any changes.