FLEX Examples

What is Flex 4

noreply@blogger.com (Jon) — Wed, 02 Sep 2009 03:34:00 +0000

For the latest information on the next major release of Flex SDK and Flash Builder 4(codenamed “Gumbo”), check out the Flex 4 page on the Adobe Open Source site: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo. The Flex 4 page includes the latest milestones, as well as links to the various public specifications. Also, you can check out the Flex 4 page on the Adobe Labs site at http://labs.adobe.com/technologies/gumbo/.

To download nightly builds of the Flex 4 SDK, check outhttp://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For the latest Flex 4 documentation, check out http://livedocs.adobe.com/flex/gumbo/langref/ andhttp://livedocs.adobe.com/flex/gumbo/html/ (as well as some Flex 4 beta chapters at the bottom ofhttp://opensource.adobe.com/wiki/display/flexsdk/Gumbo).

If you think you’ve found a bug in the Flex SDK or in Flex Builder (any versions), you can file a bug in the public bug base athttp://bugs.adobe.com/flex/.

For a list of Flex 4 specific examples on this blog, check out http://blog.flexexamples.com/tag/gumbo/.

Want a free version of Flex Builder 3? Check out https://freeriatools.adobe.com/ and see if you qualify! Then, head over to the Adobe Flash Builder 4 Beta Extension Request site to request a Flash Builder 4 beta serial number. (Flash Builder 4 beta extension serial numbers are available for all licensed Flex Builder 3 customers. This includes all commercial and education serial numbers.)

Setting tab stops on RichText control in Flex 4

noreply@blogger.com (Jon) — Wed, 02 Sep 2009 03:31:00 +0000

You can also set tabs in a RichText control by setting the text property and using \t, as seen in the following example:

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo">       >         >              label="direction:">                  id="dropDownList" requireSelection="true">                     >                          source="[ltr,rtl]" />                     >                 >             >         >     >        title="Spark RichText tabStops/tab test"             horizontalCenter="0" verticalCenter="0">          x="100" />          x="200" />          x="300" />            id="richTxt"                 text="Col 1{'\t'}Col 2{'\t'}Col 3{'\t'}Col 4"                 direction="{dropDownList.selectedItem}"                 tabStops="100 200 300"                 paragraphSpaceAfter="20"                 width="400" />     >   >

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo"         initialize="init();">       >         [CDATA[             import flashx.textLayout.formats.Direction;             import mx.collections.ArrayList;             import mx.containers.Form;             import mx.containers.FormItem;             import mx.controls.VRule;             import mx.core.FlexGlobals;             import spark.components.DropDownList;             import spark.components.Panel;             import spark.events.IndexChangeEvent;             import spark.primitives.RichText;               private var dropDownList:DropDownList;             private var pnl:Panel;             private var richTxt:RichText;               private function init():void {                 dropDownList = new DropDownList();                 dropDownList.dataProvider = new ArrayList([Direction.LTR, Direction.RTL]);                 dropDownList.requireSelection = true;                 dropDownList.addEventListener(IndexChangeEvent.CHANGE, dropDownList_change);                   var formItem:FormItem = new FormItem();                 formItem.label = "direction:";                 formItem.addElement(dropDownList);                   var form:Form = new Form();                 form.addElement(formItem);                   Application(FlexGlobals.topLevelApplication).controlBarContent = [form];                   richTxt = new RichText();                 richTxt.text = "Col 1\tCol 2\tCol 3\tCol 4";                 richTxt.setStyle("tabStops", "100 200 300");                 richTxt.setStyle("paragraphSpaceAfter", 20);                 richTxt.width = 400;                   var vRule1:VRule = new VRule();                 vRule1.x = 100;                   var vRule2:VRule = new VRule();                 vRule2.x = 200;                   var vRule3:VRule = new VRule();                 vRule3.x = 300;                   pnl = new Panel();                 pnl.title = "Spark RichText tabStops/tab test";                 pnl.horizontalCenter = 0;                 pnl.verticalCenter = 0;                 pnl.addElement(vRule1);                 pnl.addElement(vRule2);                 pnl.addElement(vRule3);                 pnl.addElement(richTxt);                 addElement(pnl);             }               protected function dropDownList_change(evt:IndexChangeEvent):void {                 richTxt.setStyle("direction", dropDownList.selectedItem);             }         ]]>     >   >

The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the tabStops style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, .

"1.0" encoding="utf-8"?>  name="Spark_RichText_tabStops_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/halo">     >         >              label="direction:">                  id="dropDownList" requireSelection="true">                     >                          source="[ltr,rtl]" />                     >                 >             >         >     >        title="Spark RichText tabStops/tab test"             horizontalCenter="0" verticalCenter="0">          x="100" />          x="200" />          x="300" />            id="richTxt"                 direction="{dropDownList.selectedItem}"                 tabStops="100 200 300"                 paragraphSpaceAfter="20"                 width="400">             >                  direction="ltr" fontWeight="bold">0px/>100px/>200px/>300px>                 >Col 1/>Col 2/>Col 3/>Col 4>             >         >     >   >

