Adobe Flex 4.5 Components

Show and Hide Effect for Image

2011-12-21T14:56:00.000-07:00

The Fade effect animates the alpha property of a component. If played manually (outside of a transition) on an object whose visible property is set to false, and told to animate alpha from zero to a nonzero value, it will set visible to true as a side-effect of fading it in. When run as part of a transition, it will respect state-specified values, but may use the visible property as well as whether the object is parented in the before/after states to determine the values to animate alpha from and to if alphaFrom and alphaTo are not specified for the effect.

Here is the code for Adobe Example:

<?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/mx" minWidth="955" minHeight="600">
<fx:Declarations>

<s:Fade id="myFade" duration="2000"/>
</fx:Declarations>

<s:Panel width="800" height="650" backgroundColor="#DB2DA0" contentBackgroundColor="#B66D27"
title="Show and Hide Statue of Liberty Flex Effects">

<s:Image width="800" height="600" id="statue" source="assets/statue_of_liberty-800x600.jpg" hideEffect="{myFade}" showEffect="{myFade}" />
<s:controlBarContent>
<s:Button label="Show" click="statue.visible=true"/>
<s:Spacer width="100%"/>
<s:Button label="Hide" click="statue.visible=false" toolTip="Please wait for 2 seconds"/>
</s:controlBarContent>
</s:Panel>

</s:Application>

Background Image Just for Fun :)

2011-12-20T23:44:00.000-07:00

A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file or source URL

SkinnablePopUpContainer Example

2011-12-20T13:32:00.001-07:00

The SkinnablePopUpContainer class is a SkinnableContainer that functions as a pop-up. One typical use for a SkinnablePopUpContainer container is to open a simple window in an application, such as an alert window, to indicate that the user must perform some action.
You do not create a SkinnablePopUpContainer container as part of the normal layout of its parent container. Instead, it appears as a pop-up window on top of its parent. Therefore, you do not create it directly in the MXML code of your application.
Instead, you create is as an MXML component, often in a separate MXML file. To show the component create an instance of the MXML component, and then call the open() method. You can also set the size and position of the component when you open it.
To close the component, call the close() method. If the pop-up needs to return data to a handler, you can add an event listener for the PopUp.CLOSE event, and specify the returned data in the close() method.
The SkinnablePopUpContainer is initially in its closed skin state. When it opens, it adds itself as a pop-up to the PopUpManager, and transition to the normal skin state. To define open and close animations, use a custom skin with transitions between the closed and normal skin states.

Here is the code for Above Example:

<?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/mx" >
<fx:Style source="CustomPopup.css"/>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function login_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(txtUserName.text=='Rocky' && txtPassword.text=='Hacker')
{
Alert.show("Successfully login to Adobe Flex 4.5 ....","Login ");
login.close();
}
else
{
Alert.show("Please enter the correct User Name and Password","Error");
}

}

protected function logout_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
Alert.show("Successfully Logout to Adobe Flex 4.5 ....","Log Out ");
login.close();
}

]]>
</fx:Script>

<fx:Declarations>
<s:SkinnablePopUpContainer id="login">
<s:Panel title="Launching Adobe Flex 4.5 ...">
<s:Form x="-14" y="5" width="450" height="200" color="#3F9122" fontFamily="Verdana" fontSize="13">
<s:FormItem label="User Name">
<s:TextInput id="txtUserName" />
</s:FormItem>
<s:FormItem label="Password" >
<s:TextInput id="txtPassword" displayAsPassword="true"/>
</s:FormItem>
<s:HGroup>
<s:Button label="Log In" click="login_clickHandler(event)"/>
<s:Button label="Log Out" click="logout_clickHandler(event)"/>
</s:HGroup>
<s:Label text="Enter User name Rocky and Password Hacker to login"/>
</s:Form>

</s:Panel>
</s:SkinnablePopUpContainer>
</fx:Declarations>
<s:Button x="53" y="37" label="Click here to Sign to Adobe Flex 4.5"
click="login.open(this,false)"/>
<s:Label x="53" y="11" text="Welcome to Adobe Flex 4.5 Components "/>

</s:Application>

Css file:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

global
{
font-family: Georgia;
font-size: 14;
color: #3363A4;
chrome-color: #A2B8A2;
selection-color: #424234;
}

Custom Alert Message in Flex 4.5

2011-12-19T17:32:00.000-07:00

The Alert control is a pop-up dialog box that can contain a message, a title, buttons (any combination of OK, Cancel, Yes, and No) and an icon. The Alert control is modal, which means it will retain focus until the user closes it.
Import the mx.controls.Alert class into your application, and then call the static show() method in ActionScript to display an Alert control. You cannot create an Alert control in MXML.
The Alert control closes when you select a button in the control, or press the Escape key.

Here is the Code for the Alert Message:

<?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/mx" minWidth="955" minHeight="600">
<fx:Style source="PopUpWindow.css"/>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function button1_clickHandler(event:MouseEvent):void
{
Alert.yesLabel="Flex is Awesome";
Alert.noLabel="I am not Agree !";
Alert.buttonWidth=120;
Alert.show("Flex 4.5 is Awesome ....","Flex Message",(Alert.YES|Alert.NO));

}
]]>
</fx:Script>

<fx:Declarations>

</fx:Declarations>
<s:Button x="216" y="182" label="Show Alert Message" click="button1_clickHandler(event)"/>
</s:Application>

Css:

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

global

{

font-family: Georgia;

font-size: 14;

color: #762C2C;

}

Flex SDK Security Patch Now Available

2011-12-14T10:43:00.002-07:00

A security patch for the Flex SDK is now available to address a vulnerability that will cause many Flex applications to be vulnerable to cross-site scripting (XSS) attacks. These applications must be patched in order to protect user data. Please review this bulletin to determine if your applications are at risk and to obtain instructions on how to patch your applications.

If you have any questions about the security bulletin, please email PSIRT@adobe.com

An Update on Flex -- Deepa Subramaniam

2011-12-14T10:39:00.002-07:00

I wanted to share a brief update on where we are with our preparation of proposals for incubation of Flex SDK and BlazeDS to the Apache Software Foundation as well as our commitment to engaging with the Flex community further.

Regarding the incubation proposals, we have received all of the necessary Adobe legal clearance in order to contribute the full Flex SDK (including MXML compiler, automation libraries and data visualization components) to Apache. As such we have a draft incubation proposal for Flex SDK prepared and are aiming to post that to the Apache incubation mailing list within the next 1-2 weeks. Once the proposal has been posted, the normal process is that community members review the proposal for a period of time (normally 72 hours) after which the ASF votes. A positive vote means the project has been accepted as an incubation podling into Apache. Keep an eye out on this blog for regular status updates, including a link to the proposal once its been posted to the Apache incubation mailing list.

As for BlazeDS, at this time we are still working on legal clearance but aim to have that before the end of the year such that we can post the BlazeDS incubation proposal to the Apache mailing list at the start of the new year.

In order to better facilitate discussion with our broad developer community, next Monday (12/12/11) and Tuesday (12/13/11) Adobe is hosting a Flex Community Summit where we are inviting a number of Flex community leaders and enterprise developers to participate in a discussion on a variety of topics. We will be discussing the recent announcements regarding Flex and the Flash Platform as well as educating all attendees about the Apache process and what it takes for a project to thrive within Apache. Unfortunately, due to budget, we were unable to invite everyone we would have liked to the summit. Most of the summit sessions and ensuing discussions will be video-taped and posted publicly after the summit. Additionally, we are working on a Flex Whitepaper that we will publish on the Adobe Developer Center which will recap much of the content covered in the summit.

And lastly, in order to replicate the same discussions that will happen at the summit, we are organizing a multi-city international Flex User Group tour that we are looking to kick off in early 2012.

We’ll be sure to share regular updates on this blog as the Apache proposals progress, the Flex Community Summit content is posted and cities/dates are finalized for the 2012 Flex User Group tour.

Deepa Subramaniam
Group Product Manager, Adobe

