Tag Archives: flex

Catchup

The last two weeks have basically gone by in a blur, so I finally decided to squeeze in some time for an update. At Orange Leap, we’ve been running at warp 11 putting the finishing touches on v1.0 of our product. I’ve been up to my neck in the bowels of Spring Security and attempting to integrate it with CAS and our LDAP server for single sign-on. It has been an absolute beat-down trying to get it all together, and I’ve developed a strong love-hate relationship Spring Security. It makes the simple stuff possible and the hard stuff really hard.

This past weekend, Dallas hosted the first ever Big (D)esign Conference. Organization was a bit rough around the edges, but the conference really rocked. I don’t usually hang much with the artsy design folks, even though it is something that interests me. This was like a breath of fresh air after too much time immersed in hairy backend coding. I met a lot of new Twitter friends and came away with some good ideas. Hopefully I can start back in on some frontend work in the coming weeks to try and apply it.

Some cool tech has dropped that I really want to find some time to get familiar with. Microsoft went live with Bing today, and it looks pretty cool so far. Adobe also dropped the first beta of Flash Builder 4 over on Adobe Labs. I’ve been having a lot of fun with Flex, but need to backburner it until end of June. I also signed up with Ribbit. It looks pretty awesome and is in the queue for brain cycles after I get comfortable with Flex. And I still want to find time to get deeper into Groovy.

Finally, Dallas Tech Fest is just around the corner and I’ve still got a lot of work to do on my presentation. It has been a struggle finding quality time to work at home. Zoe is has decided the best place to watch Elmo is on my lap at my computer, so I have to sneak in work at bath time or after she’s asleep.

Flexible Spring

As I mentioned in my prior post, I’ve been going through the great Flex in a Week from Adobe. I finally hit Day 3 and had a need to play with BlazeDS for the second lesson. Being a fan of the Spring Framework, I decided to use the recently released Spring Blaze DS Integration 1.0rc1 (Spring-Flex). This ended up turning in to a bigger beatdown than I expected, for several reasons.

I really wanted to use the Spring-Flex integration because I like the annotation-driven dependency injection option that Spring brings to the table. Unfortunately, I could not find a single comprehensive document or example showing how to setup a project from end-to-end using Flex and Spring-Flex. I started with my Spring template project, adding in the BlazeDS dependencies and configuration. I then stripped out the stuff I didn’t care about for this example. Then I went digging through the various reference guides and blog posts trying to figure out the correct configuration I needed on both the Java and Flex side.

After about three days of hair pulling, the pieces finally started to fall in to place. Once I understood the configuration, it became a breeze to configure services to be exposed by Spring-Flex and to call those services from Flex via a RemoteObject. I’ve linked the complete Java project and Flex project archive below:

Spring-Flex Project

Flexbuilder Project Archive

There is a README.txt file in the root of the Java project directory that walks through the setup. This project is configured to talk to a MySQL database using an iBatis DAO layer and includes the setup scripts, all run from Ant. The build file also makes use of Ivy to grab dependencies, thus reducing the number of jars I have to include.

The Flex project is configured to talk to the exposed employeeService on localhost, so you’ll need to change the configuration of the RemoteObject if you want to point to a different destination.

Here are some of my lessons learned that will hopefully help others:

#1: Life is easier if you keep BlazeDS’s services-config.xml file in the default location: WEB-INF/flex/services-config.xml. The version of this file that comes with the BlazeDS turnkey download has a small problem. It does not specify default channels, which is what FlexBuilder will use to figure out what is going on. Look at the version I have in the Java file and notice at the top:


  
    
  

You’ll want this in your services-config.xml file if you plan on specifying an application server in FlexBuilder.

#2: And on the subject of application servers, you actually don’t even need to specify the server technology. I built my solution as a standalone Flex project with a standalone Java project and had the two talking together without a problem.

The secret to making it work is in how you configure the RemoteObject in FlexBuilder. Here is the configuration for my RemoteObject:


  
    
      
    
  
  
  
  
  

Specifying the ChannelSet enables you to take control of where the RemoteObject is binding to instead of relying of FlexBuilder magic. Just change the URI to point to the correct location.

There is one little catch. You need to set the FlexBuilder build output directory to Tomcat’s webapps/flex directory (after you have deployed the war file), or you’ll get a security exception about breaking out of the sandbox. I’m guessing that the flex file is looking for the services-config.xml file to figure out what it is supposed to do, and if it is not in the correct directory relative to the SWF file, your application will barf. So deploy the flex.war file from the Java project first, then play with the flex half of it.

#3: Once you have the dependencies sorted out, configuring the Flex broker is literally a one-line configuration option. Check out web/WEB-INF/flexDispatch-servlet.xml in the Java project and notice this line:


