Development Trends

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…