DataGrid Cell Focus

If you want to put the cursor in a specific cell of an editable DataGrid so the user can begin editing right away, then here is the sample code you need:

emails.editedItemPosition = {rowIndex: 1, columnIndex: 1};

Enjoy :)


Flex Effects

Found this site that has very interesting effects that can be a very effective use of transitions within an application. Right-click to view the source and download it for use in your own applications.


MAX Day 2: Quake in FP, client side data services and Flex for Visual Studio

Just sat in the Tuesday keynote and there have been numerous interesting info to come out. Here they are in no particuliar order:

  • Project Alchemy: is a toolset that allows you to convert C/C++ code to AS3 and then run in Flash Player or AIR (they showed C encryption library, Quake and Mario bros running!)
  • Coldfusion Bolt: an eclipse based IDE for next version of ColdFusion (codenamed Centaur)
  • Flex Builder 4: you can easily auto connect to server-side data, includes a network monitor and finally has client side data services (commit/rollback functionality)
  • Visual Studio 2008: now supports Flex development (no details)...also native AMF support in .NET is coming


Thermo now Flash Catalyst

The product known up to this point as Thermo, the designer centric tool that generates Flex code, now has the official name of Flash Catalyst. You can view some information about it at the Adobe labs and a beta will be available sometime next year. It still has a way to go, but it looks very promising. They were actually handing out a preview build at one of the sessions here at MAX, for MAC only however.

AIR Unleashed available at MAX Store

The book I helped co-write "AIR Unleashed" is available at MAX Store for those that are at the conference, so I obviously recommend you checking it out :) We did the book signing today right in front of the store, but wasn't able to blog about it until now due to the wireless connection issues!


MAX 2008 just around the corner

Yup, only 6 days left till MAX 2008 North America starts and I am excited! There are still some spaces left, so those of you still thinking about it, don't waste anymore time, go to the MAX site and register now! For those that have never been before, you will definitely learn something you didn't know from the various sessions; the General Sessions offer exciting sneak peaks into the future of Adobe products and recently they posted the list of Bird of a Feather (BoF) sessions. The BoF sessions are were you get a chance to meet the Flex and AIR teams and much more :)

Also, the MAX 2008 site now contains a list of the MAX Awards finalists (I had the honor of being one back in 2004) and althought I'll wait till the conference to see them in action, I found this preview of one of them, the Car Diagnostic AIR application, pretty cool.



Going to MAX 2008 in San Francisco

Well good news today from my manager, I am going to MAX 2008 in San Francisco! Already registered, just have to pick my sessions now, which I will do in the coming days and hopefully I can book a trip to Alcatraz as well :)


Single Sign On (SSO) with Flex in J2EE container

I've saw this question asked a couple times about a month ago and I tried to answer the question but thought it best to create an example. The question is, how do you prevent a Flex application from showing the login page after the user hit F5 in the browser (or refresh for that matter), after he/she just logged in.

So the main question here is how do you know someone has logged in successfully and don't need to present them with a login view. This is also how to handle the Single Sign On (SSO) case, where you know the user has authenticated himself successfully under host.com/app1 context but is now at your Flex application under the host.com/app2 context and you don't want him to have to re-authenticate himself. Of course we talking here about a Java back-end, so either using BlazeDS or LiveCycle Data Services.

So in my example I used BlazeDS and assuming you configured the security properly, a typical Flex application will display a login view to the user before they can do anything. But if the user has already been authenticated in this web context or another context on the same server, how do we prevent this default behavior? Here is how I do it in some simple words.

When the LoginView initializes, call the server to load the user's information (you will most likely need it at some point anyways). If you get a success response, you have the data and it means the user is already authenticated, so broadcast the LoginSuccessEvent event and you are done! The application will now display its main content. If you get an error response, the most likely cause is that the user is not authenticated and you should remain at the LoginView. It could also mean there is some server-side error (like config issue) which your technical department will have to look into.

If you do have to present the user with the LoginView, then once they click on the Login button, call the setCredentials() method of your RemoteObject and then make the same call to load the user's information.

