What is new in Flex 4?

I know that this talk had started long ago and Adobe Evangelists had already mentioned about Flex 4 beta in detail through blogs and other technical articles but I would like to once again make my view on what all I came to know when I started playing with Flex 4 and also after reading many articles on the same. So letz get going…first of all Flex 4 has many changes and also enhancements which will make life of designers/developers working on Flex a bit more easier not to mention that it also means that there is quite a bit for Developers and Designers to understand before they start actual use of Flex 4, this is because there are some things that are deprecated and some of them which are enhanced.Some of the highlighted features in Flex 4 and some useful links:

Component Architecture:
The component architecture in Flex 4 has been revived. Spark architecture is added on top of the already existing Halo architecture. With introduction of Spark architecture flex 4 will enable the use of new skin classes that will be solely responsible for the appearance of that component. This will result in new component lifecycle.
In spark architecture the skin is the child of a component and it has its own lifecycle. Same as in Halo architecture where createChildren(), updateDisplayList(), commitProperties, measure are called in its component lifecycle, the Spark architecture introduce new methods in order to manage the skins and parts of a component which will be called in the lifecycle .The interoperability between both these architectures results in all Halo components can be used in Gumbo containers and vice-versa. This revival in architecture has been made in order to achieve easy and powerful visual customization and also to make the components easy and straight forward to extend.

FXG:
FXG is the xml based graphics interchange format for flash platform. The usage of FXG enables the Flex 4 to use the declarative graphics. Flash Catalyst can be used to create the FXG graphics compatible for Flex 4.
For more information – http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification

Graphics in MXML:
By the introduction of FXG, Flex 4 will have a graphics tag library which includes graphics, text primitives and transformation capabilities which will enable graphical representation to be written in MXML tags.

New Namespaces:
In Flex 4, the namespace has been updated to new MXML 2009 as xmlns:fx=”http://ns.adobe.com/mxml/2009″. Here you might have noticed that new MXML is prefixed as “fx” this is used for new language entities.
Flex 4 come along with both Flex 3 and Flex 4 components which follow two architectures – Halo and Spark respectively. As a result both type of components use their own. Flex 3(Halo) components will have a namespace of xmlns:mx=”library://ns.adobe.com/flex/halo” and Flex 4(Spark) will have xmlns:s=”library://ns.adobe.com/flex/spark”.
So ideally your application tag in the main MXML of the application will look like this:
For more information – http://opensource.adobe.com/wiki/display/flexsdk/MXML+2009

Enhancement in State usage:
In this version of Flex SDK there has been enhanced form of state usage where you will not be required to write all the state handlings inside the states tag as earlier. The new implementation of States will reduce the complexity of state usage. There are new properties like excludeIn and includeIn and the role of addChild and removeChild has been deprecated and much more…
For more information – http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax

New Components and enhancements:
There are new components which are based on the spark architecture like spinner which will be a solution to making numericstepper to be a spinner with additional textInput. Slider, NumericStepper, TextArea, TextInput etc are all such new enhanced components.
For more information: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Slider
                                               http://opensource.adobe.com/wiki/display/flexsdk/Spark+Spinner
                                               http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+TextArea

New Containers:
Group Containers are one of the newly introduced Containers to flex framework. Group is a light weight container which only contains visual elements. In flash builder by default the MXML component will have Group as its parent container unlike the canvas which was in Flex Builder 3.
For more information: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Group

Advanced use of Text:
Flex 4 will leverage the use the new text feature available in flash player 10. Thanks to the new Text Layout framework used in Adobe flash player 10 which will give significant control over text elements with so many new features.

The list do not stop here, there are still some features that are left out in this post which also I have to look into. But seeing the above feature gives me a good feeling of the new things that as a flex developers I will be working on. As always framework enhancement of any technology will ultimately result in making developer’s lifes a little easier, also to understand and use of these enhancements or new features to make your client happy. 🙂

Source Code Formatter for Flex Builder

