Development Trends

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.

How do you get started with FLEX 3.0 ? An interesting place to start could be e-learning websites. I have tried the site www.totaltraining.com – where I found the course “Rich Internet & AIR applications” which should take you from beginner to an advanced level. The course consists of 2 DVD’s – which will take you through FLEX and AIR in a very understandable manner. As part of the training material – there is a set of practical excercices which you could you as a test at the end of each lesson.