Flex-AIR

Flash Player Penetration

2010-04-05T15:48:00.004+05:30

Flash 9 has now reached ~99% of the computers as of Dec-2009. I don't need to bother about Flash 8 now.

Detailed figures are available on :

http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

Sorting an ArrayCollection

2009-07-03T14:37:00.002+05:30



public function sortCollection(arrayCollection : ArrayCollection) : void
{
    //Create the sort field
    var dataSortField:SortField = new SortField();

    //name of the field of the object on which you wish to sort the Collection
    dataSortField.name = "name";
    dataSortField.caseInsensitive = true;
    
    /*
    If you wish to perform numeric sort then set:
    dataSortField.numeric = true;
    */
   
    //create the sort object
    var dataSort:Sort = new Sort();
    dataSort.fields = [dataSortField];
 
    arrayCollection.sort = dataSort;
    //refresh the collection to sort
    arrayCollection.refresh();

}

compilation error in Variable declaration

2009-06-06T07:47:00.005+05:30

If you see the following exception and unable to figure out what is the reason. Don't panic. Just relax and look for a syntax error among the variable declarations in the last set of files you edited after which this error started coming.
Flex3 compiler and Flex3 Builder is unable to figure out such syntax errors:
http://bugs.adobe.com/jira/browse/SDK-15030



[mxmlc] Error: macromedia.asc.parser.MetaDataEvaluator$KeyValuePair

    [mxmlc] java.lang.ClassCastException: macromedia.asc.parser.MetaDataEvaluator$KeyValuePair
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.SetExpressionNode.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MemberExpressionNode.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.ListNode.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.ExpressionStatementNode.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.ClassDefinitionNode.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.StatementListNode.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.MetaDataEvaluator.evaluate(Unknown Source)
    [mxmlc]     at macromedia.asc.parser.ProgramNode.evaluate(Unknown Source)
    [mxmlc]     at flex2.compiler.as3.Compiler.analyze3(Compiler.java:531)
    [mxmlc]     at flex2.compiler.mxml.InterfaceCompiler.analyze3(InterfaceCompiler.java:378)

Some examples where the above exception will be reported by mxmlc are :



public var myButton = String = null;
public var myButton : String = null; = null;

Location of Flash SharedObject (cookie)

2009-06-04T23:04:00.003+05:30

Shared objects are stored in .sol files located in the Flash player directory of the user's profile:

* Windows Vista : C:\Users\{user-name}\AppData\Roaming\Macromedia\Flash Player\
* Windows XP : "C:/Documents and Settings/{user-name}/Application Data/Macromedia/Flash Player"
* Linux : /home/{user-name}/.macromedia/Flash_Player/
* Mac : /Users/{user-name}/Library/Preferences/Macromedia/Flash Player/

Flex4 - Gumbo beta released

2009-06-01T17:01:00.001+05:30

Overview:

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo

Download:

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

DataGrid - Extracting edited Value from DataGridEvent

2009-06-01T16:05:00.006+05:30




    private function saveValue(event:DataGridEvent) : void
    {
        if(event.reason == DataGridEventReason.CANCELLED)    
           return;
        var newValue : String = TextInput(event.currentTarget.itemEditorInstance).text;
        var prevCellValue : String = myDataGrid.selectedItem[event.dataField];
       
        if( prevCellValue == newValue)
           return;
        Alert.show("New value :: "+newValue);
    }

    ...
    ...

 <mx:DataGrid id="myDataGrid" width="100%" dataProvider="{defCreativeVals}" editable="true" itemEditEnd="{saveValue(event)}">
 <mx:columns>
     <mx:DataGridColumn headerText="Column" id="colColumn" editable="false" dataField="name"/>
     <mx:DataGridColumn headerText="Value" id="colValue" editable="true" dataField="value" />
 </mx:columns>
 </mx:DataGrid>

Location of flashlog.txt

2009-01-12T11:44:00.003+05:30

The output of trace statements is logged to flashlog.txt in the debug version of Flash l
Following is the location of flash player log file (flashlog.txt) on various operating systems.