New Spark mobile components in Flex 4.6

2011-12-01T16:17:00.000-07:00

Introducing Adobe Flex 4.6 SDK | Adobe Developer Connection:

What's new in Flash Builder 4.6 | Adobe Developer Connection

2011-12-01T16:16:00.000-07:00

What's new in Flash Builder 4.6 | Adobe Developer Connection:

Adobe Flex 4.5 Combo and Dropdownlist

2011-11-26T14:23:00.002-07:00

Differences between ComboBox and DropDownList

1)First difference between the controls is that the prompt area of the ComboBox control is implemented by using the TextInput control, instead of the Label control for the DropDownList control.
2) a user can edit the prompt area of the ComboBox control to enter a value that is not one of the predefined options; the values in the DropDownList cannot be edited.
3) However, because dataProvider is the DropDownList control’s default property, you do not have to specify a child tag of the tag, as the following example shows:
Code:






<s:application backgroundcolor="#528CDA" minheight="600" minwidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:verticallayout paddingleft="5" paddingtop="5">
</s:verticallayout></s:layout>

<fx:declarations>

</fx:declarations>

<s:label text="Spark ComboBox ">
<s:combobox id="mySparkCB" prompt="Select a Color" width="140">
<s:dataprovider>
<mx:arraylist>
<fx:string>Pink</fx:string>
<fx:string>Orange</fx:string>
<fx:string>Yellow</fx:string>
<fx:string>Red</fx:string>
<fx:string>Blue</fx:string>
<fx:string>Green</fx:string>
</mx:arraylist>
</s:dataprovider>
</s:combobox>
<s:label text="Spark DropDownList ">
<s:dropdownlist width="160">
<mx:arraycollection>
<fx:string>Atlanta</fx:string>
<fx:string>SpringFiled</fx:string>
<fx:string>Chicago</fx:string>
<fx:string>New York</fx:string>
<fx:string>California</fx:string>
</mx:arraycollection>
</s:dropdownlist>

</s:label></s:label></s:application>

Spark DataGrid Support for Copy selected cell

2011-11-18T23:10:00.005-07:00

This article describes how to add support for copy the Flex DataGrid component. It enables one to copy the datagrid column from applications, notably spreadsheet apps like Excel.

The implementation enables copying the selected cell value using Custom Itemrender. That itemrender is the label component.

Here is the code:

CopyDatgridCell.mxml

<?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/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<s:ArrayCollection id="userColl">

<fx:Object key="1000" name="Abrasive" price="100.11" call="false"/>

<s:DataItem key="1405" name="File" price="150.05" call="true"/>

<s:DataItem key="1606" name="Gouge" price="160.06" call="false"/>

<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>

<s:DataItem key="1708" name="Ink" price="180.08" call="false"/>

<s:DataItem key="1009" name="Jack" price="190.09" call="true"/>

<s:DataItem key="1801" name="Brush" price="110.01" call="true"/>

<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>

<s:DataItem key="1303" name="Drill" price="130.03" call="true"/>

<s:DataItem key="1604" name="Epoxy" price="140.04" call="false"/>

</s:ArrayCollection>

</fx:Declarations>

<s:Label x="71" y="24" fontFamily="Verdana" fontSize="26"

text="Adobe Flex 4.5 Spark DataGrid single cell copy"/>

<s:DataGrid id="copyCellData" x="71" y="58" width="350" dataProvider="{userColl}"

selectionMode="singleCell">

<s:columns>

<s:ArrayList>

<s:GridColumn dataField="key" headerText="KEY" itemRenderer="Renders.LabelRender" />

<s:GridColumn dataField="name" headerText="NAME" itemRenderer="Renders.LabelRender"/>

<s:GridColumn dataField="price" headerText="PRICE"/>

<s:GridColumn dataField="call" headerText="CALL"/>

</s:ArrayList>

</s:columns>

</s:DataGrid>

</s:Application>

Here is the code for Itemrender:

LabelRender.mxml

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

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true" >

<fx:Script>

<![CDATA[

override public function prepare(hasBeenRecycled:Boolean):void {

lblData.text = data[column.dataField]

}

]]>

</fx:Script>

<mx:Label id="lblData" left="7" top="9" selectable="true" />

</s:GridItemRenderer>

Spark Datagrid Itemrender

2011-11-17T16:52:00.003-07:00

Here is the code for spark datagrid Itemrender

https://sites.google.com/site/adobeflex45/system/app/pages/admin/attachments/SparkDatagridItemrender.mxml
<?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/mx" minWidth="955" minHeight="600">
<fx:Declarations>

<s:ArrayList id="tourdata">
<fx:Object sno="1" TourName="Atlanta to Nashville" price="237.50"></fx:Object>
<fx:Object sno="2" TourName="Miami to Tampa" price="197.87"></fx:Object>
<fx:Object sno="3" TourName="Chicago to california" price="637.87"></fx:Object>
<fx:Object sno="4" TourName="Las vegas to New york" price="777.54"></fx:Object>
</s:ArrayList>
</fx:Declarations>
<s:DataGrid x="45" y="52" width="451" height="161" dataProvider="{tourdata}"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="sno" headerText="S.No"></s:GridColumn>
<s:GridColumn dataField="TourName" headerText="Tour Name"></s:GridColumn>
<s:GridColumn dataField="price" headerText="Price" itemRenderer="Renders.PriceRender"></s:GridColumn>

</s:ArrayList>
</s:columns>

</s:DataGrid>
</s:Application>

Itemrender:

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

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

<!--<fx:Script>

<![CDATA[

override public function prepare(hasBeenRecycled:Boolean):void {

lblData.text = data[column.dataField]

}

]]>

</fx:Script>-->

<fx:Declarations>

<s:CurrencyFormatter id="priceFormatter" useCurrencySymbol="true"/>

</fx:Declarations>

<s:layout>

<s:HorizontalLayout horizontalAlign="right" verticalAlign="middle" paddingRight="7"/>

</s:layout>

<s:Label id="lblprice" text="{priceFormatter.format(data.price)}"/>

</s:GridItemRenderer>
Spark Datagrid Itemrender

Spark Itemrender

Spark Label

2011-11-15T22:49:00.001-07:00

Simple Hello World Program in Adobe Flex 4.5

HELLO FROM ADOBE FLEX 4.5

HERE IS THE CODE

<?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/mx" minWidth="955" minHeight="600">

<fx:Declarations>

</fx:Declarations>

<s:Label fontFamily="Verdana" fontSize="50" horizontalCenter="0" top="25"

text="Hello from Adobe Flex 4.5 ! "/>

</s:Application>

Spark Datagrid

2011-11-14T20:50:00.002-07:00

Adobe Flex 4.5 has some really exciting new things in it. Among them my favorite is the new Spark DataGrid component.

The Spark DataGrid control provides the following features:

Interactive column width resizing
Control of column visibility
Cell and row selection
Single item and multiple item selection modes
Customizable column headers
Cell editing

Column sorting

Adobe Flex 4.5 Spark Datagrid
Here is the Code for Spark Datagrid

<?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/mx" minWidth="955" minHeight="600">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Declarations>

<s:ArrayCollection id="userColl">

<fx:Object SNO="1" USERNAME="FLEX" EMAIL="flex@gmail.com"/>

<fx:Object SNO="2" USERNAME="PHOTO SHOP" EMAIL="photoshop@gmail.com"/>

<fx:Object SNO="3" USERNAME="CSS" EMAIL="css@gmail.com"/>

<fx:Object SNO="4" USERNAME="JAVA" EMAIL="java@gmail.com"/>

<fx:Object SNO="5" USERNAME="PHP" EMAIL="php@gmail.com"/>

<fx:Object SNO="6" USERNAME="COLD FUSION" EMAIL="coldfusion@gmail.com"/>

</s:ArrayCollection>

</fx:Declarations>

<s:Label width="441" height="42" fontFamily="Verdana" fontSize="26"

text="Adobe Flex 4.5 Spark DataGrid"/>