But there is no better way to see this than to look at an example. So I recommend you download my example using the link below and take a look at the LoginView.mxml file where most of the work is done. The example deploys easily into Tomcat, so I recommend reading the readme.txt file contained within the archive for some installation details. The complete source is included as well.

You can download my example from here. Enjoy!


AIR error 3122 and 3125

Was just working earlier this week on a little AIR application for my own use and I got stumped at one point while using it. The AIR application makes use of the local database and I was unable to update a record; I was repeatedly getting error 3122 during the save operation. After looking up the error description I figured out it was because the database file was read-only. It was because the file was in the application directory, also note this is on Windows Vista (I don't need to tell you about UAC!). I made the file modifiable, but now was getting error 3125. Error 3125 states that the OS simply won't let you update the DB in any way, and I figured it was Vista not letting me do the update. So I moved the file to my documents directory and it worked fine.

So be careful during an installation of a mission critical AIR application, make sure you place your database file somewhere where it can be worked with; either in the user's document directory or in the application storage directory. Especially important on Windows Vista.


Internet wars: Chrome vs the rest

I am not sure my blog post title is correct. Are we now seeing the browser wars 2.0? Or is it the RIA wars? Or is it the war for cloud computing? I guess all those are applicable. Like most geeks yesterday and today, I downloaded and used Google's Chrome Web Browser and I like it. First reason? Its fast! And I'm not the only one to notice that, collegues and friends alike have made that remark. But is there more to it than that? Well, its OmniBar, the integrated address bar and search bar is a nice touch, go to one place, do two things. Also, I like the font it uses, very clean. It simply is, a web browser, the most basic one out there, but for some reason, I really like it.

But don't think Google just created a browser to compete with Firefox and IE. No, no, it is to go way beyond that. Web sites have evolved in the last five years into web applications. We use web applications to find directions, read email, write a document, etc... But now we are looking to harness the power of the desktop. Adobe has done this with AIR, Mozilla has Prism in the works and now Google stepped in with Chrome. In order to see this with Chrome, goto the main page of a web application and use the "Create application shortcut" menu item and voila, an icon on your desktop that allows us quick access to that application. Exactly like Adobe AIR does. Also remember that Chrome integrates Google Gears, so eventually you can add online/offline capabilities to a web application, very intriguing.

Remains to see how Google will push this to the masses, so far only geeks have downloaded it, thats not much traction. It has a build-in VM, but how to do develop for it? Google IDE anyone? How about integration for designers? It has very far to go, but a good start.

The cloud computing/RIA wars have just begun to heat up and I think we are about to see much inovation from different players and it is going to be very fun for years to come.


Download Flex Builder 3 plugin

If you have been searching for the link to download the Flex Builder 3 plugin... then search no more, here is a little hint:
  1. Goto the FB 3 download page
  2. Click the last link at the bottom of the page!

Ottawa Flex Camp recap

The Ottawa Flex Camp was a blast. I saw my old partner in crime Stacy Young who now works at those same Adobe offices in Ottawa and another old college of mine from Optimal Payments. So it was nice to see old friends again, but also a couple of the presentations were interesting as well. One of them was related to a Flex app talking to a USB port using sockets via a local Java app. Also learning that there is a AS3 library for working with MySQL database was an eye opener! That library is hosted here, but I do not recommend using this in a production environment as there would be serious security concerns. Good for prototype apps I suppose.

Definitly would go again, kudos to the Adobe folks for entertaining 150 people for 5 hours :) Can't wait for the next one!

Flex Builder Enterprise plug in

Just came across this, the Enterprise IDE Plugin, this morning. Although I haven't tried it yet I wanted to pass it around and let people try it out. It has features that the community has been asking about, Java-AS code generation, Cairngorm integration and more. Definitely worth a look see. I will take a look at it and post some feedback when I get a chance.


Ottawa Flex Camp

Forgot to mention this a while back, but a Flex Camp is being held at Adobe's Ottawa offices this upcoming August 21st. You can sign up via this website. So for those in Ottawa or in close proximity, like me (in Montreal), try to be there, should be fun!


