To make Flex datagrid completed, I would like to have the following featues. AutoCompleted Search - Locate the data I want quickly if there are too many rows in my grid. Internationalization - Handle currency, number and date format. Data Export - Output the data in csv format, so users can import to Excel. Pagination - If I give the total number of records, the subset of the data rows and the number of rows per page, the grid should be able to do pagination and fire the events when user clicks on other pages. This article I will show you how to make these happen.

AutoCompleted Search

After you obtain the resultset from the database and pass it back to Flex as list of value objects, Flex, as usual, will convert it to ArrayCollection of value objects and bind it to the datagrid. If you want to filter out the record in the datagrid, you don't need to remove the records from the ArrayCollection. All you need is to provide the implementation of the ArrayCollection's filterFunction. Here is the example: 

...
[Bindable]
private var _data:ArrayCollection;

private function init():void
{
	_data = new ArrayCollection(
	[
	{ "name":"One" },
	{ "name":"Two" },
	{ "name":"Three" },
	{ "name":"Four" },
	{ "name":"Five" }
	]);

	_data.filterFunction = filterFunction;
}

private function filterFunction( item:Object ):Boolean
{
	var name:String = String( item.name ).toLowerCase();
	var searchStr:String = textInput.text.toLowerCase();
	return searchStr == name.substr( 0, searchStr.length );
}
//trigger when user type in search string in the text box
private function handleChange():void
{
	//this will iterate the dataset against the filterFunction
	_data.refresh();
}
...

Here is the caveat. When using a filterFunction in an ArrayCollection, the Flash Player will always search every item. It is not an effective way. To speed it up, Hillel Coren has documented an approach that the subsequent filters will search on the filtered list instead. His approach is elegant and well-documented. Go to his article for detailed. The demo is here. I found Hillel solution quite elegant. Apart from making the search more efficient, his design also modulizes the search code so that it can be unit tested easily.

The idea is to keep the last failed search string in each record. So, if the next search string begins with last search string, it is unnecessary to check each fields in the record before you can say it won't be matched.

//---- SearchDemo.mxml ---
private function filterFunction( item:Person ):Boolean
{
	return SearchUtils.isMatch( item, textInput.text );
}

//--- SearchUtils.as ---
public static function isMatch( item:ISearchable, searchStr:String ):Boolean
{
	if (_enableFasterSearch && !quickCheck( item, searchStr )){
		return false;
	}
			
	var orSearchStrs:Array = searchStr.split( "," );
			
	for each (var orSearchPart:String in orSearchStrs)
	{
		var andSearchStrs:Array = orSearchPart.split( " " );
		var isMatch:Boolean;
				
		for each (var andSearchStr:String in andSearchStrs){
			isMatch = false;					
			for each (var field:String in item.getSearchFields()){
				if (item.matchesField( field, andSearchStr )){
					isMatch = true;
				}	
			}					
			if (!isMatch){break;}
		}	
				
		if (isMatch){
			item.setLastFailedSearchStr( "" );
			return true;
		}
	}			
	item.setLastFailedSearchStr( searchStr );
	return false;			
}
...

There are several things worth to mention here. The search routine is generic b/c it is against the item that implements the ISearchable Interface. The item implements this interface will provide the implementation of the matchesField method. So, the generic search routine can focus on providing features on top of it like 'AND', 'OR' filter and quick check algorithm.

NOTE: After you set the filterFunction, you will only get the filtered record if you iterate the ArrayCollection. If you want to get the full dataset, you need to do: 

for each (var obj:Object in arrayCollection.source)  
{  
     // do stuff  
} 

Again, thanks for Hillel's tip.

I will talk about Data Export in Part 2 of this series.

I always wonder how my Flex application displayed on the Flash Player in browser. Why decompile Flex SWF will give me 2 frames movie? What is SystemManager and how can I get a handle of it? Many of these kind of questions are at the lower level. The level that makes Flex application possible. Normally, we don't need to dive into this to write a Flex application. However, it would make me feel more comfortable to understand this before I advocate Flex as the main part of our company's UI strategy. 

To understand how your Flex application got loaded and display on Flash Player, you can read this great article. I am going to put down the sequences in steps below:

Flex is a 2-frame movie

The first frame of a Flex SWF contains the SystemManager, the Preloader, the DownloadProgressBar and some glue helper classes. Remember, the Preloader is what creates the DownloadProgressBar control which displays the progress of a Flex application downloading and being initialized. The second frame of a Flex SWF contains the rest of the Flex framework code, your application code and all of your application assets like embedded fonts, images, etc.

