Coolest thing in Flex???

Does anyone know whats the coolest Flex app running the show?

These are some of my short reviews on some of the cool Flex apps:

Design Color Themes - http://kuler.adobe.com/
Fantastic! For people who don't have much experience in choosing colors this is the place!!

Scrap blog - http://www.scrapblog.com/builder/
It gives a lot of presentation tools to make the blog look great... I liked the template feature. Nice a way to present your blog!! This one is for the artists out there!

The Amgen Tour of California - http://www.amgentourofcalifornia.com/docroot/tourtracker2/index.html
- Doesn't load fast enough. Colors used aren't very great though. UI is just ordinary. Need to appreciate the effort for getting such a flex app developed in a month's time.

Item Renderer

http://blogs.adobe.com/aharui/item_renderers/

Gradient Background for Box via CSS

.gradientStyle {
borderStyle: applicationControlBar;
fillColors: #FF0000, #0000FF;
fillAlphas: 1, 1;
highlightAlphas: 0, 0;
}

Best practices when designing a component

Use the following practices when you design a component:

* Keep the file size as small as possible.

* Make your component as reusable as possible by generalizing functionality.

* Use the Border class rather than graphical elements to draw borders around objects.

* Use tag-based skinning.

* Assume an initial state. Because style properties are on the object, you can set initial settings for styles and properties so your initialization code does not have to set them when the object is constructed, unless the user overrides the default state.

* When defining the symbol, do not select the Export in First Frame option unless it is absolutely necessary. Flash loads the component just before it is used in your Flash application, so if you select this option, Flash preloads the component in the first frame of its parent. The reason you typically do not preload the component in the first frame is for considerations on the web: the component loads before your preloader begins, defeating the purpose of the preloader.

* Always implement an init() method and call the super.init() method, but otherwise keep the component as lightweight as possible.

* Use the invalidate() and invalidateStyle() methods to invoke the draw() method instead of calling the draw() method explicitly.

For More

Flex Security

AJAX JSON Security Issues

Multiple HTTPService Requests

HTTPService requests can be operated in async mode but what happens if the state of your database requires serialization of requests or what happens if you need to debug your server-side code and you are doing this through the use of some kind of log file - async server requests can make debugging a problem even if you have some kind of debugging system that lets you step through your server side code. Found that my async HTTPService requests were failing sometimes for odd reasons until they were run serially one after another through a single HTTPService Object. Chose to run the requests one after another to facilitate debugging and maintaining my database state. Keep in mind when requests are being run async it may be possible for a subsequent request to be run out of order, in case it matters what order the requests need to be run in.

Build a REST Serialization mechanism that guarantees queue-up requests as deep as reqd and then execute them serially since that is the way the REST backend needs the requests in order to maintain database state.

Using several HTTPService calls to plain old REST API's on the

backend. If the end user clicks some of the UI controls multiple times quickly, many calls to these services get queued up, and it can take a long time for all the data to be retrieved. For ex. clicking on a list box item sends requests to refresh all the data, and if the user were to use the keyboard to quickly scroll through the listbox, many many calls would get queued up. Tried setting the concurrency="last" on the httpservices, but it appears the only effect of that is to make the UI change only when the last dataset is received, but still all the service calls continue to be queued and there is a long delay after making many calls. Also tried <httpservice>.disconnect() and .cancel() before making any new backend call but it didn't appear to have any effect as far as preventing many calls from getting queued up.

The maximum number of concurrent HTTP connections allowed to a web server is controlled by the browser. The HTTP 1.1 specification suggests a limit of 2 connections per host, but this requires further consideration if persistent connections are to be used. Some browsers can be configured to accept more, but your users will more than likely have the default settings. IE honors the 2 connections per host suggestion (but to change this you have to edit the registry, see MaxConnectionsPerServer). Firefox sets this value to 8 but does still limit persistent connections to 2 (you can change these settings via about:config). If you were dealing with a closed network or intranet application, you may be able to change your company's IT policy and roll out different default settings, but for public applications There are lots of other tricks that one can use to optimize HTTP requests (e.g. idempotent GET requests you benefit from pipelining etc)... but my point is that there's a bit more to consider than a bunch of simultaneous requests.

