flexMDI

Ben Clinkinbeard, Brian Holmes and Brendan Meutzner have announceed flexmdi
it's a framework creating and managing MDI interfaces in Adobe Flex.

source code : http://code.google.com/p/flexmdi/

sample : http://www.returnundefined.com/flexmdi/explorer/

flex component compiler parameters

today i need to build a flex swc, so create a new flex lib project and put

compc -source-path . -output bin/MySwc.swc -namespace http://www.mynamespace.com myManifest.xml -include-namespaces http://mynamespace.com

if compile form flex builder, use -namespace http://www.mynamespace.com myManifest.xml -include-namespaces http://mynamespace.com

the myManifest.xml will looks similiar as ( from adobe help sample)

<?xml version="1.0"?>

<!-- SimpleManifest.xml -->
<componentPackage>
    <component id="MyButton" class="MyButton"/>

    <component id="MyOtherButton" class="MyOtherButton"/>
</componentPackage>

then in another felx project you want to use the lib

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myns="http://mynamespace.com">
    <myns:MyButton/>

    <myns:MyOtherButton/>
</mx:Application>

using state pattern in flex

here is a article from adobe, talking about using state pattern in flex.
http://www.adobe.com/devnet/flashmediaserver/articles/video_state_machine_as3_03.html

Using Flex™ 2.0.1 Language Reference offline

sourec : here

After playing with HTML Help Workshop for some time I have managed to compile the Flex™ 2.0.1 Language Reference in CHM format (CHM files are extensively used for documentation and help files).

This is similar to Help Window we get with the Flex Builder. FlexBuilder has a limitation that it doesnt allow using help unless FlexBuilder is open. This is where such a CHM is useful. It also has got search functionality and thus serves the purpose. Here are the steps to create a CHM file:

1. Download Flex Language Reference from livedocs or alternatively take the zip from {Flex Builder installed location}/plugins/doc.zip (thanks to Sreenivas for pointing out this) and unzip it.
2. Say the docs are located on PATH/flexapi.
3. Download HTML Help Workshop from the following link and install it.
4. Open HTML Help Workshop and go to File -> New and select Project. It will start a wizard.
5. Give a name (say flex2.0.1_asdoc ), when asked for name of the project file.
6. After clicking next, select HTML files checkbox (because we already have our doc created)
7. In the next dialog box, press Add and give path of the index.html (PATH/flexapi/index.html)
8. Click Finish to finish the wizard

Press Save to save the project and compile the project and click View Compile file button on the toolbar. You will find that the file created is broken because it has not included all the files. So we need to fix this. Actually HTML Help workshop has a limitation that it doesn’t pick files specified in CSS stylesheets and javascripts. Follow these steps to fix this:

1. Close the project. And go to the project folder and open the .hhp file in any editor. You will find a [FILES] section in the file with index.html listed.
2. Just do a find to find all the class-list.html files in the PATH/flexapi/ folder and add all those class-list files (with full path) after index.html
3. Save this template.html file in the PATH/flexapi/ folder.
4. Add template.html also to the list of [FILES] in .hhp file.

Now open the project again and re-compile the project. Use the CHM created when you are offline and not using FlexBuilder.

Here is a screenshot of CHM file I got. You can also take advantage of the search functionality and here is a screenshot for this.

Flex - Export DataGrid data as CSV using DataGridDataExporter Class

source : flashenabled.wordpress.com/2007/08/03/flex-export-datagrid-data-as-csv-using-datagriddataexporter-class

and here

Flex and Flash file uploading with return data

source: here

The addition of the FileReference class in AS2 made file uploading significantly easier in Actionscript. However, one issue that remained problematic was the ability to get detailed information back from the server once the upload was complete. The best you could do was to get a '200' response saying the file upload had completed, but there was no easy way to return additional data from the server with respect to the uploaded process .... until now.

Adobe has finally added the missing piece to accomplish a nice tight uploading process, the UPLOAD_COMPLETE_DATA event (Flash Player 9.0.28.0). This event fires after the COMPLETE event and contains an important piece of information. The data property of the DataEvent contains the raw data returned from the server after a successful file upload. Finally, a way to return from the server information about the file and/or process. This is especially useful if during the upload process you need to do additional things like create a database record and then return the new database id, or possibly put the file in a different path based on the user, and return the path where the file exists back to the client.

