Development Trends

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

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…

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.

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>