Scott Mebberson

Icon

Web Technologist

July 9, 2009 • 12:12 pm 0

MATE: Responding to events

Recently, I embarked on a personal project to learn about the Mate Framework, which I’ve started hearing more and more about. We’ve successfully used Cairngorm in dozens of Flex/AIR projects at Enpresiv and I thought it was time to try out Mate (apparently pronounced mah-teh).

I’m glad I did, because it is an awesome framework with much flexibility making it suitable for many different types of projects. One of my favourite things about the framework is how quick and easy it is to integrate. It doesn’t force you to use all Mate concepts either, providing endless options for partial integration into existing projects that might just need a little structure.

One of the issues with Cairngorm that a lot of people have trouble with is easily responding to events/commands within a view (albeit the event that dispatched the event or not). I was happily surprised when I found out this is one of the easiest things to do within Mate, and there are two ways to do it!

Mate advocates the Dependency Injection pattern over the Model Locator pattern which Cairngorm advocates. Dependency Injection is a fantastic concept and truly promotes reusable views as the view needs no knowledge of the framework. Your view doesn’t really need to respond to an event directly, it just receives only the required or updated data it needs.

The second means for views to directly respond to events is using the Listener tag, which simply could not be any easier to work with.

I’ve worked up a basic yet focussed example on two options for repsonding to Mate events within views.

I plan on discussing other Mate features in future posts, but thought this was a great starting point as it’s the source of pain for many Cairngorm developers. Although, Universal Mind have released some extensions which make responding to events/commands within views much easier.

Filed under: cairngorm, flash platform, flex, frameworks, mate

July 5, 2009 • 10:32 pm 5

the Pomodoro Technique

I’m always looking for ways to improve my productivity; the more I get done at work, the less work I have to wrestle with to stop from creeping into my family life.

I’ve been using the Pomodoro Technique for a few weeks now, and I’m pretty happy with the results. the Pomodoro Technique promotes working to a specific unit of time (25 minutes) with a 5 minute break in between sessions. During a session you’re supposed to avoid all interruptions to try and achieve a list of tasks (one task per session).

Two important things I learnt almost immediately are:

  1. make sure you break down your tasks into steps that are achievable within 30 – 40 minutes; you’ll be surprised how much extra work you can complete with 25 minute bursts of pure focus
  2. take the scheduled breaks (and when you do, get away from the computer and walk around, refresh your body, eyes and your mind), if you don’t you’ll be super tired at the end of the day

A positive side affect I’ve noticed is that your team can usually resolve any issues they have during the 25 minutes without your intervention (but that’s a blog post for another day).

I’ve started a side project with Gavin Keech, our creative director at Enpresiv to create a pomodoro timer, helping to implement the Pomodoro Technique called Focus Booster. We’ve had almost 1000 downloads since its launch (a couple of weeks ago) and we’ve had two official releases.

We built it using Flex 3, Air 1.5, the Mate FrameworkM, Degrafa, AS3CoreLib and BendPixels (for integration Pixel Bender filters) libraries. I’m going to write a series of blog posts on some of my learning’s along the way.

Filed under: general

May 27, 2009 • 11:40 pm 2

Dispatching events in Adobe AIR using MATE

I’ve been intrigued about the Flex framework called MATE ever since I stumbled across it, some months ago. The guys at asfusion.com have always been expert Flex / ActionScript developers and the MATE framework they’ve developed is no exception.

I decided to use MATE rather than Cairngorm in a personal project I’m working on, to check it out in a real world environment (there’s nothing like going beyond examples and prototypes to determine if a framework actually works beyond design patterns and theory).

So far, I’m very impressed.

It’s light weight, easy to integrate, and has a tag to suit almost any situation and many common design patterns. Within half an hour, I had MATE integrated into my project, dispatching events and updating the model.

I did however come across an interesting problem which had me stumped for a while. I’m working on an AIR application in which I have a preferences window (via a NativeWindow popup) which creates, stores and modifies preferences for the application (yes, I’m using as3preferenceslib).

The basic idea behind MATE is to dispatch events and respond to those with changes to the Model using dependency injection to keep your views notified of the changes. All of this happens via a tag called EventMap (MATE is a tag-based framework) which is used to respond to events, change the model and inject changes to data into views. Basically, you whack the EventMap tag into your Application.mxml, use the standard dispatchEvent and magically, everything works.