<s:DataGrid id="mySparkDatagrid" width="350" dataProvider="{userColl}">

<s:columns>

<s:ArrayList>

<s:GridColumn dataField="SNO" />

<s:GridColumn dataField="USERNAME"/>

<s:GridColumn dataField="EMAIL"/>

</s:ArrayList>

</s:columns>

</s:DataGrid>

</s:Application>

Video Player 4.5

2011-11-14T16:59:00.000-07:00

The VideoPlayer control is a skinnable video player that supports progressive download, multi-bitrate streaming, and streaming video. The VideoPlayer control contains a full-featured UI for controlling video playback.
* Note
It supports playback of FLV and F4v files :)

VideoDisplay is the chromeless version that does not support skinning. It is useful when you do not want the user to interact with the control.

Here is the Sample code:

<?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/mx" minWidth="955" minHeight="600">
<fx:Declarations>

</fx:Declarations>
<s:VideoPlayer horizontalCenter="0" verticalCenter="0"
source="http://domain-name.com/filename.flv"
autoPlay="true"/>

</s:Application>

Flex Interview Questions

2011-11-14T16:15:00.001-07:00

1) How will you remove the first element from the Array?

The elements from the Array can be removed by using splice method. splice method accepts mainly two arguments. First one tells the starting index and second one the number of elements to be retrieved. This will return an array of the spliced elements. See the code below.

Var arr:Array= new Array(“a”,”b”,”c”,”d”);

Alert.Show(arr.toString());

Arr.splice(1,arr.length-1);

Alert.Show(arr.toString());

2) Can you share with us your experience regarding performance of the Flash 9 in a real time mode? What are your thoughts on advantages of using Flash 9 say in a real-time trading applications comparing to a tried-and-true Java Swing front end?
A. Flex is very capable of providing near real-time data rendering to the GUI and very high refresh rates on large data sets. Flash Player 9 is the high-performance modern virtual machine with precompiled optimized code and just-in-time (JIT) machine code compiler. And it is very possible to build the client portion of a real-time portfolio display integrated with news feeds and graphs with about 100 lines of Flex 2 code. A similar Java Swing program (even if it’s created by commercial IDEs) would be on average ten times larger.
The real selling point becomes obvious on a second or third day of the proof of concept phase. A decent Flex developer should be able to prototype (short of server processing) most of the UI for specific trading system by the end of the first week. If you are lucky and the system integration went fine, you can add the collaboration features and multimedia – with total client code base for the whole project within 1000-1500 lines.

3) if you move from one page to another in a pure Flash Web site, can you bookmark, say page #4?

The bookmarking of the sites is still available on the browser. But in Flash-based applications you do not move from one page to another as there is no roundtrip to the server – essentially you are on the same URL all the time. What looks like a page to the user is just another screen in the either monolithic or dynamic application. The approach I would take is to make application bookmark the data the user is looking for – that provides you much richer insight into the user’s preferences and type of information he is customary searching for. That data would be associated with user and combined with regular URL bookmark upon the user re-logon/cookie retrieval.

4) What are three ways to skin a component in flex?

Skinning is the process of changing the appearance of a component by modifying or replacing its
visual elements. These elements can be made up of images swf files or class files that contain
drawing API methods.
There are several ways that you can define skins: inline, by using the setStyle() method, and by using
Cascading Style Sheets (CSS).

5) How do I get access to the J2EE session from my RemoteObjects?

The AMF Gateway provides access to the current HttpServletRequest instance in a thread local variable. The session can be obtained from the request, as follows:

flashgateway.Gateway.getHttpRequest().getSession();

6) Why are my ValueObject member variables undefined in the results from my RemoteObject requests?

Flash Player deserializes objects in a special order that can confuse developers used to object serialization from other RPC systems. When a strongly typed object is returned to the player, it first creates an instance from the prototype of the registered class without calling the constructor. It then populates the object with the properties sent in the result. Finally, it calls the constructor without arguments.

If your ValueObject constructor expects arguments to initialize an instance, be sure to check whether arguments were actually sent to the constructor before overriding member variable values.

7) What is MVC and how do you relate it to flex apps

The goal of the Model-View-Controller (MVC) architecture is that by

creating components with a well-defined and limited scope inyour application, you increase the

reusability of the components and improve the maintainability of the overall system. Using the MVC

architecture, you can partition your system into three categories of components:

* Model components Encapsulates data and behaviors related to the data.

* View components Defines your application's user interface.

* Controller components Handles the data interconnectivity in your application.

8)Explain Metadata

You insert metadata tags into your MXML and ActionScript files to provide information to the Adobe Flex compiler. Metadata tags do not get compiled into executable code, but provide information to control how portions of your code get compiled.

9)What are the channels and their types

The Channel class is the base message channel class that all channels in the messaging system must extend.

Channels are specific protocol-based conduits for messages sent between MessageAgents and remote destinations. Preconfigured channels are obtained within the framework using the ServerConfig.getChannel() method. You can create a Channel directly using the new operator and add it to a ChannelSet directly

In Flex AMFChannel is used mostly. Action Message Format

Methods

applySettings (),connect(),connectFailed(),connectSuccess(), connectTimeoutHandler()

disconnect(),disconnectFailed(),disconnectSuccess(),flexClientWaitHandler(), getMessageResponder(),internalConnect(),internalDisconnect(),internalSend(),logout()

send(),setCredentials()

Properties

reconnecting,recordMessageSizes,recordMessageTimes,reQuestionuestTimeout,uri

10) When I set visible="false", the component still takes up space and appears in the tab order. Why is that?

You can often achieve the "display=none" effect by setting the height/width to zero when you set it invisible, and then set it back to a fixed value or to undefined when you make it visible again

Spark Currency Formatter

2011-11-13T14:12:00.000-07:00

Spark Currency Formatter

Here is the component

Currency formatter

<?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/mx"
fontSize="18" locale="{c.selectedItem}"
>

<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
gap="8"/>
</s:layout>

<fx:Declarations>
<s:CurrencyFormatter id="cf" useCurrencySymbol="true"/>
<s:DateTimeFormatter id="df"/>
</fx:Declarations>
<s:Label text="CURRENCY FORMATTER" fontSize="16" />
<s:Label text="Select a locale to see the formatted currency and date of your Choice"/>
<s:ComboBox id="c" selectedItem="en-US...">
<s:dataProvider>
<s:ArrayList>
<fx:String>de-DE</fx:String>
<fx:String>en-US</fx:String>
<fx:String>es-ES</fx:String>
<fx:String>fi-FI</fx:String>
<fx:String>fr-FR</fx:String>
<fx:String>it-IT</fx:String>
<fx:String>ja-JP</fx:String>
<fx:String>ko-KR</fx:String>
<fx:String>nb-NO</fx:String>
<fx:String>pt-PT</fx:String>
<fx:String>ru-RU</fx:String>
<fx:String>zh-CN</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBox>

<s:Label text="{cf.format(17.7)}"/>
<s:Label text="{df.format(new Date())}"/>
</s:Application>

Spark Form

2011-11-13T13:34:00.004-07:00

Here is the Sample Spark Form for Adobe Flex 4.5

Spark Form

<?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/mx" minWidth="955" minHeight="600">

<fx:Declarations>

</fx:Declarations>

<s:Panel title="PERSONAL INFO PAGE">

<s:Form horizontalCenter="0">

<s:FormItem width="267" height="39" label="EMAIL ID">

<s:TextInput/>

</s:FormItem>

<s:FormItem label="PASSWORD" >

<s:TextInput displayAsPassword="true"/>

</s:FormItem>

<s:FormItem label="SELECT GENDER">

<s:CheckBox label="MALE"/>

<s:CheckBox label="FEMALE"/>

</s:FormItem>

<s:Button label="Submit it!"/>

</s:Form>

</s:Panel>

</s:Application>

Click Below link. That will display Spark Form:

SparkForm

Flex Interview Questions

2011-11-12T20:21:00.001-07:00

