Thoughts on Catalyst

I haven’t played too much with this tool yet and it is still in beta so it’s hard to be too definitive with any opinions right now but there are some things I can say about it.

As a tool for creating prototypes and demos, I think it has a lot of promise. It doesn’t seem to take too long to create something that will give you an idea of the user experience you’re developing.

To use it for full on development projects, it has a few drawbacks. Not all components have a Spark version yet and it won’t do round-trips right now so if you try and take a project you went to FlashBuilder with back into Catalyst, it complains. It’s still beta and from Adobe’s marketing material, it seems like they intend to have all that working at some point so those  may be moot points later. A bigger potential problem in my view is how do you deal with an existing code base of lovingly crafted custom Flex4 components? If your designer uses Catalyst, it will be pumping out nicely skinned standard components and as a developer, you’re going to have to tease all of those out and replace them with your custom work where necessary.  It’s going to get tough if you’ve got skinning involved in those components too. You’re also going to get one big monolithic app that probably doesn’t match up too well with any design patterns.

This is not to say that with planning and careful consideration of what you’re doing, you couldn’t make it work but for bigger apps it’s not going to be a trivial task to take something from Catalyst and make it work effectively.

I think  if you were to use it to create the starting point for your reusable components and then still continue to do your main construction within Flasbuilder, you’re probably going to get the best results.

I’ll be interested to see if I can find anything on using it for larger projects and see what people come up with.

Wiring up a Catalyst Project

A designer buddy of mine (Paul Ramos) has been taking a look at Catalyst and put together a quick little app to try out the tool from a design perspective. He let me have the resulting project to try wiring it up and produce a working app.

The app was a basic Flickr search with an initial search box and a transition to the pictures returned for it. Catalyst created a project with some placeholder images so when I imported it to FlashBuilder, it looked like this:

Catalyst produced Flickr app

Catalyst produced Flickr app

The main MXML file is under src in the default package and it contains andArrayCollection of objects created to provide the placeholders you see above. I basically followed the steps outlined in Lee Brimelow’s tutorial I linked to in my prior Catalyst post to delete this and replace the data binding for the list with an ArrayCollection I declared to contain the results of the Flickr search.  The HTTPService needs to be declared within an fx:Declarations block for Flex4 but is otherwise the same.  There’s a Flickr app on the Adobe site so I used that as the basis for how to talk to Flickr. I found the relevant button click handler and put the HTTP service  send call in that, added a mouseOver handler for the text input to clear the text prompt (more on that later) and that was pretty much it for the main file. The end result looks like this (well with better formatting):

<?xml version=’1.0′ encoding=’UTF-8′?>
<s:Application xmlns:mx=”library://ns.adobe.com/flex/halo”
xmlns:d=”http://ns.adobe.com/fxg/2008/dt&#8221;
xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:th=”http://ns.adobe.com/thermo/2009&#8243;
width=”1000″ height=”600″ backgroundColor=”#ffffff”>

<s:transitions>
<s:Transition fromState=”Page1″ toState=”Page2″ autoReverse=”true”>
<s:Parallel>
<s:Parallel target=”{list1}”>
<s:Fade duration=”750″/>
</s:Parallel>
<s:Parallel target=”{button2}”>
<s:Fade duration=”750″/>
</s:Parallel>
</s:Parallel>
</s:Transition>

<s:Transition fromState=”Page2″ toState=”Page1″ autoReverse=”true”>
<s:Parallel>
<s:Parallel target=”{list1}”>
<s:Fade/>
</s:Parallel>
<s:Parallel target=”{button2}”>
<s:Fade/>
</s:Parallel>
</s:Parallel>
</s:Transition>
</s:transitions>