Windows Vista : C:\Users\{user-name}\AppData\Roaming\Macromedia\Flash Player\Logs
Windows XP : C:\Documents and Settings\{user-name}\Application Data\Macromedia\Flash Player\Logs
Linux : /home/{user-name}/.macromedia/Flash_Player/Logs/
Mac : /Users/{user-name}/Library/Preferences/Macromedia/Flash Player/Logs/

Flex3 licensing

2008-04-01T15:35:00.006+05:30

Applying Flex3 license:

http://livedocs.adobe.com/flex/3/html/help.html?content=configuring_environment_2.html#212596

Flex Licensing model - Flex3 vs Flex2

http://raghuonflex.wordpress.com/2008/02/19/changes-in-flex-beta-3-licensing-model/

Changing Tooltip display time

2008-02-06T23:06:00.000+05:30

ToolTipManager.hideDelay = 20000; //20 sec -> specify the value in milliseconds

Enable the ToolTip to support HTML
http://www.flex-flex.net/blog/article.asp?id=18

Changing Default Busy Cursor in Flex

2008-02-06T16:13:00.000+05:30

Do the following during the initialization of the Flex Application to change the default busy cursor of the Flex Application to a cursor of your choice :

[ Embed(source="mybusycursor.gif") ]
public static const myBusyCursor : Class;

StyleManager.getStyleDeclaration("CursorManager").setStyle("busyCursor",myBusyCursor);

DataGrid Headerrenderer - Header Tooltip

2007-08-18T12:02:00.000+05:30


package mypackage
{
  import mx.controls.Text;

  public class DGHeaderRenderer extends Text
  {
        public function DGHeaderRenderer()
        {
              height = 20;
        }
   
   
        override public function set data(value:Object):void {
              super.data = value;
        
               this.toolTip = "Click to sort by this column or reverse sort order.";
               super.invalidateDisplayList();
        }
  }
}

and use the above as
<mx:DataGridColumn id="mycol" headerText="Col" dataField="col1" headerRenderer="

mypackage.

DGHeaderRenderer"/>

http://www.cflex.net/showFileDetails.cfm?ObjectID=443&Object=File&ChannelID=1

View Demo

Opening .rar files on Mac OS

2007-07-28T01:15:00.000+05:30

You can use one of the following to open rar files on Mac OS

http://www.unrarx.com/

http://www.xs4all.nl/~gp/MacPAR_deLuxe/

Key Codes

2007-07-21T02:03:00.000+05:30

BACKSPACE - 8.
CAPSLOCK - 20
CONTROL - 17
DELETEKEY - 46
DOWN - 40
END - 35
ENTER - 13
ESCAPE - 27
HOME - 36
INSERT - 45
LEFT - 37
PGDN - 34
PGUP - 33
RIGHT - 39
SHIFT-16
SPACE-32
TAB - 9
UP - 38

Refer following link for all the keycodes:
http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00001113.html

Expo9 — free ad server for online publishers

2007-07-11T11:20:00.001+05:30

http://www.exponential.com/news-events/no-cost-ad-serving-solution.jsp

http://venturebeat.com/2007/06/20/expo9-another-free-ad-server-for-online-publishers/

ActionScript 3 Books

2007-07-06T01:04:00.000+05:30

ActionScript 3 Cookbook : Download here

Programming ActionScript 3 : Download here

Adobe Flex 2.0 Developer Certification Examination

2007-07-03T11:44:00.000+05:30

1. Flex2 exam prep guide
http://partners.adobe.com/public/en/ace/Exam_Guide_Flex2.pdf

2. Flex2 examination specifications - Flex20Blueprint.pdf
http://www.geocities.com/bhuvangupta/flexblog/certification/flex20blueprint.pdf

Increasing FlexBuilder heap size on Mac OS

2007-06-29T14:26:00.000+05:30

Increasing FlexBuilder heap size on Mac OS

Go to Applications -> Adobe Flex Builder 2
Right click on "Flex Builder" app
Click "Show Package Contents"
Browse to 'Contents->MacOS'
Open 'FlexBuilder.ini'
Increase values of 'Xmx' and 'Xms'

You can also watch a screencast on a similar issue at http://www.brooksandrus.com/blog_assets/screencasts/eclipsejvmheap/

Passing parameters to SWF

2007-06-27T16:58:00.000+05:30

Open index.template.html (embed html)