1) What are the differences b/w AS 2.0 and AS 3.0.
2) Differences b/w Undefined and Object.
3) Differences b/w Array and ArrayCollection.
4) What is Binding? How can we create bindable classes and bindable methods.
5) What is abstraction ?
6) What is localization in Flex?
7) Item rendering in AS and MXML.
8) How can we populate the data from XML to Tree?
9) What is Shared Object?
10) What is Remoting and how can we call RemoteObject?
11) How can we work with Javascript methods in AS?
12) How can we create custom components? In how many ways can we create those.
13) How can we access the properties of a Dynamic object in Flex?
14) What is Encapsulation?
15) What are the access specifiers in AS?
16) Diff b/w internal and private access specifiers?
17) How many ways we can write AS in Flex?
18) What is MXML?
19) Diff b/w Flex and AIR?
20) What is LCDS? How it helpful to flex?
21) What is MVC? Describe any framework in Flex?
22) How can we override methods in AS?
23) What is an interface and package?
24) How can we make a communication b/w two SWC’s?
25) How can we release a Flex project?
26) File Management System in Flex?
27) How can we animate images and effects?
28) What are main containers in Flex?
29) Explain about layouts in Flex?
30) What is the default layout in Flex?
31) What is diff b/w a Panel and a Canvas ?
32) What is RPC?
33) HttpService class in Flex?
34) Drag and Drop functionality in Flex with any control like DataGrid?
35) What is the diff b/w List, HorizontalList and TileList ?
36) Inheritance and Polymorphism in AS?
37) Explain Flex architecture ?
38) Describe AIR features?
39) Explain RIA features?
40) What are the diff b/w Flex and Flash?

Flex Documentation links

2011-11-12T20:19:00.001-07:00

