Posts Tagged Flex

Flex/Flash navigation link problems in Mac OS X

I’ve had one of the weirdest problems last week when a friend reported that our newly designed navigation menu created in Flex was not working on her MacBook.

Basically, I had a couple of moving Flex Canvas’s where I attached mouse click events.

private function homeClicked(evt:MouseEvent):void {

private function updatesClicked(evt:MouseEvent):void {

private function storiesClicked(evt:MouseEvent):void {

private function galleryClicked(evt:MouseEvent):void {

private function getURL(url:String):void {
   var request:URLRequest;
   request = new URLRequest(url);
   navigateToURL((request), "_self");

We had no problems running this on IE, Firefox and Safari on Windows and Firefox on Ubuntu Linux so we got a little worried why it was not working properly on a Mac.

I initially thought that a popup blocker was probably causing the problem with navigateToURL() so I tried exploring changing the AllowScriptAccess parameter to “always” and use Flash/Flex’s support for calling ExternalInterface.

The animated Canvas’s also had rollover and rollout effects but they worked fine on all the mentioned platforms including Mac. So the problem must be with the Mac Flash Player not getting the mouse click events.

After several days of searching we discovered that the div where I placed our Flash object had a negative z-index declaration on its stylesheet which was getting in the way of Mac OS X’s Flash Player ability to receive mouse clicks.

I simply removed the z-index value and we finally got the links to work on those lovely little MacBooks.

Anyway, thanks to all my friends and their MacBooks for helping me with this very tricky problem.

Now we’re off to exploring PaperVision3D…


Comments (1)

Creating Mashups with Adobe Flex and AIR for $10

For a limited time, this e-book will be available for $10 at Apress’ daily deal site.

1590599365 Creating Mashups with Adobe Flex and AIR

Just got myself a copy (which by the way is my 6th e-book deal purchase from Apress).

I should probably get a frequent buyer card (if there’s such a thing).

Leave a Comment

Adobe AIR for JavaScript Developers Pocket Guide

This book has been released under Creative Commons License and is available for download…

Yes, for FREE!

0596518374 Adobe AIR for JavaScript Developers Pocket Guide

You can checkout Mike Chamber’s blog for more details.

Comments (1)

JSF vs Flex Components

When developing JSF applications, I rely heavily on these two sites as reference for the Tag syntax.

With Flex, there’s a similar tool where you can see Flex 3 components in action.

Try visiting and comparing the mentioned sites and you’ll probably have an idea why I’m really excited about developing applications in Flex.

Comments (3)

Flex, BlazeDS and JPA

After several days of playing with Flex, I’ve managed to create a simple Java-based backend using BlazeDS and the Java Persistence API (JPA).

In this post, we will try to implement what used to be a very popular application (during the early days of the Internet), the “Guest Book“.

What you’ll need:

The assumption here is that you are already comfortable with Java and databases, and you just want to know how to make your Flex application communicate to your Java backend.

We now proceed to creating our form Using Flex Builder.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
    layout="absolute" xmlns:local="*">
 <mx:Form x="10" y="10" width="270" height="150">
 	<mx:FormItem label="Name">
 		<mx:TextInput id="guestname" />
 	<mx:FormItem label="Message">
 		<mx:TextArea id="guestmessage" />
 	<mx:FormItem label="">
 		<mx:Button label="Submit" />

Switching to “Design” view should show us the form that we just created.

Look how nice and easy it was to create the form.

But wait, this application doesn’t do anything yet, so let’s move on to adding some logic.

Let’s try to modify the submit button to call our remote object:

<mx:Button label="Submit"

Adding this line alone will cause a compile error because we haven’t told Flex what the guestBookService and guestBookEntry objects are all about.

First we need to create an ActionScript class named which will correspond to our remote JPA entity named (located under the guestbook package).

    public class GuestBookEntry
        public function GuestBookEntry()

        private var _guestName:String;
        private var _guestMessage:String;

        public function get guestName():String {
            return _guestName;

        public function set guestName(guestName:String):void {

        public function get guestMessage():String {
            return _guestMessage;

        public function set guestMessage(guestMessage:String):void {

Notice how the constructor, setters and getters are different from how you would normally do it in Java.

We now update guestbook.mxml to include a reference to our guestBookEntry object (also called a custom component). This should be added as a child of the Application element.

<local:GuestBookEntry id="guestBookEntry"
    guestMessage="{guestmessage.text}" />

The curly braces mean that any changes to the text values of the form elements in guestbook.mxml would be directly applied to the guestBookEntry instance.

That should leave us with one more compile error to deal with, which is that of the missing reference to guestBookService.

Just add the fragment below as a child to Application and we’re all done! At least with the Flex part.

<mx:RemoteObject id="guestBookService"
<mx:ChannelSet id="cset">
        <mx:AMFChannel id="myamf"

I’m sorry if I cannot explain the ChannelSet details as of now, because I’m as clueless as you are. We just need to make sure that they match the values in our BlazeDs backend and we’re good to go.

From your turnkey download, locate a file named blazeds.war, if you’ve done some Struts programming before, this is the same as the struts-blank.war which can serve as a template for new projects.

Import this war as a project in Eclipse WTP, and name this project guestbook (remember that our backend needs to match the entries we added for the RemoteObject and ChannelSet).

When you’re done setting up the project in Eclipse, navigate to “WEB-INF\flex\”. At this point we are only interested in “remoting-config.xml” where we should be defining a reference to our remote object.

Add these lines in between the adapters and default-channels:

   <destination id="guestBookService">

To setup JPA, we need to create a folder named META-INF under src and create a file named persistence.xml. Also, make sure to add TopLink JPA jars and your JDBC driver to WEB-INF\lib.

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0"
<persistence-unit name="guestbook" transaction-type="RESOURCE_LOCAL">
<property name="toplink.ddl-generation" value="drop-and-create-tables"/>
<property name="toplink.jdbc.driver" value="com.mysql.jdbc.Driver"/>
<property name="toplink.jdbc.url" value="jdbc:mysql://localhost:3306/guestbook"/>
<property name="toplink.jdbc.password" value="guestbook"/>
<property name="toplink.jdbc.user" value="guestbook"/>

We now create the Java objects GuestBookService and GuestBookEntry:

public class GuestBookEntry {

    @GeneratedValue(strategy = GenerationType.TABLE)
    private long id;

    private String guestName;
    private String guestMessage;

    public GuestBookEntry() {}

    // getters and setters
public class GuestBookService {

    private EntityManagerFactory emf = null;

    public EntityManagerFactory getEMF() {
        if (emf == null) {
            emf = Persistence.createEntityManagerFactory("guestbook");
        return emf;

    public void add(GuestBookEntry guestBookEntry) {
        EntityManager em = getEMF().createEntityManager();
        try {
        } catch (Exception e) {
        } finally {


The guestbook.war can be downloaded from this location. The file uses an odt extension because of hosting limitations. Please rename to .war accordingly.

Also, JAR files from BlazeDS, TopLink and MySQL driver were not included in the distribution.

Let me know if you encounter any problems while running the application.

Recommended books:

1933988746 1933988347

Comments (11)

Flex Memory Usage

I was trying to modify this stock ticker example to work with Flex 3 when I came upon a surprising conclusion.

“With great power comes great responsibility.”

B0002XK190 Spider-Man / Spider-Man 2

Yes, I’m 100% convinced that Flex is the way to go if you want rich interactive user interfaces.

But that does not come without a cost. I think I accidentally turned the method invocation rate too high using the setInterval() function.

The result, a whopping 1GB memory consumption for firefox. It brought most of my running applications to a crawl.

Is there a way to prevent such conditions? Like running Flex in a sandbox model?

Leave a Comment

Flex-ing Your Way to RIA Land

I’ve had the privilege to work on some proof of concept pages using Flex since last week. Yes, I’ve heard the buzz around RIA and Flex before but I didn’t have the time to play around with the application until now.

I originally thought that it was somehow expensive to develop applications using Flex, but looking at the new pricing models, it seems that the entry barrier to Flex has been lowered down. You can even develop Flex applications for FREE using just the open source SDK and your old IDE but you lose all the design time capabilities the Flex Builder IDE has to offer.

I downloaded the 60 day trial and since the Flex Builder IDE was built on top of Eclipse (which I have been using for Java for a couple of years already), I immediately became very comfortable with the controls.

Coming from a Java background, I wanted to know how developing in Flex was different from what I would normally do in Java, create some JSPs and corresponding JSF Managed Beans for the UI and probably add some pretty cool JavaScript libraries like JQuery or Scriptaculous for some really nice effects.

I did some web search on Flex and found some interesting articles/links which caught my attention:

I wanted to try out writing some Flex applications but our intermittent internet connection last week prevented me from running the online tutorials.

So I just opted with buying the Early Access e-book copy of Flex 3 In Action from Manning.

After reading chapter 1 which can be downloaded freely from the site, I said to myself, “now why didn’t I try Flex earlier?” The argument there about the lack of user interactivity from pure HTML pages made a lot of sense.

I’m still in the early part of exploring Flex, but I must say that I’m really enjoying it and excited about all the new possibilities with regards to what the UI can offer.

Now all I need to do is to connect this to my Java backend and I’m ready to go.

Sounds easy? We’ll see…

Comments (1)