Loading SVG content in Flex Apps

This is a question that is often asked to me. A lot of people have complex graphics done in SVG and want to leverage it in their Flex apps. Its actually quite simple.

Like any asset used in your app, copy the svg files into your project structure. You can use the Image control (mx.controls.Image) to draw SVG content. Just that the source has to pointed to classes containing the SVG content instead of the images as you do with JPG and PNG assets. Here is a small bit of code that generated the following result

Code

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; backgroundColor=”0xffffff” layout=”horizontal”>
<mx:Script>
<![CDATA[
[Embed(source=”assets/bird.svg”)]
[Bindable]
public var bird:Class;

[Embed(source=”assets/tux.svg”)]
[Bindable]
public var tux:Class;

]]>
</mx:Script>
<mx:Image source=”{tux}”/>
<mx:Image source=”{bird}”/>
</mx:Application>

Result

The SVGs I have used can be found here:

• Tux SVG
• Bird SVG

[Bookmark This Page] Aggregation of Flash Builder 4 Blog Posts

My colleague and good friend, Sujit  is aggreagating some of the very cool tutorials, articles and feature walk-through posts by the Flash Builder & Evangelism teams. Be sure you book mark it. You can see it here:

http://sujitreddyg.wordpress.com/flash-builder-4/

Connecting to WebServices with the Data Centric Development (DCD) feature in Flash Builder 4 – Part 3

This is Part 3 of a 3 part series:

• Part 1 – Importing the Service
• Part 2 – Integrating the Service with UI
• Part 3 – Complete Screen cast of the work flow
  

This is a continuation posts about working with Web Services in Flash Builder 4. Here you can see the screen cast of the whole work flow that I described in the other 2 parts. To view the screen cast, click on the image below or download it here (right-click and select Save-As) 🙂

Click on the image above to see the screen cast

Connecting to WebServices with the Data Centric Development (DCD) feature in Flash Builder 4 – Part 2

This is Part 2 of a 3 part series:

• Part 1 – Importing the Service
• Part 2 – Integrating the Service with UI
• Part 3 – Complete Screen cast of the work flow

This is a continuation of my Web Services import which was discussed in Part 1. Once you have imported the Web Service it’s time to build the UI and bind the service to it.

Step 3 – Building the UI

Go to the design view and drag and drop a ComboBox. Right click and click on “Bind to Data”.

This throws a wizard where you can choose the service you want to bind it to, which in this case is getCountries().

Click “OK” and run the application. You should see the following

Now lets get the population details for a selected item on the combobox. This is simple. Click on the ComboBox and click “Generate Details Form”

This throws a pop-up where you can choose which operation to call on change and what to display.

It automatically redirects to the code view and ask you to provide the parameter for the getPopulation() method.

So change

protected function comboBox_changeHandler(event:ListEvent):void

{ getPopulationResult.token = populationService.getPopulation(strCountry);}

To

protected function comboBox_changeHandler(event:ListEvent):void

{getPopulationResult.token = populationService.getPopulation(comboBox.selectedItem.toString());}

Now go to design view, reposition the generated Form and run the app and we have a fully functional application served by a webservice.  Just to make it pretty, I added a prompt to the ComboBox.

In the next part, you can see a screencast of the workflow that was defined in Part 1 & Part 2.

Connecting to WebServices with the Data Centric Development (DCD) feature in Flash Builder 4 – Part 1

This is Part 1 of a 3 part series:

• Part 1 – Importing the Service
• Part 2 – Integrating the Service with UI
• Part 3 – Complete Screen cast of the work flow

Web Services are an integral part of the SOA infrastructure and also a preferred way of exposing services, especially in the Enterprise. The new Services Wizards feature in Flash Builder 4 makes it extremely simple to work with Web Services.

To work with the Services Wizard  which is part of the Data Centric Design feature in Flash Builder 4 ( for connecting to HTTPService, Web Services or Remoting using any back-end technologies like Java, PHP, CF… etc) you need to do the following:

1. Add the service
2. Configure Return Type (create client-side Model classes by inspecting the service)
3. Call the service and bind it to UI Controls

Before I start to explain how to access Web Service (WS) from Flash Builder, let me discuss some aspects of the WS Architecture. A WSDL(Web Service Description Language) Document is what signify how a WS is exposed. On a high-level, each WS has the following:

• Elements
• Complex-types
• Messages
• Operations

Each operation will have an input & output message and each message may be built with an element or complex-types. We will be using this Population WS (click to see the WSDL file) for serving data to our application. We will use the following operations:

• getCountries – to get the various countries for which data is available.
• getPopulation – for getting the population of a selected country.

Let’s get started:

Step 1: Create Project

Begin by creating a new Project [File>New>Flex Project]. Type a name and press finish…

Step 2: Import the Service

In your Flash Builder 4 environment, you will see the new Data/Services Tab like below:

Click on “Connect to Data/ Service” and choose WebService from the pop-up

In the next screen, enter the Service Name (that you want it to be called in your Flex application) and path to WSDL file, which in this case is – [http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL]

If your WSDL is SOAP 1.1 protocol compliant, it will directly show the operations screen (the screenshot after the one below). Otherwise, it will ask you to choose the appropriate SOAP port as below. Remember this screen will only appear if your WDSL is not WSDL1.1 compliant.

Then you can choose the operations that you are interested in. You can either choose just the operations you are interested in or press Select All and press “Finish”.

This will give you a Data/Services tab with all the operations imported and configured…

A moment to explain the above operation…

Flash Builder introspects the WSDL and the selected operations and generates the required classes. But you will notice that while the return type for getPopulation() is created as a client side model class called Population, getWorldPopulation() has a return type of Object. The introspecter does the following:

• If the operation is well formed Flash Builder 4 creates the required classes (as in the case of getPopulation() method it creates a Population Class)
• If the operation is not well formed then Flash Builder 4 keeps the return type as Object (as in the case of getWorldPopulation() Method)

Since WSDL itself defines the input and output types, it will create the required classes provided the operations are well formed.

The Part 2 of this series will deal with binding this service to UI and creating an application.

High Performance AIR Applications

Oliver Goldman from the AIR Team did a presentation at MAX on “High Performace AIR Applications”. In case you missed it, catch it here.

Invoking an AIR app from another AIR app

Today I was just trying to see how to launch one AIR app from another… The idea struck me when I was reading –Installing and running an AIR applications from a web page documentation on livedocs and I thought it is worth posting here.

There is an air.swf file file at [http://airdownload.adobe.com/air/browserapi/air.swf]. One can invoke a launchApplication() method on the file to interact with the AIR runtime and launch installed AIR applications from a web page in a browser. I decided to use the same file to launch AIR apps from another AIR app. To get this working, the trick is very simple:

1. Get the applicationID and the publisherID of the app intended to be invoked
   

   applicationID can be obtained, either from the author of the application or looking at the application.xml file funder the META-INF/AIR folder in the application install directory.

   publisherID can be obtained, either from the author of the application or in the publisherid file under the META-INF/AIR folder in the application install directory.

2. First load the air.swf in an instance of the Loader class and set the LoaderContext as mentioned here under “Loading the air.swf file” heading.
3. Do a check if the application is installed using the code under “Checking from a web page if an AIR application is installed” heading.
4. Use the following code to launch the application
   
var appID:String = enter applicationID here;
var pubID:String = enter publisherID here;
airSWF.launchApplication(appID, pubID);
5. Done…

Note:

This would only work if the application.xml file of the application that you want to launch has the allowBrowserInvocation property set to true.

Here is an example of 2 apps, AIRAppLauncher and AIRAppLaunched. AIRAppLauncher can be used to launch AIRAppLaunched. You will have to sign the AIRAppLaunched, export as AIR, extract the publisherID, install it and use that in AIRAppLauncher for the whole workflow to work. You can download the archive here…

ADC on AMP – A great resource for Flex Developers

We all are aware of the release of Adobe Media Player (AMP) which is built on AIR (and incidently in Flex). A lot of the popular networks like PBS, CBS, MTV and others have signed up with feeds for AMP. AMP is fast becoming a easier and more efficient way of content delivery for them and a better experience for the users.

Anyway, Adobe is also adding quite a few shows for AMP. One such very useful resource is the ADC (Adobe Developer Connection) channel. There all the adobe heavy-weights talkingabout how to do things effectively in Flex, AIR, Flash …etc

The latest talk is by our very own Ely Greefield, talking about Flex 4 and the way ahead.

You can catch the same content on tv.adobe.com, but the advantage with AMP is that you can save it and then view it at your leisure rather than having to be connected to watch it.

Go get AMP & Enjoy ADC 🙂

Specifying an endpoint for a RemoteObject destination at runtime

When you intend to use BlazeDS or LCDS in your App, you usually start a new project in FlexBuilder and set the Server Technology to LCDS and then Set the Root folder and Context root and validate the configuration to create the project as below.

At this point, FlexBuilder adds a -services option to the compiler and sets it to the services-config.xml where the end-points for the services are set.

You can then write code as below where the destination is now configured in the config file that’s set at the location in -services option.

<mx:RemoteObject id=”artJava” destination=”ArtGallery” fault=”errorHandler(event)” showBusyCursor=”true”>
<mx:method name=”getArts” result=”onArtResult(event)”/>
</mx:RemoteObject>

If you look into the services-config.xml you will see the following lines there

<channel-definition id=”my-amf” class=”mx.messaging.channels.AMFChannel”>
<endpoint url=”http://{server.name}:{server.port}/{context.root}/messagebroker/amf” class=”flex.messaging.endpoints.AMFEndpoint”/>
<properties>
<polling-enabled>false</polling-enabled>
</properties>
</channel-definition>

When you run the app in FlexBuilder, it substitues the {server.name} and other variables from the configuation that you set when you created a new project and compiles this into the application. This works like a charm, but this has a problem.

Yesterday, I did an application and bundled it into a war file and send it to my friend. But when he ran it, it did not work. This was because, I had my BlazeDS installed on port 8400 while he had it on port 8080. Since my Builder had substituted the {server.name} at compile time, the only option was to give him the whole project and get him to recompile it for his configuration.

Thanks to Sujit, I discovered that you can not go this way and make this generalized by injecting these values at runtime, rather that these being at compiletime.

The trick is

Adobe DevNet Update: April 2008

DevNet this month has some interesting posts added this month. Here’s a list of the ones I think is very useful…

• Adobe AIR and Dreamweaver for JavaScript developers
• Creating your first desktop instant messenger using Adobe AIR, Flash Media Server, and WebORB.NET
• Building a Flash game on Adobe AIR
• Top 10 mistakes when building Flex applications *
• Yahoo! Maps collaboration using Flex and BlazeDS
• Using an ActionScript code generator to enable Flex and .NET integration
• Setting up a socket policy file server

I am also adding some interesting stuff I found on the Internet

• An article explaining the “Garbage collector in Flash Player 9/Actionscript 3“
• Garbage Collector Interactive Simulator by Grant Skinner
• Real Time Communication with Flex and AIR using ColdFusion and LiveCycle Data Services