Flex Documentation link: http://livedocs.adobe.com/flex/3/flex3_documentation.zip
Component Explorer: http://examples.adobe.com/flex3/componentexplorer/explorer.html
Style Explorer: http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
Tour De Flex (Download and Install it Will solve your lots of Questions- Requires AIR) : http://www.adobe.com/devnet/flex/tourdeflex/
Adobe Flex in a Week: http://www.adobe.com/devnet/flex/videotraining/
Adobe Online resources: http://www.anandvardhan.com/adobe-resources/
Flex 2 FMS Explorer
http://www.flash-communications.net/technotes/flex2FMSExplorer/flex2FMSExplorer.htmlHelp: http://www.flash-communications.net/technotes/flex2FMSExplorer/
Away3D explorer for Flex
http://www.nielsbruin.nl/flex_examples/away3d/Download from :http://away3d.com/downloads
Flex 2 Primitive Explorer
http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html
Flex Examples
http://blog.flexexamples.com/
Flex 2 Component Explorer
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
Flex 3 Component Explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html
Flex 2 Style Explorers
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Flex 3 Style Explorers
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
Charting Components Explorer
http://demo.quietlyscheming.com/ChartSampler/app.html
JAM – Just ActionScript and MXML
http://www.onflex.org/code/2006/08/fresh-jam-flex-app-right-click-for.html
FlexSpy – To modify and inspect all the visual components off Flex
http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html
A directory of Adobe Flex components
http://flexbox.mrinalwadhwa.com/
Flex Style Creator
http://www.flexonrails.net/stylescreator/public/
Easing Effects Explorer
http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html
Color Explorer
http://kuler.adobe.com/
Cairngorm Diagram Explorer
http://www.cairngormdocs.org/tools/CairngormDiagramExplorer.html
Resize Manager
http://www.flex-flex.net/flex/ResizeManager/ResizeManager.htmlhttp://blogs.adobe.com/flexdoc/2007/03/creating_resizable_and_draggab.htmlhttp://www.teotigraphix.com/explorers/ResizeManagerFX/ResizeManagerFXExplorer.html
Flex Enhanced Button Skin Explorer
http://www.wabysabi.com/flex/enhancedbuttonskin/
Flex Book
http://www.rubenswieringa.com/code/as3/flex/Book/
Distortion Effects Explorer
http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/
Random Walk
http://demo.quietlyscheming.com/RandomWalk/IconWalk.html
Flex Super Panel
http://www.wietseveenstra.nl/files/flex/SuperPanel/v1_5/MainView.html
Chart Range Selection Component
http://www.stretchmedia.ca/code_examples/chart_range_selection/main.html
Dual Slider
http://www.visualconcepts.ca/flex2/dualslider2/DualSlideTest.html
Advance Form
http://www.renaun.com/flex2/AdvancedForm/
Drag Tile
http://demo.quietlyscheming.com/DragTile/Alphabet.html
Dictionary – Word Information
http://mark-shepherd.com/thesaurus/
Flex Text Effects Explorer
http://www.sakri.net/technology/flash/flex/flex_text_effects/FlexTextEffectsExplorer.html
Flex Presentations – You can also add your presentations in thishttp://www.asfusion.com/projects/cf-presenter/
MXNA Reader
http://www.asfusion.com/mxna/
Drop Shadow
http://www.asfusion.com/examples/item/drop-shadow-en-flash-8
Bevel Filters
http://www.asfusion.com/examples/item/bevel-filter-en-flash-8
Bevel Filters
http://www.jamesward.com/census/
Getting Started
http://learn.adobe.com/wiki/display/Flex/Getting+Started
Flex 3 Help
http://livedocs.adobe.com/flex/3/html/index.html
Reflection Explorer
http://www.wietseveenstra.nl/files/flex/ReflectionExplorer/v1_0/ReflectionExplorer.html
DZone – Community for developers
http://www.dzone.com
Flex.org – Community for Flex developers
http://flex.org
Degrafa – Declarative graphics framework for Flex. Degrafa allows you to use MXML markup to draw shapes, make complex graphics, create skins and also includes advanced CSS support.
http://www.degrafa.com/
Text layout Editor
http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html
Custom Easing Function Explorer
http://labs.adobe.com/technologies/textlayout/demos/
Flex Games
http://s3.amazonaws.com/apphost/MGB.html
tour-de-flex Component Explorer
http://arunbluebrain.wordpress.com/2008/11/19/tour-de-flex-component-explorer/
Flex Samples
http://www.adobe.com/devnet/flex/?navID=sampleshttp://www.adobe.com/devnet/flex/community_samples.html
Flex Applications
http://www.onflex.org/flexapps/applications/Flipper/
Scrawl Application
http://www.thebetterside.com/scrawl/ScrawlExample4.html
Display Shelf
http://demo.quietlyscheming.com/displayShelf/index.html
Rating Component
http://www.flexibleexperiments.com/Flex/RatingComponent/Blog_Post_Rating_Component.html
Create Flow Chart
http://my.lovelycharts.com/
Designer Effects for Flex
http://www.efflex.org/
find answers to your Flex questions
http://sandboxviolation.appspot.com
Flex 3 regular expression explorer
http://ryanswanson.com/regexp/#start
Adobe bugs and issue management system
http://bugs.adobe.com/jira/secure/Dashboard.jspa
Rich Spatial Flex viewer
http://flex888.com/lab/geoweb/flexviewer/
Color tool
http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=10763&marketplaceid=1
Advance data visualization for flex
http://www.ilog.com/products/ilogelixir/demos/
RIA Trax Explorer
http://www.insideria.com/2009/03/riatrax-flex-event-tracking-no.htmlhttp://labs.happytoad.com/RIATrax/explorer/
25 Excellent And Useful Adobe AIR Tutorials & Resources
http://www.smashingapps.com/2009/03/06/25-excellent-and-useful-adobe-air-tutorials-resources.html
Visualization Explorer
http://lab.benstucki.net/archives/visualizationexplorer/
CSS3 Box Explorer
http://lab.benstucki.net/archives/css3boxexplorer/
Scroller Explorer
http://lab.benstucki.net/archives/scrollerexplorer/
Pixel 3D Explorer
http://lab.benstucki.net/archives/pixel3dexplorer/
Google Social Graph Explorer
http://dreamingwell.com/examples/flex/googleSocial/GoogleSocial.htmlhttp://www.tarasnovak.com/lab/FlexSVGExplorer/01/FlexSVGExplorer.html#
Component Framework
http://blog.benstucki.net/index.php?paged=10
Opensocial
http://code.google.com/p/opensocial-actionscript-client-sdk/http://code.google.com/p/as3opensociallib/
Library of Flex Components
http://code.google.com/p/flexlib/
Open Flux – Framework
http://code.google.com/p/openflux/
Degrafa – Declarative graphics framework for Flex. Degrafa allows you to use MXML markup to draw shapes, make complex graphics, create skins and also includes advanced CSS support.
http://code.google.com/p/degrafa/
FlexLib Component List
http://code.google.com/p/flexlib/wiki/ComponentList
Firebug for flex applications
http://code.google.com/p/fxspy/
lightweight logger extension for Flex 3-4, AIR and Flash 9-10 applications
http://code.google.com/p/flash-thunderbolt/
List of 31 Flex APIs, Libraries, Components and Tools
http://seantheflashguy.com/blog/2007/08/21/list-of-31-flex-apis-libraries-components-and-tools/
List of 22 ActionScript 3.0 API’s
http://seantheflashguy.com/blog/2007/08/13/list-of-22-actionscript-30-apis/
ActionScript 3.0 APIs developed specifically for Adobe Flex and AIR.
http://www.ericfeminella.com/blog/actionscript-3-apis/
ASMailer : The ASMailer class sends emails using an SMTP server. ASMailer sends mail without the need of a server side language like PHP or JSP.
http://asmailer.riaforge.org/
Away3d 2.1 : Away3D is a realtime 3d engine for flash in ActionScript 3.0
http://away3d.com/away3d-21-demos-docs
Bullet Graph : A good way to show actual time spent vs. the estimated time for a project
http://agileui.blogspot.com/2008/05/bullet-graph-free-flex-component.html
Degrafa : Declarative Graphics Framework
http://www.degrafa.com/
Desuade Partigen : Desuade Partigen is an extension for Adobe Flash which lets you create realistic vector and raster particle effects (such as fire, smoke, sparkles), without requiring you to do any complex coding.
http://desuade.com/products/partigen/
EasyMVC : EasyMVC is an event driven MVC framework which focuses on flexibility while not getting in the developers way.
http://projects.simb.net/easyMVC/
Five3D : vector-based 3d rendering framework by Mathieu Badimon – has just received a significant update, bringing it to version 2.1. New features this version brings: Back Face Culling, Flat Shading, Z-sorting, Space Drawing functions, Bitmap3D class, Video3D class, Sprite2D Class, Letter Spacing, Text Width
http://five3d.mathieu-badimon.com/
Flash Player 10 API Documentation!
http://download.macromedia.com/pub/labs/flashplayer10/flashplayer10_as3langref_052008.zip
Flex 3 Performance and Memory Profiling : Memory profiling lets you look at objects being created, take snapshots and compare them. Performance profiling allows snapshots for looking at cumulative and internal time.
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Performance_and_Memory_Profiling
Flex 3 RSLs : Use Flex 3 runtime-shared-libraries (RSLs) to reduce the size of your applications and thereby reduce the time required to download the application. RSLs are just SWF files whose code is used as a shared library between different application SWF files.
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:Flex_3_RSLs
Flex 4 States syntax changes : Flex 4 will target all of the legacy usage scenarios of classic Flex states functionality (stateful components, states as application views or pages, effects and transitions between view states, etc.). This document outlines what is primarily a syntax change for the existing functionality.
http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax
Flex and Flex Developers Magazine
http://www.ffdmag.com/
Flex Designer Scroll Bars : skinny little tone on tone scroll bars that have no scroll arrows
http://www.gskinner.com/blog/archives/2008/05/designer_scroll.html
FlexMDI : flexmdi is a robust, extensible Multiple Document Interface framework for Adobe Flex.
http://code.google.com/p/flexmdi/
Flex Resource Bundles : Resource bundle is a set of values that you externalize from your source code in a properties file. And it can be swapped out at compile time or, with Flex 3, at runtime. Think of it like a style sheet for values.
http://blog.extends.eventdispatcher.org/roger/introduction-to-flex-resource-bundles/
FOAM : two-dimensional rigid body physics engine written in ActionScript 3.0.
http://code.google.com/p/foam-as3/
Go3D : Cool Tweening Engine, the Go3D which give you more control over moving objects in 3d space.
http://code.google.com/p/goplayground/source/checkout
GoogleMap Flex Component : A new component for Flex Developers who want to add more control or be very well organized.
http://www.igorcosta.org/?p=140
Guttershark : Actionscript 3 library that pushes some simple conventions on you, only to make you faster as a developer. It’s a pattern for Flash development that cuts out a huge amount of time, especially when you’re in the first stages of development.
http://www.guttershark.net/
ILOG Elixir : A suite of professional user interface controls that gives developers a rich collection of innovative and interactive data display components. It includes ready-to-use schedule displays, map displays, dials, gauges, 3D and radar charts, a treemap chart and organization charts.
http://www.ilog.com/products/ilogelixir/
LoadingImage : Takes a regular Flex Image component, and adds a self contained ProgressBar to it to show its own loading progress.
http://www.munkiihouse.com/?p=135
Logger Library and RIALogger : The Logger component provides classes to that abstract the Flex 2 Log and logging Target classes. It provides a simple approach to logging messages with category information and provide hooks into multiple targets. It supports the following logging targets by default: RIALoggerTarget, TraceTarget (trace()), XPanelTarget, and FlexTracePanelTarget. The LogController also provides functionality to allow you to setup your own custom logging Target.
http://renaun.com/blog/flex-components/rialogger/
Mate : Mate is a tag-based, event-driven Flex framework.
http://mate.asfusion.com/index.cfm
Merapi : Merapi is a new project that is a framework for connecting AIR to java at the desktop.
http://adamflater.blogspot.com/search/?q=merapi
MinimalComps : Minimal AS3 UI Component Set : CheckBox, PushButton, HSlider, VSlider, InputText, ProgressBar, RadioButton, ColorChooser (text input only) and Panel.
http://www.bit-101.com/minimalcomps/
OpenFlux : OpenFlux is an open-source Flex component framework which allows developers to create radically new and custom Flex components.
http://code.google.com/p/openflux/
PeekPanel : Cool way to hide options or preferences in an application. It borrows the look and feel from the FlexBook/PageFlip components already out there, but instead of simulating a book, this is more of a way to use the “flip” to hide other components.
http://www.billdwhite.com/wordpress/?p=29
PlexiGlass
http://www.bobjim.com/category/plexiglass/
Share (Document Services API) : Online service provided by Adobe that allows you to share, publish, and organize documents online.
http://code.google.com/p/as3sharelib/downloads/list
Slide : Slide is an application framework for projects built in Flex 2 or 3. Using familiar design patterns, Slide provides a robust MVC structure, view state management decoupled from view implementation and a flexible approach to model and controller access, eliminating need for singleton classes.
http://code.google.com/p/flex-slide/
Sandy 3.0.2 : Sandy is an intuitive and user-friendly 3D open-source library.
http://www.flashsandy.org/versions/3.0
Sprouts : Sprouts is an open-source, cross-platform project generation and configuration tool for ActionScript 2, ActionScript 3, Adobe AIR and Flex projects.
http://www.projectsprouts.org/
Universal Mind Extensions for Adobe Cairngorm : Universal Mind has extended the classic Adobe 2.2.x Cairngorm version to provide many productivity and maintenance enhancements.
http://code.google.com/p/flexcairngorm/
Video Tutorial on Compiling for Flash Player 10
http://theflashblog.com/?p=383
Virtual Space (AS 3.0) V. 1.0 : The Virtual Space is an AS3 component that can be used to create virtual-tour type visualizations very easily. Simply specify 6 images to be used for top, bottom, left, right, front, and back. Then, position the camera, set the initial view, and specify interaction parameters.
http://www.afcomponents.com/components/virtual_space_as3/
TextArea Explorer
http://www.techizzles.com/2009/03/14-most-productive-adobe-air-applications/
Noise Explorer
http://www.bit-101.com/explorers/NoiseExplorer.swf
Perlin Explorer
http://www.bit-101.com/explorers/PerlinExplorer.swf
Threshold Explorer
http://www.bit-101.com/blog/?p=819
PixelBender
http://labs.adobe.com/technologies/flashplayer10/demos/pixelbender/http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26&loc=en_us
TiltShift Generator
http://labs.artandmobile.com/tiltshift/
Flex 3 Regular Expression Explorer
http://ryanswanson.com/regexp/#start