Creating full-screen Flex applications

noreply@blogger.com (Jon) — Wed, 02 Sep 2009 03:27:00 +0000

Full-Screen Mode in Flex. I’ve seen this appear a few times in the bugbase and on lists, but here is some simple code to let you toggle between “full screen mode” and “normal mode” in a Flex application. Note that in this example I’m listening for the applicationComplete event in the main tag instead of thecreationComplete event. The applicationComplete tag is called slightly after the creationComplete event, after the Application has been completely initialized.

If you try and access the Application.application.stage property from the creationComplete event, you’ll get a run-time error (RTE) saying the following:

Adobe Flex 4 SDK

noreply@blogger.com (Jon) — Tue, 25 Aug 2009 18:46:00 +0000

Welcome to the Adobe Flex® 4 SDK beta release on Adobe Labs (previously code named Gumbo). This release marks an expanded role for the Flex framework, now supporting both developers creating Flex applications and designers using Adobe® Flash® Catalyst™ to create interaction design.

You can build great Flex applications using only the Flex 4 SDK and an editor of your choice, or you can use the beta version of Adobe Flash Builder™ 4 (previously named Flex Builder) which includes everything in the Flex 4 SDK within it. This beta release aligns with the public beta releases of both Flash Builder and Flash Catalyst.

There are 3 main themes for this release:

Design in Mind: providing a framework for continuous collaboration between designer and developer
Developer Productivity: improving compiler performance and adding productivity enhancements to language features
Framework Evolution: taking advantage of new Flash Player capabilities and adding features required by common use-cases

Download and Discuss

For an overview of the new features, please read Matt Chotin’s What’s new in the Flex 4 SDK beta article.

Please use this opportunity to explore new features and communicate your feedback. While we are excited about this near feature-complete release, please remember that that this is beta software and there will be bugs, incomplete features, some performance issues and documentation issues, so we suggest that you only use it for testing and exploratory purposes.

Note: If you are planning on using the Flash Builder 4 beta, everything included in the Flex 4 SDK will also be included so you will not need to download the SDK.

Open Source Nightly Builds

The Flex framework is open source, so if you are looking for the open source nightly builds, please visit opensource.adobe.com/flex.

Flex 3 SDK

If you are looking for older versions of the Flex framework, you can get them from the open source site.

Creating an animated base color effect on a Spark Button control in Flex 4

noreply@blogger.com (Jon) — Tue, 25 Aug 2009 18:44:00 +0000

The following example shows how you can create an animating background effect on a Spark Button control in Flex 4 by using the AnimateColor effect on the baseColor style.

Full code after the jump.

"1.0" encoding="utf-8"?>   name="Spark_Button_AnimateColor_baseColor_test"         xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         xmlns:mx="library://ns.adobe.com/flex/halo">       >          id="animatr"                 target="{btn}"                 colorFrom="haloSilver"                 colorTo="haloBlue"                 colorPropertyName="baseColor"                 duration="400"                 repeatCount="0"                  repeatBehavior="reverse" />     >        id="btn"             label="Spark Button"             horizontalCenter="0" verticalCenter="0"             creationComplete="animatr.play();"/>   >

View source is enabled in the following example.

Flex FORMATTING DATA GRID ROWS AND HEADERS

noreply@blogger.com (Jon) — Tue, 25 Aug 2009 18:43:00 +0000

When developing applications with the DataGrid component, you may want to use a custom font so the data grid fits with your overall design. YOu change fonts by setting a custom text format using a TextFormat object, and the setStyle() or setRendererStyle() methods. If you want to set the text format for a DataGrid component’s header, use the setStyle() method along with the headerTextFormat style. If you want to set the text format for each row in the DataGrid component, use the setRendererStyle() method along with the textFormat style.

Example

import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridColumn; import fl.data.DataProvider;  var comicTextFormat:TextFormat = new TextFormat(); comicTextFormat.font = “Comic Sans MS”;  var comicBoldTextFormat:TextFormat = new TextFormat(comicTextFormat.font); comicBoldTextFormat.bold = true;  var dp:DataProvider = new DataProvider(); dp.addItem({columnA:“Row 1A”, columnB:“Row 1B”}); dp.addItem({columnA:“Row 2A”, columnB:“Row 2B”}); dp.addItem({columnA:“Row 3A”, columnB:“Row 3B”});  var colA:DataGridColumn = new DataGridColumn(“columnA”); colA.headerText = “Column A:”;  var colB:DataGridColumn = new DataGridColumn(“columnB”); colB.headerText = “Column B:”;  var myDataGrid:DataGrid = new DataGrid(); myDataGrid.setStyle(“headerTextFormat”, comicBoldTextFormat); myDataGrid.setRendererStyle(“textFormat”, comicTextFormat); myDataGrid.addColumn(colA); myDataGrid.addColumn(colB); myDataGrid.dataProvider = dp; myDataGrid.width = 200; myDataGrid.rowCount = myDataGrid.length; myDataGrid.move(10, 10); addChild(myDataGrid);