By creating a 2-frame movie, Flex applications can take advantage of the streaming support built into the Flash Player and a preloader can appear before all of the Flex framework code and your application code are downloaded.

The .swf format is a progressive download format which means that Flash player can access content on frames as they download without having to wait for the entire file to download.

Here are the steps:

1. First, enough bytes for frame 1 are streamed down to the Flash Player.
2. The Flash Player executes those bytes by creating a SystemManager instance.
3. SystemManager instruct the Flash Player to stop at the end of frame 1.
4. SystemManager then goes on to create the Preloader which creates the DownloadProgressBar control and pops that up on the client screen.
5. The Preloader then starts tracking the rest of the bytes streaming in from the Flex SWF. 
6. Once all the bytes for the Flex framework and application code are in, the System Manager goes on to frame 2 and instantiates the Application instance.
7. Once the Application instance has been created, the SystemManager sets Application.systemManager to itself. This is how you, the application developer, can access the SystemManager at a later time.
8. The Application dispatches the preinitialize event at the beginning of the initialization process.
9. Application goes on to create its children. The method createChildren() is called on the application. At this point each of the application’s components is being constructed, and each component’s createChildren() will be also called. For detail, look at component lifecycle section.
10. The Application dispatches the initialize event, which indicates that all application’s components have been initialized. However, at this state, all the components are not yet laid out.
11. Eventually, once all the Application child controls and containers have been created, sized and positioned, the Application dispatches the creationComplete event.
12. Once the creationComplete event has been dispatched, the Preloader removes the DownloadProgressBar control and the SystemManager adds the Application instance to the Flash Player display list. (The Flash Player display list is basically the tree of visible or potentially visible objects that make up your application. When you add and remove child components to your application, your basically just adding and removing them from the display list).
13. Once the Application is added to the Flash Player display list, the Application dispatches its applicationComplete event
14. The Application has been created and is up on the screen ready to be interacted with.
     

Component Architecture

 This is the best video I have found that discuss the component lifecycle in detail - Thanks for Deepa.

Below is summary I took from the video above, in case you don't want to spend an hour to listen to this. However, I really think you should. To start out, Deepa introduced component and skinning architecture "Spark" that is part of Flex 4 Gumbo. Spark is built on top of Halo (ie. Flex 3 component architecture) and components using Halo or Spark can co-exist. Then,  Deepa put her focus to talk about how to develop her custom video component on top of Halo and Spark for comparison. Spart is great that it can factor out the layout code from component.

Halo component lifecycle can be separated into 3 phases:

Phase 1 - Initialization

1. Construction
   
   • Choose the right base class and provide default constructor (ie. zero argument). By extending UIComponent, you inherit all of the lifecycle methods, events and properties. Also, since UIComponent extends from EventDispatcher, your component inherits the ability to listen and dispatch events.
   • Best practice: Call super() and add event listener. Minimal work should occur here.
2. COnfiguration
   • setter and getter for properties.
   • Involve in invalidation and validation cycle. Detail later.
   • Best practice: Setter should not expect the internal children have been created and you want your setter to be fast. Use _xxx for storage variable and have dirty flag for your variable. Throw events out when the internal state of your component get changed.
3. Attachment
   • Component are added to the flash display list by its parent via addChild() call. Without attachment, component lifecycle will be stalled. Nothing is going to happen to your component. So, this is an important step.
   • Display list is a tree of visible or potentially visible objects in your application. At the root of the display list is your main application. Thing like containment hierarchy and rendering order are all maintained by the display list.
4. Initialization- 5 lifecycle actions occur here.
   • preinitialize event is dispatched. It signifies that you as component that has been added to the display list by your parent via addChild().
   • createChildren() - walk through all your children, create, configure and attach them to the display list. Best practice: Call super.createChildren(), construct if not exist and attach your children via addChild(). If your child component is dynamic and data driven, use commitProperties() b/c it gets called at every invalidation and validation cycle. Halo rules: Container --> nested structure of UIComponents --> MovieClip, Video, Shape and Sprite.
   • initialize event is dispatched. It signifies that you and all your children are created and attached.
   • First invalidation/ validation pass occurs,
   • creationComplete event is dispatched. Ready for prime time.

Phase 2 - Update

At this phase, your component is fully initialized and ready for usage. Now, it needs to know how to update. And update occurs when its internal state has been changed by like user interactions. To respond to the changes, component uses the invalidation and validation cycle. The key here is to flag the changed variable dirty during invalidation and later handles it during validation right before rendering. So, you can have many invalidation and one validation that gives better performance via avoiding repetitive work. To better understand this approach, Deepa talks about Flash Player Elastic Racetrack that has 2 parts: code execution and rendering. If either part taking too long, Flash player cannot get its job done faster than 1 frame per second. You will see your application with lag and halt, that is bad! 