That’s all you need. Really. This one line of config uses “sensible defaults” to initialize BlazeDS. It will read services-config.xml from the default location (see tip #1) and setup the endpoints for you based on the configuration.

#4: I’m a fan of annotation-driven configuration for Spring, and Spring-Flex does not disappoint. Here is the implementation of the EmployeeService class:

@Service("employeeService")
@RemotingDestination
public class EmployeeServiceImpl implements EmployeeService {

    @Autowired
    private EmployeeDao employeeDao;

    @RemotingInclude
    public List getEmployees() {
        return employeeDao.getEmployees();
    }

    @RemotingInclude
    public Employee getEmployee(String id) {
        return employeeDao.getEmployee(id);
    }

    @RemotingInclude
    public List getEmployeesByDepartment(String department) {
        return employeeDao.getEmployeesByDepartment(department);
    }

    @RemotingInclude
    public void doCreate(Employee employee) {
        employeeDao.createEmployee(employee);
    }

    @RemotingInclude
    public void doUpdate(Employee employee) {
        employeeDao.updateEmployee(employee);
    }

    @RemotingInclude
    public void doDelete(Employee employee) {
        employeeDao.deleteEmployee( employee.getId() );
    }
}

The top @RemotingDestination tells Spring-Flex this is a service that is going to be exposed via BlazeDS. You can provide an optional parameter specifying which channels to use, if you have several configured. Then, each method you want to expose is annotated with the @RemotingInclude annotation. Methods that should not be exposed can be annotated with the @RemotingExclude annotation.

So if you’re following along with Flex in a Week, or have just been trying to get Spring-Flex up and talking to a Flex application, give the demo a try and look over the source code. This corresponds to the second video of Flex in a Week, Day 3. I wish I would have known some of these things starting out, so hopefully I can save other people some time.

Flex in a Week

One of my unexpected take-aways from the ExtJS conference last month was that I need to start looking at Flex again. This isn’t necessarily for the Flex framework itself, but because of AIR. I’ve started to see a lot more AIR applications popping up, and my Twitter client (Twhirl) is even AIR based. ExtJS with AIR makes for an extremely powerful combination.

So to build a foundation for AIR, I decided to learn Flex. After a strong year of JavaScript, Flex starts to make a lot more sense from a syntax standpoint. And ironically, the best way I’ve found to learn Flex is free: Flex in a Week.

Adobe has produced a truly outstanding series of video training classes for Flex. Although it is structured as five days worth of materials, I’m only getting through half a course each day due to quiet time constraints with a two-year old in the house. I have been very impressed with the quality and level of detail. The videos aren’t full of fluff and get quickly to code. There are exercises interspersed with the training videos, but I’ve passed over them, opting instead to follow along with the videos.

The only downfall to my choice to follow the videos instead of the exercises is that Adobe didn’t make it easy to find some of the supporting pieces you need to follow the videos. For example, there is an XML data file called employees.xml used for a lot of the code in the videos that is nowhere to be found. Ultimately, I found a CSV version of the data file in an AIR Sample, along with the images used for building the employee directory application.

In the interest of helping out others who start on Flex in a Week, here are the supporting files necessary for following along with the code. I’ve only finished the second day, so I’ll try and add any additional parts I find missing.

  • employees.xml – the XML data file with the employee information (right-click to save it)
  • headshot images – the thumbnail images for the directory, both normal and small sized

I’m hoping to finish up the tutorial this week and jump into more complex things with Flex. I’ve been very impressed so far, although not enough to eat crow yet on my negativity towards Flash in general.

What about Flex books? I picked up Programming Flex 3: The Comprehensive Guide to Creating Rich Internet Applications with Adobe Flex and it has been a total disappointment. The book is very poorly structured and it jumps all over the place without a coherent plan. It swings between excessive detail of the Flash engine, followed by trivial, poorly explained examples of the Flex widgets. I may find value in it later as a reference, but am dumping it for now.

I did pick up another book that I really like a lot: Learning Flex 3: Getting up to Speed with Rich Internet Applications (Adobe Developer Library). This one is well structured and gets to the things I’m interested in, not the nitty-gritty details of the Flash player. I would recommend this one for anyone who is at a similar point in their Flex learning experience.

Flash in the Pan

Apple Insider is running a very interesting series of articles about Adobe Flash and its future. The first article in the Flash Wars series covered the history of Flash. The second part jumps in to all the hurdles and competitors Flash faces, from Microsoft to Apple.

I sat in on most the Flex track at Dallas TechFest, and it is an interesting technology. But I also share the same opinion as the author of the AppleInsider artice — Flash/Flex has a rough road ahead of it. One of the biggest points that I think a lot of folks won’t notice in the article is the suggestion that open standards are a competitor to Flex. By open standards, they mean Ajax, JavaScript, CSS and HTML. I reached the same conclusing after playing with some of the first-rate JavaScript libraries out there like JQuery and ExtJS.

ExtJS, in particular, can do about everything Flex can do, and do it without a browser plug-in. It also has APIs around the non-visual aspect of applications that put Flex to shame. Although ExtJS has licensing issues which I’ve griped about before, if you accept it at face value as a commercial product, it really is the best thing going right now for building RIAs.