Here's a quick sample of implementing the new event in Flex and also a Coldfusion and PHP script to upload a file and then output and return data back to the client in a clean consistent fashion.

The Flex code. As you can see, this is a very simple example, you select a file and when the upload has completed the results from the server are output into a text area.

flex example blog

http://blog.flexexamples.com/

cairngorm creator

source: http://tylerbeck.com/archives/23/introducing-cairngorm-creator/

Loading name/value pairs using the mx:HTTPService tag

original author : Peter deHaan

source: Peter deHaan's blog

== quote from his blog ==

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" backgroundColor="white" creationComplete="httpParams.send()">  

    <mx:HTTPService resultFormat="flashvars" url="{VARIABLES_URL}" id="httpParams" result="onResult(event)" />  

    <mx:Script>

        <![CDATA[
            import mx.rpc.events.ResultEvent;

            import mx.collections.ArrayCollection;  

            [Bindable]
            private var VARIABLES_URL:String = "params.txt";  

            [Bindable]

            private var paramColl:ArrayCollection = new ArrayCollection();  

            private function onResult(evt:ResultEvent):void {

                var vars:Object = evt.result;
                var key:String;  

                for (key in vars) {

                    paramColl.addItem({key:key, value:vars[key]});
                }

                params.visible = true;
            }
        ]]>
    </mx:Script>  

    <mx:VBox>

        <mx:Label text="Parameters:" />
        <mx:DataGrid id="params" dataProvider="{paramColl}" rowCount="5" visible="false">

            <mx:columns>
                <mx:DataGridColumn dataField="key" headerText="Key" />

                <mx:DataGridColumn dataField="value" headerText="Value" />
            </mx:columns>

        </mx:DataGrid>
    </mx:VBox>  

</mx:Application>

Again, I’m sure there is a nicer way of handling the ResultEvent and converting to a data provider, so you may want to play around with it a bit.

Of course, if you know the names of the parameters in the file that you’re loading, you could also just do something like this:

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="httpService.send()"> 

    <mx:HTTPService id="httpService" resultFormat="flashvars" url="params.txt" /> 

    <mx:VBox>

        <mx:Label text="name: {httpService.lastResult.name}" />
        <mx:Label text="product: {httpService.lastResult.product}" />

        <mx:Label text="powermove: {httpService.lastResult.powermove}" />
        <mx:Label text="skill: {httpService.lastResult.skill}" />

    </mx:VBox> 

</mx:Application>

Oh, and remember, since the params.txt file is being loaded at run-time and embedded during compile-time, the params.txt file needs to be relative to the SWF file and not the MXML file.

Overview Flex Datagrid Component - Flex Tutorials

source: here

Casting Vs The “as” operator

source :
http://raghuonflex.wordpress.com/2007/07/27/casting-vs-the-as-operator/

== quote ==
Just write a Flex app and try the following in a function

var btn:Button = new Button();

var lst:List = new List();

lst = List (btn);

In short, we are trying to cast a button into a list… What do you expect?? Yes… an RTE (Run Time Error)

It reads

TypeError: Error #1034: Type Coercion failed: cannot convert mx.controls::Button@16ab0479 to mx.controls.List.

There are times in your app development cycle, when you are not sure, if a particular casting is allowed or not. You definitely don’t want to throw an RTE (Run Time Error) to the user either. What you end up doing invariably is using a try…catch block to handle the RTE. A better and cleaner alternative to this is using the as operator

Using the as operator has the following advantages

* It does the exact same thing as casting does, if you are casting between compatible types
* It returns a null if the object cannot be casted to a particular type
* No RTEs :)

Once you use the as operator, you can just do a null check to see if the casting is allowed… as below

var btn:Button = new Button;

var lst:List;

lst = btn as List;

if (! lst) {mx.controls.Alert.show(”Sorry you cant cast it this way”); }

But a word of caution. You cannot use the as operator to cast between types in the Top Level classes (to view them , go to the flex language reference). Which means… Say you want to cast a String to a Number, you cannot do,

num = str as Number;

This gives the following error

Implicit coercion of a value of type Number to an unrelated type String

You’ll have to do the age-old way of casting

num = Number(str);

Hope this is useful… at least to beginners


Responses to “Casting Vs The “as” operator”