Yes, once one of the previous requests completes (either by a fault or result) the next outstanding request can proceed. Note that you can make use of multiple CNAMEs to increase the number of requests made concurrently per host (e.g. Google Maps uses mt0.google.com through mt3.google.com to get 8 concurrent connections to load map data). Persistent / "reusable" / "keep alive" connections are the default behavior for HTTP 1.1 your connections are being re-used for multiple requests already. The period for a persistent connection however is typically much smaller than, say, the life of a J2EE session. Keep alive is merely a hack to optimize the situation when multiple requests are made to the same host in a short period of time. If you had a UI that was comprised of 25 individual assets then you wouldn't want to re-establish 25 connections and perform the usual HTTP handshake for each request (and it would be even worse for HTTPS based connections). HTTP that makes use of "keep alive" should still be considered a stateless situation. A completely different approach for "persistent connections" is the style used by COMET servers and chunked encoding. Here the client immediately establishes a connection to the server on receiving data and the server holds on to the connection until new data is available to push back to the client. This does, however, impact on the number of simultaneous connections that a server can handle because it ties up threads on the server.

CursorManager, DisplayObject, Sprite, Movie Clip

The cursor is basically treated as if its a DisplayObject, which in practice means that its a Sprite, MovieClip, Bitmap or Shape. Most of the examples I've seen use embedded assets, most often a bitmap. But it can be any class that can sit on the display list.

Of course, you're not able to access your specific instance of the class as the CursorManager creates it internally and its not exposed. So, you have to be tricky. Either you create a class that's a monostate (all of the instances of the class share a common state) or have your custom class listen for some particularly events that you're able to get into the display list and to your class. Personally, I'd go for the monostate (more predictable).

You'll need to create a class that inherits from DisplayObject, Sprite would be a good choice. In your class, I'd add a static member that stores the current "size" or "scale". And in the ENTER_FRAME event, have your sprite copy that value into the sprite's scaleX and scaleY members. Basically, it's manual binding (you could probably do some more traditional binding as well, but I'm assuming here that you'd probably be using ENTER_FRAME anyway for some animation).

Pass off your custom cursor sprite class to the CursorManager to use... internally, it will construct an instant as necessary (based on priority of cursors, etc.). On your end, just modify the static state (scale) as necessary. The result will be a cursor that resizes (because the CursorManager's instance of the class is using the same static state that you're manipulating).

If you're embedding an SWF, just embed it and use it inside of your custom class (add it as a child, etc.).

Uploading File to a Java Servlet

When the servlet becomes the URL target of a FileReference.upload() method, it seems that the uploaded file can be retrieved in the inputstream of the post request, i.e. in the inputstream of the Request in doPost() method. The problem is, there are lots of other data as well in that input stream (the actual file uploaded is in a form value called Filedata) and I don't know how to extract just the uploaded file so that I can store it in the machine where the servlet is.
getParameter("Filedata") doesn't work. Does anyone know how to get around this problem?

Check out the below URL for the solution:
http://projects.apache.org/projects/jakarta_commons_fileupload.htm

Whenever one wants to upload something, append the sessionid to the request url. Something like urlRequest=new URLRequest(_servletUrl + servicePath +";jsessionid=" + _sessionId );

Flex External Interface API

http://livedocs.adobe.com/flex/201/langref/flash/external/ExternalInterface.html

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=kb400730

http://tutorials.lastashero.com/2005/10/understanding_externalinterfac.html

http://blog.deconcept.com/2005/08/16/external-interface/

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 enables you to define an interface so your JavaScript can call your ActionScript – FABridge essentially lets you write JavaScript instead of ActionScript.

FABridge Sample Application

Flex References

Adobe Flex Language Reference

More on Adobe Flex

Community Flex

Adobe Flex Showcase: http://www.adobe.com/cfusion/showcase/index.cfm?event=finder&productid=26724&loc=en_us
http://labs.adobe.com/wiki/index.php/Showcase:Flex_Developer_Derby