Result

To download the source files for this example, click here.

DataGrid component

noreply@blogger.com (Jon) — Tue, 25 Aug 2009 18:40:00 +0000

The following quick start demonstrates how to customize data grid columns, sort data grid columns numerically, format numbers in data grid columns using a custom label function, and how to specify a custom text format for both data grid headers and data grid rows.

CREATING DATA GRID COLUMNS USING THE DATAGRIDCOLUMN OBJECT

There are two main ways to add columns to a DataGrid instance:

Pass a string to the data grid’s addColumn() or addColumnAt() method.
Pass a DataGridColumn object (fl.controls.dataGridClasses.DataGridColumn) to the data grid’s addColumn() or addColumnAt() method.

By using the DataGridColumn object, you can control additional attributes of the data grid column, such as the following:

Specify whether the column is editable (DataGridColumn.editable)
Specify whether the column is resizable (DataGridColumn.resizable)
Specify the column’s header text (DataGridColumn.headerText)
Specify a custom function which generates a cell’s text (DataGridColumn.labelFunction)
Specify whether the column is sortable (DataGridColumn.sortable)
Specify sorting options (DataGridColumn.sortOptions)
Specify a custom sorting function (DataGridColumn.sortCompareFunction)

Example

The following example creates a new DataGridColumn instance and adds it to the DataGrid using the addColumn() method:

import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridColumn; import fl.data.DataProvider;  var dp:DataProvider = new DataProvider(); dp.addItem({columnA:“Row 1A”, columnB:“1234.000″}); dp.addItem({columnA:“Row 2A”, columnB:“56.300″}); dp.addItem({columnA:“Row 3A”, columnB:“789.123″});  var colA:DataGridColumn = new DataGridColumn(“columnA”); var colB:DataGridColumn = new DataGridColumn(“columnB”);  var myDataGrid:DataGrid = new DataGrid(); myDataGrid.addColumn(colA); myDataGrid.addColumn(colB); myDataGrid.dataProvider = dp; myDataGrid.width = 200; myDataGrid.rowCount = myDataGrid.length; myDataGrid.move(10, 10); addChild(myDataGrid);

Result

To download the source files for this example, click here.

flex html tooltip component

noreply@blogger.com (Jon) — Mon, 06 Jul 2009 11:27:00 +0000

Flex components accepts plain text to display as ToolTip. So there is no way to format the ToolTip text. So i looked into this problem, i checked the source code of the class “ToolTip”. There i got a very easy solution for this.

The ToolTip class object uses IUITextField object to display the ToolTip text. In component lifeCycle, at the process of commitProperties() method, text property of the IUITextField is get assigned by the String which is specified to for component’s tooltip property. I got the right place, The Trick is just instead of assigning the tooltip string to the text property, override it by the property htmlTextproperty of the IUITextField object, which will enable the html text to appear in tooltip.

So i created a component HTMLToolTip, which overrides the protected function commitProperties()method of the TootTip object. here is the source code of the component;

package com  
{  
    import mx.containers.*;  
    import mx.controls.Text;  
    import mx.controls.ToolTip;  
    import mx.core.*;  
  
    public class HTMLToolTip extends ToolTip  
    {  
        public function HTMLToolTip()  
        {    super(); }  
  
        override protected function commitProperties():void{  
            super.commitProperties();  
            textField.htmlText = text;  
        }  
    }  
}  

To use this component, after loading the application (creationComplete()) useToolTipManager.toolTipClass to assign this component as toolTip custom class, and asign the components toolTip property to assign html text. here is sample code;

 
    import com.*; 
    private function init():void{ 
        ToolTipManager.toolTipClass = HTMLToolTip; 
        mtBtn.toolTip = "this is HTMLToolTip." 
    } 
]]>  

The trick is overriding the components commitProperties() method.

uploading an image into flash without server side script using flash player 10

noreply@blogger.com (Jon) — Mon, 06 Jul 2009 11:24:00 +0000

The FileReference class in flash player 10 has a new method : FileReference.load() which provides the power of uploading the image, text file etc into flash player without any server side script.

Before proceeding with FileReference.load() method, we need to call FileReference.browse()method so that user can select a file to load a selected file into flash player. Once the file get loaded into flash player you can access the loaded data by using a property of FileReference.data.
The data loaded at FileReference.data property is commonly a type of ByteArray. we want to convert it to bitmap. so the trick is to use the loader class; loader.loadBytes() method. The method converts the ByteArray to a loader image object. once it completes loading we can add the loader object to display list to display the image. so here we go;

