Development Trends

If you want to use some of the Google API’s in an Adobe AIR application you might run into some tricky issues regarding authorization headers. In this example, I will try to show you how to receive this Auth header token and then use it for subsequent calls to methods in the Google API later in the process.

In the following example – I will show you how to connect to Google Spreadsheet

The Google login (named ClientLogin) and methodcall is done in two steps. First step is to call the ClientLogin url (https://www.google.com/accounts/ClientLogin) in order to tell Google what service you would like to access and also pass your username/password for this account. If the uservalidation is succesfull then Google will send an Auth token in the response. You need to use this token in any other subsequent calls to methods in the Google API.

Next step is to call a method in Google spreadsheet – and in this example we will retrieve a list of spreadsheet objects. And here it’s important to pass the authorization header:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">

    <mx:Script>
        <![CDATA[

            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;    
            import mx.utils.Base64Encoder;    

            [Bindable]
            private var AuthString:String;

            private function CallHTTP():void
            {
                google.send();                
            }            

            public function handleLoginPlain(event:ResultEvent):void
            {  

               var textindex:int;

               textout.text = event.result.toString();
               AuthString = event.result.toString();
               textindex = AuthString.search("Auth");
               AuthString = AuthString.substring(textindex);
               AuthString = AuthString.replace("Auth=","");
               textindex = AuthString.length;
               textindex = textindex - 1;
               AuthString = AuthString.substring(0,textindex);

               key.text = AuthString;

               googleaccount.headers =
               {Authorization:"GoogleLogin auth="+AuthString.toString()};
               googleaccount.send();
            }    
            public function handleLoginFault(event:FaultEvent):void
            {
              Alert.show(event.fault.faultString, "Error");
            }    

            public function handlePlaindata(event:ResultEvent):void
            {  
              Alert.show('You are connected to Google Spreadsheet',
                         'Login', mx.controls.Alert.OK);
            }    
            public function handleFaultdata(event:FaultEvent):void
            {
              Alert.show(event.fault.faultString, "Error");
            }            
        ]]>
    </mx:Script>            

    <mx:HTTPService id="google"
        url="https://www.google.com/accounts/ClientLogin"
        method="POST"
        contentType="application/x-www-form-urlencoded"              
        result="handleLoginPlain(event);"
        fault="handleLoginFault(event);" >
      <mx:request xmlns="">
        <accountType>GOOGLE</accountType>
        <Email>enter your e-mail address here</Email>
        <Passwd>enter your password here</Passwd>
        <source>enter your application name here</source>
        <service>wise</service>
      </mx:request>
    </mx:HTTPService>    

    <mx:HTTPService id="googleaccount"
        url="http://spreadsheets.google.com/feeds/spreadsheets/private/full"         
        result="handlePlaindata(event);"
        fault="handleFaultdata(event);" />

    <mx:Button id="login" x="40" y="30" label="Login" click="CallHTTP()"/>
    <mx:TextArea id="textout" x="40" y="60" width="400" height="260"/>
    <mx:TextInput id="key" x="104" y="30" width="336"/>

</mx:WindowedApplication>

Do you want to know/learn more about RIA for SAP? – then read this whitepaper from Adobe.

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

With FLEX3 the process of integrating Flex and SAP NetWeaver has been made a bit eaiser. All webservice in SAP could be made available in the Enterprise Services Repository (ESR) which is the central information repository for enterprise services in SAP. In order to use these webservices in a FLEX application you import the relevant WSDL using the ‘Import Web Service’ in Flex Builder 3. The import-feature will generate all the classes and datatypes needed in order to call the webservice in SAP. After this you will be able to work with the webservices using the ActionScript classes – no need to think about xml etc. In previous Flex versions you had to generate proxies using a Proxy Generator in order to integrate FLEX with SAP.

If you are looking for inspiration – either with FLEX or AIR applications – then check out this link