1. Invalidation/ Validation can be split into 3 phase.
   
   • InvalidateProperties --> commitProperties
   • InvalidateSize --> measure (measure may not be called. Don't have your code depends on it)
   • InvalidateDisplayLIst --> updateDisplayList

Phase 3 - Destruction

1. Detachment
2. Garbage Collection

What is Mixin?

When you put the [Mixin] metadata just above your class definition and add a static init function to the class like so,

[Mixin]
public class Model {   
	public static function init (systemManager : ISystemManager)   {     
		trace ("I get called first")   
	} 
}

The static init function will be called as soon as your application loads (assuming this class is referenced somewhere in the app), much like static initialization blocks in Java. This is useful if you have some code that you want to run before any of the other code in the class.

Reference

Below are some interesting articles I found related to this article

1. Create Custom Preloader, Ted has an article related to this too
2. Speed up startup loading time
3. Dynamic loading a new custom theme without fraction seconds delay
4. Deepa presentation in MAX
5. Introduction to mixins

The key goals of load testing are:

1. Find out whether your website can support the expected # of concurrent users.
2. At what load does the app break?

To do that, you normally follow these steps:

1. Identifying the primary user path
2. Identifying the expected # of concurrent users. (Both now and future)
3. Set up virtual users to hit the app (load generation capability is the key factor to pick the right tool. You don't want too much hardware investment to generate the load you want, right? )
4. Run the test
5. Analyze the result (throughput under load, avg response time under load)

Challenges to load test Flex app

We have a web application that has Flex frontend talks to J2EE web application backend via AMF. How do we load and stress test this system? We certainly can just perform load test against our backend. However, it may need to expose our service via Servlet and load test it as typical restful web service. If we want to simulate Flex and load test through AMF. We need to find a way to capture the AMF requests from Flex client and replay it in our load testing suite. To do that, we can use Charles http proxy to capture the AMF request and tell JMeter to load test our application via replaying this AMF request. This  article can give us the detail. However, Charles is a commerical product. If you want a free solution, you can try this.

I know that JMeter comes with proxy to record the request. You can try it out to see whether you can exam the AMF message. Let me know if it works!

JMeter

Load is all of the users using your web site at a point in time. Load includes users making requests to your web site as well as those reading pages from previous requests. However, we do need some way of differentiating between all clients and those clients actually making requests to our web site. We use the terms concurrent load and active load (making request) to make this distinction. We use the JMeter to help us to generate the load to our system. In term of load generation, we should make sure that we can simulate the peak load. JMeter is a great load testing tool. I have heard that Google is using this to load and stress test its application.

To use JMeter, follow the steps below:

1. Set up Thread Group - use to model concurrent virtual users and decide how you want the load be generated.
   • Number of threads.
   • The ramp-up period (it tells JMeter the amount of time for creating the total number of threads). At the beginning of a load test, if the ramp-up period is zero, JMeter will create all the threads at once and send out requests immediately, thus potentially saturating the server and, more importantly, deceivingly increasing the load. That is, the server could become overloaded, not because the average hit rate is high, but because you send all the threads' first requests simultaneously, causing an unusual initial peak hit rate. The rule of thumb for determining a reasonable ramp-up period is to keep the initial hit rate close to the average hit rate.
   • The number of times to execute the test.
   • If the client machine running JMeter lacks enough computing power to model a heavy load, JMeter's distributive testing feature allows you to control multiple remote JMeter engines from a single JMeter console.
2. Introduce user think time
3. Specify response-time requirements and validate test results.

To get familiar with it, here are some articles I found it useful

1. Stress testing with JMeter by Daniel Rubio - Linux.com
2. Loading testing with Apache JMeter by Kulvir Singh Bhogal, - Devx.com
3. JMeter distributed testing
4. JMeter recording testing
5. Load test your drupal app scalability with JMeter - Part 1, Part 2
6. Load testing with JMeter - powerpoint - very good!
7. Scalability Factors of JMeter in Performance Testing - response size, response time, protocol, hardware configuration, load generating tool architecture and configuration, complexity of client-side processing.
8. JMeter Tips - Javaworld

 Reference

1. Someone has written a nice article in sys-con to talk about how to load test Flex application.
2. Use FlexUnit for stress testing
3. Test Remote Data Service via FlexUnit
4. Load testing with log replay - interesting idea

Traditional web application is based on request and response model that information is delivered as a single payload and then immediately close the connection to the client. To keep the client in sync, we normally pull the server periodically. This approach may generate unacceptable load to the server. To solve this problem, we want to have a push mechanism from server to client. This is why Comet is defined. Comet is a generic term describing various approaches to send data asynchronously from a Web server to a client without the need for the client to explicitly request the data. It is an essential technique for any real-time event-driven web applications, where the majority of events occur on the server and data must be "pushed" frequently to the client. To achieve this, Comet servers must maintain a continuous connection to each client for the duration of the session.

OK. How to maintain a continuous connection to each client for the duration of the session?

If you try to adapt traditional server to the Comet methodology, it may not scale and often fails after a few thousand simultaneously open connections. A true Comet implementation requires a very different kind of server architecture to be efficient and scalable - Liberator (a solid Comet server that are used by the financial industries. However, it is written in C and not open source although it has FREE edition distributed).

To understand this statement a little bit more, we need to know how traditional web containers handle the request. They are under one request per thread model.

1. The client , typically , a browser sends request for resource to a web server.
2. The server has a listening thread that keeps track of incoming connections.
3. When a request arrives , the server uses one process or thread to process the request.
4. The resource is returned to the client and the connection is closed.

In this model, the number of requests that can be served in a second would depend on two things

1. How many threads are there to handle the client requests
2. How long it takes to serve one request.

If all threads of server are busy, then the incoming requests are put in a queue. The server would return to the requests in queue when server threads become free. The number of requests handled per second is always greater than the number of allowed simultaneous connections. All this is made possible because the time required to process a request is very short. In other words you can server more requests in a second than you have threads.

However, there are one breed of applications that need to hold onto the connections. Think of applications that require real time data coming to clients (stock tickers)  or think of applications where low-latency is required. In the above traditional web model, the browser has to re-connect to get the new data. (Polling). If the new updates "can"  happen with high frequency (e.g. a chat application) then the polling frequency also has to increase .  An alternative to high frequency polling is to use push based applications. For push based application, once the browser connects to server, the server will maintain the connection till the browser time-out (server response stream is not closed) and keeps flushing data down the connection as and when they become available. In servlet container, to hold the connection, your thread in the service method cannot exit the method. Otherwise, the response stream will be closed. So what you do is, you block the thread on some condition within the service method. So the thread will block for your condition. When push data becomes available , this thread writes to response stream and again enters a blocked state. So as long as you hold onto the connection, you can not return this thread to the thread pool. And as more and more "push" connections are established you would run out of threads! To remedy the problem, the possible solutions are:

1. Increase # of server threads.

Flex Push

There is confusion that whether BlazeDS supports real time messaging. Yes it does . In fact, BlazeDS has a full spectrum of channel types ranging from simple polling, to near-real-time polling, to real-time streaming.

1. Simple polling - ping the server from Flex client using the traditional request and response model
2. Near-real-time polling (long polling) - Instead of acknowledging right away, the server could hold the polling request until there’s a message for the client. This ensure the messages are delivered to the client as soon as they become available. The caveat for using long-polling is the thread limitation in most application servers. At this moment, BlazeDS could not support more than a few hundred long-polling clients on most application servers. However, this problem could be resolved once servers like Tomcat start to support asynchronos, non-blocking connection threads. Update: Now Tomcat 6 supports NIO.
3. Real-time streaming - BlazeDS supports real-time message streaming over AMF and HTTP. Unlike long polling, which closes and reopens the connection upon receiving a message, streaming keep the connection open at all times. Streaming suffers from the same thread blocking issue as long polling. A cap must be set so the server is not hang by idle threads.

The reason why people are confused is that Adobe doesn't release its proprietary push solution RTMP to BlazeDS. So, RTMP isn't available as a channel in the BlazeDS configuration files. BlazeDS lives in a Servlet container and hence constrained by one-thread-per-connection limit whereas LCDS has NIO-based channels that can scale up to 1000s of requests. On the other hand, BlazeDS has the advantage that it'll work over port 80/443, whereas LCDS will use some port for persistent connections that would require a firewall configuration. Once the servlet that implements BlazeDS is revved to support Comet Events under Tomcat 6, and then Jetty Continuations, then the long polling technique will be fine.

UPDATE: We are waiting for a solution that supports Comet Events under Tomcat 6. Then BlazeDS can be coupled to the Tomcat NIO HTTP listener and be able to scale as well as any NIO based server software.

I have learnt from this article that you can create a channel set in client side. So Flex can fail-over to other channels until it gets connected or the list is exhausted.

Marc has put an effort to build a better data grid like a spreadsheet in Flex. (check this out)

Reference

Here are the references I used for this article

1. Tuning Apache and Tomcat for Web 2.0 comet application
2. Performance of Grids for Streaming Data - This shows you the performance numbers on various frontend technologies. Again, Flex shows us a good result.
3. Are raining comets and threads? - Comet Daily
4. Comet & Java: Threaded Vs Nonblocking IO
5. JDK 1.6 uses epoll to implement NIO
6. BlazeDS dev guide
7. Achieve performance breakthrough using BlazeDS - Farata System put an effort to write its NIO channel that runs on Jetty 7 and receive promising result.

1. Dow Jone Interactive Chart (commerical - it is exactly what I am looking for)
2. Interactive Bubble Chart (open - although it is not exactly want I want, but if I believe the code can benefit me if I need to customize line chart. I may just need to draw the interactive small bubble on the line to get my job done!)
3. This demo gives you tons of chart samples. They are all great example although none of them satisfy my current need.
4. This demo is close to what I want. From this demo, I notice I can use "annotationElement" to draw on top of the data series. However, the trick is to convert the data points to pixel coordinate in order for me to draw something that can move along with the graph even someone stretches it. To make thing easier, Ely Greenfield has created DataDrawingCanvas that helps us draw on the chart with only data points specified instead of pixel coordinates. This class extends the ChartElement like AnnotationElement does (blog). That is amazing!! Thanks!!!
5. Google Finance Chart (It is exactly what I want. I wonder I can get the source of it)
   
   • I have found the blog and powerpoint of this sample (1/7/2009)
   • Google uses the Flash/ JavaScript integrate kit to get it works (blog) - I heard that it is very nice combination of Flash and AJAX. This is similar to MeasureMap's use of the kit.
   • It is open source example!!! (code). Thanks for Brendan Meutzner!!
   • Brendan also shows us how he created his demo in 5 steps to help us understand how to build it ourselves.
   • Step 1, Step 2, Step 3, Step 4, Step 5 - enjoy!!

Reference

Useful resources:

1. Data Visualization by Tom Gonzalez. (Tom created an open source visualization framework named Axiis. It looks great. Once I get a chance, I will dig into it) - 7/31/2009
2. Building a Flex Component by Ely GreenField
3. Create component and enforce separation of concern
4. http://www.edwardtufte.com/tufte/ (Edward Tufte - famous guy in data visualization)
5. http://www.insideria.com/2008/03/image-manipulation-in-flex.html (Image Manipulation)

This article is written on top of the great work that Sébastien Arbogast has done. He has written 3 articles that showed you how to wire up Flex, BlazeDS, Spring, Hibernate and MySQL with Maven as build process. I have included his articles below as your reference.

1. The Flex, Spring, and BlazeDS full stack – Part 1: Creating a Flex module
2. The Flex, Spring and BlazeDS full stack – Part 2: Writing the to-do list server
3. The Flex, Spring and BlazeDS full stack – Part 3: Putting the application together

I have found Sebastien's work as a good foundation for my own project. To contribute back to the community, I will write a series of articles to show you how can customize and extend the todolist sample.

What is in the Part 1 of the series...

1. Enhancements on the Maven build process
   • Leverage RSL to factor our the framework swc, so the size of the application swf will be reduced. Apart from that, I also take advantage of Flash Player Cache that is available after version 9 update 3 to cache the framework libraries.
   • Clean up the Flex and BlazeDS dependencies in POM as the latest version of the sdk is available and the BlazeDS dependencies are officially available.
   • Include some common reports for maven site generation
   • Embed Jetty web server in the build process for quick deployment and testing
2. Document how to get the sample up on Eclipse for development
   
3. Use Mate as Flex framework
   • Restructure ToDoList sample to leverage Mate framework
   • Factor out Mate as RSL and integrate it with Maven build process via Flex-mojo plugin.

What are in the coming articles...

1. In part 2 of this series, I will show you how to use flex-mojo to build a modular Flex application.
2. In part 3 of this series, I will show you how to test your flex app via FlexUnit (Unit test) and FlexMonkey (Functional test)
3. In part 4 or this series, I will work on server side. I am planning to add monitoring, caching and security to the server side.

Review "ToDoList" sample

Before I start my journey, let me highlight what Sebastien has done first:

1. Sebastien's sample demonstrates how to use Maven as a build process. There are 3 parts or subprojects in his sample. They are:
   
   • todolist-config (configuration files shared by other subprojects)
   • todolist-ria (Flex frontend)
   • todolist-web (Server side that supports the Frontend)
2. All these subprojects are considered as modules of the main project (root POM). Finally, they are combined together into war artifact and ready to deploy to Tomcat or other J2EE webapp server.
3. Flex frontend and backend communicate through a binary RPC protocol - AMF. AMF is considered to be the simplest and fastest remoting approach available in Flex. Recently, Adobe has released BlazeDS as an open source implementation of AMF spec. In this sample, BlazeDS is used. To use BlazeDS, there are few things you need to do:
   
   • Externalize your POJO service via BlazeDS. This sample shows you how to integrate BlazeDS with Spring
   • Make BlazeDS endpoints availabe to the Net via Servlet.
   • Have frontend and backend shared the same BlazeDS configuration files.
4. In this sample, you can also find out how to use flex-mojo maven plugin to compile the Flex frontend code into swf. Apart from flex-mojo plugin, there are other two good plugins worth to mention:
   
   • maven-assembly-plugin - can be used to bundle all the files under a directory into a zip file. It is used by todolist-config to bundle all the configuration files (service-config.xml and remoting-config.xml) into a zip during the package phase.
   • maven-dependency-plugin - can be used to unpack the zip file and move to the place you want. It is used by todolist-web to unpack the config zip during the generate-resources phase.

Enhancements on maven POM

I have modified the sample's maven pom as follows:

• Link to new repository "Sonatype Forge" in the root POM. So, I can use the new version of flex-mojo and simplify the todolist-ria adobe framework dependencies. Apart from that, I also take away the private repository from Sebastein because BlazeDS libraries are available in official maven repository (Note: The BlazeDS libraries available in official maven repo are in version 3.0 instead of 3.0.0.544. So, you need to modify the webapp pom correspondingly).

    <repositories>
        <repository>
            <id>flex-mojos-repository</id>
            <url>http://svn.sonatype.org/flexmojos/repository/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <pluginRepositories>
        <pluginRepository>
            <id>flex-mojos-repository</id>
            <url>http://svn.sonatype.org/flexmojos/repository/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

• Because I link to Sonatype repository, I can have my todolist-ria depends on one flex-framework pom dependency instead of all the swc dependencies. Note that the pom dependency is a way to factor out all the adobe swc dependencies that makes your pom easier to maintain.

        <dependency>
            <groupId>com.adobe.flex.framework</groupId>
            <artifactId>flex-framework</artifactId>
            <version>3.1.0.2710</version>
            <type>pom</type>
        </dependency>

• I include mysql driver as dependency in my webapp pom. I think it is cleaner to bundle it in war. I have also added jetty plugin in the POM so you have a web server embedded in the build process. With this, you can run this sample application right after you check it out from svn (assume you have maven 2 installed). To start jetty, you can issue the following maven command under your webapp project.

project_root> mvn clean install
project_root/jp-web> mvn jetty:run-war

• I have included some reports that will be shown after site generation. You may not be able to do mvn site-deploy because it is linked to my web hosting site. However, you can modify it for your own sake.

Get the sample up on Eclipse

To develop on Eclipse, you can follow the steps below:

1. Create Eclipse project file via running the command below at the project root. This will create 2 eclipse projects. One for todolist-ria and one for the webapp. You noticed that I use the -Declipse.downloadSource=true to include the source files of my dependencies in my eclipse project. Therefore, I can get to the source code if needed.

mvn -Declipse.downloadSource=true eclipse:eclipse

1. Import the projects into Eclipse
2. Add new variable M2_REPO and set it equals to [home]/.m2/repository
3. If you have installed Flex Builder plugin to your Eclipse, you can Add Flex Project Nature to the todolist-ria project.
   • Select Application Server Type: J2EE
   • Put check on "Use remote object access service" with LiveCycle Data Service selected.
   • Set up the path. I have my tomcat installed under C:\tools with default 8080 as port. You should make the changes if you installed it differently.
   • 
   • Remove the generated main.mxml under the src folder.
   • Set index.mxml under src folder as default Flex application file to run.
   • Use Default Flex SDK in Flex Compiler Configuration instead of Server Flex SDK
   • Right click and select Recreate HTML Template if you see error.
   • After all these, you have configured your Flex application pointing to the webapp server and sharing the BlazeDS configuration files. You can verify in Flex Compiler Configuration's Additional Compiler Parameters. See whether you see this: -services "C:\tools\tomcat-6.0.16\webapps\jp\WEB-INF\flex\services-config.xml" -locale en_US
   • Move the war to your tomcat's webapp folder and start it under remote debugging setting. If you are using window, set DEBUG_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,server=y,address=8787,suspend=n under your bin/catalina.bat.
   • Start your webapp via bin/startup.bat
   • Put breakpoint under TodoServiceImpl save method and start remote debugger on localhost:8787
   • Right click the index.mxml and Run As Flex Application.
   • Add a new entry and save it on the flex app. You should see your remote debugger halt at the breakpoint for you to debug.
   • Now you can change your flex code and test it out without leaving your Eclipse. However, if you modify the service in webapp, you need to run "mvn clean install" and deploy the war to the tomcat before your flex code can call your server-side code via AMF.

Use Mate as Framework

If you are not familiar with Mate, click the image below that moves you to a nice presentation.

What did I do to restructure the todolist sample to make it Mate app?

Download

I have made my work available at: www.solutionhacker.com/wp-content/uploads/todolist-jp-modified.zip

Reference

Below are the references I used for the article:

1. Flex mojo compiler user guide
2. Flex mojo dependency scope rules
3. Flex 3 feature introduction: Flex 3 RSL
4. Improving Flex application performance using Flash Player Cache
5. FNA archetype projects 

My company uses Salesforce as its online CRM solution. And I happen to be in charge of this team. So, I get a chance to mess around with it. The more I look into it, the more I like the idea and infrastructure behind it. I am not going to dig deep into the beauty of its architecture in this post. Instead, I would post some useful resources to get you to start playing with it. To begin with, I would open a developer account in force.com. The developer account gives you all the enterprise edition feature with no time limit. The caveats are that  you can only have 1 admin and 1user account, and your account is limited to several MB storage space only. However, it is good enough to get a good taste of Salesforce. After you sign up, you can go to its invaluable Wiki and Discussion Boards to obtain tips and starter tutorials. Salesforce also made 2 ebooks available. They are:

1. Introduction to the Force.com Platform - for beginner
2. Force.com Cookbook - for intermediate user

Now I assume you can do the followings:

1. Create custom objects and fields via SF UI
2. Build object relationships
3. Create validation rule and approval process
4. Customize the layout for object (very limited without Visualforce)
5. Create S-Control
6. Mess around with Salesforce Security Model.

Great! You are now empowered by Salesforce to build a solution for your company. However, you may encounter issues related to its UI limitation like you cannot hide a field when someone selects a particular field on a picklist (resolved by Visualforce) or you cannot populate another object when one object is saved (resolved by Apex Trigger). You may find a way to get around this problem but I bet it is not going to be pretty. If you are interested to unveil the true power of Salesforce, keep reading.

Become a expert user

If you are interested in solving the UI and functionality limitation above, please take a look at the following ebooks:

1. Apex Developer’s Guide
2. Visualforce Developer’s Guide

Become a developer

OK. You are like me, the tools above may not satisfy you completely. To fully control its UI, I would use Flex. To fully manipulate the data model, I would like to use its API. If you are interested in building the next killapp on top of Salesforce platform. Here are some of the APIs that you may be interested:

1. Apex Web Services API – Covers the SOAP API in all its glory. I personally wish this was REST, but SOAP is better than everything but REST.
2. Apex Metadata API – A newer API, the Metadata API allows us to define the structure (fields and relationships) of our custom objects via XML rather than via the declarative point-and-click interface. Unfortunately there’s no Metadata API available for standard objects (Contacts, Accounts, Opportunities) yet, but I expect that to change this year.
3. Apex AJAX Toolkit API – The AJAX Toolkit is primarily used with S-Controls, which are being phased out in favor of Visualforce. To be honest, the AJAX Toolkit has always seemed like a workaround hack to me, and hopefully the combination of Visualforce and Apex Code will render it obsolete.

I will keep this post updated for the new features Salesfoce releases in the future.

Recently, I found out that Adobe has released BlazeDS (subset of LiveCycleDS) that has 4 main advantages:

1. AS3 to Java object communication (no XML passes back and forth is needed!)
2. Boost up performance b/c AMF is a binary protocol
3. Built-in proxy support that gets around the cross domain security issue from Flex in ease.
4. Allow push messaging

I have followed the guideline and set it up. Now my Flex application can call my Java object method without passing xml back and forth. It is awesome! During the setup process, you may experience your flex cannot find the destination set up in the server.

The trick here is to add a services argument to the mxmlc call, something of the form below should do the trick! 

-services “[local path to your java project]/WEB-INF/flex/services-config.xml”

Now you may start enjoying how AS3 talks to your Java Object. However, if  we bypass the Servlet layer in the code, how can we carry session across remote method calls? Great that I have found out how to handle it via this article. In short, you can access Session from your Java object via:

FlexContext.getFlexSession()

Here is the quote I got from the BlazeDS developer guide.

The FlexContext class is useful for getting access to the session and the HTTP pieces of the session, such as the HTTP servlet request and response. This lets you access HTTP data when you use a Flex application in the context of a larger web application where other classes, such as JSPs or Struts actions, might have stored information.

The FlexSession class provides access to an ID and also provides setAttribute and getAttribute functionality. This is useful for storing data on the server that doesn't have to go back to the client. However, FlexSession is not cluster-aware; if a client connects to a different server in the cluster, the client receives a new FlexSession. Nothing stored in the FlexSession attributes is persisted for clustering purposes. The FlexSessionListener class is useful for monitoring who is connected. You add a listener by using the static method to track new connections being made. You receive a reference to the session that was added. Each session can then report when it is destroyed to those same listeners. You use this for monitoring connections that close, and also to clean up resources.

When I looked into the source of FlexContext, I noticed that it leverages ThreadLocal to store context info like request, response and session.

    private static ThreadLocal sessions = new ThreadLocal();  
    /**
     * The FlexSession for the current request.  Available for users.
     */
    public static FlexSession getFlexSession()
    {
        return (FlexSession)sessions.get();
    }

Reference

Below are some of the useful references I have read so far:

1. Jim Boone's Blog

Follow the steps below to get your first Flex salesforce app up in Salesforce.

1. Register a developer edition account from Salesforce. Note: Dev account never expires but the account does come with a few limitations. You can only have two users, one an admin account so that you can build and install applications and the other a normal user account so you can test your work from the perspective of a normal user. The account has a 2MB data limit and you can send mass email. However, It is totally fine for playing around all the features that Salesforce provides.
   
2. Download the Flex Salesforce Toolkit (ie. force.com-air_flex-1.0.zip). This toolkit provides the needed libraries to communicate directly with your salesforce.com database records from within a Flex application, using native ActionScript packages and returning strongly typed classes.The documentation on the classes can be found here.
3. In this zip file, there is a library called as3Salesforce.swc in the bin directory just off the root of this zip file. It is the library you need to associate to your Flex project.
4. Create a Flex project and include the swc library in it.
5. You can follow this screencast to get your first project up.

What you can do after that?

Now you have your Flex application run locally in Salesforce. Here is my TODO list and the solutions of each one.

1. Run your app under your own website and pull info from Salesforce using the same api.
2. Run your app under Salesforce and have it pulled data from your system thru Flex Remoting (HTTPService, WebService, RemoteObject...etc).
3. Can we use the API to pull Salesforce metadata like SControl?
4. How can we provide our application via Apex Exchange?
   • Introduction of Salesforce's AppExchange
   • Using Salesforce's API
   • Packaging for salesforce's appexchange
5. How can we use the Salesforce Flex AIR Toolkit to make have your application deal with Salesforce in offline mode? Look into this article.

What Flex gives you but not original Salesforce UI?

Now you know how to integrate Flex with Salesforce. But what problems that Flex helps us solving but not the original Salesforce UI?

1. Capture user events on the fly and display additional fields or populate bunch of fields.
2. Visual the data via Flex charting.
3. Full control on the layout, and look and feel.

1. Write Once Deploy Everywhere - Flex generates SWF that runs on top of Flash Player VM and behaves consistently across different browsers, even mobile phones later. With this, all the browser compatibility issues are basically offloaded by Adobe.
2. Solid programming model with rich widgets and libraries.
3. AMF makes Flex object to Java POJO communication possible. No need to use verbose XML - Check out BlazeDS.
4. Flex IDE is a plugin in Eclipse that gives stepwise debugging, UI design console, code completion and more. Working with Actionscript is like Java.
5. Flex SDK is open source and free.
6. Great support on video streaming
7. Integrate with HTML, Javascript and CSS, so it is not invasive adoption.
8. Support offline application via AIR - Adobe has been working on the Adobe Integrated Runtime (AIR) that allows for using existing web application development skills to build and deploy desktop applications. AIR is still in early development, but promises to allow developers to use their newly learned Flex skills to build desktop applications. No need to learn Swing, Applet...etc.
9. Provide several RPC methods like HTTPService, WebService, AMF and JSON. AMF is 10x faster than SOAP. James Ward developed his Census Flex application to provide performance benchmarks for the different RPC methods in the mainstream RIA technologies. (Download)
10. You can keep the state in the Flex app and have your server completely stateless.
11. More to come! :)