Nick Kuh - Freelance iPhone, iPad, iOS Developer, Trainer and Consultant - Brighton, UK » Flex

Prodigi – Manga High: Flex 4 Application

Nick Kuh — Sat, 03 Oct 2009 08:51:15 +0000

Prodigi, a key part of the new MangaHigh.com website, enables teachers to author GCSE Maths questions for every lesson of the National Curriculum. Then activities are dynamically generated for students in playback mode. Take a look at the promo video:

A lot of my work during 2009 has been the development of this Flex RIA Content Authoring System. Prodigi serves 3 purposes:

It dynamically generates interactive online Maths lessons for every topic and subtopic of the UK Maths GCSE National Curriculum. The student experience tracks student attainment and progress levels and adjusts it’s questions accordingly. It aims to help, challenge and improve student’s knowledge of GCSE Maths.
Prodigi sources it’s Maths questions from a database of hundreds of thousands of questions that have been submitted by Maths teachers. I had to develop an Author Mode for Prodigi to enable Teachers to create these questions. Author mode includes features such as multiple question templates and layouts, a complex equation editor, save and submission functions.
The third mode of Prodigi is Auditor Mode enabling the top Math’s Teachers/Professors at MangaHigh to quickly assess queued Maths questions, accept, reject, comment on them etc.

Prodigi is an example of an RIA that uses Flex for it’s strengths but doesn’t fall down by Flex overuse. The Flex app is a part of a larger PHP Application that is powered by the Zend Framework. The Flex part communicates with the PHP Application via Zend AMF (Flash’s Action Message Format).

I was commissioned by Manga High to:

Design/conceive the technical infrastructure of Prodigi
Specify the Data Transfer Objects (DTOs) and client/remote server communication protocols
Build the Flex 4 client-side of the RIA: Playback/Author/Auditor modes; Modular Question Templates/Layouts; the application architecture.

This project has been a big success with the client and MangaHigh.com launched 23rd September 2009. There’s been a lot of press coverage about the new site, highlights include Maths Guru Marcus du Sautoy interviewed on BBC’s The Today programme, a slot on Channel 4 news, a Guardian newspaper article to name but a few.

Unexpected scroll results with HBox/VBox/Containers using percent height/width

Nick Kuh — Thu, 02 Apr 2009 11:57:19 +0000

The objective:

The screen grab below is taken from a Flex application I’m building. This page of the app comprises of 2 VBoxes inside an HBox. The 2 VBoxes need to size to 100% of the height of the HBox container. The user can edit any of the text fields. When the user edits the body text of the left column, if they use up all the vertical space of that left VBox then I’d like the VBox containing the title and the boy text to create scroll bars, not to resize it’s parent VBox. Simple right?

Not so simple… Here’s a snippet of the code:

And here are the results when that body text gets too deep for the VBox:

So the whole parent HBox ended up getting stretched. Not the results I expected.

The solution as it turns out is pretty straight forward. The VBox containing the left column needs it’s minHeight and minWidth properties set to 0! The reason is that with containers using percentage based sizing flex sets the min height and min width properties to the cumulative width and height of the container’s children components. So in my example as the editable text component gets deeper/taller this automatically increases the minHeight property of it’s parent container.

So by explicitly setting the parent container’s minHeight and minWidth to 0:

… I ended up with the desired result:

How to make a custom Flash Preloader for a Flex Application

Nick Kuh — Fri, 27 Mar 2009 11:32:30 +0000