Flex Error Handling with simple Example

2011-11-12T20:03:00.000-07:00

I have recently read and heard about situations in which Flex error handling is misunderstood. In this blog entry, I'll attempt to demonstrate, with a simple example, how Flex error handling works and attempt to drive out some of the sources of confusion. To keep this entry a reasonable size, I'll focus specifically on the Flex handling of errors (synchronous) and won't address Flex handling of error events (asynchronous).

Before I get into the actual example of throwing, catching, and "handling" (printing error contents in this simple case) a synchronous error in Flex, I need to point out the significance of using the Flash Player Debugger Version. My example will demonstrate that an error will provide some information regardless of whether it is used with a regular Flash Player or a Debugger Flash Player, but the Error class's getStackTrace() method will only return a not-null value if run in a debugger version of the Flash Player.

As I explained in my blog post on the command-line fdb debugger, it makes sense to me to only be able to see the stack trace in the debugger player because you probably don't want to spill too much error information (including ugly stack traces) all over your average client's application. On the other hand, when you have debugging turned on and are running a debugger version of the Flash Player, you probably do want the ability to see the stack trace as provided by Error.getStackTrace().

Flex provides several pre-defined ActionScript-based error classes that a Flex developer can explicitly throw when appropriate and can also expect certain Flex methods to throw when the related exceptional condition is encountered. These error classes provided by Flex out of the box include ECMAScript-mandated errors and some Flash-specific errors. All errors should extend the Error class. For Java developers, extending Flex's Error class and catching thrown Flex errors (either Error or any of its children) will seem very similar to exception handling in Java. Even the try-catch-finally syntax is remarkably similar.

Let's look at some code. The following is the code listing for the simple example.

import mx.utils.ObjectUtil;

/**
* Test Flex exception handling.
*/
public function testException():void
{
try
{
intentionallyThrowException();
}
catch (error:Error)
{
stackTraceText.text = ObjectUtil.toString(error.getStackTrace());
messageText.text = error.message;
toStringText.text = error.toString();
nameText.text = error.name;
errorIdText.text = String(error.errorID);
}
finally
{
// I get called whether an exception is caught or not.
}
}

/**
* Intentionally throw an exception for use in Flex exception
* testing.
*/
public function intentionallyThrowException():void
{
throw new SyntaxError("That was some bad syntax!");
}

A significant portion of the above code is actually comments. If you remove the explanatory comments, the code is pretty small. Either way, the code is straightforward, especially if you have written Java exception handling code before.

The example code presents key properties (ID, message, and name), a key method (getStackTrace()), and the toString() representation of an Error class in the Flex form for easy viewing. When the compiled Flex application (.swf file) is executed with a normal (non-debugger) Flash Player, the output appears as shown in the next screen snapshot:

Even without the debugger player being used, the "message" and "name" properties (the combination of which is provided by the Error's toString()) provide useful information. However, the stack trace is a null because we are not using a debugger player.

With a debugger player being used, the results are different as shown in the next screen snapshot:

Without making any changes to my code and, in fact, the only change being the use of a debugger Flash Player instead of the regular Flash Player, I now have access to the stack trace!

It is also worth mentioning here another advantage of the Flash Player Debugger version when working with errors in Flex development. The example above demonstrated a case where an error was anticipated and code was written to catch it. Flex, unlike Java but like most other languages, does not have checked exceptions/errors. This means that a developer is never required to catch a particular error. This also implies that unanticipated errors can and do get thrown. What happens to these differs depending on which Flash Player is being used. If the regular Flash Player is being used, there is usually no sign of an error condition, but often things don't work as they should either (because the underlying error is preventing something necessary from happening). With the debugger version of the Flash Player, a stack trace is automatically presented in a pop-up for any uncaught errors. Again, it makes sense that one would want this in development but would not necessarily want the average end-user with a regular Flash Player to see it.

To illustrate the uncaught error scenario, I am adding a method to the above example that calls the same method that intentionally throws the error. This second code listing also differs from the first because I made a concerted effort to rename things from Exception to Error to be more in line with Flex terminology.

When the SWF compiled from the code immediately above is executed against the regular Flash Player, there is no visual evidence of the uncaught exception in the newly added ActionScript method testWithoutErrorHandling(). However, there is a dramatic difference when using the debugger Flash Player. It places the stack trace in an pop-up as shown in the next screen snapshot.

As the above screen snapshot shows, we did not need to add any extra code to see this stack trace. Simply using the debugger Flash Player led to the unanticipated error having its stack trace displayed.

Side Note: Because of advantages such as access to the stack trace via Error.getStackTrace() call, access to the stack trace automatically when an unanticipated error is not captured, and the ability to trace statements to the fdb debugger, I recommend to anyone considering working with Flex that they use the Flash Player debugger version by default during Flex development.

The results shown above were run on SWF files compiled with mxmlc using its default options as specified in the flex-config.xml file. I now move onto looking at how tweaking one of the settings in the flex-config.xml file can affect error handling in Flex.

There is an entry in the flex-config.xml file that looks like this:

false'

Changing the "false" to "true" leads to more verbose output in the pop-up that appears for uncaught errors when run in the Flash Debugger Player as shown in the next screen snapshot. Similarly, this change leads to the same extra verbosity in the Error.getStackTrace() results. In short, the stack trace associated with an Error and available either implicitly for uncaught errors or explicitly for captured errors via the Error.getStackTrace() call, can have its level of verbosity controlled with this verbose-stacktrace setting.

If the two pop-ups are compared, it is obvious that the turning the option from "false" to "true" really did increase the stack trace verbosity. If the application is run in a regular, non-debug Flash Player, there is still no indication of an uncaught error ever occurring and null is still returned from Error.getStackTrace().

Conclusion

Flex provides error handling mechanisms that have many similar characteristics as Java exception handling, including the syntax. However, there are also some differences in the treatment of errors in ActionScript and Flex as compared to Java (such as no checked exceptions). Using a debugger version of the Flash Player for development of Flex is always a good idea, but this is particularly true when dealing with Flex error handling.

Top 10 Tips for Flex Application Performance

2011-11-12T20:00:00.000-07:00

In general, it is good practice to maintain clean code. Not only in the sense of having properly formatted and readable code, but also code that leaves nothing behind… no memory leaks, no cpu hogs, nothing but a clean object that can be reclaimed by the GC.

Rule # 1: Clean up after yourself

1) Manage your event listeners – this message is two fold. First, you should always remove event listeners that are no longer needed. They can lead to object references that prevent the garbage collector, which equates to memory leaks, which can be very difficult to track down and detrimental to application performance. You can use weakly referenced event listeners to minimize memory leakage, but you still should explicitly clean them up when you don’t need them anymore. The second factor is that failure to remove event listeners can cause performance issues. Event handlers could be firing within your application, which you weren’t even aware of. You dispatch an event in a child component, and there could be handlers up the DOM tree (parent objects) that are also firing on the same event. If you don’t want this to happen, be explicit with your event handlers; make them handle specific event types, and get rid of them when your application doesn’t need them anymore.

2) Unload loaders – any time that you are using an object based on a loader (Image, SWFLoader, etc…), it’s a good practice to call unloadAndStop() to unload the content from the loader, and invoke the GC. This will free up valuable system resources and cpu cycles won’t be wasted if they aren’t needed. I typically even do this for static image files, to prevent memory usage from creeping up.

