Archive for the ‘Flash Builder 4’ Category

Text Layout Framework Technical Introduction

September 29, 2010 Leave a comment

Recently. I got chance for hand on practice on Text Layout Framework (TLF) and I like to post an article on technical introduction of Text Layout core component, conversion component and edit component and implementation of Text Layout Framework new feature like Undo / Redo and some interesting features.

Text Layout Framework support complex scripts and advance features and layout features. TLF consists three components :

1) textLayout_core.swc
2) textLayout_conversion.swc
3) textLayout_edit.swc

The textLayout_core component is central part of framework, which deal with storage of text, creation of text containers and display text.

As the component name itself indicate, the textLayout_conversion component is used for text input output operation (conversion), in other words import and export text operation with framework.

If you want to allow user to edit text which is stored in textLayout_core component then the textLayout_edit component will play an important role.

Following are some important Classes and specific operations techniques needs to understand for use of TLF.


TextFlow class is responsible for managing all the text content, as TextFlow can have ParagraphElement (p) and DivElement (div) elements as child. A div element can have group of paragraphs. A paragraphs can have SpanElement, InlineGraphicElement, LinkElement and TCYElement elements as a children. TYYElement is used in Japanise text.

The following diagram represent the node hierarchy in the elements package of the Text Layout Framework.

Each TextFlow has a corresponding Configuration object which allows you to specify initial character and paragraph formats and the initial container format.

You can get more information about Text Layout Framework from here.


The TextLayoutFormat holds all of the text layout properties, which effect the format and style of a text flow at container level, paragraph level and text level. Once you set TextLayoutFormat properties you will have to assign it with text flow just like:

var textFormat:TextLayoutFormat = new TextLayoutFormat();

textFormat.textDecoration = TextDecoration.UNDERLINE;

textFormat.fontSize = 12;

textFlow.format = textFormat;

Also, you can change text flow attributes directly :

textFlow.fontSize = 12;

Importing Text

This is specially useful for importing dynamic text returned from remote service or HTTPService at runtime. Following are three different conversion operation for import and export operation of text.

TextConverter.TEXT_LAYOUT_FORMAT – convert to / from markup format

TextConverter.PLAIN_TEXT_FORMAT – convert to / from plain text string

TextConverter.TEXT_FIELD_HTML_FORMAT – convert to / from HTML

private var _textFlow:TextFlow; private var _textInput:String ='Lorem ipsum dolor sit ao ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis.'; textFlow =TextConverter.importToFlow(textInput,TextConverter.TEXT_LAYOUT_FORMAT);

Here, you can change the text format for text input.

Exporting Text

Exports a TextFlow to a specified format. Supported formats includes FXG, HTML, plain text and TextLayout Markup. Also specify the type of the exported data in conversion type format, which support ConversionType.XML_TYPE and ConversionType.STRING_TYPE.

var outputString:String = TextConverter.export(_textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE).toString();

To implement this with spark component you can use textFlow property as shown below :

Editing Text

TLF edit component provides controller functionality by three classes that you can use to select text, edit text and undo redo text.

The ability to select or edit text is controlled at TextFlow level by an associated interaction manager, which is defined by TextFlow.interactionManager property. To enable selection will have to use SelectionManage class. And to enable selection and editing both assign an instance of EditManager instead of SelectionManager

1) Selection Manager

To enable your text selectable, create an instance of SelectionManager and associate it with interaction manger of your TextFlow instance. For example if _textFlow is your TextFlow instance name then you will have to set interactionManager property as shown below :

_textFlow.interactionManager = new SelectionManager();

2) Edit Manager

To enable selection and editing, create an instance of EditManager and associate it with interaction manager of your TextFlow instance. It will look like :

_textFlow.interactionManager = new EditManager();

3) Undo Manager

To enable undo and redo feature create an instance of UndoManager and set it as argument to EditManager constructor. If you have _textFlow as instance of TextFlow then you can set UndoManager as below.

_textFlow.interactionManager = new EditManager(new UndoManager());

If you have multiple instances of TextFlow let say textFlow1 and textFlow2, and you want to use the same UndoManager for the both textFlow instances then you can set it as shown below :

var undoManager : UndoManager = new UndoManager();

_textFlow1.interactionManager = new EditManager(undoManager);

_textFlow2.interactionManager = new EditManager(undoManager);

textFlow.format = textFormat;

Friends, you can get more information about advanced text operation supported by Text Layout Framework from here.

Enjoy RIA.. 🙂


Flash Builder and Facebook Communication

May 10, 2010 2 comments

The Flex application you are going to build will display a logged in Facebook user information let’s say name, photo, and the users friends name list,  and will use Flash Builder to create user interface to communicate with Facebook.

As these articles is second part of the if you would like then you can get first part information from here.

Create a Flex project in Flash Builder.