Download a file from a server with AIR

Been working allot in AIR lately and I just got to the point of adding a feature where a user can download a file from the server. Initially I thought the following simple code would do it:

var req:URLRequest = new URLRequest( "http://localhost:8080/orion/pdfdown" );
req.method = URLRequestMethod.POST;
var f:File = new File();
f.download( req, "bla.pdf" );

However running the application with that causes the following error to be thrown: Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File I/O Error. I really don't understand and after some searching I couldn't find the answer, so I decided to post on Flexcoders, and thanks to Ryan Gravener for posting the solution. In AIR you should use the URLStream class to download files from the server. Like so:

var req:URLRequest = new URLRequest(url);
stream = new URLStream();
stream.addEventListener(Event.COMPLETE, writeAirFile);

private function writeAirFile(evt:Event):void {
var data:ByteArray = new ByteArray();
var file:File = File.documentsDirectory.resolvePath("bla.pdf");
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);


Facebook should use AIR for file uploads

Many people now use Facebook to keep in touch and share information with friends. One of the features used the most I believe is the fact that you can create a photo gallery and upload any number of pictures to it. Thing is, you upload the photos using a Java Applet!

That's probably the only mainstream use of a Java Applet I've ever seen. But sometimes it doesn't work, not even for me, sometimes it just doesn't load on my home PC. Its happened to my brother and to several of my friends as well and they've all come to me for help. Usually it involves re-installing the JRE in order for it to work again as I recall.

So in playing with AIR allot lately, it would seem like a perfect use of the technology. That is what AIR was built for afterall, to allow end-users to interact with their desktops and the web at the same time. In this case the AIR application would allow an user to browse his local pictures and select the ones he wants to include in the photo album (with a preview). Finally he would upload them to his photo album for all of his friends to see. Advantage here is that the download/install process would be easier for end-users (smaller download) and would hopefully be more robust and work 100% of the time.


Remote deployment on JBoss

Not completely Flex related, but I am thinking of deploying our latest AIR application with an LCDS backend on a JBoss 4.2 server (maybe 5.0). Question is, and I've been searching but can't find the answer so far, does anyone know how to do remote deployments of a WAR/EAR to a JBoss server?


Flex automated testing tools improving

When Flex first came onto the scene back in 2004, we loved it but something was missing. How do we test our applications? There were no real solutions at the time, but with the release of Flex 2 (in 2006) we were given FlexUnit (similar to JUnit in the Java world) and also QuickTest Pro (QTP) added support for web applications built in Flex. With QTP would record actions and then play them back and set checkpoints along the way. I've used QTP, but it is not as user-friendly as I would want it to be, so I've been looking and waiting to see what other testing applications would pop up.
And recently I've discovered two other solutions, so perhaps you will want to take a look as well.

This testing tool has been around for while and is used for testing traditional web applications. But recently an add-on has been created to support the testing of Flex applications as well. You can get the add-on here.

This is perhaps my favorite so far. It was built specifically for testing Flex (and AIR) applications, its scripting language is easy to understand and you don't need to compile your application in any special way for it work (unlike QTP). I'm just waiting for the next release before using it on my own applications, cause I'm waiting for certain bugs to be fixed.

So obviously the automated testing tool support for Flex is definitly improving, I've also heard that SilkTest will be supporting Flex in the future as well.

What do you guys use?


Different MessageBrokerServlet in the same EAR

If you work with LCDS or BlazeDS and are about to configure a second web application inside the same EAR, then you might see an error like this when the application starts up:

javax.servlet.UnavailableException: MessageBroker already defined from MessageBrokerServlet with init parameter messageBrokerId = '__default__'

This is because the declaration of both the MessageBroker servlets in both web.xml files looks like so:


The above declaration is the default, and when both servlets are initialized, both are given a default identifier of '__default__'. Thus when a second web application in the EAR is initialized, it fails with the above error. They must have different identifiers and you do this by specifying an additional parameter in the declaration of the servlets in each respective web.xml. The declaration of the identifier should be like so:


So now one of MessageBroker servlet's will have an identifier of '55'. Add the same parameter for the other servlet in the web.xml file of the other web application, with a different identifer and both web applications should operate properly.


PopUpManager doesn't work in AIR Windows

In the process of upgrading a Flex application at work, I've come across a particuliar issue regarding how the PopUpManager works in AIR. In a Flex application you are likely to have code that looks like this:

var win:MyView = PopUpManager.createPopUp( this, MyView , true ) as MyView;
PopUpManager.centerPopUp( win );
win.dataProvider = someData;

The code above creates an instance of MyView (which extends TitleWindow) and displays it as a model window and finally passes it some data so that the user can complete a task. The code above will work in an AIR application in the main application window, but not in subsequent NativeWindows!

So if your AIR application creates a new window (an instance of Window or NativeWindow) and within that window you run the code above, you will see nothing. So you will start wondering where is the instance of MyView? Is it off the screen somewhere? Who knows where it is, you can't see it and your users won't either. It simply doesn't work.

I searched the Flex bug base and did find a bug about this: SDK-12565. Basically it says that the windowing system is not integrated into the PopUpManager and that it should be. So custom controls like the CompletionInput control which I've used for a long time don't work inside NativeWindow instances. So If this issue affects you in any way and want it corrected sooner rather than later, then vote for bug SDK-12565.


UEFA.com uses Flex for MatchDay interface

Being a soccer fan, I am currently following the Euro 2008 tournament that started this past weekend. So today because I was at work, I followed the two games on the UEFA.com website and to my surprise, they are using Flex for their MatchDay interface! That's very cool and shows once again that Flex is being used world wide. Gone are the page refreshes, the UI now auto-updates itself with the latest data on the game and the main view displays the field showing where the latest action occured as described in the match ticker. So if you are a soccer fan, definitly worth a look.

I am anxious for the first game by Greece tomorrow, I'm hoping for a positive result! Go Greece!


Flex easy to learn for Java developers

Since the first release of Flex back in 2004 the main target audience has been Java developers. And this continues to be true even today, especially when you consider the server-side compliments of BlazeDS and LiveCycle Data Services are both Java based solutions. And this is also easily apparent in the real-world and I see it first hand everyday at my company, where everything we built is in Flex and Java.

One of the guys I work with the most, Jade, has developed Java Applets in the past and he picked up Flex very easily, to the point where he is using it for his own personal home projects. Another good example is our architect, who worked with me recently on a brand new project. I let him do a portion of the Flex UI and at one point he even went as far to create a new validator component that received the error messages from the server-side. Like I said, its easy to pick up :) One last example, I upgraded one project from Flex 2 to 3 with another fellow developer at his request, so that he could some of the new APIs that deal with Bitmaps objects.

The similarities between the two languages is uncanny and that really helps bring people over. Thus we use the best technology for creating UIs - Flex - and continue to use Java on the server-side to implement the business logic. It's the best of both worlds.

To get into more details, read my Flex/Java article on the Developer Center.

Always find out the "real question"

Our job as software developers is not only to code, but more importantly to solve problems. Many times we get people who come to ask us to add feature A or B to an application to make it more productive, which is reasonable. There are other times however when we must dig a little further when someone is asking for a new feature, to really know if it is the right solution. My favorite way of doing this is by responding to their question by saying "What is your real question?". Don't just settle for "can you add this other button", or "can you make this faster", but figure out what the end-user is really doing, what he/she is looking to accomplish, what daily task needs to be completed. Because the feature they are asking for, might in fact not be the real solution to their problem.

Best example of this came a couple weeks ago when someone ask me to improve the performance of a report system. Upon learning the details I saw that what the user was doing was running queries the report engine wasn't build for. And upon further questioning, I figured out that all they needed was to enter a record identifier to retrieve all associated records and display them in a grid. Now doing that, is must simpler and faster than trying to re-write a reporting engine to deal with a specific use case.

So remember, don't just do what people say, ask questions, find out what the real need is, what the end goal is and if needed, go sit next to the end user and observer for while, you will be enlightened.


How to get MAC address in Flex/AIR