Browse to function "AC_FL_RunContent" under "else if (hasRequestedVersion) "
Update 'flashvars' to pass appropriate parameters

1. Passing static parameters
AC_FL_RunContent(

"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"flashvars",'param1=value1&historyUrl=history.htm%3F&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"wmode", "opaque"

);

Inside your flex application you can access the above as:

Application.application.parameters.param1

This will give you the result : 'value1'

2. Passing dynamic parameters or parameters typed in the url
e.g. http://localhost:8080/flextest/DirectLinks.html?a=b&c=d

AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"flashvars",'urlparams='+escape(window.location.search)+'&historyUrl=history.htm%3F&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"wmode", "opaque"
);

Inside your flex application you can access the above as:

Application.application.parameters.urlparams

This will give you the result : '?a=b&c=d'

Flex3 beta released

2007-06-11T09:44:00.000+05:30

Important links:

Flex3 release notes

ButtonBar Panel

2007-06-01T14:01:00.001+05:30

ButtonBarPanel : This is an extension of Panel in which a set of buttons can be added either on the header or footer.
Features:

Extension of mx.controls.Panel , so it inherits all the properties of a Panel
The buttons can be added either to the header or on the footer
separate ClickHandler can be specified for each button.

Look at the ButtonBarPanelTest.mxml in the source for usage.

View Demo
Download Source

Extending FlexBuilder Trail License

2007-06-01T09:29:00.000+05:30

Not sure why Adobe has made licensing check in FlexBuilder so simple.
Currently FlexBuilder stores the timestamp in a temporary file.
So if someone just deletes that file, the flexbuilder trail license is reset.
I don't think I should be revealing the name of the file, its for you to find out ;-)

Enabling both HTTP and HTTPS access to your Flex Application

2007-05-30T11:02:00.000+05:30

To enable both HTTP and HTTPS access to you Flex app, you need to do the following:

1. Open remoting-config.xml (can be located at /WEB-INF/flex)

2. Look for <default-channels>

3. Add reference to the secure channel
<default-channels>
<channel ref="my-amf"/>
<channel ref="my-secure-amf"/>
</default-channels>

4. Define "my-secure-amf" in "services-config.xml" if not aleady defined.
<channel-definition id="my-secure-amf" class="mx.messaging.channels.SecureAMFChannel">
<endpoint uri="https://{server.name}:{server.port}/{context.root}/messagebroker/amfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/>
</channel-definition>

Single ItemRenderer for Multiple Columns in a DataGrid

2007-05-24T10:55:00.000+05:30

Many a times we have similar columns in a datagrid and are required to be rendered in a similar manner with only little variations like formatting of the column. It is redundant in such a case to write a separate ItemRenderer per column. A better approach would be to write single ItemRenderer and pass properties to the ItemRenderer to identify a particular column.

This can be achieved by settings the ItemRenderer to column using Actionscript.
The catch is to pass properties to ItemRenderer using ClassFactory.properties method.

http://livedocs.adobe.com/flex/2/langref/mx/core/ClassFactory.html

Here's the sample code:

var colRendererFactory:ClassFactory = new ClassFactory(columnRendererClass);
colRendererFactory.properties = {columnName:"mycol1"};
column1.itemRenderer = colRendererFactory

var colRendererFactory2:ClassFactory = new ClassFactory(columnRendererClass);
colRendererFactory2.properties = {columnName:"mycol2"};
column2.itemRenderer = colRendererFactory2;

This way you can have the same itemrenderer for multiple columns and can do different styling for each column based on the properties passed.

Adding Total Row at the end of DataGrid

2007-05-23T15:50:00.003+05:30

Algo:
====

1. Create two datagrids and put both in a VBox. Set the 'verticalGap' of the VBox to zero.
2. First datagrid contains all the rows while the second one contains only the total row.
3. Second datagrid has
a) showHeaders = false
b) rowCount = 1
4. Dataprovider of the First datagrid is the arraycollection containing the Objects/data representing various rows
5. Dataprovider of the Second datagrid is the arraycollection containing ONLY one item which contains the total dataobject.

e.g.
The code would be something like :

Click here for demo
Click here for the source code

Approach 2
Another approach has been mentioned at:
http://blogs.adobe.com/aharui/2007/04/datagrid_footers.html