1)   In Flash Builder create a new project and give project name. Here I am using “FacebookDetails” as project name.

2) Now, select Finish option and go to Design mode and from Components panel, drag out a Lable and put it on Design area. Now set the its id as loginLbl and set text property WelCome in the Properties View.

Let’s drag out a Button and put in on Design area and set its id to loginBtn and label to Login. Now if you run the application then it’s looks as below.

For our application will have to create two states, a login state which show a Label and login Button, and a logout state which display a Label, a logout Button and a DataGrid components. Lets switch to Design mode.

2) In State view first rename the State 1 to login, and click the New State button and enter state name as logout and choose OK.

In the logout states as we described above we needs a Label, logout Button and DataGrid to show users friends name list. So the logout states look like

Click the source button. Your code should look like as shown below:

Now we move towards main part of our application. To communicate with Facebook we need to use ActionScript 3 Library for Facebook Platform. So first you have to download the classes and use the classes for the application.

1) You can get the ActionScript 3 Client Library for Facebook Platform from here.

Download it and put the SWC file in libs folder of the application.

Create Facebook session


To start communication with Facebook,  we will have to create a session that authorizes the application with Facebook for specific user.

2) First add Script block where we define application variables and functions. Define some variables as below and it will import related classes.

3) Now lets move towards functionality of the application. Add click property of loginBtn and select  Generate Click Handler from the Code Assist pop-up.  And create instances of FacebookSessionUtil, Facebook, also register event listeners and call the session login method as shown below.

You have to specify you API_KEY and SECRET  keys as it, you can retrieve your application API key and application secret from the Facebook Developer application      (in Facebook click the Developer application link, and then click the link My Applications, then click on your application ).

I would like share one thing here this is an sample application so we can pass the API Key and SECRET keys hard code or we can retrieve it dynamically but the SWF can decompiled and any one can access your application data. So I think it would be good idea if these key will retrieve using Flash Remoting or web service call from your application or use Facebook Connect to login.

If you run the application and click login button then it will open Facebook login page in another browser window.

You will have to login by your Facebook  id.  Then it will redirect you to the page shown below.

During the Facebook login process user will have to wait for some time and the process delay will be handling by FacebookEvent.WAITING_FOR_LOGIN handler, as shown below.

And the alert CLOSE event will just  validate Facebook login as below.

After successful connection with Facebook the FacebookEvent.CONNECT will managed by onFacebookConnect() method as described below. Now we are connected with Facebook so we call Facebook methods using post() to get required data from Server. In the API there is one command class for each of the corresponding calls in the Facebook. Like to get more information about the user, use the GetInfo() command with appropriate arguments. And the call will managed by FacebookEvent.COMPLETE.

Also we want to get the user’s friends list so will also have to call GetFriends() commands, you can observe it in above code. And you will get friends id and based on that id will have to get other details by GetInfo() call.

protected function onGetFriendsList(event:FacebookEvent):void { var _friendsUid:Array = new Array(); var users:FacebookUserCollection = ( as GetFriendsData).friends; for(var i:int; i < users.length; i++){ _friendsUid.push((users.getItemAt(i) as FacebookUser).uid); } var friendsDetailsCall:FacebookCall = GetInfo(_friendsUid,[GetInfoFieldValues.ALL_VALUES])); friendsDetailsCall.addEventListener(FacebookEvent.COMPLETE, onFriendsGetInfo); }

And the friends details we get the names and by push those names in DataGrid component as described below.

Finally, you will get the result of application as

At last you can handle the session logout by logout() method as described below

I hope you would like the sample application article.  I would like to get your suggestion regarding this articles and technical improvements.

Enjoy RIA…  🙂


Migration from Flex 3 to Flex 4

May 9, 2010 3 comments

Recently, I experiment on migration of Flex 3 application to Flex 4 application. And I plan to list out the possible situation which can create problems during migration of your existing Flex 3 application to Flex 4 application.

When converting Flex 3 applications to Flex 4, you might encounter the following issues:

1) Namespaces

Flex 4 uses a new namespace. The old namespace mainly referred to as the “2006 namespace”  is as follows:


The new namespace mostly which referred to as the “2009 namespace” is composed of three namespace definitions, as follows:




Different files used by the same application can have different namespaces either 2006 or 2009, but you cannot have both namespaces in the same file.

2) Declaration

Non-default, non-visual properties must be wrapped in the <fx:Declarations> tag in Flex 4 applications.

3) Loading SWF files

The signature of the ModuleLoader.loadModule() method has changed from:

public function loadModule():void


public function loadModule(url:String, bytes:ByteArray):void

Also, the SWFLoader class has a new property, loadForCompatibility, and a new method, unloadAndStop(). These changes were added in Flex 3.2, but if you are migrating an application from Flex 3 to Flex 4, you might encounter them.