A colleague of mine was wondering if there was a way in Flex/AIR to retrieve the MAC address of a client's computer. I don't believe there is, but if there some sort of hack, please drop me a line.


Big day: Astro beta, compiler and Google Maps API

Big day in the world of Flex beginning with the beta version of next the Flash Player (codenamed Astro) finding itself on the labs site. We've heard about it since Max 2007 and now we can see it in action. My two new favorites features are the advanced text rendering and the utilization of the GPU for faster graphics performance because of the fact that we mainly build business applications at my company. The other new features are mainly drawing related, so mainly for those working in Flash authoring itself. You can already start building Flex applications and run them against the new player by downloading the required playerglobal.swc library from here.
And last but not least, Google has released the Google Maps API for Flash, so now you can the Google Maps component to any Flex or Flash based application. I've already used the same component but from Yahoo and using that one was easy, so I expect the same from the Google one.


Users love to customize an application

Over the past several years I have found myself coding applications that are used by several departments. And when this is the case, you quickly realize that every department has its own needs. Thus I ended up creating these weird application roles to differentiate which department the user belong too and had the UI for the application adjust accordingly. Simple concept, but creating roles for every specific configurable UI option is not the way to go.

So with the latest version of one application, I did away with the roles concept and simply created a "Preferences" panel where users can configure how the UI works. These options are then saved in a Flash cookie (as known as a Local Shared Object) and retrieved the next time the user accesses the application. This way, every user can configure the application to operate based on his/her own needs. The best example of this is a DataGrid were the user that configure which columns to show or hide. Making such components configurable is not difficult using the Flex framework which is build with this purpose in mind.

I find that this sort of application level configuration is something that has been missing from web applications over the years and is something than can be re-introduced with RIAs. So far this practice has been a success and I will definitly put it into use in future applications as well.

One final note, I allowed users to configure the colors of certain portions of the UI. So it is fun to see as I visit users from time-to-time that each of them has selected different colors. Puts a smile on their faces and thats part of our job :)


Handling user roles in the UI

I've seen this question asked on Flexcoders many times: how do you show/hide various parts of the application? And normally the person asking this question is proposing some complex solution when in fact the answer is simple. First step is to load all the roles for the user from the server-side and then maintain them in some class, typically a User class, like so:

public class User {
public var roles:ArrayCollection;

In a simple scenario, every role is just a string that is held in the roles list as you can see from the sample code above. However, every application is different and it may be more complex in your case.

Next your User class should have a function name isUserInRole( role:String ), analogous to the method used in JSP/Servlets for J2EE applications. This function should take the role provided and make sure it exists in the roles list for the user. If it does, the function should return true, otherwise it returns false.

The final part is to use this logic on various containers and controls. Say you want to give or restrict access to a Save button in your application, your code might look like so:

<mx:Button enable="{user.isUserInRole('EDIT_ITEM')}"/>

In the example above the button will be enabled only if the user has the EDIT_ITEM role. It is that simple.

Some extra things to consider, sometimes you want to completely hide the container/control, so you have to apply the same logic as above but to the visible property of the container/control. One final trick is if you don't want the container/control to take up any space while it is hidden, set its includeInLayout property the same way.

Printing TextArea content

Just this past week an issue in one of our applications was pointed out to me. The feature allows a user to print the contents of a TextArea control, however it does not handle multi-page printing, meaning when the contents of the TextArea actually spans several printing pages. So I started working on adding this capability but after a while was wondering why I wasting my time and starting googling for this solution, since someone must have already done it. Didn't take long to find it actually. Someone has created a PrintTextArea control and included it as part of a project called FlexReport, which you can find here. Only one problem, the website contains no SWC file to download, so I just copied the code and compiled it as a library and used it in my project. I recommend you do the same, before this source code is lost, as this is a very useful control. Many thanks to the developer who created it, wherever you are :)


Week of new beginnings: F3, AIR, DevCenter

So far this week has been all about new beginnings. First, yesterday the most feature rich version of Flex went out the door, version 3.0. That was big because secondly, Flex 3.0 supports AIR, which made its first apperance into the wild and will most likely bring about great innovation in 2008 and beyond. And for developers world wide looking for information and samples, the Adobe Development Center has been updated to make it easier to find said information. Happy coding everyone!!


Ease of deployment is the key

There are many reasons why Flex is growing into a popular platform for creating RIAs: familiarity, great framework, simple yet powerful, etc... But the most important one I believe is ease of deployment. Think about it, even without the server component (now even that is free, see BlazeDS), you can create something pretty compelling. Case in point, just this week one of my work colleagues decided to dive head first into Flex. He comes from a Java/Swing background and started building a small application to learn the ropes, an album manager/viewer for his family and friends. He is loving it, but the best part is that he is going to make it available to his family and friends by hosting it on a server he is already using for other things. Nothing special for him to do, just drop the SWF file on the server and everyone can access it, thats how easy it is and that is why Flex is so successful. Could he have done this so easily in Swing? Nope, the client install would have been tedious, not impossible, but still quite an effort. The small footprint of the Flash player and seemless install is what makes this all possible. Who would have thought 10 years ago the little Flash Player would have been this powerful... great things come in small packages.


VW UK in Flex

My brother and I currently own VWs and my dad owned 2 himself, so it is pretty cool working in Flex to see that a large car company like VW re-worked their UK site with Flex. It is very well done and I really like the animation when you select the color of your car, you actually see two robot arms appear and apply the new paint job. That is what RIAs are all about, useful and fun at the same time, captivating your imagination. And my three-door Golf R32 250hp only costs 27,745.00 euro btw. Only :)