Today one of my friends asked me if there is a way or any facility  in Flex Builder to format a messy/unformatted code rather than doing it manually. There are no ways as such in the flex builder IDE which is based on Eclipse to provide indent to a particular block of code or to format a certain block of code. With the help of my colleague we found out that there is a plugin called Flex Formatter for Flex builder which will take care of  the formatting of your code once you have made a messed up code in your application.
The Flex Formatter is an open source project which enables source code formatting of Adobe Flex code ie. MXML and AS 3.0 files inside FlexBuilder.
How to use it?
1. Download the project from http://sourceforge.net/projects/flexformatter/ which will have a WINRAR Zip Archive which is named as FlexPrettyPrintCommand_0.6.27.
2. Unzip this file and you will have three more WINRAR Archive file.
3. Copy the three zip files and goto the FlexBuilder folder in Windows where the Flex Builder files are installed.
4. Open the plugin folder and paste the three files there.
5. Close and restart your flex builder and now it is ready to use.
As soon as you restart the flex builder you will have 5 icons at the top in your toolbar as shown in screen below:
icons

The Flex Formatter has the following features:
1. Format Flex Code (selected lines or documents).
2. Indent Flex Code (selected lines).
3. Re arrange AS code(whole file).
4. Generate AS Doc comments for files.
5. Generate AS Doc comment for current element.
I have tried the features with small blocks code and small AS files and it did work very well but I am still wondering how it will work with files which has more than thousand lines of code? Will the builder crash ?Need to check it out.Since writing a code which is messed up  is not at all recommended when delivering an application, but developers who have to live with it have a simple solution using Flex Formatter. Plug it in your flex builder and see the difference for yourself 🙂

Generate Flex code from mockups

We all know how important mockup can be  in the development process of an application or website especially when developing Rich Internet Apps. It demonstrates the clear idea of the  states and transistion that needs to be used in an application. Even though there are many tools to make mockups available, the tool which is to be talked about here is Balsamiq Mockups.

Balsamiq Mockup is a tool used to create mockups and wireframes to demonstrate the UI of an application. Along with the web version it also has a desktop version which is built on AIR. The main highlight of this tool is that  it will easily convert your mockups to the a human readable format called BMML. If you can write some script you can convert the BMML format to your actual code. Now, the MidnightCoders along with Balsamiq enables you to convert Balsamiq mockups directly into your Flex apps..now that is really awesome…

Once you use the tool and when you have the mockups ready you have options to export mockups which will generate a zip file which can be downloaded. The zip file will contain MXML as well as Actionscript files along with server code implemented in Java, C#, VB.NET and PHP. The client-side code will have the same component used as you have used in the mockups wheras the server-side code will have all datas from the controls in the mockup to the corresponding controls in the Flex application. Check out this link to know more about it. Play around with Balsamiq mockups and find out more about it 🙂

Web based Microsoft office

Yup folks you heard it right the Microsoft office 2010 is a light weight version of the office product that will be free and web based…More interestingly the Silverlight also plays a big role in the developement of this product. The product is set to launch by mid of next year.The free products will include Word, PowerPoint, Excel, and OneNote, and will be available to anyone with a Microsoft Live account.It will be surely a huge competitor to the Google Apps. To know more about what all you can expect in the web version of Microsoft office check out this link….

Encoding & Decoding functions in Flex

The other day one of my colleagues asked me whether do we have any functions inside flex that can encode a URL . Even though it quite obvious that something can be done manually to replace the strings, but in order to find some answers I looked into the Top level packages where I found encodeURI() and decodeURI() . What does these functions actually do?
encodeURI():
This function bascially encodes the string into a valid URI. The following shown below are not encoded by encodeURI() unless it is a small group of basic characters as given in the documentation.

Characters that are not encoded
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
; / ? : @ & = + $ , #
- _ . ! ~ * ' ( )

There is another encoding function that is slightly different from encodeURI()encodeURIComponent() which also does the same encoding of strings to URI but.Before we talk about the major difference we should be aware of some terms :

