Archive → Author
Speaking at Max
Some exciting news I left off the last post (as I thought it deserved its own) is that I have been confirmed as a speaker at Adobe Max Europe. Im going to be speaking about building Flex applications with PureMVC, so a lot like the FlexCamp talk only this time I will be going into more detail…. I’m currently trying to figure out how to communicate something quite abstract without sounding dry, or making the usual mistake of just saying something is elegent without backing it up with facts/justification. Hummm, righto back to keynote!
Lazy sammy
Wow, been a while since I did this!
Since March (when I last posted) I’ve had a rather busy time. I have settled into my new Job at LBi (not that new anymore, I started in February 08) and have finally moved to London.. so no more moaning about First Great (really not very great) Western!
Here are some brief highlights:
Getting published by adobe
Seems someone did read my blog after all (though probably not anymore as I have been a little quiet) as I was contacted by adobe after they read my blog and asked me to write an article… you can read it here. Not sure its very good to be honest… and I might have some different things to say if I were writing it now, but I guess thats all part of the learning process. Mostly I was just flattered that asked!
Building some cool apps
Things have been going well at LBi, and I have been lucky enough to work on fairly awesome apps… probably the most exciting has been a platform game for Centrica. We had a team of 5 actionscript developers working on it, and I think there are somewhere in the region of 1000 class files making it up, so it was no small feat! Its a PureMVC application, with the physics engine Box2D providing the core of the game engine. Check it out here
Speaking at FlexCamp
We use PureMVC to build all our apps in the RIA team at LBi, consequently we’ve ended up knowing a fair bit about it. We got a chance to share some of that experience at FlexCamp the other month. I presented along with Justin Clark (me boss) on the basics of creating Flex applications with PureMVC. I was pretty nervous… but I think it went well, and we did get some good feedback on the day.
phew… I think there may be more, but I’m hungry! so think its time I signed off and shut up 
I hate First Great Western
I really really really hate First Great Western!!!!!… I just needed to get that off my chest!
BlazeDS with Spring
With the release of BlazeDS from Adobe building your business logic in java just became a lot more accessible! In this post I’m going show the basics of setting up a Java, spring based application, then connecting to it from Flex via the flex.messaging.factory.SpringFactory . I’m going to keep the the domain (business logic) as simple as possible, and I’m not going to be persisting anything to a database. This is so I don’t get bogged down in details and can get straight to the point… connecting Flex to Java/Spring with BlazeDS…. so here we go!
What you’ll need.
- BlazeDS
- Spring Framework (I’ve used 2.5)
- Flex 3.0 (I’ll be using Flex Builder, but you are free to just use the SDK)
- Eclipse with Spring IDE plugin
- blazeds-spring-beta1.jar
The Steps!
Creating The Java
- Create a Spring project in eclipse named BlogExample and set the output folder to be war/WEB-INF/classes.
- Find the directory you unzipped the BlazeDS download into and navigate to the following directory {blaze install dir}/tomcat/webapps/blazeds/
- copy the contents of this directory into the new project (you should have copied two folders, called WEB-INF and META-INF. These folders contain the necessary libraries and config files for connecting to Java from Flex)
- Copy spring.jar file from {Spring unzip directory}/dist/ into the war/WEB-INF/lib directory of the project. The project now contains all the necessary library’s to connect Flex to Java. However as we are using Spring we will still need one more jar file which we will get in step 9
- Next you need to create your business logic, I have created a very simple POJO called SimpleBook.java, which contains two properties with getters and setters (you can download the complete project here which contains this simple class).
- Create a new Spring Bean Definition File called beans.xml inside the WEB-INF directory.
- Add the following lines to the new beans.xml file, it tells spring to instantiate SimpleBook and set its properties
<bean id=”myBook” class=”uk.co.ziazoo.example.domain.SimpleBook”>
<property name=”name” value=”my book” />
</bean> - Next we need to edit the services-config.xml and remoting-config.xml so that flex can connect to the application. Your can download mine from here (remoting-config.xml, services-config.xml). Be sure to change the endpoint in the services-config.xml to point to your local tomcat server. I have used the tomcat that come with the BlazeDS download as it comes pre-configured to work with BlazeDS.
- If you take a look within the services-config.xml you will see I am referencing a class named flex.messaging.factory.SpringFactory which doesn’t currently exist in the project. We can get this file thanks to http://www.igenko.org… here blazeds-spring-beta1.jar
- Once you have downloaded the blaze-spring-beta1.jar just copy it into the war/WEB-INF/lib folder
- Next its time to configure the web.xml file. The web.xml file that come with BlazeDS needs a little tweaking to get it to work with our spring app. Firstly the included file uses the older DTD based syntax, we need to change this to the newer XML scheme method. Once we have done that we need to change the <listener> property such that it fits the spring based development ideas. (The changes essentially allow Spring to instantiate the business classes, rather than letting Flex do it… this is crucial to the whole idea of Spring, and its called IoC, Inversion of Control). Once that changes are made the web.xml file should look like this web.xml
- The Java code is now complete, all that remains is to deploy it to the tomcat server, I have done this using Ant, blogging how to setup Ant and starting tomcat are all fairly in depth and very dependent on the system they are being installed on, so I’ll keep quite on that. If you are stuck I recommend reading the build.properties and build.xml files in my project.
The Flex
I am using Flex Builder 3.0, so these steps will vary for other IDS etc
- Create a new project and select the application type J2EE
- Set the root folder to to the context root of the java app withing tomcat ie /Users/Sam/Documents/blazeds_b1_121307/tomcat/webapps/blogexample
- Replace the contents of the main mxml file with the follow main.mxml
- Run the flex app.. and you should see the following
And thats your lot!!!
OOPS… forgot to upload the full Java code… here ya go Java code
Flex Cairngorm code example
Over the Christmas break I finally managed to claw an afternoon of free time together to knock up a little example application. Why bother? Well just about every client I go to meet and potentially work with wants to see some example code first… now since writing code is my job you wouldn’t think that was a very difficult task, but its not quite that simple. Often the projects I work on are very large, worked on by multiple programmers, and dependent on some server side code to run. Even when the projects are small enough to send to someone as an example I’m not even sure I have the legal right to-do so!
With the above in mind I though it was about time I created a little application that I could send around to plug my abilities etc, and you can see it here
A little about how it works
The app is built using Flex 3.0 and the Cairngorm framework. Data is pulled in via XML, and displayed using a simple image viewing component I created.
Why use Flex
Flex enables me to build the same breed of applications we have all been building with Flash for sometime… only with Flex we can do faster, more reliably, with a fuller api and using a decent IDE… whats not to like?
Why Cairngorm
Cairngorm is all about building complex RIA’s in a consistent MVC manner… adobe puts it like this “The Cairngorm microarchitecture is intended as a framework for Enterprise RIA developers”. As you may have noticed the little image viewer I’m using as my example code is no enterprise application, in fact it only has a couple of user gestures, I’m just trying to demonstrate my familiarity with the framework.
I think Cairngorm is very important to the Flex developer community, it offers a well proven methodology for building applications, which separates concerns, promotes testability and leads to very predictable, scalable solutions.
About the view
I wanted to build a little set of classes that would allow me to display items (which could be anything from products to images etc.) in a number of ways, and was simple to extend. The snappyviewer, which is the name of the component displaying the images is an implementation of those classes.
The main classes the view is built around are two interfaces IItemView and IItemDisplayer.
Both interfaces contain a function named display. The display function in IItemVIew is intended to delegate the displaying of items to the IItemDisplayer via composition. The display function in IItemDisplayer is implemented for various display types, ie, displaying items in a grid, or in a row (GridItemDisplayer & SlideItemDisplayer).
To change which type of view the IItemView uses I can set the IItemDisplayer though the dispayer setter function in IItemVIew and hey presto, the view is updated.
You can check out the code by right clicking on the application and selecting Source View.
Any feedback welcome
ps.. you can see the application here
Flex fights back with thermo
Over the last few months I have been keeping my fingers crossed for some real big changes in the Adobe Flex camp, they just arrived!
Since I first heard about Flex over a year ago and started working with it I have been very impressed. It’s a great platform for developers to create amazing web applications on… but for me there has been one big elephant in the room, and that’s the designer developer workflow!
We’ve all seen Blend combined with XAML now, and if you’re anything like me the first thing you thought when you saw it was why on earth cant Adobe do that with mxml!!!! And now it looks like they have with the project codenamed Thermo.
Thermo allows designers to use the tools they love (like the mouse…) and to draw the application as that want it. Thermo will then convert, on the fly (or when imported from a program like photoshop) the graphics into mxml! Perfect! It even allows for visual tweaking of motions and transitions. Its looks the the application I have been dreaming the Flash IDE would become for ages!
I personally can’t wait to see what comes of this… my hope (and this may be pie in the sky right now) is that we can in the not too distant future say goodbye to the Flash IDE (well, us developers at least). This would enable developers to focus on building applications rather that bullying design into behaving like one!
For more info on thermo check out this demo.
yay for events in the display list hierarchies
The new event model in actionscript 3 is glorious! At first I didn’t really appreciate how useful is was… I was pleased to see that you could create custom events as this, among other things, allows you to send custom objects in events without losing strong typing. Though it wasn’t until I came to understand the event flow in display lists that it made a massive difference to my code… (my thanks to Colin Moock for this book, that really helped me get to grips with events in as3)… when you dispatch an event in a display object you can specify a variable in the event constructor (bubbles) which causes the event to propagate through the display list hierarchy, enabling you to listen for events dispatched by DisplayObjects you do not have a direct reference to. This massively helps me centralising my code, de-coupling my code and cuts down on boring code repetition.
moxie makes beta
More great news coming out of Adobe today… Flex 3 (code named moxie) is now in Beta, and you can download the latest SDK, Flex Builder and Flash player from labs!. I’ve just had time to play with Flex builder and I’m already impressed.. the refactoring is better than I hoped, it gives you the option to preview the potential changes in a little file comparison window before committing them.. very neat ! Great work Adobe! …. Ooo, I just saw this video on video.onflex.org, it does a awesome job of demoing the new refactoring features!
more books than I can read!
I’m loving O’Reilly’s safari service… I subscribed last month and since then the learning curve has gone through the roof.. not only do you get to read all the little things you never thought worthy of buying a whole book for.. there are the so-called rough cuts… For me it’s all about this book on design patterns in AS3… many thanks to Bill Sanders and Chandima Cumaranatunge for an awesome read!
more Flex 3 from ted
Its all about Ted Patrick’s blog this week, as more news about Flex 3 is coming out everyday… Today he’s blogged on the Components and SDK Enhancements which is all good news… but for me thus far the best changes are those to the code base… refactoring sounds awesome!!.. especially for someone who always makes embarrassing spelling mistakes in his variable names 