What are Flex and Catalyst?

Most of you will certainly be aware of Flash, and must have certainly viewed a Flash-based website at some point; however you might be less aware of Flex. The Flex SDK allows those familiar with ActionScript – the scripting language used in Flash – to write applications which run on the web or on the desktop using AIR.

The Flex SDK compiles code written in MXML, and ActionScript into Flash (swf) files which can run on any computer with Flash installed. MXML is a markup language – like HTML – which allows developers are declaratively design the user interface of an application. MXML + ActionScript are analogous to HTML + JavaScript, where the structure of your application is done in HTML, and the coding is done in JavaScript.

ActionScript is an easy language to learn, and those who are familiar with JavaScript will take no time picking up the basics. MXML too is quite simple to learn, for those familiar with XML and XHTML.

Catalyst is a new tool by Adobe, it is part of the Adobe CS5 collection and allows designers to create application user interfaces and designs, and then actually test them without needing to code at all.  In this tutorial we will create a Twitter search widget which will let a user enter a query and display the search results.

We will start with a read-made design created in illustrator. Designing the visuals of the application is not covered in the tutorial, we leave that up to you. However if you want, you can download our design file from our website.

In case you decided to design the interface yourself, you should keep in mind that the design should have the following elements:

• An area to enter the search query
• A search button
• A design for what a tweet should look like. So it should include:
  • A placeholder image for the Twitter avatar
  • An area to display the tweet contents, enough to hold 140 characters
• A scrollbar design with at-least a thumb

This file should be either a Photoshop PSD file, an Illustrator ai file, or an FXG file. If you use a Photoshop or Illustrator you will be able to round-trip between the applications and edit assets as necessary. If you want you can skip creating the design in Photoshop or Illustrator, and directly create it in Catalyst; it has enough tools for this job. However in order to understand this tutorial properly, we recommend you use the file we provide.

Want more? Subscribe to Digit and get the month's most relevant news, feature articles, DVDs with latest softwares and a learning guide called Fast Track.