1. IanT Says:
July 27th, 2007 at 12:07 pm

As an aside - the other use for ‘as’ is for casting to Array.

Because (for historical reasons, I imagine) this:

var a:Object=[1];
var b:Array=Array(a);

results in b being [[1]] (i.e. the Array() operator creates a new array, instead of casting).

In AS2, this was very difficult to get around. In AS3, just use ‘as’:

var a:Object=[1];
var b:Array=a as Array;

other flex framework

http://www.adobe.com/devnet/flex/articles/blueprint.html

http://www.model-glue.com/flex.cfm

http://www.servebox.com/foundry/doku.php

http://www.guasax.com/blog/

http://labs.adobe.com/wiki/index.php/Cairngorm

http://puremvc.org/

http://osflash.org/projects/arp

Cairngorm and SequenceCommand Gotcha

source: here

Another quick post about a gotcha I found when using the SequenceCommand in Cairngorm. I was using an iterator in my command to get a next item and determine if I can use that item or if I need move on to the next...an so on. I had originally decided to just make the nextEvent another event that would run the same command and reuse the logic if I needed to try again. Well since then I had to re-factor the code to work all in one shot since apparently not too far into that sequence of commands I get a stack overflow error. I'm surprised at how quickly it happens since there isn't really much going on. So, I like my re-factored code better anyway and this is a bit of info that you might find useful in the rare occasion you might be thinking about causing a command to basically run itself more than a couple times.

Using An XMLListCollection As A Data Provider and Sorting An XMLListCollection in Flex 2

source : here

Flex 2.0.1 Hotfix 3 - The WebService Fix

source
http://www.darronschall.com/weblog/archives/000270.cfm

Log file location

Log file location
The default log file location changed between the initial Flash Player 9 release and the Flash Player 9 Update. In the initial Flash Player 9 release, the default location is the same directory as the mm.cfg file and you can update the log file location and name through the TraceOutputFileName property. Beginning with the Flash Player 9 Update, you cannot modify the log file location or name and the log file location has changed, as follows:

Windows C:\Documents and Settings\user_name\Application Data\Macromedia\Flash Player\Logs

Macintosh Users/user_name/Library/Preferences/Macromedia/Flash Player/Logs/

Linux home/user_name/macromedia/Flash_Player/Logs/flashlog.txt

Examining linker dependencies

To find ways to reduce SWF file sizes, you can look at the list of ActionScript classes that are linked into your SWF file.

You can generate a report of linker dependencies by setting the link-report compiler option to true. The output of this compiler option is a report that shows linker dependencies in an XML format.

The following example shows the dependencies for the ProgrammaticSkin script as it appears in the linker report:

<script name="C:\flex2sdk\frameworks\libs\framework.swc(        mx/skins/ProgrammaticSkin)" mod="1141055632000" size="5807">

    <def id="mx.skins:ProgrammaticSkin"/>
    <pre id="mx.core:IFlexDisplayObject"/>
    <pre id="mx.styles:IStyleable"/>

    <pre id="mx.managers:ILayoutClient"/>
    <pre id="flash.display:Shape"/>
    <dep id="String"/>

    <dep id="flash.geom:Matrix"/>
    <dep id="mx.core:mx_internal"/>
    <dep id="uint"/>

    <dep id="mx.core:UIComponent"/>
    <dep id="int"/>
    <dep id="Math"/>

    <dep id="Object"/>
    <dep id="Array"/>
    <dep id="mx.core:IStyleClient"/>

    <dep id="Boolean"/>
    <dep id="Number"/>
    <dep id="flash.display:Graphics"/>

</script>

You can examine the list of prerequisites and dependencies for your application definition. You do this by searching for your application's root MXML file by its name; for example, MyApp.mxml. You might discover that you are linking in some classes inadvertently. When writing code, it is common to make a reference to a class but not actually require that class in your application. That reference causes the referenced class to be linked in, and it also links in all the classes on which the referenced class depends.

If you look through the linker report, you might find that you are linking in a class that is not needed. If you do find an unneeded class, try to identify the linker dependency that is causing the class to be linked in, and try to find a way to rewrite the code to eliminate that dependency.

The linker report

Preventing client-side caching