But the above implementation doesn't take care of resizing columns. In order to add that support:
1. add following function to FooterDataGrid
public function recreateBorder() : void
{
removeChild(DisplayObject(border));
border = null;
createBorder();
}

2. call this function on the "columnStretch" event i.e.

columnStretch="{dg1.recreateBorder()}" >

Click here to see the demo.

Exporting Datagrid data to excel

2007-05-15T07:20:00.000+05:30

This is a updated version of http://www.cflex.net/showFileDetails.cfm?ObjectID=298&Object=File&ChannelID=1

Algo:
===
1. Convert the datagrid data to csv string
2. Post data to a servlet
3. Servlet returns the same csv string back with content -type of the HTTPResponse set to "application/ms-excel"

1. Convert the datagrid data to csv string
This is a generic version and should work with any datagrid.


  public class DataGridCSVTransformer
    {
        private static var csvSeparator : String  = "\t";
        private static var lineSeparator = "\n";
        
        public static function toCSV(dg : DataGrid) : String
        {
            var str : String = "";
            for(var i : int = 0; i <>
            {
                var dgc : DataGridColumn = dg.columns[i];
                if(!dgc.visible)
                    continue;
                str += "\""+dgc.headerText+"\"";
                if(i < (dg.columnCount -1))
                    str += csvSeparator;    
            }
            str += "\r\n";
            var rowCount : int = dg.dataProvider.length;
            
            for(var j:int = 0; j <>
            {
                for(var k : int = 0; k <>
                {
                    var dgc : DataGridColumn = dg.columns[k];
                    if(!dgc.visible)
                        continue;
                    var obj : Object = null;
                    if(dg.dataProvider is ArrayCollection)    
                        obj = (dg.dataProvider as ArrayCollection).getItemAt(j);
                    else 
                        obj = (dg.dataProvider as Array)[j];
                    
                    str += "\""+dgc.itemToLabel(obj)+"\"";    
                    if(k < (dg.columnCount -1))
                        str += csvSeparator;    
                }
                if(j < (rowCount - 1))
                    str += lineSeparator;
            }
            
            Alert.show("String :: "+str);
            return str;
        }
    }

2.  Post the CSV data to servlet 
private function doPost(event:Event) : void
           {
                   var csvConverter :

DataGridCSVTransformer = new

DataGridCSVTransformer();
                  var dgCSV : String =

csvConverter.toCSV(dg);

                var url : String = "http://localhost:8080/flextest/reports/genreport";
               var urlr : URLRequest = new URLRequest(url);
               urlr.method = "POST";
               var urlv : URLVariables = new URLVariables();
               urlv.reportdata =

dgCSV

;
               urlr.data = urlv;
               navigateToURL(urlr,"_blank");
           }

3. Servlet returns the same csv string back with content -type of the HTTPResponse set to "application/ms-excel"

public void generateReport(HTTPServletRequest req, HTTPServletResponse res)
throws ServletException, IOException
{
String csvData = req.getParameter("reportData");
res.setContentType("application/ms-excel");
res.getOutputStream().print(csvData);
}

Open source flex projects and 3rd Party Flex Components

2007-02-02T10:07:00.004+05:30

There are a number of useful Flex projects and components being developed by various Flex gurus for the Flex community.
This post is an attempt to list them down at a single place:

1. Flex ANT Tasks
http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks

2. Flex Lib : A combination of various flex components

http://code.google.com/p/flexlib/

AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

3. FlexUnit : U testing framework for Flex
http://code.google.com/p/as3flexunitlib/

2007-01-25T23:45:00.000+05:30

Specifying Flex component's width and height in 'percent' ActionScript

Instead of using 'width' and 'height' attributes, use 'percentWidth' and 'percentHeight' field.

e.g.
var btn : Button = new Button();
btn.percentWidth = 90;

the above snip sets the percentage width of the button to 90%

2007-01-25T11:27:00.000+05:30

Rendezvous with Adobe Flex2

Now its been about 5 months since I have been working on Adobe's Flex2.
Its really an awesome technology to develop RIA.
Since I had some good Java Swing experience, it wasn't very difficult to learn it.
Having learnt lot of things about Flex in past months, I am now planning to share my learnings with Flex developer community.
So keep a watch...see you all soon !!!

cheers