<fx:Script>
<![CDATA[

import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection;

private var firstTimeIn:Boolean=true;

protected function Button_click():void
{
photoService.cancel();
var params:Object = new Object();
params.format = ‘rss_200_enc’;
params.tags = textInput1.text;
photoService.send(params);
currentState=’Page2′;
}

protected function Button_click_1():void
{
var state:String = currentState;
if ( state == ‘Page2′ ) {
currentState=’Page1’;
}
}

protected function photoService_resultHandler(event:ResultEvent):void
{
ac=photoService.lastResult.rss.channel.item as ArrayCollection;
}

private function photoFaultHandler(event:FaultEvent):void
{
Alert.show(“Oops! Can’t seem to get photos”,”Error”);
}

private function clearTextInput():void
{
if (firstTimeIn){
textInput1.text=” “;
firstTimeIn=false;
}
}

]]>
</fx:Script>

<fx:Declarations>
<s:HTTPService id=”photoService” result=”photoService_resultHandler(event)”
fault=”photoFaultHandler(event)”
url=”http://api.flickr.com/services/feeds/photos_public.gne”/&gt;
</fx:Declarations>

<s:states>
<s:State name=”Page1″ th:color=”0xcc0000″/>
<s:State name=”Page2″/>
</s:states>

<s:BitmapImage source=”@Embed(‘/assets/flickr_app_template/Background.png’)” resizeMode=”scale” d:userLabel=”Background” id=”bitmapimage1″/>

<fx:DesignLayer d:userLabel=”Input Field”>
<s:TextInput x=”145″ y=”43″ skinClass=”components.TextInput1″
text=”Input Your Search Text Here” id=”textInput1″ mouseOver=”clearTextInput()”/>
</fx:DesignLayer>

<s:Button x=”656″ y=”32″ skinClass=”components.Button2″ id=”button1″ click=”Button_click()”/>

<s:List x=”144″ skinClass=”components.DataList1″ id=”list1″ y=”152″ visible.Page1=”false” dataProvider=”{ac}”/>

<s:Button includeIn=”Page2″ x=”587″ y=”124″ skinClass=”components.Button3″ label=”Click here to return to front” id=”button2″ click=”Button_click_1()”/>

</s:Application>

The next part to work on is the image rendering which is under the components package in the RepeatedItem1 file. Here I switched out the s:BitmapImage for a standard mx:Image that would deal with the data returned by Flickr and change the data binding to point to the relevant element of the data. The S:RichText binding was updated for it’s data element too.  The user label is something Catalyst uses so we can leave that alone. The end result for that (again with better formatting) is:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:mx="library://ns.adobe.com/flex/halo">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:Rect d:userLabel="Item Highlight" width="115" height="128" alpha.normal="0" alpha.hovered="0.4" alpha.selected="0.8">
<s:fill>
<s:SolidColor color="0xCED7EE"/>
</s:fill>
</s:Rect>
<mx:Image source="{data.thumbnail.url}" d:userLabel="Shape 4" id="bitmapimage3"/>
<s:RichText d:userLabel="This is where the
Descriptive link goes" fontFamily="Calibri" color="0x000000" fontSize="12" trackingRight="0.5" kerning="off" textAlign="center" whiteSpaceCollapse="preserve" id="richtext1" x="3" y="101" text="{data.credit}">
</s:RichText>
</s:ItemRenderer>

That was it – not too much to it really. I initially tried to use a click handler to clear the prompt text but that would clear it and lose the text cursor so you couldn’t  enter anything. I tried it back in a Flex3 Halo component and it worked fine there so this may be a Flex 4 “feature”. The final working app looks like this:

Fully wired up Flickr app

Fully wired up Flickr app

Flash Builder 4 & Catalyst Betas Now Available (Free!) – Updated

Just saw this on the Wired site – (Flex Builder has been renamed Flash Builder). They’re both free for now. Full release is expected later in the year.

I’m keen to take a look at working with Catalyst so I’ll be downloading tonight to try it all out.

So Catalyst appears to be an open beta (as long as you remember to plug in the license key they helpfully provide) but Flash Builder is limited to 30 days unless you already have a license for 3 which is a bit of a shame.

I downloaded Catalyst and got it started with one of the tutorials on the Adobe site but Lee Brimelow of the flash blog has two videos walking through a Catalyst and FlashBuilder project posted at gotoandlearn. Here’s a link to the post. They’ve got lots of detail so you get a good idea of the sort of things that can be done.