When you test performance, ensure that you are not serving files from the local cache to Flash Player. Otherwise, this can give false results about download times. Also, during development and testing, you might want to change aspects of the application such as embedded images, but the browser continues to use the old images from your cache.

If the date and time in the If-Modified-Since request header matches the data and time in the Last-Modified response header, the browser loads the SWF file from its cache. Then the server returns the 304 Not Modified message. If the Last-Modified header is more recent, the server returns the SWF file.

You can use the following techniques to disable client-side caching:

Delete the Flex files from the browser's cache after each interaction with your application. Browsers typically store the SWF file and other remote assets in their cache. On Microsoft Internet Explorer, for example, you can delete all the files in c:/Documents and Settings/username/Local Settings/Temporary Internet Files to force a refresh of the files on the next request.
Set the HTTP headers for the SWF file request to prevent caching of the SWF file on the client. The following example shows how to set headers that prevent caching in JSP:// Set Cache-Control to no-cache.
response.setHeader("Cache-Control", "no-cache");
// Prevent proxy caching.
response.setHeader("Pragma", "no-cache");
// Set expiration date to a date in the past.
response.setDateHeader("Expires", 946080000000L); //Approx Jan 1, 2000
// Force always modified.
response.header("Last-Modified", new Date());
Invalidate all items in the client cache by making a change to the flex-config.xml file and saving it. This file stores all the options that the web-tier compiler uses. When the file changes, Adobe Flex Data Services recompiles the application SWF file the next time the MXML file is requested.
Delete the cache.dep file in the /WEB-INF/flex/ directory. This forces the server to invalidate all items in its cache.
Use the Flex Data Services server's caching functionality to control client-side caching. You can set the number of files to cache to 0, which means that Flex Data Services does not cache any files. Every request results in a recompilation. Because the SWF file has a newer data-time stamp, the server sends a new SWF file to the requesting client and the file is never read from the browser's cache. To do this, you set the value of the content-size property in the flex-webtier-config.xml file to 0 as the following example shows:

<cache>
    <content-size>0</content-size>

    <http-maximum-age>1</http-maximum-age>
    <file-watcher-interval>1</file-watcher-interval>

</cache>

Add the recompile=true query string parameter to your request to force a recompile of the application

disable trace

When you test your applications for performance, ensure that you use the standard version of Flash Player rather than the debugger version of Flash Player, if possible. The debugger version of Player provides support for the trace() method and the Logging API. Using logging or the trace() method can significantly slow player performance, because the player must write log entries to disk while running the application.

If you do use the debugger version of Flash Player, you can disable logging and the trace() method by setting the TraceOutputFileEnable property to 0 in your mm.cfg file. You can keep trace() logging working, but disable the Logging API that you might be using in your application, by setting the logging level of the TraceTarget logging target to NONE, as the following example shows:


myLogger.log(LogEventLevel.NONE, s);

For performance testing, consider writing run-time test results to text components in the application rather than calling the trace() method so that you can use the standard version of Flash Player and not the debugger version of Flash Player.

About localized Flex applications

Using Flex, you can write localized applications and access localized components. Flex supports static inclusion of localized resources, but not dynamic retrieval of resources at run time.

Subtopics
About resource bundles and properties files
The localization workflow
About resource bundles and properties files
Resource bundles, or properties files, map keys and values by using simple "key=value" syntax. This is similar to Java properties files; the primary difference from the Java properties format is that you store the Flex properties files as UTF-8 if they contain non-ASCII characters.

The Flex compilers find the properties files the same way that the compilers find other source files. You put the properties files in directories that the compiler searches.

You can access the values in the resource bundles in the following ways:

MXML Use the @Resource directive inside your MXML tags.

ActionScript Use the [ResourceBundle] metadata tag to create an instance of the ResourceBundle class in ActionScript.

In some cases, you must also specify the name of the resource bundle to access the data inside it. The resource bundle in your code uses the same name as the properties file.

The localization workflow
To localize an application, you use the ResourceBundle API. You do this by adding [ResourceBundle] metadata tags in ActionScript or @Resource calls in MXML, creating localized properties files and localization classes and put them into a locale directory, and using the mxmlc compiler to compile the main application.

Optionally, you can package libraries of localized properties files and ActionScript classes in a SWC file that you create with the compc compiler. However, a resource bundle SWC file is necessary only when you are creating a library rather than an application.