URIComponent: is the text that appears in between any special characters..for eg: http and http://www.google.com are the  URI components in http://www.google.com.
Component Seperatorsare the special characters used in a URI (: ; / ?)

Now coming back to the major difference the encodeURIComponent() in encodes the same as encodeURI() and additionally also encodes special characters (; / ? : @ & + $ , # )

decodeURI():
This function does the exact reverse of encodeURI() , it decodes the encoded URI into string where all encoded characters are restored into unencoded representation.

Escape sequence not decoded Characters equivalents
%23 #
%24 $
%26 &
%2B +
%2C ,
%2F /
%3A :
%3B ;
%3D =
%3F ?
%40 @

Using the decodeURIComponent() the escape sequence in the above table can be decoded.
All the above functions are in addition to the already existing escape() and unescape() functions which were also used in flash.escape() encodes all nonalphanumeric charachters into format % and hexadecimal sequence and unescape() decodes the URL encoded format to string.
So , there are plenty of things to play with when you need some strings to be encoded, each function does look similar but it has some variations which needs to be closely observed.Before concluding here is a small code snippets which includes the usage of above functions:


var redirectUrl:String = "http://www.somedomain.com?loggedin=true& username=Sun";
    
var escaped:String = escape(redirectUrl);
var unescaped:String = unescape(escaped);
    
var encoded:String = encodeURI(redirectUrl);
var decoded:String = decodeURI(encoded);
    
var encodedURI:String = encodeURIComponent(redirectUrl);
var decodedURI:String = decodeURIComponent(encodedURI);
    
trace("escaped: "+escaped); //escaped: http%3A//www.somedomain.com%3Floggedin%3Dtrue%26username%3DSun
trace("unescaped: "+unescaped); //unescaped:
http://www.somedomain.com?loggedin=true&username=Sun
    
trace("encoded: "+encoded); //encoded:
http://www.somedomain.com?loggedin=true&%20username=Sun
trace("decoded: "+decoded); //decoded: http://www.somedomain.com?loggedin=true&username=Sun
    
trace("encodedURI: "+encodedURI); //encodedURI: http%3A%2F%2Fwww.somedomain.com%3Floggedin%3Dtrue%26username%3DSun
trace("decodedURI: "+decodedURI); //decodedURI:
http://www.somedomain.com?loggedin=true&username=Sun


Meanwhile when I was googling more on this, I found out a bug reported to Adobe where it was reported that encodeURI and decodeURI misbehaves with httpservice which is mentioned to be deferred and will be fixed in 4.0 hmm..I am curious to know about your experiences when using these functions…

Flash & Flex Developer’s Magazine

FFD

Flash & Flex Developer’s Magazine stands out to be a very informative magazine based on flash platform. Actually it  is very rare to find magazines like FFD that is completely dedicated to the Flash world.Personally I am following this magazine and also have read some articles which I think was very informative. The magazine majorly focuses on articles/topics that are useful for developers who have experience working on flash platforms. What more the magazine will be 100% digitally published from September 2009 onwards and absolutely free so that every readers can download an issue. The latest update is that the June issue is free for download … Go check it out 🙂

SimpleXMLEncoder and SimpleXMLDecoder

You might have heard or may be used these classes somewhere in your application where you had to deal with XML data. This classes are simple and pretty useful when you have convert some objects to XML or vice versa.
SimpleXMLEncoder:
SimpleXMLEncoder class takes object and encodes them into XML . This public method encodeValue takes the following as argument:
obj:Object – the object to be encoded
qname:QName  – the qualified name of the child node
parentNode:XMLNode – XMLNode under which the encoded value is put

Now letz try it out

code

and the trace should generate output  XML:

xml

SimpleXMLDecoder:
The simpleXMLDecoder will the do the exact reverse of the encoder with some changes in implementation.
Here the method is decode which takes in instance of XMLDocument as the argument.Now how its done:
decode

and the trace commands will give the output in the console as :
output

So this was a simple implementation example of both the classes …. 😉