Flash Builder 4 beta features

23 07 2009

Today, I made my first sample application in Flash Builder 4 beta.

The first thing that caught my eye is that when you place the mouse cursor over syntax a tooltip/popup containing document reference appears. This is really helpful.

fb4_doc_reference

The Canvas component has been discontinued and instead we have a Group component. I wanted to give a background color to the Group component, which turned out to be quite a painful experience. I had to add a Rect component and give it a fill. Check the code below:

<s:Group width="220" height="250">

<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

<s:fill>

<mx:LinearGradient>

<mx:entries>

<mx:GradientEntry color="0xeedd33"/>

</mx:entries>

</mx:LinearGradient>

</s:fill>

</s:Rect>

</s:Group>

I like the way states are handled now. Much better. No need to do the addchild, removechild routine. Just declare the states and for each UI component specify the state(s) in which the component has to be included. Check this:

<s:DropDownList width="90%" dataProvider="{_ar}" includeIn="st1" left="10" top="50" />

<s:states>

<mx:State name="st1"/>

<mx:State name="st2"/>

</s:states>

Also, if you notice we have a mix of Spark (namespace s) and Halo (namespace mx) components.  Here is the complete code for the sample app I created.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/halo"

applicationComplete="init()">

<s:layout>

<s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var _ar:ArrayCollection;

private function init():void

{

_ar = new ArrayCollection(["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8"])

}

]]>

</fx:Script>

<s:Group width="220" height="250" contentBackgroundColor="#CCEE00" y.st1="0" x.st1="0" fontFamily.st1="Courier New" color.st1="#0068DC" y.st2="0" x.st2="0">

<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

<s:fill>

<mx:LinearGradient>

<mx:entries>

<mx:GradientEntry color="0xeedd33"/>

</mx:entries>

</mx:LinearGradient>

</s:fill>

</s:Rect>

<s:SimpleText text="Initial State - st1" text.st2="New State - st2" fontSize.st2="24" left="10" top="10"/>

<s:Line width="100%" includeIn="st2"/>

<s:List dataProvider="{_ar}" width="90%" left="10" top="50" includeIn="st2">

<s:layout>

<s:HorizontalLayout useVirtualLayout="true"/>

</s:layout>

</s:List>

<s:DropDownList width="90%" dataProvider="{_ar}" includeIn="st1" left="10" top="50" />

<s:Button label="Change" click="{currentState = currentState == 'st1' ? 'st2' : 'st1'}"

left="70" bottom="5" label.st2="Back"/>

</s:Group>

<s:states>

<mx:State name="st1"/>

<mx:State name="st2"/>

</s:states>

</s:Application>

fb4_app_1


fb4_app_2





Flex and ASDocs

30 01 2009

Flex builder offers a very easy way to generate documentation for your actionscript classes API. There are basically 2 steps involved:

– Comment your actionscript class as per ASDoc guidelines. You can refer the instructions in the Flex documentation.

– Use ASDoc external tool from within your Flex builder to generate the documentation. You can do this using commandline as well. However, I found it much more convenient using Flex builder.

Here’s what I did for my project:

Tool used: Flex Builder 3, SDK 3.2.0

1. Add comments to my custom UniConverter class (plz note this is not the complete class) as follows:

package com.bs.uni
{
	import fl.core.UIComponent;

	/**
	* This component class can be used to convert different
	* special characters to unicode characters for a given string.
	*
	*/
	public class UniConverter extends UIComponent
	{
		private var _strResult:String;

		/**
		* Convert basic latin special characters to unicode for a
		* given string.
		*
		* @param src The source string that contains basic latin
		* special characters which needs to be converted to unicode.
		*
		* @return The source string with basic latin
		* special characters converted to unicode.
		*/
		public function basicLatin(src:String):String
		{
			if (src == null)
			{
				throw("Invalid source string.");
			}
			else
			{
				_strResult = src;
				convert(BasicLatinXML.getXML());

				return _strResult;
			}
		}

2. Select Run > External Tools > Open External Tools Dialog

3. Add a program and name it ASDoc_Uni. You can give any name.

4. Location: field — add C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\asdoc.exe

5. Working Directory: field — browse to my project folder. The field shows ${workspace_loc:/UniConverter} which points to my working directory.

6. Arguments: field — add the following command

-source-path "C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Component Source\ActionScript 3.0\User Interface"
${workspace_loc:/UniConverter} 
-doc-classes fl.core.UIComponent
com.bs.uni.UniConverter 
-exclude-classes fl.core.UIComponent
-exclude-dependencies=true
-main-title "Unicode Converter" 
-window-title "Unicode Converter"

The above command adds 2 source paths for the classes that have been used – my project directory and the current actionscript API. It specifies 2 classes – my custom class and the UIcomponent class which it inherits. Now, I only want my custom class in the documentation and not the flash inbuilt UIComponent class. To exclude the UIComponent class, specify it next to -exclude-classes and also set -exclude-dependencies=true. Finally, I just set the documentation title and the window title as “Unicode Converter”. There’s more you can do, just check the ASDoc documentation.

7. Once through, click Run. A new folder named asdoc-output is created in project folder. Open the folder and launch index.html. There you go, documentation is all set.

 

Flex ASDoc Tool

Flex ASDoc Tool





Flex vs Silverlight vs AJAX vs JavaFX

15 01 2009

Yesterday, I was having this interesting conversation with a couple of  friends regarding which technology will rule the RIA space in the future. I believe, there’s room for all four of these as per my observations and experience. In fact, all these will have a separate domain and overlap at only few places. For example, AJAX is widely popular for creating community building apps,  portals, mashups, and so on. Flex is used for multimedia rich requirements, for example, interactive maps, photo albums, portfolios, games, product websites, etc. Silverlight is a direct competition here but might have more presence in the Enterprise apps market.

Flex has an advantage of running on the Flash platform which has a very wide reach on the internet and an integrated support from other Adobe products such as Photoshop, Flash, Illustrator, Fireworks, After Effects and some upcoming products – Catalyst, Thermo, Cocomo, and more. These are industry leading tools that help in building visually rich images, animations, and videos. AIR version adds value by having a desktop version of an app that is integrated with the online one.

Silverlight has the benefit of a huge community of .Net developers who will not need to learn anything new from scratch and utilize the huge libraries of .Net components available in the framework. It has a seamless integration between desktop and online version as well. Because of this, building enterprise applications will be the area in which Silverlight might edge over others.

AJAX, ofcourse, has two big advantages which has no competition as of now. These are – no plugin required and SEO enabled. That’s why apps like eBay, Amazon, MySpace, Blogs, and many more will continue to be largely based on AJAX with a few widgets/components built on either of the other three technologies.

JavaFX, is a late entry into this domain, although it all started with a Java product only i.e. Applet. Java enthusiasts will definitely lap onto this. It just remains to be seen what kind of value add JavaFX will bring over others. You never know, since it’s Java, the most reliable internet technology when it comes to providing security to user’s data.

There can, maybe, a scenario where a single app (for example eBay) utilizing all the four technologies for its different features.

So, whatever may happen, it’s the user who will benefit the most with a wide array of technologies to choose from. For developers, it will be important to specialize in one and at least have a good understanding of the rest to provide the best solution to a customer.





Dividing your Flex app in different SWF files

20 12 2008

I came across a Adobe live docs PDF that I believe is very important for any serious Flex developer. Sooner or later you will be developing an application that will scale up to proportions that might become unmanageable in terms of code, file size, and performance.

Flex provides 2 ways to deal with it – modular approach and sub-applications. Both ways you load and unload separate SWF files into the main application for keeping certain functionality separate and available only when required. Besides some other issues this can also give rise to an issue of having different version of Flex for the loading sub apps and that needs to be taken care of early on.

This PDF details all the considerations that should go into making a decision on which approach to follow for building a large application. A must read for all Flex developers.

http://livedocs.adobe.com/flex/3/loading_applications.pdf





Cocomo – “Social Networking Mojo” for Flex

20 11 2008

Cocomo

Cocomo

The most popular aspect of Web 2.0 today is social networking websites like Facebook, MySpace, Twitter, etc. Adobe has started a new initiative to add power to the Flex platform for building social networking websites – it is codenamed “Cocomo”.

 

“Add social features to your existing Flex apps or build totally new ones, such as real-time productivity/collaboration apps, multiplayer games, and audio/video chat.

Features of the Cocomo beta include the following:

  • VoIP Audio
  • Webcam Video
  • Chat
  • Multi-User Whiteboards
  • Real-Time File Sharing
  • User Management
  • Roles and Permissions
  • Robust Data Messaging

– Adobe”

Check it out here…

http://labs.adobe.com/technologies/cocomo/





Flex best practices

31 10 2008

While working on Let’s Go Green application, I learnt some important techniques in Flex that I’d like to share:

1. For rendering a corner radius to a container (for example: Canvas, HBox, etc.), first set the borderStyle to “solid”.

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="200"
backgroundColor="#FFFFFF" borderStyle="solid" cornerRadius="8">
</mx:Canvas>

2. For making your layout center and middle aligned in a browser, put all the UI tags inside one container (for example: Canvas, VBox, etc.) and set its horizontalCenter to “-22” and verticalCenter to “-22”.

<mx:VBox id="mainContainer" width="300" height="200" horizontalCenter="-22" verticalCenter="-22">
</mx:VBox>

3. Use weak references for event listeners to make them available for garbage collection. This will reduce memory leaks. Just use the default values for the 3rd and 4th parameters – useCapture and priority – but use true for weakReferences.

addEventListener(ResultEvent.RESULT, onResults_add, false, 0, true);

4. Arrays do not support data binding. In case data needs to be stored in an Array structure and then it needs to be binded with some UI component, use ArrayCollection object which supports data binding.

  
5. While your application is busy fetching some back-end data, you can set the cursor to let users know that the application is currently busy.

For setting the cursor to busy, use CursorManager.setBusyCursor() 

For resuming the defaultcursor, use CursorManager.removeBusyCursor()





Flex AMF3

30 10 2008

Here’s a very interesting app made by James Ward for comparing the performances of different web technologies for building RIAs – Flex & AMF3, AJAX & XML, AJAX & JSON, and so on. You select a technology pair and click Execute. The command will fetch 5000 rows from a database and show the proformance results in terms of server execution time, transfer time, and so on.

http://www.jamesward.com/wordpress/2007/04/30/ajax-and-flex-data-loading-benchmarks/

Of all the technology pairs listed in this app, I’ve used Flex XML AS, Flex XML E4X, and Flex AMF3. Out of these I’ve found Flex AMF3 very easy to use, fast, and responsive. To get started with this technology I’d recommend chapter 7 of the following book by Friends Of Ed…

http://www.friendsofed.com/book.html?isbn=1430209933