Note: the example has been created in flash cs4 and targets flash player 10;

settings:

1) create a blank flash document in flash cs4.

2) create a folder named with “flexScript” and copy and paste the below code to a new actionscript file and save the file into “flexScript” folder with the name “uploadImage”.

3) put a button component on the stage and put a instance name as “upload_Image”;

4) set the document class as “flexScript.uploadImage”; and run the application and check the magic;

view plaincopy to clipboardprint?
package flexScript {  
    import flash.display.Sprite;  
    import flash.events.MouseEvent;  
    import flash.net.*;  
    import flash.display.*;  
    import flash.events.*;  
    import flash.utils.ByteArray;  
  
    public class uploadImage extends Sprite {  
        private var jagFileRefSave:FileReference = new FileReference();  
        private var loader:Loader = new Loader();  
        private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");  
  
    public function uploadImage(){  
        super();  
        upload_Image.addEventListener(MouseEvent.CLICK,onClickSave);  
  
    }  
    private function onClickSave(e:MouseEvent):void{      
        jagFileRefSave.browse([imagesFilter]);  
        jagFileRefSave.addEventListener(Event.SELECT, selectedFile);  
    }          
    private function selectedFile(e:Event):void{  
        jagFileRefSave.load();  
        jagFileRefSave.addEventListener(Event.COMPLETE, loaded);  
    }  
    private function loaded(e:Event):void{  
        var rawBytes:ByteArray = jagFileRefSave.data;  
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData)  
        loader.loadBytes(rawBytes);  
    }  
    private function getBitmapData(e:Event):void{  
        addChild(loader);  
    }  
  
    }  
}  

Using a Web Service to populate a DataGrid with XML data

noreply@blogger.com (Jon) — Mon, 06 Jul 2009 11:23:00 +0000

In this example I will be using XML data that is returned from a remote site. This example retrieves data about web sites (Name and URL). The XML data will be consumed and displayed in a FlexDataGrid control. Make sure you see the next blog about customizing a DataGrid. Here is a sample of the data returned by the program:



  

     Google

     http://google.com

  

  

     Yahoo

     http://yahoo.com

In this example, the data returned will be parsed and stored in an ArrayCollection object. Using an ArrayCollection is a good idea because it used in a lot of Flex tags as a data provider. It also include many methods that will allow you to manipulate the data. The following are the steps taken in Flex to retrieve the data and populate the DataGrid.

Create the HttpService tag in Flex and link it to the XML source:

url="http://some.examplewebsite.com/getSitesInXML.php"
result="handleSiteData(event)" />

id -- The name assigned to the service
url -- is the source of the XML
result -- Specify the name of the function that will handle the results. This function is called automatically. Incidentally, you can also add a method that will be invoked on errors (fault="someMethod()").
resultFormat -- self explanatory.

Send service request

getSitesService.send();
This is usually done upon application loading. For example, in the application tag you can add the code:
applicationComplete="getSitesService.send();"
Remember the method "handleSiteData()" will be called automatically upon successful return of the web service. Now, let's look at the method that will handle the returned result.

Handle Site Data (Parse XML data)



[Bindable]

private var siteList:ArrayCollection;

public function handleSiteData(event:ResultEvent):void {

  xmlData = XMLList(event.result);

  var siteArray:Array = new Array();

  for (var i:int = 0; i < xmlData.site.length(); i++) {  

     //Create an object of type Site.

     //Site is a simple ActionScript class

     //that incldes a URL and a Name

     var s:Site = new Site(xmlData.site[i].URL,

       xmlData.site[i].Name);

     //Add the object to the array

     siteArray.push(s);

  }

  //Convert the array to an ArrayCollection

  siteList = new ArrayCollection(siteArray);

}

Now we have an ArrayCollection of sites. This collection will be used as the "dataProvider" for the DataGrid control.

Define the DataGrid Control to use the ArrayCollection "siteList" defined above.

Customizing Flex DataGrid with ItemRenderer

noreply@blogger.com (Jon) — Mon, 06 Jul 2009 11:22:00 +0000

In this example I will be using an ArrayCollection as the data provider for the DataGrid. The ArrayCollection is of objects that represent web sites. Each object contains a Name and a URL. The data will be displayed with some customization. The customization include color, decoration, and action. Each of the items displayed will be linkable to the appropriate web site.

Define the DataGrid Control
```
   

         

                    rollOver="setStyle('textDecoration','underline')"

             rollOut="setStyle('textDecoration','none')"

             useHandCursor="true" buttonMode="true"

             mouseChildren="false"

             click='navigateToURL(new URLRequest(data.URL),"_mine")'

      

    

   

 
```
data refers the object being rendered. So, data.Name refers the the instance data Name within the object. Here the item renderer defines each item from the site list as a label. The label is then styled as follows:
- The text is assigned the color #009ad4
- Text is underlined when the cursor is placed on it and removed when rolled out.
- It uses the hand cursor for the mouse
- When text is clicked it calls navigateToURL method to launch the web site. If click event is calling a method defined in your file, you need to qualify the call withouterDocument to bring the functions within scope. For example,
```
click='outerDocument.myFunction(data.URL)'
```