Contributing to AIR Unleashed

I've recently been contributing to a book called AIR Unleashed being written by my partner in crime Stacy Young. The book covers everything you need to know about Adobe's upcoming AIR platform from A to Z, literally! This book covers all the basics from working with windows, file operations and OS integration to the more advanced stuff such as using application frameworks, unit testing and continuous integration. If you are salivating at the chance of getting this book, you can already pre-order it on Amazon.


Flex articles at InfoQ

It's Saturday morning and I am doing my regular tech web rounds and I found that the InfoQ website has no less that 3 Flex articles on their main page. One is about FlexReport, a tool for adding better printing capabilities, and God knows Flex needs help in that department. Second is a Java-based compiler API. I know you are going to say, that this exists today and lots of people of using it via ANT, but this is a bit different. It is an actual API, so you can create a Java class that uses the API to compile a Flex application and in some cases by just having the Flex application in memory, no actual file on disk. Interesting in seeing what that this is going to produce. And last but no least, FlexSpy and tool similar to FireBug but for Flex applications. I guess this is for those you won`t be able to have the Flex Building debugger but still want to look inside their Flex application at run and solve some problem they are having, big thumbs up here.


Flex 3 and AIR Tour

With the new year in full swing, Adobe will be making a pre-release tour to promote the upcoming Flex 3 and AIR releases. Below is the official blur from Adobe...enjoy!

Flex and AIR User Group Pre-release Tour

Flex 3 and AIR are getting close to launch and in preparation, the Adobe
Platform Evangelist team is traveling to select cities to show off the
great new features and some brand new demos.

Flex 3 is a feature-packed release, adding new UI components like the
advanced datagrid and improved CSS capabilities; powerful tooling
additions like refactoring; and extensive testing tools including memory
and performance profiling, plus the addition of the automated testing
framework to Flex Builder.

Adobe AIR is game-changing in so many ways, extending rich applications
to the desktop, enabling access to the local file system, system tray,
notifications and much more. Now you can write desktop applications
using the same skills that you've been already using to create great web
apps including both Flex and AJAX.

Don't miss out on the opportunity to see and hear about this highly
anticipated release of Flex 3 and AIR during this special pre-release
tour. Plus, in addition to giving away some one of a kind Flex/AIR
branded schwag, we will also be raffling off a copy of Flex Builder 3
Professional (pending availability) and a full commercial copy of CS3
Web Premium at this event!

Check out the comprehensive listing of dates at flex.org/tour to see if
the tour is coming to your city!