There are a number of useful Flex techniques I use in the Flex Apps I develop all the time and I thought that some of these might be useful for others. So here’s the first… How to replace that nasty default Flex preloader with your own Flash animated version. Here’s the result (I just downloaded a free preloader animation from the web and applied it to this tutorial:

http://www.nickkuh.com/demos/custom_preloader/

Flex source files can be downloaded from here:

http://www.nickkuh.com/demos/custom_preloader/srcview/CustomPreloader.zip

How it works:

Inside the main application MXML you can specify a custom preloader class for your application to use:

layout=”vertical”
backgroundColor=”#000000″
backgroundGradientAlphas=”[0.0,0.0]“
paddingTop=”30″
applicationComplete=”init()”
preloader=”com.nickkuh.preload.Preloader” viewSourceURL=”srcview/index.html”>

So you’ll see I’m pointing the preloader to my com.nickkuh.preload.Preloader class. This class extends the default Flex DownloadProgressBar class: mx.preloaders.DownloadProgressBar. The Flex Framework passes the application it’s loading to preloader setter method which I’m overriding:

override public function set preloader(value:Sprite):void{
value.addEventListener(ProgressEvent.PROGRESS, progressEventHandler, false, 0, true);
value.addEventListener(Event.COMPLETE, completeEventHandler, false, 0, true);
value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressEventHandler, false, 0, true);
value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler, false, 0, true);
}

So my custom Preloader class is now able to listen to the application preloading events – halfway there…

In the constructor for the Preloader class I’m creating an instance of another custom class which deals with displaying the Flash loading animation and adding this instance to the stage:

progressBar = new ProgressBar;
this.addChild(progressBar);

The Preloader class listens to the instance of the com.nickkuh.preload.ProgressBar class for the custom event ProgressBar.FADE_OUT_COMPLETE. Only when that event is fired will the Preloader class in turn fire an Event.COMPLETE event which the Flex app listens for before it displays the loaded application and fires the applicationComplete event. So this set-up enables the custom ProgressBar to control when the Flex app changes the view from preloader to application.

The custom ProgressBar class extends Flex’s Loader class and loads in the flash loading animation. I’ve set this up so that the ProgressBar checks for the path to the preloader.swf via FlashVars:

var url:String;
if (this.stage.loaderInfo.parameters.hasOwnProperty(“preloaderURL”))
{
url = this.stage.loaderInfo.parameters.preloaderURL;
}
else
{
url = “preloader.swf”;
}
var urlRequest:URLRequest = new URLRequest(url)
this.load(urlRequest);

You’ll find the fla for the preloader in the source files in a folder called ‘design’. The fla actually includes a couple of methods on frame one:

stop();

function setProgress(n:Number)
{

}

function set ready(b:Boolean)
{
if (b) gotoAndPlay(2);
}

The custom ProgressBar class calls these methods with progress updates and sets the ready setter to true when the Flex App has finished loading. If you’re loading animation is a progress bar or needs to give percentage feedback then you can customise the setProgress(n:Number) function – n will be between 0 and 1 – 1 for fully loaded.

In my fla once the preload completes it then plays a few more frames before fading out. This animation could be changed to you requirements.

Once the internal fade out complete the fla fires off an “animationComplete” event which the ProgressBar is listening out for. At this point the closeScreen method of ProgressBar handles the event and ProgressBar fades itself out. Once complete it in turn fires the FADE_OUT_COMPLETE event which causes the main Flex app to close the preloader and display your Flex App.

Yes, it’s a bit time consuming to make a simple preloader but I now use this set-up over and over again. Feel free to do the same!

CluedUp: Flex Crossword application built for the Daily Telegraph

Nick Kuh — Thu, 30 Oct 2008 10:20:44 +0000

The Daily Telegraph have just launched a new Crosswords and Sudoko site called CluedUp – I built the Flex Crosswords Application. Behind the scenes it’s one of my best structured projects to date and uses the following technologies/approaches:

Adobe Flex 3
PureMVC MutliCore (Pipes)
AMFPHP Remoting (for loading, saving and submitting user crossword data)

This is just phase 1 of the project. Future releases will include Sudoko, Codewords, possibly the ability to download an Adobe AIR desktop version of the system, Multiplayer – how cool would it be to be able to complete a crossword puzzle with your friend via a multiplayer version of the game?!

I think you have to register a trial account to play the game so here are a few screengrabs…

When the user initially selects a crossword the board/clues are blurred until they begin

The custom crossword board component subclasses the Flex DataGrid component