Unless you’re view is used in a popup window and you want to use MATE events and the model.

The reason being popup windows within AIR have an entirely different displayList to the Application displayList and your EventMap won’t be able to intercept events dispatched using the standard disptachEvent.

After some poking around in the MATE documentation (which is very good by the way) I found a Dispatch tag, which can also be instantiated via ActionScript. So, I simply made an instance of Dispatch and used the dispatchEvent method and once again, magically, everything worked.


var countdownEvent : CountdownEvent = new CountdownEvent(CountdownEvent.SET);
countdownEvent.countdown = event.newValue;

var d : Dispatcher = new Dispatcher();
d.dispatchEvent(countdownEvent);

Filed under: air, flash platform, flex, frameworks , , ,

May 2, 2009 • 11:04 pm 0

ColdFusion AJAX (cfgrid)

ColdFusion has always been the language that makes the hard things easy. When you’re new to ColdFusion and you’re browsing the available tags, most people are confused to see cfform, cfinput, cfsubmit which are tags that wrap the standard HTML tags. Using these however, ColdFusion makes it easy to perform both client-side and server-side validation with the same code (producing the necessary client-side code for you).

The same goes with the new ColdFusion AJAX tags, such as cfgrid. All of the functionality can be achieved hand-coding it yourself using CFCs and the Ext JS library. But why would you?

Sure, when you look at the source, its not exactly the same as one might hand-code themselves; but if you can look past that, there is some powerful functionality that is really easy to tap into.

If you simply need a paging datagrid, for speed and ROI, it’s hard to look past the built-in capabilities of cfgrid. It’s value for your money as far as your clients are concerned, and profit for your own business. Little advertised by Adobe, but you can extend the functionality of tags like cfgrid via the well documented Ext JS API.

I’ve decided to throw together a few examples, and further explore the possibilities of using cfgrid and other ColdFusion AJAX tags rather than rolling our own all of the time using jQuery.

Filed under: ajax, coldfusion, examples

April 28, 2009 • 11:29 pm 3

I love motionbox

I really do love motionbox.com. A little while ago I bought an AVCHD camcorder (a Canon HF10 to be precise). While I’ve been very happy with the camera itself, I unknowingly stepped into brave new world of dealing with AVCHD (mts) files; a world that is definitely in its infancy, to say the least.

I’m a big fan of archiving original video content (and photos, using Flickr) despite what you might edit the video into. You never know when you’re going to want that original source file. However, dealing with the huge mts files, having enough room to store them and back them up, well it’s nothing short of a pain in the arse.

I also need to share them, with limited fuss (if possible), via the web. I have family interstate and like to keep them in the loop.

After much searching (thanks for all your help Gav) and trials of a few different video sharing sites, I’ve finally settled on motionbox.com. I even paid premium memberships with another well-known video sharing site, only to be disappointed (primarily with the video quality).

Motionbox can natively handle AVCHD (mts) files. No transcoding and exporting prior to uploading, just upload your mts files and motionbox takes care of the rest. Perfect for archiving your original camcorder files.

Its easy to manage permissions, share videos and importantly, the quality of the final video that appears on motionbox is awesome. Apparently they use higher bit rates to encode your videos (in H264) than other sites, and I really did notice a massive difference in quality. And their price is unbeatable at $US30 per year for unlimited hosting.

Despite their under-whelming features page, you should really chec out motionbox if you’re looking for a fantastic online video, sharing site.

Filed under: general

April 27, 2009 • 2:56 pm 0

Printing via ColdFusion

I’m currently scoping a large ColdFusion, FarCry and Flex application at work. One of the requirements is server-side batch printing from PDFs that are already generated.

I knew about the cfprint tag but wanted to make sure it is up to scratch, so I wrote a quick example of how it works.

It’s a great tag, and a welcome addition to ColdFusion 8. You need to provide a UI / workflow however to reprint (in case the printer fails, etc) as the tag doesn’t really give you any notification of success/failed attempts to send to the printer (I suppose this is outside the scope of the tag, and where the operating system picks up).

Anyway, you can checkout the example. There’s not much to see online, but you can download the example and run it locally – its all server side printing.

Filed under: coldfusion, examples

April 22, 2009 • 12:29 am 3

ColdFusion Sugar for Espresso

Move over TextMate, there’s a new editor for Mac OS X; Espresso by MacRabbit.