Adobe Blogs:
http://weblogs.macromedia.com/flexteam/
http://blogs.adobe.com/mikepotter/
http://www.waldosmeets.com/category/adobe-engagement-platform/adobe-flex/
http://www.adobe.com/products/flex/charting/

Flex Blog posts:
http://www.quietlyscheming.com/blog/category/flex/
http://flexarena.blogspot.com/
http://flexibleexperiments.wordpress.com/tag/flex/
http://www.kaffien.com/blog/?cat=3
http://blog.keutgens.de/index.php/archives/category/flex/
http://graemeharker.blogspot.com/
http://renaun.com/blog/category/rich-internet-applications/adobeflex/
http://www.stretchmedia.ca/blog/index.cfm/Flex-Development
http://www.meutzner.com/blog/index.cfm/Flex-Development
http://www.onflex.org/ted/
http://www.brightworks.com/technology/adobe_flex/components_widgets_etc.html
http://flexed.wordpress.com/
http://flexblog.faratasystems.com/
http://viconflex.blogspot.com/

Edit and Compile Flex Apps in Dreamweaver

Rich RDF/RSS reader

Flickr Flex App Photos: http://www.flickr.com/photos/flexapps/

Primitive Explorer: http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html

Styles:
http://flexapps.macromedia.com/flex2beta3/styleexplorer/Flex2StyleExplorer.html

Effects: http://blog.keutgens.de/download/flexEffectExplorer/current/swf/TransitionsAndEffects.html

Flex Chart Range Selector (Googlish)

Some Open source Flex Projects: http://www.igorcosta.org/?p=40

Integrating a Flash Interface into Flex 2

Flash CS3 - copy motion to ActionScript 3.0

Transparent Flex Apps

Must Have Book - RIA Development with Adobe Flex and Java

Understanding Runtime CSS

Defining properties as getters and setters

Adobe Flex Coding Guidelines

FDS Tomcat Guide

Cross Scripting, Embed SWF in Browser, Flash Variables
http://blog.deconcept.com/swfobject/
http://blogs.adobe.com/pdehaan/2006/07/using_flashvars_with_actionscr.html
http://www.web2journal.com/read/283888.htm
http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002201.html
http://blogs.adobe.com/pdehaan/2006/07/using_flashvars_with_actionscr.html
http://www.adobe.com/devnet/activecontent/articles/devletter.html

Transaparent Flash UI

Flex 2 BitmapData Tricks and Techniques

Flex App with no Scrollbars

• minWidth="0" minHeight="0"
• provide width, height in percentage
• verticalScrollPolicy="off" horizontalScrollPolicy="off"
• wordWrap="true" for TextArea Component
• truncateToFit="true" for Label Component

Flex Preloader

package myComponents
{
import mx.preloaders.*;
import flash.events.ProgressEvent;

public class DownloadProgressBarSubClassMin extends DownloadProgressBar
{
   public function DownloadProgressBarSubClassMin()
   {
       super();
       // Set the download label.
       downloadingLabel="Downloading app..."
       // Set the initialization label.
       initializingLabel="Initializing app..."
       // Set the minimum display time to 2 seconds.
       MINIMUM_DISPLAY_TIME=2000;
   }

   // Override to return true so progress bar appears
   // during initialization.  
   override protected function showDisplayForInit(elapsedTime:int,
       count:int):Boolean {
           return true;
   }

   // Override to return true so progress bar appears during download.
   override protected function showDisplayForDownloading(
       elapsedTime:int, event:ProgressEvent):Boolean {
           return true;
   }
}

}

You can use your custom class in a Flex application, as the following example shows:

mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 preloader="myComponents.DownloadProgressBarSubClassMin">
 
mx:Application>

CSS Style Example for Preloader:

ProgressBar {
borderColor: #cc0066;
barColor: #000000;
trackColors: #009999, #99ffcc;
color: #000000;
paddingLeft: 7;
paddingRight: 11;
textIndent: 14;
trackHeight: 21;
verticalGap: 20;
}