When you exit a crossword the application checks whether you have unsaved changes

Nokia Headphone Designer site goes live

Nick Kuh — Thu, 09 Oct 2008 12:18:33 +0000

I can’t claim much involvement in this project apart from a bit of AMFPHP remoting consultancy and optimization but it’s a cool site work taking a look at, Flex side developed by my 2 co-senior Flex Devs – Paddy Keane and Martin McBrearty from my agency – World Archipelago Internet

http://www.nokia.com/headsetdesign

More info on Paddy’s Blog

Corner Radius Doesn’t work on HBox/VBox

Nick Kuh — Mon, 06 Oct 2008 13:33:44 +0000

I haven’t been responsible for the skinning on most of our Flex projects but today that’s exactly what I’ve been doing all day. I just discovered that setting the cornerRadius style of a HBox or VBox has no effect when used on it’s own in css or MXML. The style ‘borderStyle’ also needs to be set to ‘solid’ for the cornerRadius you’ve set to display! Weird…

Flex CSS to SWF skinning – why the middleman?

Nick Kuh — Sat, 04 Oct 2008 17:34:23 +0000

When I first decided to move over to Flex Development version 2 had just launched. I glanced through the feature list initially as I was trying to decide which tool to build for a cool new project that leant itself well to Flex. The project was for a Printing Company who wanted to enable users to design their own business cards, stationary etc and output to a 300 dpi pdf, oh and be able to save their files and re-edit of course! A really nice project.

The application would enable the in-house designers at the print company to create design templates too which the users could use as starting blocks.

One of the reasons I chose Flex for the development on this project was because I thought it was able to load fonts and css at runtime to make re-skinning an application quick and simple. This turned out not to be the case. You had to (and unfortunately still do with Flex 4) go through a middleman process of using one of the built in Flex tools to convert your css file into a style swf that was then compatible with Flex apps and could be loaded in at runtime. I really don’t know why this middle stage is required. Yes, I know that it enables you to embed swf symbols, graphics, sounds and even fonts into the style swf but isn’t the Flash Player capable of loading all these file types in at runtime (not sure about fonts – ie TTF files)? So why can’t the StyleManager class load in the css file directly at runtime, process it working out any required media files and load them in too before dispatching the style changed event? If it had been done this way then I actually think Designers could be introduced to writing Flex css files directly – they’d be able to edit the style css and keep refreshing the Flex application swf without ever having to recompile anything. To me that would be a great improvement on the Flex Design and Development workflow.

I did go to Mark Anders presentation at FOTB where he demoed the new software tool Thermo which is aimed specifically at Flex Skin Designers – certainly a cool edition and it’s nice to see that Adobe have reallised that Flex skinning needs improvement but we still got the middleman – not a style swf anymore, now a new XML style Flex design output with the file extension ‘fxg’. Anyway, I think I’ll blog about that in a separate post…

Flex Builder 3 Development + Flash Player 10 Beta = Grief

Nick Kuh — Fri, 03 Oct 2008 14:42:32 +0000

I installed Flash Player 10 Beta the other day which unfortunately led to about 1 hours wasted Flex Development time this morning when I started work this morning. I tried run a Flex application I’ve been working on in debug mode. Last time I ran it on Friday it worked fine but this time I got an Eclipse alert the moment I tried to run the debug with the following message:

/Library/Internet Plug-Ins/Flash Player.plugin

Flex Builder cannot locate the required debugger version of Flash Player. You might need to install the debugger version of Flash Player 9 or reinstall Flex Builder.

Do you want to try to debug with the current version?

Click yes and the app runs but no debug traces back in Flex Builder.

The problem turned out to be that when I installed Flash 10 Beta Player it overwrote my default Flash 9 Debug Player. I found a reference to this bug in the Adobe Bugs DB. Looks like as OS X specific bug.

Anyway, the solution is to uninstall Flash Player and then reinstall Flash 9 Debug version which isn’t ideal as I’d like to keep Flash 10 Beta running.

If anyones knows how to run the 2 simultaneously please let me know