I’ve been testing out Espresso for a couple of months now, and I’m very impressed with it so far. In my opinion its targeted directly at TextMate users and brings some much needed functionality such as fantastic project support (built-in, rather than having to rely on Project+ like you currently do with TextMate), code navigator, snippets. It also has most of the functionality that makes TextMate so great such as syntax highlighting, code hinting and code completion.

Of course, TextMate has quite a number of features that Espresso doesn’t. For example, ActionScript/Flex compiler support to date, is far better in TextMate than Espresso.

Like TextMate, Espresso has the ability to be extended via Sugars. Sugars are basically the same as TextMate Bundles, but expressed in XML.

I’ve been dying to use Espresso on a regular basis in my ColdFusion projects, but without a ColdFusion Sugar that’s not been a reality.

A week or so ago, Jonathan Christopher released a basic ColdFusion Sugar for Espresso! It featured syntax highlighting only and as Jonathan didn’t have much time to devote towards feature implementation for the Sugar, so I decided to have ago myself.

I forked the Sugar on GitHub and have been adding features ever since. Feel free to download the ColdFusion Sugar and use it for your development. I’ll be adding features as I continue to learn how to write the Sugar (the documentation isn’t exactly great) and I plan on making Espresso a worthwhile alternative to CFEclipse and TextMate for ColdFusion development.

If you find any bugs, or have any feature requests just email me!

Filed under: coldfusion sugar

April 16, 2009 • 10:30 am 0

Australian Mobile Phone Validator for Flex

Flex comes with a bunch of great validators built-in. You can use them for the majority of your data validation needs. However, for us Australians, the PhoneNumberValidator doesn’t work if you want to ensure users provide valid Australian mobile numbers.

Like the US our mobile numbers need to be 10 digits long, but Australian mobile numbers must start with 04.

I’ve used this in a number of projects and decided to break it out as an example of extending the Validator class to write your own validation routines. You can download the source (including the Unit test) from the example page.

Filed under: flex

April 15, 2009 • 9:50 am 0

Microsoft on my Mac

OK, so most of us want to move away from Microsoft when we move to Mac; but as web developers, that’s not really a reality as Internet Explorer still commands the market share for modern browsers.

We’re currently reviewing a number of our sites for IE8 compatibility and as such, I needed to install it on my MacBook :( After some quick Googling I found a great post on getting IE8 running on your Mac.

It is an interesting tact for Microsoft to enable testing on multiple versions of Internet Explorer via virtualisation as opposed to running multiple versions on the same OS.

As for the setup, I used Qemu on an XP VMWare instance to convert the VirtualPC Hard Disk to be VMWare compatible. Initially I had some errors in getting Qemu to work, and I had to cd into the qemu/bin directory, rather than the qemu directory itself (as per the instructions). I also had to copy a required .dll into the bin directory and then it all converted smoothly.

I didn’t try it out, but some people had success using Q on the Mac to convert the VirtualPC Hard Disk rather than using Qemu on the PC.

Filed under: technology

April 3, 2009 • 12:00 pm 0

Custom Fonts

We’re working on a redesign of a website at work, that needs to follow new branding guidelines. A particular font is used heavily within the brand for most headings and introductory text.

We had to decide between fudging the font into the website design, or not. We try to follow standards at Enpresiv as much as possible, but from time to time that is not always possible.

We turned to the usual font replacement techniques:

But I also wanted to dream a little, and take a look at what the future might hold. I made a few examples using the new @font-face css3 capability, and thought they might be useful for others.

The @font-face rule allows you to use TrueType and OpenType fonts directly in your webpages. Browser support is VERY limited at present, but Safari Version 4 beta does a really nice job at rendering the custom fonts.

I can see a whole new ‘licensing’ problem arising out of this new capability. Its going to be so easy to add any font into your website, but whether or not you’re allowed to is something entirely different.

I’m also a little scared of what the web might turn into. Despite the low number of web fonts being very limiting for professional designers, those with little design skills tend to turn to ‘fancy’ fonts and colours to try and spice up their designs. With so many great programs making building webpages within reach of the every day person, I can only imagine what we’re in for.

Filed under: technology, web 2.0

About Me

I'm a web technologist living and working in Adelaide, Australia.

My Tweets

Downloads

Navigation

My Older Posts

Meta

Blogroll