3) Dispose of things – I find it to be a very good practice to create “dispose()” functions in your custom components, data managers, or views that will clean up the object’s resources. The dispose() method will need to be explicitly invoked when you are finished using an object, but that dispose method will handle everything needed to clean up an object and free it’s resources. For example, stop timers, remove event listeners, unload loader objects, set variable references to null, etc… Basically, get rid of anything that could possibly cause a memory leak or eat cpu cycles behind the scenes. Yes, it takes cpu cycles to invoke a dispose method, but trust me. It is much easier and much less computationally expensive to explicitly dispose of objects, rather than burn time, computation resources, and budget tracking down leaks and performance issues.

Rule #2: If you don’t have to do it, don’t do it

Another good rule to live by is that if you don’t have to do something, then don’t do it. No, I don’t mean “don’t do your work”, or “don’t brush your teeth”. You need to do those. Instead, I mean don’t perform computationally intensive, or resource consuming actions if you don’t need to.

4) Handle collections properly – There are a few things I see all the time, and they’re always the first things to change if I see them. Collections (ArrayCollection, XMLListCollection, etc…) are helper classes that wrap primitive structures like array or xmllist. In order to help make working with those primitives easier, the collection classes do things that can be computationally expensive if you aren’t aware of them. The reason that bindings to collection work is because every time you add, remove, or update an item, events get dispatched. They also get dispatched every time you refresh a collection.

The first tip is to be conscious of collection events. If you loop over a collection and update 100,000 items, 100,000 events will get dispatched. This can cause massive performance implications, and can completely lock your application UI. If you don’t need those collection events to be dispatched, you can use the disableAutoUpdate() function to suspend collection events. Just be sure to turn them back on when you are done, or if you need them again, using the enableAutoUpdate() function.

The second, is to not use a collection if you don’t have to. If all you need is to do loop over 100,000 items, and you arne’t using data bindings, then use an array.

And the third tip on collections is only when collections are filtered using a filter function… If a filter function is applied, you don’t need to call the refresh() function every time you add a new object to the collection. This can cause performance hits, in some of the least expected places. For example, if you have a datagrid bound to a collection, and have another process which updates that collection. If there is a filter on the collection, it will automatically get filtered when you call the collection’s addItem method. Calling the refresh() method after adding an item will cause the list data of the datagrid to be invalidated, thus causing the entire datagrid to be re-validated and re-drawn. This is easily missed when optimizing, and can make drastic changes in application performance.

5) Use deferred instantiation – By default, all navigational containers within Flex (tab nav, accordion, viewstack, etc…) only create their children as they are needed. This prevents the application from creating thousands of components that aren’t needed yet, which helps keep the application running smooth, and without hogging resources or locking up. Changing the creation policy can cause big problems if you are not careful.

You should also keep deferred instantiation in mind when creating your own custom components. Don’t create child objects in the constructor. Instead, override the createChildren() method, and create them in there. This way, your components also follow deferred instantiation rules, and they don’t introduce any performance issues that can be difficult to track down.

6) Object recycling vs new objects – I’ve written about this one before, but I’ll say it again. It is often less expensive to reuse existing objects, rather than creating new ones. This goes hand-in-hand with data virtualization.

7) Don’t invalidate/destroy/re-validate your objects if nothing changed.
If you are building custom components, and someone changes a property (through a getter/setter), don’t invalidate the component properties if the incoming value didn’t change. This will cause the component to go through the full invalidation/validation lifecycle, causing properties to be re-validated/comitted, and the object to be redrawn on the display list. Only invalidate properties if something actually changed. Here is a straightforward example to demonstrate the concept:
public function set myProperty( value : Number ) : void

{

if ( _myProperty != value )

{

_myProperty = value;

propertiesChanged = true;

invalidateProperties();

dispatchEvent( new Event( "change" ) );

}

}

Rule #3: Use the language appropriately

The ActionScript language has features that enable performance… use them.

8) Dynamic/Generic vs. Typed Objects – Dynamic and generic objects certainly have their place. They are generic, flexible, can be modified with any attribute, and can be used in a wide variety of situations. However, if you have a typed object and do not need the generic qualities, use strongly typed objects. The strongly typed nature of ActionScript 3 is one of the reasons it is fast. Accessing properties of strongly typed objects is simply faster than accessing properties of generic & dynamic objects.

9) Use constants when applicable - If you have a value that does not ever change, but you reference it all the time, use a constant. Constants are accessed faster and require less overhead.

10) Use static members – Static properties and functions do not require a variable instance to be invoked or accessed. Since they don’t require an instance, it is faster to access them directly from the class, and does not require the memory necessary to instantiate the object. Utility functions, or functions that do not require attributes of a specific instance should be put into static functions.

Speaking of constants in #9… normally I suggest to make constants static. This will help you keep your memory footprint to a minimum b/c it will not need to be attached to a class instance.

All of these may seem like trivial or minor coding practices, but believe me, they can add up. In reality, it always boils down to proper coding practice, and this list highlights just a few things that you should consider when building your applications.

Date Sorting on Datagrid Column

2011-11-12T19:57:00.001-07:00

For Sorting the Date timestamp column in datagrid you need to add the following changes in datagrid to the MXML file which contain timestamp value for EST timezone conversion .
The following code is an example:-

Sorting on Date Column on Datagrid use the following code

<mx:DataGridColumn headerText="Timestamp" dataField="errorDateTime" width="200" sortCompareFunction="dateSortCompare"/>

Sorting is done by calling sortComapareFunction in Datagrid Column. Please follow method below for date sorting.

public static function dateSortCompare(date1:Object, date2:Object):int
{
var dateA:Date=DateFormatter.parseDateString(date1.errorDateTime);
var dateB:Date=DateFormatter.parseDateString(date2.errorDateTime);
//trace("date1.errorDateTime="+date1.errorDateTime+", date2.errorDateTime="+date2.errorDateTime+", "+ObjectUtil.dateCompare(dateA, dateB));
return ObjectUtil.dateCompare(dateA, dateB);
}

Text Image Renderer Component

2011-11-12T12:39:00.000-07:00

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" textAlign="center">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.*;
import flash.events.Event;
import mx.controls.DataGrid;
import com.ApplicationConstants;
]]>
</mx:Script>
<mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center">
<mx:TextInput id="txtUniCircuitId" width="80%" automationName="txtUniCircuitIdAN"/>
<mx:Image horizontalAlign="center" source="@Embed(source='image source')" buttonMode="true" useHandCursor="true" width="20%"/>
</mx:HBox>
</mx:Canvas>

Alert with Label Link Component

2011-11-12T12:35:00.000-07:00

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" title="Order Successfully Created" textAlign="center" width="460" styleName="alert" height="110" verticalGap="15" color="black" shadowDirection="center" shadowDistance="10" >
<mx:Script>
        <![CDATA[
    import mx.events.CloseEvent;
   import mx.managers.PopUpManager;


       public var closeHandler:Function = null;


        private function clickHandler(evt:MouseEvent):void
   {
       var closeEvent:CloseEvent = new CloseEvent(CloseEvent.CLOSE);
           closeEvent.detail = 001;
           closeHandler(closeEvent);
       PopUpManager.removePopUp(this);

   }
        private function removeHandler(evt:MouseEvent):void
   {

       mx.managers.PopUpManager.removePopUp(this);

   }
          ]]>
</mx:Script>
<mx:Style>
    .alert{
color : #0f3177;
title-style-name : "alertTitle";
header-height:25;
drop-shadow-enabled: true;
drop-shadow-color :#d1ddf7;
background-color: #ffffff;
corner-radius :6;
header-colors : #90a4d1, #5970a0;
footer-colors : #9db6d9, #ffffff;
border-color : #5970a0;
}
</mx:Style>
<mx:HBox id="genId1281449230637_2" automationName="genId1281449230637_2AN">
    <mx:FormItem label="Order Id:" id="genId1281449230637_3">
      
       <mx:LinkButton id="orderLabel"    color="blue"   styleName="alert" useHandCursor="true" mouseChildren="false" click="clickHandler(event)"
             textDecoration="underline" fontWeight="normal" />
    </mx:FormItem>