Calling a JavaScript Function from A Flex Application

noreply@blogger.com (Jon) — Mon, 06 Jul 2009 11:21:00 +0000

Sometimes it might be necessary to call a Javascript function from your Flex application. The technique is quite simple. It involves sending the Javascript function name along with any parameters to the ExternalInterface class. For example, let's assume that a Javascript function called changeMainContent was defined to take a tag name (id) and a url. Normally using Javascript the functions is called this way: changeMainContent(id, url). Let's define a Flex method that invokes this Javascript method:

public function callWrapper(id:String, url:String):void {
   var f:String = "changeMainContent";//Javascript function
   ExternalInterface.call(f,id, url);
}

Now a call this method when a button is clicked is as follows:

Flex Associative Arrays

noreply@blogger.com (Jon) — Mon, 06 Jul 2009 11:18:00 +0000

In this example I will be showing the use of associative array to change the content of a DataGrid control. Associative arrays work just like regular arrays except they use an Object (normally a string) as their index. For example, inventory['price'] = 12.99. I will be creating an associative array of ArrayCollections. Each of these ArrayCollections will be used to populate a DataGrid.

First let's create the ComboBox and the DataGrid controls:


   dataProvider="{categories}"
   change="changeCBHandler()">

               dataProvider="{searchList}">

Now let's look at the code used in these examples. Comments are provided throughout the code.



import mx.collections.ArrayCollection;

//Array for the ComboBox control
[Bindable]
private var categories:ArrayCollection =
new ArrayCollection(["Search", "News"]);

//Array collections to be placed in the Associative Array
[Bindable]
private var searchList:ArrayCollection = new ArrayCollection([
{name:'Yahoo',url:'http://yahoo.com'},
{name:'Google',url:'http://google.com'},
{name:'Ask', url:'http://ask.com'}]);

[Bindable]
private var newsList:ArrayCollection = new ArrayCollection([
{name:'CNN', url:'http://cnn.com'},
{name:'Yahoo News', url:'http://news.yahoo.com'},
{name:'CNet', url:'http://cnet.com'}]);



//Associative Array
[Bindable]
private var allLists:Array = new Array();

//Intialization of the Associative array
//to be called on applicationComplete event
private function loadAllLists():void {
 
allLists['Search'] = searchList;
allLists['News'] = newsList;
}

//Event handler for the change event
private function changeCBHandler():void {
var category:String = cbCategory.selectedLabel;
dgSites.dataProvider = allLists[category];
 
}
]]>
Here is the complete application. Right click to see the complete source code.

Importing Flash assets into Flex

noreply@blogger.com (Jon) — Mon, 22 Jun 2009 08:57:00 +0000

Flex Component Kit for CS3
The Flex Component Kit for Flash CS3 allows you to create interactive, animated content in Flash, and use it in Flex as a Flex component.
Please download and install this component kit before proceeding to the next sections.
URL for download:
Flex Component Kit

You typically import two types of assets
Static assets: Assets used for simple artwork or skins that do not contain any ActionScript 3.0 code.
Dynamic assets: Assets that correspond to Flex components and contain ActionScript 3.0 code. These components are designed to work with Flex features such as view states and transitions, skinning, and tool tips. To use dynamic assets in a Flex application, export the assets to a SWC file, and then link the SWC file to your Flex application.
For importing assets in

Static Assets
Creating static assets in Flash CS3
Few points to be considered while creating assets for using in Flex:
Registration Point
The registration point for the exported symbol must be the upper left corner. If you have Flash content that has a different registration point you can always wrap the content in a new symbol with an upper left registration point.
Frame Rate
In order for the timing to remain consistent, the Flash frame rate must match the Flex frame rate. The default Flex frame rate is 24fps, so it is recommended that the Flash content matches this. If needed, the Flex frame rate can be set to a different value, although this should only be done as a fallback. Setting the Flex frame rate to a value less than 24fps will cause sluggishness in the UI.
Content Bounds
By default, the measured size of the Flash content matches the actual size. Any changes to the content size will automatically be recognized by Flex, and the component will be layed out again in its new size. You can avoid the resizing done by Flex when the flash asset is resized using the Bounding Box, which is explained below.
Symbol Type
Only “Movie Clip” and “Button” symbols can be imported in Flex.
Creating the asset
After creating the shape using the drawing tools in Flash CS3, select the shape and press F8 (shortcut for converting to symbol). In the convert to symbol dialog box, do the following
In the “Name” text box enter the name which you want use in Flex to refer to this symbol
Under “Linkage” section, select the “Export to action script” check box. This will make sure the symbol is visible in Flex.
Press OK to create the symbol.