4) HTML wrapper

The HTML wrapper has changed from Flex 3. There are several differences in Flex 3 and Flex 4.  The default output of the HTML templates is to center the SWF file on the page. In Flex 3, the default was to align the SWF file to the upper left corner of the page.

5) Globals

Top-level Application object is different in Flex 4. ApplicationGlobals.application has been replaced with FlexGlobals.topLevelApplication. Using Application.application is deprecated. FlexGlobals.topLevelApplication is the recommend alternative.

6) RLSs

The framework RSL is linked by default. This means that when you build an application SWF file, classes in the framework.swc file are not included in the application SWF file. The classes are instead loaded from the framework RSL before the main application loads. In Flex 3 the default was to statically link the classes. Using the framework RSL was optional.

The advantage of using the framework RSL is smaller application SWF sizes and faster download times. The downside is increased memory usage because all the framework classes are loaded in the RSL, not just the classes that your application requires.

Also there are several other differences in Flex 3 and Flex 4 which might be encounter during migration of Flex 3 project to Flex 4. I would like if you encounter any new things then please share it.

Enjoy RIA…. 🙂

Flash Builder Facebook Application Development

May 8, 2010 11 comments

Adobe Flex and Flash Platform provides excellent development environment for rich experiences for games and websites. To develop an effective user experience application I think need to plan from scratch means the selection of development tool to deployment environment.

Recently, I am got some time on exploring interesting application on Facebook and exploring frameworks and Flash Builder.  Among a list of available options for frameworks and Facebook applications, I choose to explore an option for creating Flash Builder web application with Facebook.

To develop Facebook application will have to use Facebook REST API we will have to follow some steps as described below:

1) Add Facebook Developer application to your Facebook account
2) Get application API key to communicate with Facebook server
3) Register a Facebook application
4) Create an Flex application with Flash Builder

To communicate with Facebook from your application, first register your application with Facebook using Facebook Developer application.

1) In browser go to Facebook and login
2) Go to Facebook Developer application
3) Choose Allow option in Allow Access dialog box

4) Click the Bookmark Developer App link at the top of the browser window

5)  Click the Home link at the top of the page

6) On the Home page, see the new Developer application bookmark

Register application with Facebook

To communicate with Facebook from your application, you must first register your application with Facebook using the Developer application which assigns an application API key and secret which are used when you make calls to Facebook.

1) Return to the Facebook Developer application by clicking the application’s bookmark

2) Click on Setup new application

3) Enter your application name and fill some details and choose Create Application option.

4) In Basic section you get Application ID, API Key and Secret Key related to your application.

See, these Application Secret Key and API Key will be used for your Flex application. These Key is will create a connection between your application and Facebook.

5) Now select the Advanced option from the left side navigation.  For applications which can communicate with Facebook, you have to choose Application Type options. For web application will have to use Facebook REST API and specify setup and will have to use Facebook connect login for login functionality and it will have to deploy your application files on a publicly available server.

Now choose Save Changes option and you completed first step for you application.

Friends, very soon will post next step for these application, which will receive User Facebook  details in Flash Builder application.

Flex 4 Application on Mobile Device !!

March 24, 2010 1 comment

Today I seen an superb demo of ‘flex 4 application running on google nexus one’ by Harish, an Adobe Evangelists.

And there is a list of the nice Key points described, and finally it comes to the Flex Mobile Framework.

You can enjoy the demo.

It would be a great feature for flex developers !!! 🙂

You can get more details from here.

Enjoy RIA…

Adobe Flash Builder 4 Final Release

March 22, 2010 Leave a comment

Its a great news for flash flex developers that Adobe Flash Builder 4 final released. Also Flex 4 SDK with completely new component and skinning architecture called Spark which support main motive for RIA applications and improved flex compiler performance and lots of other things.

According to developers prospective there are several new things like improved debugger support conditional breakpoints, watchpoints and expression evaluation, added code generation features and made it easier to test applications with network monitor and FlexUnit support.

You can get the exciting updates for the Spark from here by Deepa.

Download Flash Builder 4 and enjoy RIA from here.

If you are just getting started with Flex then there is an TestDrive nice option to speed up on Flex.

So friends enjoy RIA…

Adobe Flash Platform – Game Technology Center

December 27, 2009 2 comments

Finally, Adobe provides a centralized space to host best practices, code sample and examples around the Flash gaming space from where game developers get information and share information regarding gaming environment. There are some nice articles or information listed below related to adobe gaming technologies:

1) Adobe Flash Platform Gaming Technology Center

2) An introduction to developing games on the Adobe Flash Platform

3) Developing games for Nokia S60 Touch devices

4) Building a game with Flash Builder using Cairngorm Framework

5) Creating a Massively Multiplayer Online game with Adobe Flex 3

You can get more information from here.

Enjoy RIA… 🙂