Development Trends

Read more about Air for Android – download free issue here

Click here to visit the new Google Web App’s store.

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

If you want to have a closer look at some of the newest possibilities within Google Wave, then SAP has developed a prototype called Gravity. Gravity uses Google Wave and could be used to develop Business Process models – which could be used later on in SAP’s BPM software.

See the prototype in action and read more here

In the SAP Network Blog SAP and Google Wave – Conversation Augmentation – DJ Adams describes how he has implemented a small demo which will integrate a Google Wave application with SAP Netweaver.

Want to know more about Google Wave – see the following screencast:

Would you like to add some social network functionality to your blog? And maybe share some of the vistitors between related blogs? Then FriendConnect from Google might be a good starting point. It’s easy to implement on your blog without a lot of changes, and there are a lot of different plugin’s available already.

How do I get started with Google FriendConnect?

First you will need to register – and then follow four simple  steps in order to add social network functionality to your blog. I have added the Social Bar plugin at Development Trends – and with this plugin you don’t have to change any pages – just upload the plugin files to your website and you are up and running. And if you want to share visitors with Development Trends – just join by clicking the Social Bar at the bottom of the screen…

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>

Google has announced a new project to build a new OS – called Google Chrome OS. The OS will be an open-source lightweight operating system. It’s planned to be available for consumers in the seconf half of 2010. Read more in the official Google Blog.

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…

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>