Importing static assets
Use Flash CS3 to create static assets. You can either embed the entire SWF or selected objects from the library.
Embed entire SWF

[Embed(source="../assets/sample.swf")]
[Bindable]
public var sampleSwf:Class;
]]>

Embed library symbols

[Embed(source="../assets/sample.swf", symbol="Normal")]
[Bindable]
public var logoNormal:Class;
]]>

value to the “symbol” attribute should be the name of the symbol created in using Flash CS3.
Dynamic Assets
For importing dynamic assets into Flex application you need Flex component kit for Flash CS3.
Please refer to http://blogs.adobe.com/flexdoc/pdf/swf9.pdf for more details on how to import dynamic assets in to your Flex application.
References:
Adobe wiki on component kit
http://adobedev.adobe.acrobat.com/p75214263/

Handling Java Exceptions in Flex

noreply@blogger.com (Jon) — Mon, 22 Jun 2009 08:54:00 +0000

Accessing the Throwable object in Flex

RemoteObject component invokes the fault event when an error occurs while remote method invocation. The fault event handler is provided with the FaultEvent object. This FaultEvent object has property named message of type mx.messaging.messages.ErrorMessage. The message property holds the Throwable object from the Java method in the rootCause property. We need to use this rootCauseproperty to retrieve the properties which are set to the Throwable object in Java. All the public properties from the Throwable object are available.

We will see a sample application. In this application I am creating a custom Exception and adding a getter method to that, which will return my custom data. From the Flex application I will access both the error message and the custom data.

MyException.java

public class MyException extends Exception {
public MyException(String message) {
super(message);
}
public String getMyName(){
return “Sujit Reddy G”;
}
}

Method throwing exception

This method will throw the custom exception created above, add this method to a Java class. Invoke the below method using RemoteObject component in Flex.

public void throwCheckedException() throws Exception{
throw new MyException(”This is a checked exception”);
}

Reading values in Flex application

We add the method below as the fault event handler to the RemoteObject component in the Flex application. You can see that we accessed the rootCause object to retrieve the properties of the custom Exception object returned from the Java method.

private function handleException(event:FaultEvent):void{
var errorMessage:ErrorMessage = event.message as ErrorMessage;
Alert.show(errorMessage.rootCause.message);
Alert.show(errorMessage.rootCause.myName);
}

We are adding the above method as fault event handler to the RemoteObject component.

fault=”handleException(event)”/>

Invoking the method in the Java class on button click

You can also use the flex.messaging.MessageException. This class is packaged in the flex-messaging-core.jar. You should throw MessagException instead of MyException or any custom exception created. MessageException provides a property named extendedData, which is a HashMap. You can add any data to this property and access it from the Flex application using ErrorMessage(event.message).extendedData.

Learn flex with java

noreply@blogger.com (Jon) — Mon, 22 Jun 2009 08:52:00 +0000

Adobe - Flex Developer Center - Learn Flex and Java

SpringSource and Adobe are collaborating to make it easy for Java developers to create enterprise-class rich Internet applications (RIAs) using Adobe Flex ...
www.adobe.com/devnet/flex/flex_java.html

Flex and Java - Flex 3 Getting Started - Adobe Learning Resources

Flex is a great solution for Java developers because it enables them to utilize the power of Java servers while creating expressive and ...
learn.adobe.com/wiki/display/Flex/Flex+and+Java

Manning: Flex on Java

Flex on Java assumes you live in the real world—not the demo. This unique book shows you how to refactor an existing web application using the server-side ...
www.manning.com/allmon/

Flex with Ajax

noreply@blogger.com (Jon) — Wed, 10 Jun 2009 19:30:00 +0000

The Flex Ajax Bridge (FABridge) is a small code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the browser.

Rather than having to define new, simplified APIs to expose a graph of ActionScript objects to JavaScript, with FABridge you can make your ActionScript classes available to JavaScript without any additional coding. After you insert the library, essentially anything you can do with ActionScript, you can do with JavaScript.

Adobe Flash Player has the native ability, through the External API (the ExternalInterface class), to call JavaScript from ActionScript, and vice versa. But ExternalInterface has some limitations:

The ExternalInterface class requires you, the developer, to write a library of extra code in both ActionScript and JavaScript, to expose the functionality of your Flex application to JavaScript, and vice versa.
The ExternalInterface class also limits what you can pass across the gap - primitive types, arrays, and simple objects are legal, but user-defined classes, with associated properties and methods, are off-limits.
The ExternalInterface class lets you define an interface so your JavaScript can call your ActionScript. FABridge lets you write JavaScript instead of ActionScript.

When to use the Flex Ajax Bridge

The FABridge library is useful in the following situations:

You want to use a rich Flex component in an Ajax application but do not want to write a lot of Flex code. If you wrap the component in a FABridge-enabled stub application, you can script it entirely from JavaScript, including using JavaScript generated remotely by the server.
You have only one or two people on your team who know Flex. The FABridge library lets everyone on your team use the work produced by one or two Flex specialists.
You are building an integrated rich Internet application (RIA) with Flex and Ajax portions.Although you could build the integration yourself using ExternalInterface, you might find it faster to start with the FABridge.

Requirements for using the Ajax Bridge

To use the FABridge library and samples, you must have the following:

Flex Ajax Bridge, which is included in the following directory of the Flex 3 SDK installation:
installation_dir\frameworks\javascript\fabridge
Adobe Flex SDK
Adobe® Flash® Player 9 or Adobe® AIR™
Microsoft Internet Explorer, Mozilla Firefox, or Opera with JavaScript enabled
Any HTTP server to run the samples

To run the samples:

Browse to the files found within the installation_dir\frameworks\javascript\fabridge
Place the src and samples folders side by side on any HTTP server.
Open a web browser to http://yourwebserver/samples/FABridgeSample.html and samples/SimpleSample.html and follow the instructions there. Make sure you access the samples through http:// URLs and not file:// URLs. The Flash Player security sandbox prevents them from working correctly when they are accessed as local files.

Top Flex Tips

noreply@blogger.com (Jon) — Wed, 10 Jun 2009 19:22:00 +0000

Top Things You Need to Know When Working With Flex

Explore the key features of Flex with code examples and working sample applications. These step-by-step code-based tutorials are written in easy to digest 15 minute chunks. We suggest going through them (at least glancing at them) in order, but you can also pick and choose among the topics if you're already familiar with the concepts:

A. Working with Data

Use data modeling and data binding when working with data.

B. Handling Events

Use event handler functions to handle asynchronous network and UI events.

C. Designing a UI: Using Components and Containers

Use Flex's built-in components and containers to lay out your Flex Application

D. Designing a UI: Displaying Lists of Items

Use the powerful List based components of Flex to display groups of related data items using either the built-in or custom item renderers and item editors.

E. Designing a UI: Creating a multi-page application

Use navigation controls such as ViewStack and TabNavigator to easily add a navigaton system to your applicaton.

F. Extending and Customizing Components

Create your own components from scratch or by extending existing classes in the Flex Class Library using Object Oriented Programming and Code Behind Techniques.

G. Debugging an Application

Learn about Flex Builder's rich debugging capabilities.

Import these projects into Flex Builder

Each of these modules is available on the Download Projects Page as exported ZIP files that you can import into Flex Builder.

What is a rich Internet application?

noreply@blogger.com (Jon) — Wed, 10 Jun 2009 19:19:00 +0000

Ingredients for RIAs

RIAs may look rather sophisticated, but you don't need to be an expert Flex, Flash, or Adobe AIR developer to build one. You can build RIAs using a variety of tools, techniques, and technologies.

If you're a coder interested in building complex interactive web apps such as branded, multimedia-rich business productivity or e-commerce apps, you can use Adobe Flex and Adobe ColdFusion.
If you're more into creating animations, games, or branded interactive marketing content, you can use Adobe Flash. Alternatively, you can take advantage of Ajax frameworks, including Ext and the Spry framework for Ajax, to build HTML-based RIAs, using tools such as Adobe Dreamweaver or Aptana Studio.
To extend your JavaScript- and Ajax-based web apps, you can use the Ajax Data Services library or the Flash Ajax video component. These libraries and technologies enable rich media support, data services and synchronization, and server technologies for rapid development and deployment of RIAs.
To take your Ajax, HTML, Flex, or Flash apps to the desktop, you can useAdobe AIR. With Adobe AIR, you can build and deploy your RIAs to the desktop using the tools, technologies, and development models you employ today when developing for the browser.
And to create prototypes of your web or AIR apps that help communicate your ideas, you can use Adobe Fireworks.

Ingredients

An integrated development environment (IDE) or authoring tool such as Flex Builder, Flash, Dreamweaver, Aptana Studio, Eclipse, or a simple text editor
A software development kit (SDK) such as Flex SDK or Adobe AIR SDK
Images, videos, or other rich assets such as Flash content
A web host or server space
See RIAs in action
FotoFlexer
Edit your images online with the powerful RIA features in FotoFlexer, built with Adobe Flex.
Nike Air
Experience the feel of the Nike brand in this Adobe Flash site built by Big Spaceship.
Tour de Flex
Explore what you can do with Flex in this Adobe AIR application.

Flex Using Shared Objects

noreply@blogger.com (Jon) — Wed, 10 Jun 2009 19:13:00 +0000

About shared objects

Shared objects function like browser cookies. You use the SharedObject class to store data on the user's local hard disk and call that data during the same session or in a later session. Applications can access only their own SharedObject data, and only if they are running on the same domain. The data is not sent to the server and is not accessible by other Adobe® Flex® applications running on other domains, but can be made accessible by applications from the same domain.

Shared objects compared with cookies

