Development Trends

Read more about Air for Android – download free issue here

I ran into this cool SWC at www.AlivePDF.org – so have a detailed look here if you want to output PDF’s from eg. Adobe AIR.

www.AlivePDF.org: “AlivePDF is an open-source ActionScript 3 (Flash, Flex, AIR) PDF generation library ported from the FPDF PHP project.
It allows you to generate PDF’s 100% client-side.”

Try some of the new features below in Adobe AIR 2 – BETA

Adobe Flash Builder for Force.com – Developer Preview (codename Stratus) is a new development tool for building cloud-based, rich Internet applications (RIAs) that can be deployed in the browser or on the desktop leveraging Adobe AIR.

Read more at Adobe Developer Connection

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>

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…

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…

Google has enhanced the Google Maps API - now it wil be possible to use the API in Adobe AIR applications also. See this Google Maps tutorial.

Click here to read more..

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