</mx:HBox>
<mx:Button id="btnOk" label="OK" click="removeHandler(event)" styleName="alert" fillColors="0xFFFFFF, 0xAAAAAA"/>
</mx:TitleWindow>

Export to Excel and CSV Component

2011-11-12T12:31:00.000-07:00

package com.main.components
{import flash.errors.*;
import flash.events.*;
import flash.external.*;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;
import flash.net.navigateToURL;
import flash.system.Capabilities;

import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class ExportToExcelorCSV
{
public static const EXPORT_ALL:String = "exportAll";
public static const EXPORT_VISIBLE:String = "exportVisible";
public static const EXPORT_SELECTED:String = "exportSelected";
private static var titleDate:String = '';
private static var titleNTE:String = '';
public static const TYPE_CSV:String = "typeCsv";
public static const TYPE_TSV:String = "typeTsv";
public static var data:String = "";

private static function convertDGToHTMLTable(dg:DataGrid ):String {
//Set default values
var font:String = dg.getStyle('fontFamily');
var size:String = dg.getStyle('fontSize');
var str:String = '';
var colors:String = '';
var style:String = 'style="font-family:'+font+';font-size:'+size+'pt;"';
var hcolor:Array;

//Retrieve the headercolor
if(dg.getStyle("headerColor") != undefined) {
hcolor = [dg.getStyle("headerColor")];
} else {
hcolor = dg.getStyle("headerColors");
}

//Set the htmltabel based upon knowlegde from the datagrid
str+= '<table><thead><tr width="'+dg.width+'" style="background-color:#1E90FF">';

//Set the tableheader data (retrieves information from the datagrid header
for(var i:int = 0;i<dg.columns.length;i++) {
colors = dg.getStyle("themeColor");

if(dg.columns[i].headerText != undefined) {
str+="<th "+style+">"+dg.columns[i].headerText+"</th>";
} else {
str+= "<th "+style+">"+dg.columns[i].dataField+"</th>";
}
}
str += "</tr></thead><tbody>";
colors = dg.getStyle("alternatingRowColors");

//Loop through the records in the dataprovider and
//insert the column information into the table
if(dg.dataProvider != null ){

for(var j:int =0;j<dg.dataProvider.length;j++)
{
str+="<tr width=\""+Math.ceil(dg.width)+"\">";

for(var k:int=0; k < dg.columns.length; k++)
{

//Do we still have a valid item?
if(dg.dataProvider.getItemAt(j) != undefined && dg.dataProvider.getItemAt(j) != null)
{

//Check to see if the user specified a labelfunction which we must
//use instead of the dataField
if(dg.columns[k].labelFunction != undefined)
{
str += "<td "+style+">"+dg.columns[k].labelFunction(dg.dataProvider.getItemAt(j),dg.columns[k].dataField)+"</td>";

} else
{
str += "<td "+style+">"+dg.dataProvider.getItemAt(j)[dg.columns[k].dataField]+"</td>";
}
}
}
str += "</tr>";
}
}
str+="</tbody></table>";

return str;
}

public static function getTitleAndDate(title:String , date:String):void
{
titleDate = '<p align="center"><font size = "4"><b>'+ title + '</b></font></p><p align= "right">' + date + '</p>'
}
public static function getTitle(title:String ):void
{
titleNTE = '<p align="center"><font size = "4"><b>'+ title + '</b></font></p>'
}

public static function loadDataGridInExcel( dataGrid:DataGrid, dataGridNTE:DataGrid = null ):void
{
//Pass the htmltable in a variable so that it can be delivered
//to the backend script
if(dataGridNTE == null)
{
var variables:URLVariables = new URLVariables();
variables.htmlTable =titleDate + convertDGToHTMLTable(dataGrid);
var url:String = "export.jsp";
var u:URLRequest = new URLRequest( url );
u.data = variables; //Pass the variables
u.method = URLRequestMethod.POST;
navigateToURL( u, "_self" );
}
else
{
var variable:URLVariables = new URLVariables();
variable.htmlTable =titleDate + convertDGToHTMLTable(dataGrid) + titleNTE + convertDGToHTMLTable(dataGridNTE);
var urlQ:String = "export.jsp";
var ur:URLRequest = new URLRequest( urlQ );
ur.data = variable; //Pass the variables
ur.method = URLRequestMethod.POST;
navigateToURL( ur, "_self" );
}
}

// Function For Converting into CSV String
public static function copyData( dataGrid:DataGrid, fileType:String, exportType:String ):String
{
var str:String = "";
var value:String = "";
var skipColumns:Array = [];

for (var i:int = 0;i<dataGrid.columns.length;i++)
{
if (dataGrid.columns[i].headerText != undefined)
{
value = dataGrid.columns[i].headerText + "\n";
}
else
{
value = dataGrid.columns[i].dataField;
}

// we won't include columns which don't have titles
if (value.length == 0)
{
skipColumns.push( i );
continue;
}
else
{
if (fileType == TYPE_CSV)
{
str += '"' + value + '"';
}
else
{
str += value;
}
}

if (i < dataGrid.columns.length-1)
{
str += fileType == TYPE_CSV ? "," : "\t";
}
}
str += lineEnding;
var data:Array;

if (exportType == EXPORT_ALL)
{
data = ArrayCollection( dataGrid.dataProvider ).source;
}
else
{
data = dataGrid.selectedItems;
}

for each (var item:Object in data)
{
for(var k:int=0; k < dataGrid.columns.length; k++)
{
// check if we're skipping this column
if (skipColumns.indexOf( k ) >= 0)
{
continue;
}
//Check to see if the profile specified a labelfunction which we must
//use instead of the dataField
if (dataGrid.columns[k].labelFunction != undefined)
{
value = dataGrid.columns[k].labelFunction(item, dataGrid.columns[k]);
}
else
{
var dataField:String = dataGrid.columns[k].dataField;
value = item[ dataField ];
}
if (value)
{
var pattern:RegExp = /["]/g;
value = value.replace( pattern, "" );

if (fileType == TYPE_CSV)
{
value = '"' + value + '"';
}
}
else
{
if (fileType == TYPE_CSV)
{
value = '""';
}
}
str += value;
if (k < dataGrid.columns.length - 1)
{
str += fileType == TYPE_CSV ? "," : "\t";
}
}
str += lineEnding;
}
setData(str);

return str;
}

public static function setData( text:String ):void{

data = text;
}
public static function getData( ):String{

return data;
}
public static function getItemsFromText( text:String ):Array
{
var rows:Array = text.split( lineEnding );
if (rows.length > 0 && !rows[rows.length - 1])
{
rows.pop();
}
var itemsFromText:Array = [];
for each (var row:String in rows)
{
var fields:Array = row.split("\t");
var item:Object = {};

for (var i:int = 0; i < fields.length; i++)
{
item["col" + (i+1)] = fields[i];
}
itemsFromText.push(item);
}
return itemsFromText;
}

private static function get lineEnding():String
{
if (Capabilities.os == "Linux")
{
return "\n";
}
else if (Capabilities.os.indexOf( "Mac" ) >= 0)
{
return "\r";
}
else
{
return "\r\n";
}
}

public static function loadDataGridCSVExcel( dataGrid:DataGrid ):void
{
var variables:URLVariables = new URLVariables();
variables.htmlTable = copyData( dataGrid, TYPE_CSV, EXPORT_ALL );
var url:String = "export.jsp";
var u:URLRequest = new URLRequest( url );
u.data = variables;
u.method = URLRequestMethod.POST;
navigateToURL( u, "_self" );
}

}

}

This component is used for export the data into Excel spreadsheet or CSV file.

Simple script to convert a Datagrid to a HTML table and then
pass it on to an external excel exporter

Has Method Which Coverts to CSV string
Can Pass Title and need to Change the Code a little If anything else Needed