Cookies and shared objects are very similar. Because most web programmers are familiar with how cookies work, it might be useful to compare cookies and local SharedObjects.

Cookies that adhere to the RFC 2109 standard generally have the following properties:

They can expire, and often do at the end of a session by default.
They can be disabled by the client on a site-specific basis.
There is a limit of 300 cookies total, and 20 cookies maximum per site.
They are usually limited to a size of 4 KB each.
They are sometimes perceived to be a security threat, and as a result, they are sometimes disabled on the client.
They are stored in a location specified by the client browser.
They are transmitted from client to server through HTTP.

In contrast, shared objects have the following properties:

They do not expire by default.
By default, they are limited to a size of 100 KB each.
They can store simple data types (such as String, Array, and Date).
They are stored in a location specified by the application (within the user's home directory).
They are never transmitted between the client and server.

About the SharedObject class

Using the SharedObject class, you can create and delete shared objects, as well as detect the current size of a SharedObject object that you are using. The SharedObject class consists of the following methods.

Method	Description
`clear()`	Purges all of the data from the SharedObject object, and deletes the SharedObject file from the disk.
`flush()`	Immediately writes the SharedObject file to a file on the client.
`getLocal()`	Returns a reference to the client's domain-specific, local SharedObject object. If none exists, this method creates a new shared object on the client.
`getSize()`	Gets the size of the SharedObject file, in bytes. The default size limit is 100 KB, although it can be larger if the client allows it.

In addition to these methods, SharedObject objects have the following properties:

Property	Description
`data`	Read-only property that represents the collection of attributes the shared object stores.
`onStatus`	The shared object's event handler that is invoked for every warning, error, or informational note.

You use the SharedObject class to store small amounts of data on the client computer.

Optimizing Flex Applications

noreply@blogger.com (Jon) — Wed, 10 Jun 2009 19:09:00 +0000

Improving client-side performance

Tuning software to achieve maximum performance is not an easy task. You must commit to producing efficient implementations and monitor software performance continuously during the software development process.

Employ the following general guidelines when you test applications for performance, such as using the getTimer() method and checking initialization time.

Before you begin actual testing, you should understand some of the influences that client settings can have on performance testing. For more information, see Configuring the client environment.

Flex Using SSL

noreply@blogger.com (Jon) — Wed, 10 Jun 2009 19:08:00 +0000

A SWF file playing in a browser has many of the same security concerns as an HTML page being displayed in a browser. This includes the security of the SWF file while it is being loaded into the browser, as well as the security of communication between Flash and the server after the SWF file has loaded and is playing in the browser. In particular, data communication between the browser and the server is susceptible to being intercepted by third parties. The solution to this issue in HTML is to encrypt the communication between the client and server to make any data captured by third parties undecipherable and thus unusable. This encryption is done by using an SSL-enabled browser and server.

Because a SWF file running within a browser uses the browser for almost all of its communication with the server, it can take advantage of the browser's built-in SSL support. This lets communication between the SWF file and the server be encrypted. Furthermore, the actual bytes of the SWF file are encrypted while they are being loaded into the browser. Thus, by playing a SWF file within an SSL-enabled browser through an HTTPS connection with the server, you can ensure that the communication between Flash Player and the server is encrypted and secure.

The one exception to this security is the way Flash Player uses persistent sockets (through the ActionScript XMLSocket object), which does not use the browser to communicate with the server. Because of this, SWF files that use sockets cannot take advantage of the built-in encryption capabilities of the browser. However, you can use one-way encryption algorithms written in ActionScript to encrypt the data being communicated.

FLEX Examples

What is Flex 4

Setting tab stops on RichText control in Flex 4

Creating full-screen Flex applications

Adobe Flex 4 SDK

Download and Discuss

Open Source Nightly Builds

Flex 3 SDK

Creating an animated base color effect on a Spark Button control in Flex 4

Flex FORMATTING DATA GRID ROWS AND HEADERS

Example

Result

DataGrid component

CREATING DATA GRID COLUMNS USING THE DATAGRIDCOLUMN OBJECT

Example

Result

flex html tooltip component

uploading an image into flash without server side script using flash player 10

Using a Web Service to populate a DataGrid with XML data

Customizing Flex DataGrid with ItemRenderer

Calling a JavaScript Function from A Flex Application

Flex Associative Arrays

Importing Flash assets into Flex

Handling Java Exceptions in Flex

Learn flex with java

Flex with Ajax

When to use the Flex Ajax Bridge

Requirements for using the Ajax Bridge

Top Flex Tips

Top Things You Need to Know When Working With Flex

Import these projects into Flex Builder

What is a rich Internet application?

Ingredients for RIAs

Ingredients

See RIAs in action

Flex Using Shared Objects

About shared objects

Shared objects compared with cookies

About the SharedObject class

Optimizing Flex Applications

Improving client-side performance

Flex Using SSL